Karima design system · in-project reference
Styleguide
The register, pattern and colour vocabulary every Karima page is built from. Consult this before starting any build. Grounds change section to section (decision 02): one pale field top to bottom is forbidden. Gold is spent on four things only. Full contract on the staging styleguide.
Registers
Grounds mark the register
Registers belong to surfaces, not settings. Grounds change when the register changes; alternate them through every page.
#F6F7F3reading & utility (default)
#FFFFFFfeature sections & cards
#0B6B4Fhero ground · actions · identity
#0A4A3Binstitutional bands (the Week board)
#0B1310devotional only (prayer surfaces)
Colour · the closed gold list
Gold marks four things only
jamāʿah · Jummah · giving · LIVE — never links, never decoration. Learning is emerald. Text-gold on light grounds is bronze; mint is for dark grounds only.
#E7C572#8A6414#C2F2DCType
Plus Jakarta Sans 700–800, tracked −2%
Lora italic is the quotation voice only (hadith on dark; editorial pull-note on light). Tabular numerals on every time, amount and count.
clamp(38-64)Ribaat al Muhammadiyah
clamp(32-48)The Week at Karima
clamp(30-44)More than a building
clamp(28-42)Give in under a minute.
21Karima Summer Club
19The mosque, four schools, a library and youth work.
16.5Most programmes are free; all are open to the whole of High Wycombe.
13.5September registration open · policies in the open
Pattern · stats & facts
Figures are unboxed, emerald, rule-topped
Stat block (.stats — never boxed)
Key facts (.facts — 2px ink top-rule each)
Pattern · card deck & no-photo tiles
Bordered cards for repeating items; tiles never grey
Cards are for genuinely repeating collection items only — never for prose, stats or section wrappers. Missing photos are honest tiles (emerald + mint label), never grey rectangles.
A sentence describing what this card involves.
Optional link ›Cards wrap 3 up, then 2, then 1.
Optional link ›Optional plain arrow-link only.
Optional link ›Pattern · giving
The gold give-panel
Gold ground = the giving surface. Progress bar, amount chips (selected = ink fill + gold text), emerald donate button that states the amount.
Give-panel · sample
£25,000 of £50,000 · sample figures
Pattern · the feature band
The emerald-deep institutional band
The one heavy, weighty moment per page (the Week board is the exemplar): on-dark text, mint accents, tabular numerals. Use it for the emotional or institutional core, once.
CTA banner
Emerald band; the inverse button lives here. Buttons say what happens.
Karima design system · in-project reference
Styleguide
The register, pattern and colour vocabulary every Karima page is built from. Consult this before starting any build. Grounds change section to section (decision 02): one pale field top to bottom is forbidden. Gold is spent on four things only. Full contract on the staging styleguide.
Registers
Grounds mark the register
Registers belong to surfaces, not settings. Grounds change when the register changes; alternate them through every page.
#F6F7F3reading & utility (default)
#FFFFFFfeature sections & cards
#0B6B4Fhero ground · actions · identity
#0A4A3Binstitutional bands (the Week board)
#0B1310devotional only (prayer surfaces)
Colour · the closed gold list
Gold marks four things only
jamāʿah · Jummah · giving · LIVE — never links, never decoration. Learning is emerald. Text-gold on light grounds is bronze; mint is for dark grounds only.
#E7C572#8A6414#C2F2DCType
Plus Jakarta Sans 700–800, tracked −2%
Lora italic is the quotation voice only (hadith on dark; editorial pull-note on light). Tabular numerals on every time, amount and count.
clamp(38-64)Ribaat al Muhammadiyah
clamp(32-48)The Week at Karima
clamp(30-44)More than a building
clamp(28-42)Give in under a minute.
21Karima Summer Club
19The mosque, four schools, a library and youth work.
16.5Most programmes are free; all are open to the whole of High Wycombe.
13.5September registration open · policies in the open
Pattern · stats & facts
Figures are unboxed, emerald, rule-topped
Stat block (.stats — never boxed)
Key facts (.facts — 2px ink top-rule each)
Pattern · card deck & no-photo tiles
Bordered cards for repeating items; tiles never grey
Cards are for genuinely repeating collection items only — never for prose, stats or section wrappers. Missing photos are honest tiles (emerald + mint label), never grey rectangles.
A sentence describing what this card involves.
Optional link ›Cards wrap 3 up, then 2, then 1.
Optional link ›Optional plain arrow-link only.
Optional link ›Pattern · giving
The gold give-panel
Gold ground = the giving surface. Progress bar, amount chips (selected = ink fill + gold text), emerald donate button that states the amount.
Give-panel · sample
£25,000 of £50,000 · sample figures
Pattern · the feature band
The emerald-deep institutional band
The one heavy, weighty moment per page (the Week board is the exemplar): on-dark text, mint accents, tabular numerals. Use it for the emotional or institutional core, once.
CTA banner
Emerald band; the inverse button lives here. Buttons say what happens.