A comprehensive design language covering color, typography, spacing, components, and interaction patterns — built for the CRM Africa product suite.
All colors are defined as OKLCH values for perceptual uniformity, wide gamut support, and predictable lightness manipulation. Two themes are provided: light and dark.
Add the .dark class to <html> to activate dark mode. All tokens remap automatically — no extra selectors needed in your components.
The type system uses Plus Jakarta Sans for UI text and JetBrains Mono for code. Letter-spacing is globally offset by -0.02em for tighter, more professional text rendering.
All spacing is based on a --spacing: 0.25rem (4px) base unit. Use calc(var(--spacing) * N) for any spacing value. The layout uses a fluid CSS Grid with a 13.5rem fixed sidebar.
The dashboard uses three primary grid patterns. All grids use minmax(0, ...) to prevent overflow.
Seven elevation levels using layered box-shadows. Shadows automatically become deeper in dark mode. Use the smallest appropriate shadow to maintain visual hierarchy.
Radii are derived from a single --radius: 0.75rem base. All values scale consistently when the base is changed.
All interactive elements implement six standard states. Transitions use 150ms ease as the base timing. Focus rings use a 3px offset with 15% opacity ring color.
All components are designed to meet WCAG 2.1 AA compliance. Key principles: sufficient contrast, keyboard navigability, ARIA labelling, and no reliance on color alone to convey meaning.
Buttons come in 6 variants, 5 sizes, and support icon-only, loading, and disabled states. All use .btn as base with modifier classes.
| Contact | Company | Status | Deal Value | Last Activity | Actions |
|---|---|---|---|---|---|
|
LM
Liz Mwangi
|
Acme Corp | Active | $45,000 | 6 hours ago | |
|
KO
Kofi Osei
|
TechGH Ltd | In Progress | $120,000 | 2 days ago | |
|
AN
Amara Nwosu
|
Lagos BI | Pending | $8,500 | 1 week ago |
Centered modals for focused tasks, sheet overlays that slide in from any edge for contextual panels, tooltips for inline hints, and popovers for action menus.
Sheets slide in from an edge and are ideal for detail panels, filters, forms, and navigation drawers. All four directions are supported.
Right sheets are used for detail panels, settings drawers, and record editors — content that lives alongside the main view.
Left sheets are ideal for navigation drawers and mobile sidebar menus.
Bottom sheets are great for mobile-first filter panels, action menus, and quick pickers.
Top sheets suit command palettes, global search, and system notifications.
Built with ApexCharts — the best vanilla-JS chart library for HTML/CSS/JS projects. All charts consume colors directly from CSS custom properties so they automatically adapt to light and dark mode.