neuron

Token Hierarchy

01
Primitives
Raw named values. The single source of truth for every color, size, and style.
--color-brand-500 #1A56DB
--space-4 16px
--radius-md 10px
→
02
Semantic
Role-based aliases. Always use these in components — never reference primitives directly.
--color-text-brand var(--color-brand-600)
--color-bg-brand var(--color-brand-50)
--color-border-default var(--color-gray-200)
→
03
Components
How tokens are consumed. Changing a primitive updates everything that references it.
.nav-item.active color: var(--color-text-brand)
.panel border: var(--border-default)
.btn-primary bg: var(--color-brand-500)
Why three layers? Primitives establish the palette. Semantics encode intent ("this is a brand background") so any component using it is automatically updated when the brand color changes. Components consume semantics — never primitives — so the system stays coherent under theme changes.

Colors

Brand — Primary Blue
--color-brand-50
#EEF2FF
--color-brand-100
#D0DBFF
--color-brand-200
#A3B8FF
--color-brand-300
#7C9EFF
--color-brand-400
#4B78F5
--color-brand-500
#1A56DB
Primary
--color-brand-600
#1343B8
--color-brand-700
#0E3290
--color-brand-800
#092370
--color-brand-900
#051550
Success
--color-success-50
#ECFDF5
--color-success-100
#A7F3D0
--color-success-500
#059669
--color-success-600
#047857
--color-success-green
#10B981
Progress
Warning
--color-warning-50
#FFFBEB
--color-warning-100
#FDE68A
--color-warning-500
#D97706
--color-warning-600
#B45309
Danger
--color-danger-50
#FEF2F2
--color-danger-100
#FECACA
--color-danger-400
#F87171
--color-danger-500
#EF4444
--color-danger-600
#DC2626
Neutrals — Gray Scale
--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
Semantic Aliases
Text
--color-text-primary → gray-900
--color-text-secondary → gray-500
--color-text-muted → gray-400
--color-text-inverse → white
--color-text-brand → brand-600
--color-text-success → success-600
--color-text-warning → warning-600
--color-text-danger → danger-600
Border
--color-border-default → gray-200
--color-border-subtle → gray-100
--color-border-strong → gray-300
--color-border-brand → brand-500
--color-border-success → success-500
--color-border-warning → warning-500
--color-border-danger → danger-500
Background
--color-bg-page → gray-50
--color-bg-surface → white
--color-bg-subtle → gray-100
--color-bg-brand → brand-50
--color-bg-success → success-50
--color-bg-warning → warning-50
--color-bg-danger → danger-50
Gradients
--gradient-brand
Primary action gradient (payment card, hero elements)
--gradient-dark
Dark surface gradient (sidebar, dark overlays)
--gradient-progress
Progress bar fill gradient

Typography

Font Families
Aa
--font-heading  /  --font-sans  /  --font-mono
'Inter', system-ui, -apple-system, sans-serif
Inter is the single typeface for all roles — headings, body, labels, financial numbers, and documentation tokens.
Regular 400 The quick brown fox jumps over the lazy dog
Medium 500 The quick brown fox jumps over the lazy dog
SemiBold 600 The quick brown fox jumps over the lazy dog
Bold 700 The quick brown fox jumps over the lazy dog
Type Scale
Token Size Weight Leading Figma Role Preview
--text-2xs 10px 700 1.2 label/2xs The quick brown fox
--text-xs 12px 700 1.2 label/xs The quick brown fox
--text-sm 12px 400 1.6 body/sm The quick brown fox
--text-base 14px 400 1.5 body/base The quick brown fox
--text-lg 16px 500 1.5 body/lg The quick brown fox
--text-xl 18px 600 1.4 heading/xl The quick brown fox
--text-2xl 20px 600 1.4 heading/2xl The quick brown fox
--text-3xl 24px 600 1.2 heading/3xl The quick brown fox
--text-4xl 32px 700 1.2 display/4xl The quick brown fox
--text-5xl 38px 700 1.2 display/5xl The quick brown fox
Font Weights
Regular Text
--weight-regular
400
Medium Text
--weight-medium
500
Semibold Text
--weight-semibold
600
Bold Text
--weight-bold
700
Line Height (Leading)
--leading-tight
1.2
Neuron gives you clarity on your student loans.
Track payments in real time.
--leading-snug
1.4
Neuron gives you clarity on your student loans.
Track payments in real time.
--leading-normal
1.5
Neuron gives you clarity on your student loans.
Track payments in real time.
--leading-relaxed
1.6
Neuron gives you clarity on your student loans.
Track payments in real time.
Letter Spacing (Tracking)
--tracking-tight
-0.5px
Neuron Portal
--tracking-normal
0
Neuron Portal
--tracking-wide
0.04em
Neuron Portal
--tracking-wider
0.07em
Nav Label

Spacing

All spacing tokens are multiples of 4px. The system uses an 8px base grid with 4px half-units. Never use spacing values that fall outside this grid.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-7
28px
--space-8
32px
--space-9
36px
--space-10
40px
--space-12
48px
--space-16
64px

Border Radius

--radius-xs
4px
--radius-sm
6px
--radius-md
10px
--radius-lg
14px
--radius-xl
18px
--radius-full
9999px

Shadows

--shadow-xs
0 1px 2px rgba(0,0,0,0.05)
--shadow-sm
0 2px 6px rgba(0,0,0,0.06)
--shadow-md
0 4px 12px rgba(0,0,0,0.08)
--shadow-lg
0 8px 24px rgba(0,0,0,0.12)
--shadow-xl
0 16px 40px rgba(0,0,0,0.16)

Borders

border-subtle
--border-subtle
1px solid var(--color-gray-100)
border-default
--border-default
1px solid var(--color-gray-200)
border-strong
--border-strong
1px solid var(--color-gray-300)
Gradients are documented in the Colors section above.

Layout Tokens

Fixed structural values that define the application shell. These should only be changed intentionally — they affect the global layout stack and z-index order.

Token Value Description
--sidebar-width 224px Fixed sidebar navigation width
--topbar-height 64px Page-level topbar height
--banner-height 40px Alert banner height
--global-topbar-height 56px Global app header height
--content-gap var(--space-4) Gap between content cards / stat grid items (16px)
--grid-unit 8px Base grid unit (all spacing is multiples)
--grid-gutter 24px Column gap in the 12-column content grid
--grid-margin 32px Content area edge padding