/dev · Module 04 Sub-A

Design tokens

Complete quantum foundation — kleur primitives, semantic aliases (-barakah-*), typography scale, spacing grid, radii, shadows, motion, breakpoints. Enkele bron van waarheid.

Forest


--c-forest-50


--c-forest-100


--c-forest-200


--c-forest-300


--c-forest-400


--c-forest-500


--c-forest-600


--c-forest-700


--c-forest-800


--c-forest-900


--c-forest-950

Gold


--c-gold-50


--c-gold-100


--c-gold-200


--c-gold-300


--c-gold-400


--c-gold-500


--c-gold-600


--c-gold-700


--c-gold-800


--c-gold-900

Cream + Pearl


--c-cream


--c-cream-dim


--c-pearl

Ink (warm neutrals)


--c-ink-50


--c-ink-100


--c-ink-200


--c-ink-300


--c-ink-400


--c-ink-500


--c-ink-600


--c-ink-700


--c-ink-800


--c-ink-900

Semantic aliases (Module 04 naming)

--barakah-forest

brand primary · #1A4D2E

--barakah-forest-deep

deep active · #0B2818

--barakah-ink

dark base · #0B2818

--barakah-ink-soft

body text · #2C3E30

--barakah-cream

body bg · #FAF7F0

--barakah-pearl

max-contrast cards · #FFFFFF

--barakah-gold

accent · #C9A961

--barakah-gold-soft

lighter accent · #D9BC6E

--barakah-gold-deep

accent hover · #A88A3F

--barakah-mist

soft section · #E8F0EA

--barakah-slate

secondary text · #6B6352

--barakah-stone

subtle border · #D9D5C9

Typography scale

--text-2xs

11px — caption, meta

--text-xs

12px — xs body

--text-sm

14px — small body

--text-base

16px — body default

--text-md

18px — body-lg

--text-lg

22px — h4

--text-xl

clamp → h3

--text-2xl

clamp → h2

--text-3xl

clamp → h1 hero

Spacing · 8pt grid

--sp-0 0px

--sp-1 4px

--sp-2 8px

--sp-3 12px

--sp-4 16px

--sp-5 20px

--sp-6 24px

--sp-8 32px

--sp-10 40px

--sp-12 48px

--sp-16 64px

--sp-20 80px

--sp-24 96px

--sp-32 128px

Radii + Shadows

Radius

--r-xs

--r-sm

--r-md

--r-lg

--r-xl

--r-2xl

--r-pill

Shadow

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

--shadow-2xl

--shadow-gold

--shadow-luxe

Motion (hover de rows om te voelen)

--duration-fast 150ms hover · micro-feedback

--duration-normal 250ms standard transitions

--duration-slow 400ms drawer open · reveals

--duration-epic 600ms hero · page transitions

--dur-fast 200ms legacy alias

--dur-base 400ms legacy alias

--dur-slow 600ms legacy alias

Breakpoints

--bp-xs 320px

iPhone SE

--bp-sm 480px

Large phones

--bp-md 768px

Tablet portrait

--bp-lg 1024px

Tablet landscape / laptops

--bp-xl 1280px

Desktop

--bp-2xl 1536px

Large desktop

--bp-3xl 1920px

Wide desktop

Focus-visible (Tab door om te zien)

Link styled as btn

Focus ring: 2px solid forest, 2px offset. Goud-ring (oud) blijft op niet-interactive focus.