Tokens

Every value has a name.

The tokens below are the single source for design files, code and agencies. Components (see the Components group) are built only from these values.

Colour

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

brand-red

#F05C49

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

#000000

LOCKED brand black. All primary text, lines, info block, primary buttons, inverse surfaces.

white

#FFFFFF

Digital and document ground; text on black.

paper

#F7F5F2

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

mist

#EFEEEB

Sunken fills: inputs, table stripes, disabled, info panels. Never behind red.

line

#D9D9D9

Hairlines and dividers (decorative, not a text colour).

silver

#A6A6A6

Muted text on black and charcoal only (8.63 : 1 on black). Never on white.

gray

#6B6B6B

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

graphite

#404040

Secondary text: supporting copy, table text (10.37 : 1 on white).

charcoal

#1C1C1C

Dark UI panels, video frames, hover of black buttons.

red-tint

#FDECE9

UI only: selected row, booked slot, focus background. Derived from brand red; never in communication.

success

#1E7A4C

UI only: confirmed/available status text + icon. Never in brand communication.

warning

#8A5300

UI only: limited availability, pending. Never in brand communication.

text-primary

{brand-black}

Headlines and body on white, paper, mist and red.

text-secondary

{graphite}

Supporting copy.

text-muted

{gray}

Captions, meta, labels.

text-on-red

{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

{brand-black}

Labels, captions and short body (≤ 25 words) on brand red (6.33 : 1). Never white/off-white body on red.

surface

{white}

Default digital surface.

surface-sheet

{paper}

Static sheet ground.

surface-inverse

{brand-black}

Inverse panels: info block on photos, night sheets.

border

{line}

Hairline borders.

border-strong

{brand-black}

Structural 1.5 px rules, input focus, table heads.

signal

{brand-red}

The one red event per surface: marker, active indicator.

focus

{brand-black}

2 px focus ring, 2–3 px offset.

logo-plate

{paper}

Off-white plate behind the master logo/symbol on red, black or photography until official reversed masters exist.

Type scale

Previews capped at 64 px; the value column is the real size.

display Web · Latin	72px · 300 · 1.02	Space, measured
h1 Web · Latin	56px · 300 · 1.06	Space, measured
h2 Web · Latin	40px · 600 · 1.12	Space, measured
h3 Web · Latin	28px · 600 · 1.2	Space, measured
h4 Web · Latin	22px · 600 · 1.3	Space, measured
lead Web · Latin	20px · 300 · 1.5	Space, measured
body Web · Latin	16px · 400 · 1.6	Space, measured
small Web · Latin	14px · 400 · 1.55	Space, measured
caption Web · Latin	13px · 500 · 1.45	Space, measured
label Web · Latin	12px · 600 · 1.25	Space, measured
cta Web · Latin	13px · 600 · 1	Space, measured
numeral Web · Latin	96px · 300 · 0.95	7,000+
s-display Social 1080 · Latin	120px · 300 · 1.0	Space, measured
s-h1 Social 1080 · Latin	72px · 300 · 1.05	Space, measured
s-h2 Social 1080 · Latin	48px · 600 · 1.1	Space, measured
s-body Social 1080 · Latin	28px · 400 · 1.45	Space, measured
s-label Social 1080 · Latin	20px · 600 · 1.2	Space, measured
s-numeral Social 1080 · Latin	200px · 300 · 0.9	7,000+
ar-display Arabic	72px · 300 · 1.45	مساحة تكبر معك
ar-h1 Arabic	56px · 300 · 1.5	مساحة تكبر معك
ar-h2 Arabic	40px · 700 · 1.5	مساحة تكبر معك
ar-h3 Arabic	28px · 700 · 1.55	مساحة تكبر معك
ar-body Arabic	17px · 400 · 1.85	مساحة تكبر معك
ar-label Arabic	13px · 600 · 1.35	مساحة تكبر معك
ar-numeral Arabic	96px · 300 · 1.1	مساحة تكبر معك

Spacing, radius, borders, icons, grid, ratios

space-14px

space-28px

space-312px

space-416px

space-524px

space-632px

space-748px

space-864px

space-996px

space-10128px

Token	Value	Use
radius-0	0px	Default for every brand surface, card, button, image, info block, marker.
radius-xs	2px	Form inputs and chips only.
border-hairline	1px	Dividers, cell separators, sheet frame (colour border).
border-rule	1.5px	Structural rules: top of info block, spec cells, tables, secondary button.
border-signal	4px	Red active indicator (tabs, selected nav).
shadow-none	none	Default. Brand surfaces never use shadows.
shadow-overlay	0 8px 24px rgba(0,0,0,0.12)	UI overlays only: menus, dialogs, date pickers.
icon-16	16px	Inline with caption/label text.
icon-20	20px	Inline with body text, chips.
icon-24	24px	UI default; info-block symbol cell (web).
icon-32	32px	Service cards, spec cells.
icon-48	48px	Feature / empty states; 1080 posts use 48–64.
grid-columns	12	All formats: 12 columns, usually invisible. Social: no gutter. Web: 24 px gutter. Frames and info blocks are optional tools (composition modes).
grid-margin-social	5%	Margin = 1/20 of canvas width (54 px at 1080).
grid-margin-web	48px	Desktop ≥ 1280 (24 tablet, 20 mobile). Max content width 1344 px at 1440.
grid-margin-print	15mm	A4 documents; info block sits in the bottom margin.
grid-margin-video	90px	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-square	1 / 1	Feed post, carousel slide.
ratio-portrait	4 / 5	Default feed post and ad.
ratio-story	9 / 16	Story, Reel. Keep top 14% and bottom 20% free of text.
ratio-landscape	16 / 9	Video, slides, web hero.
ratio-card	4 / 3	Service, branch and article card media.
ratio-email	2 / 1	Email hero/banner (600 × 300).

Motion

Documented in 12 · Motion; defined as CSS custom properties in code.

Motion token	Value
motion-fast	160 ms
motion-base	240 ms
motion-measured	480 ms
motion-slow	800 ms
ease-measured	cubic-bezier(.2, 0, 0, 1)
ease-exit	cubic-bezier(.4, 0, 1, 1)