Typography
Poppins — headings, body, and accent copy.
Poppins — Hero heading
Poppins — Body and UI copy for cards, labels, and navigation.
Poppins — “Where African women rise together.”
Colour tokens
CSS custom properties from PRD §2.2
Rose
--rose
Rose Dark
--rose-dk
Gold
--gold
Gold Light
--gold-lt
Ink
--ink
Ink Mid
--ink-mid
Surface
--surface
Card
--card
Admin
--admin
Admin Gold
--admin-gold
Success
--success
Purple
--purple
Buttons
Chips & status dots
CommunityMalkiaSummitArchivedOfficial
Live Premium Online
Avatars (Avi)
sm
WK
queen ring
AF
empress ring
xl
Skeleton loaders
Glass cards & motion
Glass on dark
backdrop-filter blur 12px
Glass on light
For cards on surface background
fadeUpscaleIn
Toast system
Bottom-centre on mobile, bottom-right on desktop. Auto-dismiss 2.8s.
Responsive layout (PRD §2.3)
- Mobile < 768px — bottom tab bar, stacked layout
- Tablet 768–1024px — collapsed 64px icon sidebar
- Desktop > 1024px — 240px sidebar + optional 280px right panel
- Max width — 1280px centred (this page uses it)