Design System

Design Tokens

Source of truth: @stackmates/design-tokens + @stackmates/theme

90/10 rule: 90% neutral, 10% accent. Dashboard-optimized 15px base. OKLCH color space. 8px grid.

Semantic Colors

--background

Page background

--foreground

Default text

--primary

Brand red, CTAs

--secondary

Secondary actions

--muted

Disabled / subtle

--accent

Highlights

--destructive

Error / delete

--success

Positive status

--warning

Caution / alert

--border

Borders

--ring

Focus rings

--card

Card backgrounds

Sidebar Tokens

--sidebar

Sidebar bg

--sidebar-foreground

Sidebar text

--sidebar-primary

Sidebar primary

--sidebar-accent

Sidebar hover

--sidebar-border

Sidebar dividers

Text Hierarchy (4-tier)

Sample text--text-primary100%Headlines, primary content
Sample text--text-secondary70%Body text, descriptions
Sample text--text-tertiary50%Captions, metadata
Sample text--text-quaternary35%Disabled, placeholders

Spacing Scale (8px grid)

space-10.25rem4pxTight
space-20.5rem8pxDefault
space-30.75rem12pxComfortable
space-41rem16pxStandard
space-61.5rem24pxSection gap
space-82rem32pxLarge section
space-123rem48pxPage section
space-164rem64pxMajor division
space-246rem96pxHero spacing

Typography Scale

Fonts: Inter (sans), JetBrains Mono (mono). Dashboard-optimized 15px base.

The quick brown foxtext-xs0.75rem12pxMetadata, timestamps
The quick brown foxtext-sm0.875rem14pxSecondary text
The quick brown foxtext-base0.9375rem15pxPrimary body text
The quick brown foxtext-lg1.125rem18pxSection headings
The quick brown foxtext-xl1.25rem20pxSubsection headings
The quick brown foxtext-2xl1.5rem24pxPage titles
The quick brown foxtext-3xl1.875rem30pxMarketing only

Font Weights

Aa

normal (400)

Aa

medium (500)

Aa

semibold (600)

Aa

bold (700)

Border Radius

rounded-none0
rounded-sm4px
rounded-md6px
rounded-lg8px
rounded-xl12px
rounded-2xl16px
rounded-full9999px

Breakpoints

sm
640pxSmall tablets
md
768pxTablets
lg
1024pxDesktop sidebar
xl
1280pxWide desktop
2xl
1400pxContainer max

Usage

CSS: @import '@stackmates/theme/styles';

TypeScript: import { SEMANTIC_COLORS, cssVar } from '@stackmates/design-tokens';

Tailwind: import { stackmatesPreset } from '@stackmates/tailwind-preset';