Card
No target, so no hover affordance.
Design system
Theen design system
Theen (ثين) is the pearl extractor. The system reads as deep water and what comes back up from it: a navy ground that deepens the further in you go, a disciplined structure over it, and Theen green used only where the work is.
The section ledger
One repeated device opens every section: a mono label in Theen green, with an optional fact pushed to the far end. It earns its place by holding information — what this section is, and a number about it — so it never renders empty.
Section label
Typography
DisplayArchivo · Noto Kufi ArabicHeadlines only, set large and tightly tracked
BodyIBM Plex Sans · IBM Plex Sans ArabicEverything you read in sentences
MonoIBM Plex MonoLedger labels, eyebrows, data values
Display hero
Page headline
Section heading
Card heading
Lede — the opening paragraph under a section heading.
Body — the quick brown fox jumps over the lazy dog.
Mono label / eyebrow
Surfaces
--bg-base
Page ground
--bg-surface
Alternate band
--bg-card
Card
--bg-inset
Inset band
--accent
Accent fill
Ink
Every text token clears WCAG AA against its own ground in both themes. The accent splits into two values on purpose: --accent is a fill and stays vivid, while --text-accent is derived per theme and is the only one allowed to carry text.
Primary — the quick brown fox--text-primary10.15:1
Secondary — the quick brown fox--text-secondary5.41:1
Muted — the quick brown fox--text-muted4.67:1
Accent text — the quick brown fox--text-accent5.01:1
Buttons
Cards
Card
Lifts, and the nacre edge lights along the top.
Card
Reserved for the selected or current item.
Icons
Rhythm
One value drives every section on the site, so vertical spacing stays consistent as pages are composed from different sections.
--section-yclamp(72px, 8.5vw, 132px)Standard section
--section-y-smclamp(44px, 5vw, 76px)Tight section
--gutterclamp(24px, 5vw, 64px)Container inset
--max-w1200pxContainer width
--measure62chReading measure