Tokens

One source, two themes

Cinema is kohl, for what we show: film, music and title acts. Reading is gypsum, for what we explain. Cinema is the default; set data-theme="reading" on any element to switch the role tokens inside it.

tokens.cssEvery token as a CSS custom property, with both themes base.cssFocus, selection, Arabic and the focus pull tailwind.cssA Tailwind CSS v4 theme on the same variables tokens.jsonThe token file, with usage notes and contrast nubayin.jsPull, then point, and a contrast check

<link rel="stylesheet" href="system/tokens.css">
<link rel="stylesheet" href="system/base.css">
<script src="system/nubayin.js"></script>

<body data-theme="reading">   <!-- or leave it on Cinema -->
  <section data-theme="cinema">…</section>

Colour roles

Use the roles, not the ramps. Lāzaward is only ever accent, focus, point or one drench band per page: never a button fill, a glow or a gradient.

Token	Cinema	Reading	Use
`--canvas`	`#0B0F13`	`#F2F4F6`	Page ground. Cinema is kohl-950, for what we show (film, music, title acts). Reading is gypsum, for what we explain (about, press, credits, long text).
`--surface`	`#13161B`	`#FBFCFD`	Panels, cards and bands set one step off the canvas.
`--raised`	`#1B2025`	`#FBFCFD`	Menus and anything above a surface. Never a shadow: the system has none.
`--rule`	`#292E34`	`#D5D8DB`	Hairlines and 1px dividers. Decorative only: a control border uses text-3, which meets 3:1.
`--text`	`#F2F4F6`	`#0B0F13`	Primary text on canvas, surface and raised (at least 14.88:1 on cinema, 17.44:1 on reading).
`--text-2`	`#BABEC3`	`#43484F`	Secondary text and lead paragraphs on canvas, surface and raised (at least 8.78:1 cinema, 8.36:1 reading).
`--text-3`	`#9A9FA5`	`#5E646B`	Metadata, captions, eyebrows and control borders on canvas, surface and raised (at least 6.15:1 cinema, 5.42:1 reading).
`--accent`	`#8CBAF0`	`#2561A5`	Links only (lāzaward). Text on canvas, surface and raised (at least 8.12:1 cinema, 5.72:1 reading). Never a fill.
`--accent-strong`	`#B4D4F9`	`#1B4D88`	Link hover and pressed text. Never a fill.
`--focus`	`#639BDF`	`#2561A5`	Keyboard focus: a solid 2px ring with a 3px offset, on every surface (at least 5.69:1 cinema, 5.72:1 reading).
`--point`	`#639BDF`	`#2561A5`	The mark's point and the harakat of the two-colour lockup. Lāzaward marks what has been made clear: it never fills a button, never glows, never forms a gradient.
`--drench`	`#2561A5`		One studio moment per page at most: a full-bleed lāzaward-600 band. Text on it is on-drench (5.72:1).
`--on-drench`	`#F2F4F6`		Text and the one-colour mark on a drench band.
`--success`	`#83D494`	`#137738`	Product surfaces only (forms, players, newsletter), always with a word or icon. Text on canvas and on success-tint (at least 8.83:1 cinema, 4.98:1 reading).
`--success-tint`	`#102816`	`#E5F5E7`	Background behind success messages.
`--warning`	`#EDB161`	`#905C01`	Product surfaces only (forms, players, newsletter), always with a word or icon. Text on canvas and on warning-tint (at least 8.45:1 cinema, 4.95:1 reading).
`--warning-tint`	`#2F1E06`	`#FBEEDE`	Background behind warning messages.
`--danger`	`#FFA196`	`#A04038`	Product surfaces only (forms, players, newsletter), always with a word or icon. Text on canvas and on danger-tint (at least 8.32:1 cinema, 5.57:1 reading).
`--danger-tint`	`#341916`	`#FFEBE8`	Background behind danger messages.

Kohl and lāzaward

Kohl is a 14-step neutral tinted toward galena blue-grey; gypsum is kohl-50. Lāzaward is built on the lapis stone. Reach for the ramps only through the roles above.

--kohl-1000#06080B

--kohl-950#0B0F13

--kohl-900#13161B

--kohl-850#1B2025

