Tokens · MSPACEZ Design System

Colour

Light theme shown; the dark theme swaps surfaces and text roles only. Brand red and black never change. Click to copy.

brand-red Locked RGB 240 92 73 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.

brand-black Locked RGB 0 0 0 LOCKED brand black. All primary text, lines, info block, primary buttons, inverse surfaces.

white Support RGB 255 255 255 Digital and document ground; text on black.

paper Support RGB 247 245 242 Off-white / cream. Default warm ground for static graphics, end cards, stationery; the partner colour on brand red (display type, logo plates).

mist Support RGB 239 238 235 Sunken fills: inputs, table stripes, disabled, info panels. Never behind red.

line Support RGB 217 217 217 Hairlines and dividers (decorative, not a text colour).

silver Support RGB 166 166 166 Muted text on black and charcoal only (8.63 : 1 on black). Never on white.

gray Support RGB 107 107 107 Muted text on white/paper/mist: captions, meta, labels (5.33 : 1 on white).

graphite Support RGB 64 64 64 Secondary text: supporting copy, table text (10.37 : 1 on white).

charcoal Support RGB 28 28 28 Dark UI panels, video frames, hover of black buttons.

red-tint UI only RGB 253 236 233 UI only: selected row, booked slot, focus background. Derived from brand red; never in communication.

success UI only RGB 30 122 76 UI only: confirmed/available status text + icon. Never in brand communication.

warning UI only RGB 138 83 0 UI only: limited availability, pending. Never in brand communication.

text-primary Role RGB 0 0 0 · → brand-black Headlines and body on white, paper, mist and red.

text-secondary Role RGB 64 64 64 · → graphite Supporting copy.

text-muted Role RGB 107 107 107 · → gray Captions, meta, labels.

text-on-red Role RGB 247 245 242 · → paper Display type, numerals and CTA plates on brand red (≥ 24 px; 3.05 : 1 large text). Preferred over black for display.

text-on-red-small Role RGB 0 0 0 · → brand-black Labels, captions and short body (≤ 25 words) on brand red (6.33 : 1). Never white/off-white body on red.

surface Role RGB 255 255 255 · → white Default digital surface.

surface-sheet Role RGB 247 245 242 · → paper Static sheet ground.

surface-inverse Role RGB 0 0 0 · → brand-black Inverse panels: info block on photos, night sheets.

border Role RGB 217 217 217 · → line Hairline borders.

border-strong Role RGB 0 0 0 · → brand-black Structural 1.5 px rules, input focus, table heads.

signal Role RGB 240 92 73 · → brand-red The one red event per surface: marker, active indicator.

focus Role RGB 0 0 0 · → brand-black 2 px focus ring, 2–3 px offset.

logo-plate Role RGB 247 245 242 · → paper Off-white plate behind the master logo/symbol on red, black or photography until official reversed masters exist.

Type

Families: --font-sans "Montserrat", "Segoe UI", Arial, sans-serif · --font-arabic "Alexandria", Tahoma, "Segoe UI", sans-serif. Click a style name to copy its CSS.

Web · Latin

Sample	Size / line / weight / tracking	Usage
Space, measured for growth.	72px / 1.02 / 300 / -0.03em	Hero statements. Light, with one Bold (700) decisive phrase. Max 6 words.
Offices that grow with you.	56px / 1.06 / 300 / -0.025em	Page titles. Light + one Bold phrase.
Private offices	40px / 1.12 / 600 / -0.02em	Section titles. SemiBold, sentence case.
What is included	28px / 1.2 / 600 / -0.012em	Sub-sections, card titles on large cards.
Meeting room 3	22px / 1.3 / 600	Card titles, list headings.
Furnished, serviced offices for teams of every size.	20px / 1.5 / 300	Intro paragraph under H1/H2. Max 2 sentences.
No hidden costs. No operational headaches.	16px / 1.6 / 400	Running text. Max 70 characters per line.
Available in all Egypt branches.	14px / 1.55 / 400	Secondary text, card descriptions.
North 90 · reception	13px / 1.45 / 500	Image captions, meta. Colour text-muted.
PRIVATE OFFICE · EGYPT	12px / 1.25 / 600 / 0.12em	Service labels, keys, chips. Uppercase in Latin only.
BOOK A TOUR	13px / 1 / 600 / 0.08em	Buttons and CTA cells. Uppercase in Latin only.
7,000+	96px / 0.95 / 300 / -0.03em	Statistics, prices, capacities. Tabular lining figures.

