neuron
No tokens match your search.

Color Primitives

Raw named values. The source of truth. Never reference these directly in components — use semantic tokens instead.

Brand
TokenValuePreview
--color-brand-50#EEF2FF
--color-brand-100#D0DBFF
--color-brand-200#A3B8FF
--color-brand-300#7C9EFF
--color-brand-400#4B78F5
--color-brand-500#1A56DB
--color-brand-600#1343B8
--color-brand-700#0E3290
--color-brand-800#092370
--color-brand-900#051550
Success
TokenValuePreview
--color-success-50#ECFDF5
--color-success-100#A7F3D0
--color-success-500#059669
--color-success-600#047857
--color-success-green#10B981
Warning
TokenValuePreview
--color-warning-50#FFFBEB
--color-warning-100#FDE68A
--color-warning-500#D97706
--color-warning-600#B45309
Danger
TokenValuePreview
--color-danger-50#FEF2F2
--color-danger-100#FECACA
--color-danger-400#F87171
--color-danger-500#EF4444
--color-danger-600#DC2626
Gray
TokenValuePreview
--color-white#FFFFFF
--color-gray-50#F8FAFC
--color-gray-100#F1F5F9
--color-gray-200#E2E8F0
--color-gray-300#CBD5E1
--color-gray-400#94A3B8
--color-gray-500#64748B
--color-gray-600#475569
--color-gray-700#334155
--color-gray-800#1E293B
--color-gray-900#0A1929

Color — Semantic

Role-based aliases that describe intent, not appearance. Always use these in components.

Text
TokenResolves toPreview
--color-text-primary--color-gray-900 · #0A1929
--color-text-secondary--color-gray-500 · #64748B
--color-text-muted--color-gray-400 · #94A3B8
--color-text-inverse--color-white · #FFFFFF
--color-text-brand--color-brand-600 · #1343B8
--color-text-success--color-success-600 · #047857
--color-text-warning--color-warning-600 · #B45309
--color-text-danger--color-danger-600 · #DC2626
Background
TokenResolves toPreview
--color-bg-page--color-page-bg · #F8FAFC
--color-bg-surface--color-surface · #FFFFFF
--color-bg-subtle--color-gray-100 · #F1F5F9
--color-bg-brand--color-brand-50 · #EEF2FF
--color-bg-success--color-success-50 · #ECFDF5
--color-bg-warning--color-warning-50 · #FFFBEB
--color-bg-danger--color-danger-50 · #FEF2F2
Border
TokenResolves toPreview
--color-border-default--color-gray-200 · #E2E8F0
--color-border-subtle--color-gray-100 · #F1F5F9
--color-border-strong--color-gray-300 · #CBD5E1
--color-border-brand--color-brand-500 · #1A56DB
--color-border-success--color-success-500 · #059669
--color-border-warning--color-warning-500 · #D97706
--color-border-danger--color-danger-500 · #EF4444

Gradients

Pre-composed gradient values used for brand surfaces, dark overlays, and progress fills.

TokenValuePreview
--gradient-brandlinear-gradient(29.56deg, #1A56DB 13.4%, #2563EB 50%, #1D4ED8 86.6%)
--gradient-darklinear-gradient(135deg, #0A1929 0%, #1E293B 100%)
--gradient-progresslinear-gradient(90deg, #1A56DB, #A3B8FF)

Typography

All type tokens use Inter across heading, sans, and mono roles. The type scale is in pixels, not rems.

Font Families
TokenValuePreview
--font-heading'Inter', system-ui, -apple-system, sans-serif
Neuron Aa
--font-sans'Inter', system-ui, -apple-system, sans-serif
Neuron Aa
--font-mono'Inter', system-ui, -apple-system, sans-serif
0123456789
Font Size
TokenValuePreview
--text-2xs10px
The quick brown fox
--text-xs12px
The quick brown fox
--text-sm12px
The quick brown fox
--text-base14px
The quick brown fox
--text-lg16px
The quick brown fox
--text-xl18px
The quick brown fox
--text-2xl20px
The quick brown fox
--text-3xl24px
The quick brown fox
--text-4xl32px
Heading
--text-5xl38px
Heading
Font Weight
TokenValuePreview
--weight-regular400
Regular
--weight-medium500
Medium
--weight-semibold600
Semibold
--weight-bold700
Bold
Line Height
TokenValuePreview
--leading-tight1.2
Headings & display
--leading-snug1.4
Subheadings
--leading-normal1.5
Body text
--leading-relaxed1.6
Long-form / descriptions
Letter Spacing
TokenValuePreview
--tracking-tight-0.5px
Large headings
--tracking-normal0
Body & UI text
--tracking-wide0.04em
Labels
--tracking-wider0.07em
CAPS LABELS

Spacing

An 8px base grid. All spacing tokens are multiples or half-multiples of 8px. Use these for padding, margins, and gaps.

TokenValuePreview
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-728px
--space-832px
--space-936px
--space-1040px
--space-1248px
--space-1664px

Border Radius

Consistent corner rounding across all surfaces. Use --radius-md for cards and panels, --radius-sm for buttons and inputs.

TokenValuePreview
--radius-xs4px
--radius-sm6px
--radius-md10px
--radius-lg14px
--radius-xl18px
--radius-full9999px

Shadows

A five-step elevation scale from near-flat surfaces to floating overlays.

TokenValuePreview
--shadow-xs0 1px 2px rgba(0,0,0,0.05)
--shadow-sm0 2px 6px rgba(0,0,0,0.06)
--shadow-md0 4px 12px rgba(0,0,0,0.08)
--shadow-lg0 8px 24px rgba(0,0,0,0.12)
--shadow-xl0 16px 40px rgba(0,0,0,0.16)

Borders

Shorthand composite tokens. Each expands to 1px solid <color>.

TokenValuePreview
--border-default1px solid #E2E8F0
--border-subtle1px solid #F1F5F9
--border-strong1px solid #CBD5E1

Layout

Structural dimensions for the shell: sidebar, topbar, banner, and the 8px grid system.

Shell Dimensions
TokenValueUsed for
--sidebar-width224px
Left nav width
--topbar-height64px
Page topbar
--banner-height40px
Global status banner
--global-topbar-height56px
Primary nav bar
--content-gapvar(--space-4) · 16px
Gap between content panels
8px Grid System
TokenValueUsed for
--grid-unit8px
Base grid unit
--grid-gutter24px
Column gap (3 units)
--grid-margin32px
Content edge padding (4 units)
Copied!