--kohl-800#292E34

--kohl-700#43484F

--kohl-600#5E646B

--kohl-500#7B8187

--kohl-400#9A9FA5

--kohl-300#BABEC3

--kohl-200#D5D8DB

--kohl-100#E6E8EB

--kohl-50#F2F4F6

--kohl-0#FBFCFD

--lazaward-950#091931

--lazaward-900#0F294C

--lazaward-800#143A6A

--lazaward-700#1B4D88

--lazaward-600#2561A5

--lazaward-500#3E7CC5

--lazaward-400#639BDF

--lazaward-300#8CBAF0

--lazaward-200#B4D4F9

--lazaward-100#D9EAFD

--lazaward-50#EEF6FE

Type

--font-display "Kufam", "Noto Kufi Arabic", system-ui, sans-serif
--font-text "Noto Serif", "Noto Naskh Arabic", Georgia, serif
--font-arabic "Noto Naskh Arabic", "Noto Serif", Georgia, serif

display-xl144px / 0.95 · 400 · -0.02emThe meeting title and title cards. On screens it is clamp(56px, 11vw, 144px).

We make clear

display-l72px / 0.98 · 400 · -0.02emSection openers and posters. On screens clamp(44px, 6vw, 72px).

A Quiet Return

title39px / 1.1 · 400 · -0.015emPage and card titles.

Show the work first

heading25px / 1.2 · 500 · -0.005emSubsections.

Title acts

label14px / 1.2 · 500 · 0.02emButtons and controls.

Watch the film

eyebrow12px / 1.3 · 500 · 0.12emSet in uppercase in text-3, with the point beside it.

NOW SHOWING

credit14px / 1.5 · 400Film credits: the role in Kufam italic, the name in Kufam 500.

Directed by

lede21px / 1.55 · 400Opening paragraphs, in text-2.

A studio named we make clear should reveal, not decorate.

body17px / 1.6 · 400Reading text, at most 65 characters a line.

Faces are lit, and the light has a source.

caption13px / 1.5 · 400 · 0.015emCaptions and small print, in Kufam, in text-3.

Photograph: Amman, 2026

ar-display161px / 1.4 · 500Arabic beside display-xl: 1.12 times the Latin size, line height 1.4 so the harakat clear. Never letter-spaced.

نُبَيِّن

ar-title44px / 1.4 · 500Arabic beside title.

نُبَيِّن

ar-body19px / 1.8 · 400Arabic reading text in Noto Naskh Arabic, 1.12 times body, line height 1.8. Written by a native writer, never machine-translated.

نُبَيِّن

Space

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

--space-996px

--space-10128px

`--space-1`	`4px`	Hairline gaps.
`--space-2`	`8px`	Tight stacks.
`--space-3`	`12px`	Label to field.
`--space-4`	`16px`	Minimum side gutter on phones.
`--space-5`	`24px`	Card padding.
`--space-6`	`32px`	Between groups.
`--space-7`	`48px`	Between blocks.
`--space-8`	`64px`	Section padding on phones.
`--space-9`	`96px`	Section padding on laptops.
`--space-10`	`128px`	Hero padding.
`--section-gap`	`136px`	The largest section gap. On screens clamp(64px, 10vw, 136px).
`--radius-0`	`0`	Every corner, everywhere: frames are sharp cuts.
`--radius-avatar`	`50%`	Social avatar crops only. Nothing else is round.

Motion

`--dur-fast`	`120ms`	Hover and press.
`--dur-state`	`200ms`	State changes.
`--dur-layout`	`320ms`	Layout changes and the dots toggle.
`--dur-reveal`	`480ms`	The focus pull. Up to 700ms on a hero.
`--ease-out`	`cubic-bezier(0, 0, 0.2, 1)`	Things arriving.
`--ease-in`	`cubic-bezier(0.4, 0, 1, 1)`	Things leaving.
`--ease-reveal`	`cubic-bezier(0.2, 0, 0, 1)`	The focus pull.

Frames

--frame-scope 2.39 / 1
Heroes and title cards.

--frame-wide 16 / 9
Video and stills.

--frame-poster 2 / 3
Posters and key art.

--frame-portrait 4 / 5
Portraits and social posts.