Design
The visual language of the Mukoko ecosystem. This section covers the design tokens that power every component and the iconography conventions used across all apps.
Design Tokens
Complete reference for all CSS custom properties — colors, spacing, radius, and typography tokens
View referenceIcons
Lucide React icon conventions, sizing, and accessibility patterns
View referenceDesign principles
The Mukoko design language is guided by:
- Mineral identity — the Five African Minerals palette is the visual signature; it appears in every app through the mineral strip, accent colors, and chart palettes
- Warm neutrals — light theme uses warm cream (
#FAF9F5), not stark white; dark theme uses deep night (#0A0A0A), not pure black - Subtle depth — borders at 8% opacity, cards with minimal shadows, elevation through color rather than drop shadows
- Consistent radius — the
--radiussystem creates visual harmony across buttons, cards, inputs, and modals
Last updated on