Bucky design system

All tokens live in src/app/globals.css. Edit a primitive to rebrand the platform.

Ink palette — primary actions

Cool dark navy. Powers --primary (buttons, focus rings, CTAs). ink-800 ≈ #252c41.

ink-50
--ink-50
ink-100
--ink-100
ink-200
--ink-200
ink-300
--ink-300
ink-400
--ink-400
ink-500
--ink-500
ink-600
--ink-600
ink-700
--ink-700
ink-800
--ink-800
ink-900
--ink-900
ink-950
--ink-950

Brand palette — accents only

Warm orange. Used sparingly for badges, highlights, hero touches. Never the default button color.

brand-50
--brand-50
brand-100
--brand-100
brand-200
--brand-200
brand-300
--brand-300
brand-400
--brand-400
brand-500
--brand-500
brand-600
--brand-600
brand-700
--brand-700
brand-800
--brand-800
brand-900
--brand-900
brand-950
--brand-950

Semantic colors

Role-based tokens consumed by app code. Swap automatically with theme.

Aa
background / foreground
The quick brown fox jumps over the lazy dog.
Aa
card / card-foreground
The quick brown fox jumps over the lazy dog.
Aa
primary / primary-foreground
The quick brown fox jumps over the lazy dog.
Aa
secondary / secondary-foreground
The quick brown fox jumps over the lazy dog.
Aa
muted / muted-foreground
The quick brown fox jumps over the lazy dog.
Aa
accent / accent-foreground
The quick brown fox jumps over the lazy dog.
Aa
destructive / destructive-foreground
The quick brown fox jumps over the lazy dog.

Status accents

success / warning / danger / info.

success
--success
warning
--warning
danger
--danger
info
--info

Typography

Font sizes paired with default line heights. font-sans is Geist.

text-xsThe quick brown fox jumps over the lazy dog.
text-smThe quick brown fox jumps over the lazy dog.
text-baseThe quick brown fox jumps over the lazy dog.
text-lgThe quick brown fox jumps over the lazy dog.
text-xlThe quick brown fox jumps over the lazy dog.
text-2xlThe quick brown fox jumps over the lazy dog.
text-3xlThe quick brown fox jumps over the lazy dog.
text-4xlThe quick brown fox jumps over the lazy dog.
text-5xlThe quick brown fox jumps over the lazy dog.

Radii

Corner radius scale.

rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full

Shadows

Elevation scale.

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl

Motion

Hover any card to see the easing. Edit --ease-standard or --ease-emphasized to retune.

ease-standard
ease-emphasized