Color Palette
Semantic OKLCH color tokens from :root. All components consume these via Tailwind classes.
Core
Background
--background
Foreground
--foreground
Primary
--primary
Primary Foreground
--primary-foreground
Secondary
--secondary
Secondary Foreground
--secondary-foreground
Muted
--muted
Muted Foreground
--muted-foreground
Accent
--accent
Accent Foreground
--accent-foreground
Destructive
--destructive
Ring
--ring
Surfaces (glass stack)
Solid
--surface-solid
Raised
--surface-raised
Overlay
--surface-overlay
Modal
--surface-modal
Borders
Default
--border
Subtle
--border-subtle
Hover
--border-hover
Hairline
--border-hairline
Input
--input
Blue accent (hue 260). strictly rationed
Accent
--accent
Bright (hover)
--accent-bright
Text (links)
--accent-text
Dim (press)
--accent-dim
Bg (tint)
--accent-bg
Glow
--accent-glow
Line (hover)
--accent-line
Accent rules
- One solid-blue moment per visual frame. Exception: inline links inside prose.
- Allowed: primary CTAs, focus rings, inline links, [01] section prefixes, syntax-highlighted headline words, active chip, status dots, card hover lift, two large radial glows (hero top-right, closing bottom).
- Banned: body text, large surface fills (no blue panels/cards), hue drift toward violet (stay at 260), blue→purple gradients.
- Test: if you can't say why something is blue. a link, a brand, a state, a focus. it shouldn't be blue.
Pattern · Card hover lift
Hover me
Border lifts to --accent-line; shadow becomes a soft --accent-glow. No transform.
Applied uniformly
Library entries · Now cards · Selected work cards · blog list rows.
Pattern · Status dot
Currently · building something new
Hero accent
Accent
--hero-accent
Accent Muted
--hero-accent-muted
Popover
Popover
--popover
Popover Foreground
--popover-foreground
Card
Card
--card
Card Foreground
--card-foreground
Overlays
Overlay
--overlay
Overlay Heavy
--overlay-heavy
Sidebar (reserved)
Background
--sidebar
Foreground
--sidebar-foreground
Primary
--sidebar-primary
Primary FG
--sidebar-primary-foreground
Accent
--sidebar-accent
Accent FG
--sidebar-accent-foreground
Contrast pairings
Background / Foreground
The quick brown fox jumps over the lazy dog
Background / Muted FG
The quick brown fox jumps over the lazy dog
Primary / Primary FG
The quick brown fox jumps over the lazy dog
Secondary / Secondary FG
The quick brown fox jumps over the lazy dog
Card / Card FG
The quick brown fox jumps over the lazy dog
Destructive / Foreground
The quick brown fox jumps over the lazy dog
Popover / Popover FG
The quick brown fox jumps over the lazy dog
Surface Raised / FG
The quick brown fox jumps over the lazy dog
Surface Modal / FG
The quick brown fox jumps over the lazy dog
Typography
Font families, type scale, weights, and tracking presets.
Font Families
font-hubot (body default)
The quick brown fox jumps over the lazy dog
font-sans (Geist)
The quick brown fox jumps over the lazy dog
font-mono
The quick brown fox jumps over the lazy dog
Heading Scale
.heading-1
Page Title
.heading-2
Section Heading
.heading-3
Subsection Heading
Type Scale
Font Weights
Tracking Presets
Spacing & Radius
Border radius scale and shadow elevation tokens.
Border Radius
Shadow Scale
default
destructive
outline
secondary
ghost
link
Icon sizes
Badges
Badge variants and TagList component.
Variants
TagList (default)
TagList (subtle)
Cards
Card variants with header, content, and footer sub-components.
Content area for the card body. This text demonstrates how body copy renders inside each variant.
Content area for the card body. This text demonstrates how body copy renders inside each variant.
Content area for the card body. This text demonstrates how body copy renders inside each variant.
Content area for the card body. This text demonstrates how body copy renders inside each variant.
Form Controls
Input states, toggles, and toggle groups.
Input
Toggle. variant × size
Toggle Group
Feedback & Overlay
Tooltips, skeletons, and separators.
Tooltip
Skeleton
Separator
Horizontal
Vertical
Between items
Like this
Glass Utility
The .glass and .glass-hover utility classes: surface + border + shadow + backdrop-filter.
.glass
surface-raised + border-subtle + shadow-sm + backdrop-blur
.glass .glass-hover
border-hover + shadow-md (hover state applied permanently for comparison)
Motion & Easing
Animation classes and easing curve tokens. Click replay to re-trigger.
Easing Curves
--ease-out
cubic-bezier(0.23, 1, 0.32, 1)
--ease-in-out
cubic-bezier(0.77, 0, 0.175, 1)
--ease-drawer
cubic-bezier(0.32, 0.72, 0, 1)
Animation Classes
.animate-fade-slide-in
.animate-draw-line
.word-float
.lighting-button (bounce-x)
Article Prose
Long-form content typography via the .article-prose class.
Heading Level 2
This is a sample paragraph demonstrating the article prose styling. The text color, line height, and spacing are all tuned for long-form reading comfort. Links look like this with subtle underlines and hover states.
Heading Level 3
Body text uses bold for emphasis and italics for nuance. The paragraph spacing creates a comfortable reading rhythm without feeling too loose or too tight.
Blockquotes are indented with a left border, creating visual separation for quoted content or callouts.
- Unordered list items use disc markers
- Spacing between items provides breathing room
- Nested content is indented naturally
- Ordered lists use decimal numbering
- Same spacing rhythm as unordered lists
Inline code has a subtle background with monospace font. Block code uses a darker background:
const greeting = 'Hello, world!';
console.log(greeting);Horizontal rules create section breaks within long-form content, rendered as a subtle border line.