Every colour is available in 11 stops (50–950), giving you precise control across UI states, accessibility levels, and dark mode surfaces. Click any swatch to copy its hex value.
Pre-approved gradient combinations for headers, cards, and marketing material.
Use these tokens instead of raw hex values in all product code. They adapt automatically to light and dark mode.
| Token | Light | Dark | Purpose |
|---|---|---|---|
--bg-primary |
Cream 100 | Navy 500 | Main page background |
--bg-secondary |
White | Navy +5% | Cards, panels, inputs |
--bg-tertiary |
Cream 200 | Navy +10% | Hover states, code blocks |
--text-primary |
Navy 500 | Navy 50 | Body copy, headings |
--text-secondary |
Custom | Custom | Subheadings, labels |
--text-tertiary |
Custom | Custom | Captions, placeholders |
--text-brand |
Violet 500 | Violet 300 | Brand-coloured text, links |
--text-accent |
Orange 500 | Orange 400 | Call-to-action, highlights |
--border-default |
Cream 300 | Custom | Default dividers and borders |
--border-strong |
Violet 200 | Violet 700 | Focus rings, emphasis borders |
Two typefaces work in tandem: Raleway for display and structural hierarchy, Karla for readable body copy at all sizes. Every step has defined size, weight, tracking, and line-height.
All sizes are defined in px for design tools. Map to rem in code (1rem = 16px).
Reusable interface patterns built from the colour and type system. These demonstrate how the identity translates into product UI.
Full compositions demonstrating the identity across both modes — suitable as a reference for marketing pages, dashboard panels, and investor decks.
Rules that protect brand consistency across all applications — from product UI to pitch decks to social media.