Social 1080 · Latin · shown at 50% of the 1080 px canvas

Sample	Size / line / weight / tracking	Usage
Real growth.	120px / 1.0 / 300 / -0.03em	1080 px posts: statements. Light + Bold phrase.
An address, without walls.	72px / 1.05 / 300 / -0.025em	1080 px posts: headline.
Meeting rooms	48px / 1.1 / 600 / -0.02em	Carousel content titles.
Address, mail, a dedicated line and a receptionist.	28px / 1.45 / 400	Supporting copy. Never below 24 px at 1080.
VIRTUAL OFFICE	20px / 1.2 / 600 / 0.12em	Service label, info-block keys.
16+	200px / 0.9 / 300 / -0.04em	Proof numerals on 1080 posts.

Arabic

Sample	Size / line / weight / tracking	Usage
مساحة مصممة للنمو.	72px / 1.45 / 300	Alexandria Light + Bold 700 phrase. Same size as Latin; no tracking.
مكاتب تكبر معاك.	56px / 1.5 / 300	Page titles.
المكاتب الخاصة	40px / 1.5 / 700	Section titles — Bold 700 (Alexandria 600 reads light next to Latin 600).
ما الذي يشمله السعر	28px / 1.55 / 700	Sub-sections.
مكاتب مجهزة لفرق بكل الأحجام، من غير رسوم تأسيس.	17px / 1.85 / 400	Running text: +1 px vs Latin, taller leading.
المكتب الافتراضي	13px / 1.35 / 600	Labels: no caps, no tracking; +1 px vs Latin.
+٧٬٠٠٠	96px / 1.1 / 300	Arabic-Indic numerals where the market rule allows (N-7); otherwise Western digits in Montserrat.

Spacing

Token	Value	Preview	Usage
			Icon-to-label gap, chip padding (vertical).
			Tight stacks: label → value.
			Chip horizontal padding, field gaps.
			Card padding, default gap.
			Grid gutter (web), section inner padding.
			Between groups.
			Web margin (tablet), large gaps.
			Section spacing (mobile).
			Section spacing (desktop).
			Hero spacing.

Radius

Token	Value	Preview	Usage
			Default for every brand surface, card, button, image, info block, marker.
			Form inputs and chips only.

Borders

Token	Value	Preview	Usage
			Dividers, cell separators, sheet frame (colour border).
			Structural rules: top of info block, spec cells, tables, secondary button.
			Red active indicator (tabs, selected nav).

Shadow

Token	Value	Preview	Usage
			Default. Brand surfaces never use shadows.
			UI overlays only: menus, dialogs, date pickers.

Icon sizes

Token	Value	Preview	Usage
			Inline with caption/label text.
			Inline with body text, chips.
			UI default; info-block symbol cell (web).
			Service cards, spec cells.
			Feature / empty states; 1080 posts use 48–64.

Grid

Token	Value	Preview	Usage
			All formats: 12 columns, usually invisible. Social: no gutter. Web: 24 px gutter. Frames and info blocks are optional tools (composition modes).
			Margin = 1/20 of canvas width (54 px at 1080).
			Desktop ≥ 1280 (24 tablet, 20 mobile). Max content width 1344 px at 1440.
			A4 documents; info block sits in the bottom margin.
			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.

Ratios

Token	Value	Preview	Usage
		1/1	Feed post, carousel slide.
		4/5	Default feed post and ad.
		9/16	Story, Reel. Keep top 14% and bottom 20% free of text.
		16/9	Video, slides, web hero.
		4/3	Service, branch and article card media.
		2/1	Email hero/banner (600 × 300).

Timing, live

Each row plays the token on the red marker with the measured ease. UI stays 160 / 240 ms.

Token	Value	Preview
	150ms
	350ms
	400ms
	250ms
	700ms
	450ms
	500ms
	160ms
	240ms

--ease-measured

--ease-exit

The nine verbs

drawrevealslidemaskcutcountexpandcroptrack

The board

Colour, type scale, spacing, radius, borders, shadows, icon sizes, grid, ratios and motion tokens

Board 23 · Tokens · 1760 × 4654

Open full size ↗

Loading board

The official board from the package, rendered live. Use “Open full size” for 1:1 detail on small screens.