{
 "name": "MSPACEZ",
 "version": 1,
 "color": {
  "themes": [
   {
    "id": "light",
    "name": "Light"
   },
   {
    "id": "dark",
    "name": "Dark (night sheet / video)"
   }
  ],
  "tokens": [
   {
    "name": "brand-red",
    "value": {
     "light": "#F05C49",
     "dark": "#F05C49"
    },
    "usage": "LOCKED brand red. The one signal: marker, red field (≤ 60%), full-red campaign posts (≤ 1 in 6), numerals on black, active tab bar, error border. Never body text; never behind the logo."
   },
   {
    "name": "brand-black",
    "value": {
     "light": "#000000",
     "dark": "#000000"
    },
    "usage": "LOCKED brand black. All primary text, lines, info block, primary buttons, inverse surfaces."
   },
   {
    "name": "white",
    "value": {
     "light": "#FFFFFF",
     "dark": "#FFFFFF"
    },
    "usage": "Digital and document ground; text on black."
   },
   {
    "name": "paper",
    "value": {
     "light": "#F7F5F2",
     "dark": "#1C1C1C"
    },
    "usage": "Off-white / cream. Default warm ground for static graphics, end cards, stationery; the partner colour on brand red (display type, logo plates)."
   },
   {
    "name": "mist",
    "value": {
     "light": "#EFEEEB",
     "dark": "#262626"
    },
    "usage": "Sunken fills: inputs, table stripes, disabled, info panels. Never behind red."
   },
   {
    "name": "line",
    "value": {
     "light": "#D9D9D9",
     "dark": "#404040"
    },
    "usage": "Hairlines and dividers (decorative, not a text colour)."
   },
   {
    "name": "silver",
    "value": {
     "light": "#A6A6A6",
     "dark": "#A6A6A6"
    },
    "usage": "Muted text on black and charcoal only (8.63 : 1 on black). Never on white."
   },
   {
    "name": "gray",
    "value": {
     "light": "#6B6B6B",
     "dark": "#A6A6A6"
    },
    "usage": "Muted text on white/paper/mist: captions, meta, labels (5.33 : 1 on white)."
   },
   {
    "name": "graphite",
    "value": {
     "light": "#404040",
     "dark": "#D9D9D9"
    },
    "usage": "Secondary text: supporting copy, table text (10.37 : 1 on white)."
   },
   {
    "name": "charcoal",
    "value": {
     "light": "#1C1C1C",
     "dark": "#1C1C1C"
    },
    "usage": "Dark UI panels, video frames, hover of black buttons."
   },
   {
    "name": "red-tint",
    "value": {
     "light": "#FDECE9",
     "dark": "#3A1A15"
    },
    "usage": "UI only: selected row, booked slot, focus background. Derived from brand red; never in communication."
   },
   {
    "name": "success",
    "value": {
     "light": "#1E7A4C",
     "dark": "#4CC38A"
    },
    "usage": "UI only: confirmed/available status text + icon. Never in brand communication."
   },
   {
    "name": "warning",
    "value": {
     "light": "#8A5300",
     "dark": "#E0A33A"
    },
    "usage": "UI only: limited availability, pending. Never in brand communication."
   },
   {
    "name": "text-primary",
    "value": {
     "light": "{brand-black}",
     "dark": "{white}"
    },
    "usage": "Headlines and body on white, paper, mist and red."
   },
   {
    "name": "text-secondary",
    "value": {
     "light": "{graphite}",
     "dark": "#D9D9D9"
    },
    "usage": "Supporting copy."
   },
   {
    "name": "text-muted",
    "value": {
     "light": "{gray}",
     "dark": "{silver}"
    },
    "usage": "Captions, meta, labels."
   },
   {
    "name": "text-on-red",
    "value": {
     "light": "{paper}",
     "dark": "{paper}"
    },
    "usage": "Display type, numerals and CTA plates on brand red (≥ 24 px; 3.05 : 1 large text). Preferred over black for display."
   },
   {
    "name": "text-on-red-small",
    "value": {
     "light": "{brand-black}",
     "dark": "{brand-black}"
    },
    "usage": "Labels, captions and short body (≤ 25 words) on brand red (6.33 : 1). Never white/off-white body on red."
   },
   {
    "name": "surface",
    "value": {
     "light": "{white}",
     "dark": "#000000"
    },
    "usage": "Default digital surface."
   },
   {
    "name": "surface-sheet",
    "value": {
     "light": "{paper}",
     "dark": "#1C1C1C"
    },
    "usage": "Static sheet ground."
   },
   {
    "name": "surface-inverse",
    "value": {
     "light": "{brand-black}",
     "dark": "{white}"
    },
    "usage": "Inverse panels: info block on photos, night sheets."
   },
   {
    "name": "border",
    "value": {
     "light": "{line}",
     "dark": "#404040"
    },
    "usage": "Hairline borders."
   },
   {
    "name": "border-strong",
    "value": {
     "light": "{brand-black}",
     "dark": "{white}"
    },
    "usage": "Structural 1.5 px rules, input focus, table heads."
   },
   {
    "name": "signal",
    "value": {
     "light": "{brand-red}",
     "dark": "{brand-red}"
    },
    "usage": "The one red event per surface: marker, active indicator."
   },
   {
    "name": "focus",
    "value": {
     "light": "{brand-black}",
     "dark": "{white}"
    },
    "usage": "2 px focus ring, 2–3 px offset."
   },
   {
    "name": "logo-plate",
    "value": {
     "light": "{paper}",
     "dark": "{paper}"
    },
    "usage": "Off-white plate behind the master logo/symbol on red, black or photography until official reversed masters exist."
   }
  ]
 },
 "type": {
  "fonts": [
   {
    "family": "Montserrat",
    "file": "fonts/montserrat-latin-wght-normal.woff2",
    "weight": "100 900",
    "style": "normal"
   },
   {
    "family": "Alexandria",
    "file": "fonts/alexandria-arabic-wght-normal.woff2",
    "weight": "100 900",
    "style": "normal"
   },
   {
    "family": "Alexandria",
    "file": "fonts/alexandria-latin-wght-normal.woff2",
    "weight": "100 900",
    "style": "normal"
   }
  ],
  "families": {
   "sans": "\"Montserrat\", \"Segoe UI\", Arial, sans-serif",
   "arabic": "\"Alexandria\", Tahoma, \"Segoe UI\", sans-serif"
  },
  "groups": [
   {
    "name": "Web · Latin",
    "family": "sans",
    "styles": [
     {
      "name": "display",
      "fontSize": "72px",
      "lineHeight": "1.02",
      "fontWeight": 300,
      "letterSpacing": "-0.03em",
      "sample": "Space, measured for growth.",
      "usage": "Hero statements. Light, with one Bold (700) decisive phrase. Max 6 words."
     },
     {
      "name": "h1",
      "fontSize": "56px",
      "lineHeight": "1.06",
      "fontWeight": 300,
      "letterSpacing": "-0.025em",
      "sample": "Offices that grow with you.",
      "usage": "Page titles. Light + one Bold phrase."
     },
     {
      "name": "h2",
      "fontSize": "40px",
      "lineHeight": "1.12",
      "fontWeight": 600,
      "letterSpacing": "-0.02em",
      "sample": "Private offices",
      "usage": "Section titles. SemiBold, sentence case."
     },
     {
      "name": "h3",
      "fontSize": "28px",
      "lineHeight": "1.2",
      "fontWeight": 600,
      "letterSpacing": "-0.012em",
      "sample": "What is included",
      "usage": "Sub-sections, card titles on large cards."
     },
     {
      "name": "h4",
      "fontSize": "22px",
      "lineHeight": "1.3",
      "fontWeight": 600,
      "sample": "Meeting room 3",
      "usage": "Card titles, list headings."
     },
     {
      "name": "lead",
      "fontSize": "20px",
      "lineHeight": "1.5",
      "fontWeight": 300,
      "sample": "Furnished, serviced offices for teams of every size.",
      "usage": "Intro paragraph under H1/H2. Max 2 sentences."
     },
     {
      "name": "body",
      "fontSize": "16px",
      "lineHeight": "1.6",
      "fontWeight": 400,
      "sample": "No hidden costs. No operational headaches.",
      "usage": "Running text. Max 70 characters per line."
     },
     {
      "name": "small",
      "fontSize": "14px",
      "lineHeight": "1.55",
      "fontWeight": 400,
      "sample": "Available in all Egypt branches.",
      "usage": "Secondary text, card descriptions."
     },
     {
      "name": "caption",
      "fontSize": "13px",
      "lineHeight": "1.45",
      "fontWeight": 500,
      "sample": "North 90 · reception",
      "usage": "Image captions, meta. Colour text-muted."
     },
     {
      "name": "label",
      "fontSize": "12px",
      "lineHeight": "1.25",
      "fontWeight": 600,
      "letterSpacing": "0.12em",
      "sample": "PRIVATE OFFICE · EGYPT",
      "usage": "Service labels, keys, chips. Uppercase in Latin only."
     },
     {
      "name": "cta",
      "fontSize": "13px",
      "lineHeight": "1",
      "fontWeight": 600,
      "letterSpacing": "0.08em",
      "sample": "BOOK A TOUR",
      "usage": "Buttons and CTA cells. Uppercase in Latin only."
     },
     {
      "name": "numeral",
      "fontSize": "96px",
      "lineHeight": "0.95",
      "fontWeight": 300,
      "letterSpacing": "-0.03em",
      "sample": "7,000+",
      "usage": "Statistics, prices, capacities. Tabular lining figures."
     }
    ]
   },
   {
    "name": "Social 1080 · Latin",
    "family": "sans",
    "styles": [
     {
      "name": "s-display",
      "fontSize": "120px",
      "lineHeight": "1.0",
      "fontWeight": 300,
      "letterSpacing": "-0.03em",
      "sample": "Real growth.",
      "usage": "1080 px posts: statements. Light + Bold phrase."
     },
     {
      "name": "s-h1",
      "fontSize": "72px",
      "lineHeight": "1.05",
      "fontWeight": 300,
      "letterSpacing": "-0.025em",
      "sample": "An address, without walls.",
      "usage": "1080 px posts: headline."
     },
     {
      "name": "s-h2",
      "fontSize": "48px",
      "lineHeight": "1.1",
      "fontWeight": 600,
      "letterSpacing": "-0.02em",
      "sample": "Meeting rooms",
      "usage": "Carousel content titles."
     },
     {
      "name": "s-body",
      "fontSize": "28px",
      "lineHeight": "1.45",
      "fontWeight": 400,
      "sample": "Address, mail, a dedicated line and a receptionist.",
      "usage": "Supporting copy. Never below 24 px at 1080."
     },
     {
      "name": "s-label",
      "fontSize": "20px",
      "lineHeight": "1.2",
      "fontWeight": 600,
      "letterSpacing": "0.12em",
      "sample": "VIRTUAL OFFICE",
      "usage": "Service label, info-block keys."
     },
     {
      "name": "s-numeral",
      "fontSize": "200px",
      "lineHeight": "0.9",
      "fontWeight": 300,
      "letterSpacing": "-0.04em",
      "sample": "16+",
      "usage": "Proof numerals on 1080 posts."
     }
    ]
   },
   {
    "name": "Arabic",
    "family": "arabic",
    "styles": [
     {
      "name": "ar-display",
      "fontSize": "72px",
      "lineHeight": "1.45",
      "fontWeight": 300,
      "sample": "مساحة مصممة للنمو.",
      "usage": "Alexandria Light + Bold 700 phrase. Same size as Latin; no tracking."
     },
     {
      "name": "ar-h1",
      "fontSize": "56px",
      "lineHeight": "1.5",
      "fontWeight": 300,
      "sample": "مكاتب تكبر معاك.",
      "usage": "Page titles."
     },
     {
      "name": "ar-h2",
      "fontSize": "40px",
      "lineHeight": "1.5",
      "fontWeight": 700,
      "sample": "المكاتب الخاصة",
      "usage": "Section titles — Bold 700 (Alexandria 600 reads light next to Latin 600)."
     },
     {
      "name": "ar-h3",
      "fontSize": "28px",
      "lineHeight": "1.55",
      "fontWeight": 700,
      "sample": "ما الذي يشمله السعر",
      "usage": "Sub-sections."
     },
     {
      "name": "ar-body",
      "fontSize": "17px",
      "lineHeight": "1.85",
      "fontWeight": 400,
      "sample": "مكاتب مجهزة لفرق بكل الأحجام، من غير رسوم تأسيس.",
      "usage": "Running text: +1 px vs Latin, taller leading."
     },
     {
      "name": "ar-label",
      "fontSize": "13px",
      "lineHeight": "1.35",
      "fontWeight": 600,
      "sample": "المكتب الافتراضي",
      "usage": "Labels: no caps, no tracking; +1 px vs Latin."
     },
     {
      "name": "ar-numeral",
      "fontSize": "96px",
      "lineHeight": "1.1",
      "fontWeight": 300,
      "sample": "+٧٬٠٠٠",
      "usage": "Arabic-Indic numerals where the market rule allows (N-7); otherwise Western digits in Montserrat."
     }
    ]
   }
  ]
 },
 "spacing": {
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "Icon-to-label gap, chip padding (vertical)."
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "Tight stacks: label → value."
   },
   {
    "name": "space-3",
    "value": "12px",
    "usage": "Chip horizontal padding, field gaps."
   },
   {
    "name": "space-4",
    "value": "16px",
    "usage": "Card padding, default gap."
   },
   {
    "name": "space-5",
    "value": "24px",
    "usage": "Grid gutter (web), section inner padding."
   },
   {
    "name": "space-6",
    "value": "32px",
    "usage": "Between groups."
   },
   {
    "name": "space-7",
    "value": "48px",
    "usage": "Web margin (tablet), large gaps."
   },
   {
    "name": "space-8",
    "value": "64px",
    "usage": "Section spacing (mobile)."
   },
   {
    "name": "space-9",
    "value": "96px",
    "usage": "Section spacing (desktop)."
   },
   {
    "name": "space-10",
    "value": "128px",
    "usage": "Hero spacing."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-0",
    "value": "0px",
    "usage": "Default for every brand surface, card, button, image, info block, marker."
   },
   {
    "name": "radius-xs",
    "value": "2px",
    "usage": "Form inputs and chips only."
   }
  ]
 },
 "shadow": {
  "tokens": [
   {
    "name": "shadow-none",
    "value": "none",
    "usage": "Default. Brand surfaces never use shadows."
   },
   {
    "name": "shadow-overlay",
    "value": "0 8px 24px rgba(0,0,0,0.12)",
    "usage": "UI overlays only: menus, dialogs, date pickers."
   }
  ]
 },
 "borderWidth": {
  "tokens": [
   {
    "name": "border-hairline",
    "value": "1px",
    "usage": "Dividers, cell separators, sheet frame (colour border)."
   },
   {
    "name": "border-rule",
    "value": "1.5px",
    "usage": "Structural rules: top of info block, spec cells, tables, secondary button."
   },
   {
    "name": "border-signal",
    "value": "4px",
    "usage": "Red active indicator (tabs, selected nav)."
   }
  ]
 },
 "iconSize": {
  "tokens": [
   {
    "name": "icon-16",
    "value": "16px",
    "usage": "Inline with caption/label text."
   },
   {
    "name": "icon-20",
    "value": "20px",
    "usage": "Inline with body text, chips."
   },
   {
    "name": "icon-24",
    "value": "24px",
    "usage": "UI default; info-block symbol cell (web)."
   },
   {
    "name": "icon-32",
    "value": "32px",
    "usage": "Service cards, spec cells."
   },
   {
    "name": "icon-48",
    "value": "48px",
    "usage": "Feature / empty states; 1080 posts use 48–64."
   }
  ]
 },
 "grid": {
  "tokens": [
   {
    "name": "grid-columns",
    "value": "12",
    "usage": "All formats: 12 columns, usually invisible. Social: no gutter. Web: 24 px gutter. Frames and info blocks are optional tools (composition modes)."
   },
   {
    "name": "grid-margin-social",
    "value": "5%",
    "usage": "Margin = 1/20 of canvas width (54 px at 1080)."
   },
   {
    "name": "grid-margin-web",
    "value": "48px",
    "usage": "Desktop ≥ 1280 (24 tablet, 20 mobile). Max content width 1344 px at 1440."
   },
   {
    "name": "grid-margin-print",
    "value": "15mm",
    "usage": "A4 documents; info block sits in the bottom margin."
   },
   {
    "name": "grid-margin-video",
    "value": "90px",
    "usage": "9:16 video at 1080 × 1920: title-safe x 90–930 (right UI rail), y 250–1540; subtitles y 1340–1520; lower third y 1180–1330."
   }
  ]
 },
 "ratio": {
  "tokens": [
   {
    "name": "ratio-square",
    "value": "1 / 1",
    "usage": "Feed post, carousel slide."
   },
   {
    "name": "ratio-portrait",
    "value": "4 / 5",
    "usage": "Default feed post and ad."
   },
   {
    "name": "ratio-story",
    "value": "9 / 16",
    "usage": "Story, Reel. Keep top 14% and bottom 20% free of text."
   },
   {
    "name": "ratio-landscape",
    "value": "16 / 9",
    "usage": "Video, slides, web hero."
   },
   {
    "name": "ratio-card",
    "value": "4 / 3",
    "usage": "Service, branch and article card media."
   },
   {
    "name": "ratio-email",
    "value": "2 / 1",
    "usage": "Email hero/banner (600 × 300)."
   }
  ]
 }
}