Design Direction
The design system is built around a single principle: dark surfaces exist to make data visible, not to decorate. Every surface layer is slightly lighter than the one beneath it, creating depth through elevation rather than color variety. Motion should reinforce data updates, not UI transitions, so smooth easing on chart renders and subtle fade-ins on card state changes are appropriate.
Colour Strategy
The dominant dark navy background sits near a near-black blue-grey, with a vivid mint-teal used exclusively for data highlights and the chart line. This pairing is analogous at close range but the teal reads as a sharp accent against the dark field, producing strong signal-to-noise contrast without introducing a third competing hue. The restraint keeps the eye directed to the data.
Typography Strategy
Sora is a geometric sans with slightly humanist details that read cleanly at large display sizes without feeling mechanical. It matches the precision of the dashboard layout. Inter handles body copy and data labels at small sizes because its metrics are optimized for screen legibility at 12-14px, which is exactly where dashboard annotation text lives.
Colour Palette
primary
#4fc9b1
secondary
#587bc0
accent
#43d5c2
neutral
#88918f
success
#4acea7
warning
#daab3e
error
#ce4a65
info
#4a6bce
Typography
Design is intelligence made visible
Great typography is the foundation of great design. The pairing of heading and body typefaces creates a visual hierarchy that guides the reader through content with clarity and purpose, while expressing personality at every level.
Selection colour · highlighted text looks like this · try selecting any text on this page
Spacing
4px base unit · compact density
Border radius
none
0px
sm
4px
md
10px
lg
18px
xl
28px
full
9999px
Elevation
Shadows
0 1px 4px rgba(0, 0, 0, 0.3)
0 4px 12px rgba(0, 0, 0, 0.4)
0 12px 28px rgba(0, 0, 0, 0.5)
Grid
compact · 12 columns · 16px gutter · 24px margin · 1280px max
Motion
Hover, click, and interact to see the motion tokens in action.
80ms
150ms
300ms
450ms
600ms
Easings
Hover states, colour changes, most transitions
cubic-bezier(0.4, 0, 0.2, 1)
Elements appearing - modals, dropdowns, toasts
cubic-bezier(0, 0, 0.2, 1)
Elements leaving - dismissals, close animations
cubic-bezier(0.4, 0, 1, 1)
Playful feedback - toggles, badges, confirmations
cubic-bezier(0.34, 1.4, 0.64, 1)
Physics-based - drag, gestures, elastic effects
cubic-bezier(0.25, 1.1, 0.5, 1)
Iconography
Icon style derived from the system's personality, mood, and visual tokens.
Recommended library
Material Symbols
Comprehensive icon system with variable weight and fill
Browse Material Symbols ↗Also consider Tabler Icons — Developer-friendly icons with a consistent grid system
Stroke weight
1.25px
Matches border width (1px)
Corner rounding
4px
Use for icon containers
Icon set preview (corporate) — 1.25px stroke
Size scale
xs
12px
sm
16px
md
20px
lg
24px
xl
32px
On colour
primary
secondary
accent
muted
error
success
ComponentsPro
Component showcase is a Pro feature
Upgrade to see fully themed buttons, inputs, cards, badges, and more - all wired to this system's tokens.
PatternsPro
Patterns are a Pro feature
Upgrade to see fully themed form layouts, empty states, loading skeletons, and error handling - all built with this system's tokens.
Export
:root {
/* ─── Colors: Primary ─── */
--color-primary-50: #f6f9f8;
--color-primary-100: #eaf0ef;
--color-primary-200: #d3e8e4;
--color-primary-300: #a9e5d9;
--color-primary-400: #82d9c7;
--color-primary-500: #4fc9b1;
--color-primary-600: #36b097;
--color-primary-700: #2c907c;
--color-primary-800: #326258;
--color-primary-900: #2d3e3b;
--color-primary-950: #1e2927;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f6f7f8;
--color-secondary-100: #ebecf0;
--color-secondary-200: #d5dbe7;
--color-secondary-300: #aebee0;
--color-secondary-400: #89a1d2;
--color-secondary-500: #587bc0;
--color-secondary-600: #3f61a7;
--color-secondary-700: #345089;
--color-secondary-800: #36435e;
--color-secondary-900: #2e333d;
--color-secondary-950: #1f2229;
/* ─── Colors: Accent ─── */
--color-accent-50: #f6f9f8;
--color-accent-100: #eaf1f0;
--color-accent-200: #d1ebe7;
--color-accent-300: #a3ebe1;
--color-accent-400: #79e1d4;
--color-accent-500: #43d5c2;
--color-accent-600: #2abca8;
--color-accent-700: #229a8a;
--color-accent-800: #2e665f;
--color-accent-900: #2b403d;
--color-accent-950: #1d2b29;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f7f8f8;
--color-neutral-100: #eceeee;
--color-neutral-200: #dddfdf;
--color-neutral-300: #c5c9c8;
--color-neutral-400: #aab1af;
--color-neutral-500: #88918f;
--color-neutral-600: #6e7776;
--color-neutral-700: #5b6261;
--color-neutral-800: #474d4c;
--color-neutral-900: #333837;
--color-neutral-950: #222525;
/* ─── Colors: Semantic ─── */
--color-success: #4acea7;
--color-success-light: #202d29;
--color-warning: #daab3e;
--color-warning-light: #2e291e;
--color-error: #ce4a65;
--color-error-light: #2d2022;
--color-info: #4a6bce;
--color-info-light: #20232d;
/* ─── Colors: Surface ─── */
--color-background: #0e1110;
--color-foreground: #e4e7e6;
--color-card: #1a1e1d;
--color-card-foreground: #e4e7e6;
--color-muted: #242827;
--color-muted-foreground: #909896;
--color-border: #2c302f;
--color-input: #222524;
--color-ring: #47d1b6;
/* ─── Typography ─── */
--font-heading: Sora, sans-serif;
--font-body: Inter, sans-serif;
--font-mono: JetBrains Mono, monospace;
/* ─── Spacing ─── */
--space-lg: 24px;
--space-md: 16px;
--space-sm: 8px;
--space-xl: 32px;
--space-xs: 4px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* ─── Border Radius ─── */
--radius-lg: 18px;
--radius-md: 10px;
--radius-sm: 4px;
--radius-xl: 28px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 1px 4px rgba(0, 0, 0, 0.3);
--shadow-mid: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-high: 0 12px 28px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 20px rgba(79, 201, 177, 0.12);
/* ─── Motion ─── */
--duration-micro: 80ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 450ms;
--duration-glacial: 600ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-entrance: cubic-bezier(0, 0, 0.2, 1);
--easing-exit: cubic-bezier(0.4, 0, 1, 1);
--easing-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
--easing-spring: cubic-bezier(0.25, 1.1, 0.5, 1);
/* ─── Elevation ─── */
--elevation-sunken: #070808;
--elevation-base: #0e1010;
--elevation-raised: #1a1e1d;
--elevation-floating: #262b2a;
--elevation-overlay: #353b3a;
/* ─── Component Scale (compact) ─── */
--comp-padding-x: 8px;
--comp-padding-y: 4px;
--comp-gap: 4px;
--comp-border-width: 1px;
--comp-font-size: 12px;
--comp-input-height: 28px;
--comp-button-height: 28px;
--comp-icon-size: 14px;
/* ─── Grid (compact) ─── */
--grid-columns: 12;
--grid-gutter: 16px;
--grid-margin: 24px;
--grid-max-width: 1280px;
/* ─── Selection ─── */
--selection-bg: #326258;
--selection-fg: #eaf0ef;
}Brand Guidelines
Standalone HTML, print to PDF. Colours, typography, spacing, all in one page.
Presentation Deck
PPTX template with palette, typography, and blank slides in your brand.
Figma Tokens
JSON for Tokens Studio plugin. Import colours, type, spacing straight into Figma.
PDF Brand Guide
Full brand guidelines as a real PDF file. Colours and typography rendered exactly.
AI Skill
System prompt you can paste into Cursor or any AI tool to generate on-brand UI instantly.