--color-dark-900
#020617
Primary app background and deep surfaces
Design System
Token Documentation
Canonical tokens for colors, typography, spacing, shadows, and radii. Every token lists name, value, and intended usage to keep implementation consistent across features.
Color Tokens
Semantic color tokens and where they should be used. Includes accessibility guidance and light/dark examples.
--color-dark-800
#0F172A
Secondary panels and elevated dark containers
--color-dark-700
#1E293B
Card surfaces and subtle dark layer separation
--color-brand-400
#38BDF8
Brand highlights, links, and key interactive accents
--positive
#10B981
Success states, positive performance, confirmations
--negative
#EF4444
Error states, destructive actions, validation failures
--neutral
#94A3B8
Muted text, helper copy, secondary iconography
--chart-primary
#0F766E
Primary series in chart visualizations
--chart-accent
#38BDF8
Chart highlights and active data points
--chart-warning
#F59E0B
Warning thresholds and caution data overlays
--skeleton-base
rgba(148, 163, 184, 0.10)
Base fill color for loading placeholders
--skeleton-shine
rgba(148, 163, 184, 0.24)
Animated shimmer highlight for skeleton states
| Token | Value | Usage Context |
|---|---|---|
| --color-dark-900 | #020617 | Primary app background and deep surfaces |
| --color-dark-800 | #0F172A | Secondary panels and elevated dark containers |
| --color-dark-700 | #1E293B | Card surfaces and subtle dark layer separation |
| --color-brand-400 | #38BDF8 | Brand highlights, links, and key interactive accents |
| --positive | #10B981 | Success states, positive performance, confirmations |
| --negative | #EF4444 | Error states, destructive actions, validation failures |
| --neutral | #94A3B8 | Muted text, helper copy, secondary iconography |
| --chart-primary | #0F766E | Primary series in chart visualizations |
| --chart-accent | #38BDF8 | Chart highlights and active data points |
| --chart-warning | #F59E0B | Warning thresholds and caution data overlays |
| --skeleton-base | rgba(148, 163, 184, 0.10) | Base fill color for loading placeholders |
| --skeleton-shine | rgba(148, 163, 184, 0.24) | Animated shimmer highlight for skeleton states |
Light Surface Example
Portfolio summary
Use dark text on light backgrounds for readable contrast.
Dark Surface Example
Portfolio summary
Use light text and semantic accents on dark backgrounds.
Accessibility Notes
- Maintain at least 4.5:1 contrast for regular text and 3:1 for large text.
- Never use color alone to communicate state; pair with iconography or text labels.
- Reserve `--positive` and `--negative` for semantic meaning, not decorative accents.
Color Usage Snippet
// Use semantic token classes for consistency
<button className="bg-sky-500 hover:bg-sky-400 text-white">Primary Action</button>
<p className="text-slate-400">Secondary helper text</p>Typography Tokens
Font families and size roles for readable hierarchy in UI and product copy.
| Token | Value | Usage Context |
|---|---|---|
| --font-sans | Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif | Default UI text, forms, labels, and application copy |
| --font-mono | "IBM Plex Mono", "SFMono-Regular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | Numeric metrics, code snippets, and technical values |
| text-xs | 12px / 16px | Metadata, helper text, tertiary hints |
| text-sm | 14px / 20px | Body copy in forms, cards, and tables |
| text-base | 16px / 24px | Default paragraph and readable descriptive text |
| text-lg | 18px / 28px | Section subheadings and compact feature titles |
| text-2xl | 24px / 32px | Page-level headings and key summary titles |
Sans Preview (`--font-sans`)
Dashboard Overview
Readable UI text with clear information hierarchy.
Mono Preview (`--font-mono`)
+8.42% APY
Used for technical and numeric values.
Typography Usage Snippet
// Prefer tokenized typography roles
<h2 className="text-2xl font-bold text-slate-50">Section Title</h2>
<p className="text-sm text-slate-400">Supportive context copy</p>Spacing Tokens
Spacing scale to keep layout rhythm consistent across cards, sections, and controls.
| Token | Value | Usage Context |
|---|---|---|
| space-1 | 4px | Micro spacing between icons and labels |
| space-2 | 8px | Tight spacing in compact controls |
| space-3 | 12px | Field group spacing and inline sections |
| space-4 | 16px | Default block spacing in cards |
| space-5 | 20px | Panel internals and section breathing room |
| space-6 | 24px | Card padding and major section gaps |
| space-8 | 32px | Page-level vertical rhythm and large gaps |
Visual Spacing Scale
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
Spacing Usage Snippet
// Compose layouts with spacing scale
<div className="p-6 space-y-4">
<h3 className="text-lg">Card heading</h3>
<p className="text-sm">Body content</p>
</div>Shadow Tokens
Elevation tokens for depth hierarchy. Pair with radii and borders for cleaner surfaces.
| Token | Value | Usage Context |
|---|---|---|
| --shadow-card | 0 8px 30px rgba(2, 6, 23, 0.35) | Default card elevation on dark surfaces |
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle elevation for low-emphasis surfaces |
| shadow-lg | 0 10px 15px rgba(0,0,0,0.10) | Important overlays and interactive prominence |
| settings-action-elevation | 0 8px 32px rgba(0,0,0,0.50) | Sticky action bars and high-priority floating controls |
Subtle
Low emphasis content containers.
Card
Standard dashboard card elevation.
Floating Action
Sticky and high-priority action surfaces.
Elevation Usage Snippet
// Keep elevation + radius paired
<div className="rounded-xl border border-slate-700/40 bg-dark-800 shadow-card p-6">
Elevated content
</div>Radius Tokens
Corner-radius scale for consistency from small controls to large containers.
| Token | Value | Usage Context |
|---|---|---|
| --skeleton-radius-default | 6px | Default skeleton primitive rounding |
| radius-sm | 8px | Inputs, pills, and compact controls |
| radius-md | 10px | Buttons and medium interactive elements |
| radius-lg | 12px | Cards, table shells, and panels |
| radius-xl | 16px | Modals and elevated overlays |
| radius-2xl | 20px | Onboarding cards and hero containers |
| radius-3xl | 24px | Large dashboard surfaces and premium containers |
| radius-full | 9999px | Badges, chips, and circular controls |
--skeleton-radius-default
6px
Default skeleton primitive rounding
radius-sm
8px
Inputs, pills, and compact controls
radius-md
10px
Buttons and medium interactive elements
radius-lg
12px
Cards, table shells, and panels
radius-xl
16px
Modals and elevated overlays
radius-2xl
20px
Onboarding cards and hero containers
radius-3xl
24px
Large dashboard surfaces and premium containers
radius-full
9999px
Badges, chips, and circular controls
Common Do / Don’t Patterns
Common implementation mistakes and correct usage patterns to prevent design drift.
✅ Do: Use semantic state colors
Use `--positive`/`--negative` only for success and failure states so meaning stays consistent for users.
❌ Don't: Use success red/green interchangeably
Avoid arbitrary color swaps that break user expectations and increase cognitive load.
✅ Do: Use readable contrast on all surfaces
Pair light text with dark surfaces and dark text with light surfaces; validate with contrast checks.
❌ Don't: Place low-contrast text on tinted panels
Muted text over low-opacity backgrounds can fail WCAG and become unreadable under glare.
✅ Do: Reuse spacing and radius scale
Stick to documented values (4, 8, 12, 16, 20, 24, 32) and radius scale for predictable rhythm.
❌ Don't: Hard-code random pixel values
Avoid one-off values like 13px/19px that create inconsistent alignments and brittle UI.
✅ Do: Pair elevation with hierarchy
Reserve stronger shadows for overlays and floating controls to preserve depth meaning.
❌ Don't: Apply heavy shadows everywhere
Overusing strong shadows flattens hierarchy and makes important elements harder to identify.