Phase 1 · sign-off gate

Style Guide

Every token and component below is read live from the theme. Switch language with the header control and colour scheme with the toggle — this page re-renders in whichever combination you pick, so what you sign off is what ships.

Language
en
Direction
LTR
Latin face
IBM Plex Sans variable 100–700
Arabic face
IBM Plex Sans Arabic 400 / 600 / 700

Colour

The site gold measures 2.31:1 on white and cannot carry text, so it is a graphic-only token with a text-safe counterpart. Swatch values are printed by JavaScript from the computed custom property — if a token changes, this page changes with it.

Surfaces

  • Canvas --sn-canvas
  • Surface --sn-surface
  • Surface 2 --sn-surface-2
  • Overlay --sn-overlay

Text

  • Ink --sn-ink 18.04:1 on canvas
  • Ink secondary --sn-ink-2 AA body
  • Ink tertiary --sn-ink-3 AA large / UI

Brand

  • Brand --sn-brand 12.27:1 on canvas
  • Brand fill --sn-brand-fill white on it: 6.71:1
  • Brand tint --sn-brand-tint
  • Accent (graphic only) --sn-accent-graphic never text on light

Lines and state

  • Line --sn-line
  • Line strong --sn-line-strong
  • Success --sn-success
  • Danger --sn-danger

Bands

Neutral band
Brand band
Accent band
Inverted band

Typography

Arabic is set 7.5% larger with 0.14 more line-height and exactly zero letter-spacing. The two scripts are shown side by side at every step so the optical match can be judged rather than asserted.

Step Latin Arabic Computed
6xl Design that reads تصميم يمكن قراءته
5xl Design that reads تصميم يمكن قراءته
4xl Design that reads تصميم يمكن قراءته
3xl Design that reads تصميم يمكن قراءته
2xl Design that reads تصميم يمكن قراءته
xl Design that reads تصميم يمكن قراءته
lg Design that reads تصميم يمكن قراءته
md (body) Design that reads تصميم يمكن قراءته
sm Design that reads تصميم يمكن قراءته
xs Design that reads تصميم يمكن قراءته
2xs Design that reads تصميم يمكن قراءته

Running text

Measure and rhythm

A designer's portfolio is read by people deciding whether to trust it with work. Body copy is capped near sixty-eight characters so the eye can find the next line without hunting, and the scale steps far enough between levels that hierarchy is obvious without bold everywhere.

القياس والإيقاع

يقرأ الناس ملف المصمم وهم يقررون ما إذا كانوا سيأتمنونه على عمل. يُضبط عرض النص ليبقى قريبًا من ثمانية وستين حرفًا حتى تجد العين بداية السطر التالي دون عناء، وتتباعد درجات المقياس بما يكفي ليصبح التسلسل واضحًا دون إفراط في التثقيل.

Spacing

  • --sn-space-3xs
  • --sn-space-2xs
  • --sn-space-xs
  • --sn-space-sm
  • --sn-space-md
  • --sn-space-lg
  • --sn-space-xl
  • --sn-space-2xl
  • --sn-space-3xl
  • --sn-space-4xl

Components

Buttons

Primary action Secondary

Tab to any control to see the two-ring focus indicator: a single brand-coloured ring disappears against a brand-filled button, so ring plus halo guarantees one of the pair always clears 3:1.

Breadcrumbs

The separator is a CSS pseudo-element, so it is never read aloud and never mirrors incorrectly in RTL.

Tags and pagination

human rights policy حقوق الإنسان

Search field

Article cards

Empty and error states

Nothing here yet

No entries matched. Try a different search.