Internal · temporary
Design token check
Every colour, type, radius, spacing, and motion token rendered from the CSS variables themselves. Delete this page once real components land.
Primary brand — Islamic Green
Brand, nav, CTAs, active states
brand
#1E5C35
brand-hover
#2E7D4F
brand-press
#163F25
brand-soft
#E8F5ED
Fill roles
Buttons and active states
fill-brand
#1E5C35
fill-brand-hover
#2E7D4F
fill-brand-press
#163F25
fill-disabled
#C5CEC8
Gold accent
Nisab, gold assets, Hawl, the Zakat figure — nothing else
gold
#C9A84C
gold-deep
#8B6914
gold-soft
#FDF3DC
Surfaces
Quietest to loudest: page → parchment → card → code → dark
page
#FAF7F1
parchment
#F3EDD8
card
#FFFFFF
code
#EDE8DF
soft
#F7F4EE
dark
#0F2D1A
Input state surfaces
input-focus
#F6FBF8
input-error
#FEF6F5
Hero / dark bands
hero-dark
#0F2D1A
hero-mid
#1A3D26
sage
#C5D4C8
Ink (text)
ink
#1A2B1E
ink-body
#2E3D34
ink-weak
#4A5E52
ink-weaker
#7A8C80
ink-inverse
#FFFFFF
ink-brand
#1E5C35
ink-gold
#8B6914
ink-disabled
#8A9B8E
Strokes & dividers
stroke
#E2DDD4
stroke-soft
#EDE8DF
stroke-brand
#1E5C35
stroke-error
#C0392B
stroke-focus
#1E5C35
Semantic
Border tints are hand-picked, not alpha-derived
success
#1E5C35
success-soft
#E8F5ED
success-border
#C6E4D2
warning-fill
#C9A84C
warning-ink
#8B6914
warning-soft
#FDF3DC
warning-border
#EAD9A8
error
#C0392B
error-soft
#FEF2F2
error-border
#F3CFCB
info
#1A4A7A
info-soft
#F0F9FF
info-border
#CDE8F8
Learn category badges
The only hues outside green, gold, and semantic
badge-business-soft
#EEF2FF
badge-business-ink
#3730A3
badge-crypto-soft
#F0F9FF
badge-crypto-ink
#0369A1
badge-nisab-soft
#FEF3C7
badge-nisab-ink
#92400E
badge-hawl-soft
#F5F3FF
badge-hawl-ink
#6D28D9
badge-faq-soft
#F1F5F9
badge-faq-ink
#475569
Type scale
Rendered at the token's own size, line height, tracking, and weight
hero-display64pxlh 1.05ls -2.5pxw600
Calculate your Zakat
display-lg48pxlh 1.08ls -1.5pxw600
Calculate your Zakat
display-md36pxlh 1.10ls -1pxw600
Calculate your Zakat
heading-128pxlh 1.20ls -0.5pxw600
Calculate your Zakat
heading-222pxlh 1.25ls -0.3pxw600
Calculate your Zakat
heading-318pxlh 1.30ls 0w600
Calculate your Zakat
body-lg17pxlh 1.60ls 0w400
Calculate your Zakat
body-md15pxlh 1.55ls 0w400
Calculate your Zakat
body-sm13pxlh 1.50ls 0w400
Calculate your Zakat
caption12pxlh 1.40ls 0.02emw600
Calculate your Zakat
button-md14pxlh 1.30ls 0.01emw600
Calculate your Zakat
button-sm13pxlh 1.30ls 0.01emw600
Calculate your Zakat
mono14pxlh 1.55ls 0w400
$48,200.00 · 2.5%
Border radius
Ascending: 2xs → xs → md → lg → xl → pill
6px
rounded-2xs
Badges, tags, chips
8px
rounded-xs
Sidebar items, logo mark, promo banner
10px
rounded-md
Inputs, small buttons, alerts
14px
rounded-lg
Cards, modals, panels
20px
rounded-xl
Large hero / feature cards
999px
rounded-pill
All primary & secondary buttons
Spacing
4px base, 10 steps
14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
Motion
No utilities generated — consumed via var()
duration-color150msBackground, colour, border
duration-transform100msPress scale
duration-progress400msProgress bar width
Shadows
None. Depth comes from surface contrast, hairline borders, and radius.