Boilerplate

Design System Showcase

Foundations

The building blocks of our design system: typography, colors, spacing, and visual effects.

Typography

Type scale based on Major Third ratio (1.25). Geist Sans for UI, Geist Mono for code.

Headings

h1 - 2.441rem / 39px

The quick brown fox

h2 - 1.953rem / 31px

The quick brown fox

h3 - 1.563rem / 25px

The quick brown fox

h4 - 1.25rem / 20px

The quick brown fox

Body Text

text-base - 1rem / 16px

The quick brown fox jumps over the lazy dog.

text-sm - 0.875rem / 14px

The quick brown fox jumps over the lazy dog.

text-xs - 0.75rem / 12px

The quick brown fox jumps over the lazy dog.

Font Weights

400Normal weight text

500Medium weight text

600Semibold weight text

700Bold weight text

Code (Geist Mono)

const example = "Geist Mono"
function greet(name: string) {
  return `Hello, ${name}!`
}

Colors

OKLCH color space for perceptual uniformity. All colors adapt to light/dark themes.

Core

Background
--background
Foreground
--foreground
Card
--card
Card Foreground
--card-foreground
Popover
--popover
Popover Foreground
--popover-foreground

Action

Primary
--primary
Primary Foreground
--primary-foreground
Secondary
--secondary
Secondary Foreground
--secondary-foreground
Accent
--accent
Accent Foreground
--accent-foreground

Semantic

Destructive
--destructive
Success
--success
Warning
--warning
Info
--info

Utility

Muted
--muted
Muted Foreground
--muted-foreground
Border
--border
Input
--input
Ring
--ring

Spacing

8pt grid system. Spacing values are multiples of 4px for consistency.

0.5
2px
1
4px
1.5
6px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

Shadows

Soft shadows for depth hierarchy. Custom utilities for specific use cases.

shadow-xs
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-soft
shadow-elevated
shadow-floating
shadow-modal

Border Radius

Consistent rounding for a softer, approachable feel.

rounded-sm4px
rounded6px
rounded-md10px
rounded-lg12px
rounded-xl16px
rounded-2xl20px
rounded-full9999px

Icons

Lucide React icons at various sizes. Consistent stroke width and sizing.

Size 16px

Home
Settings
User
Search
Bell
Heart
Star
Mail
Calendar
Clock

Size 20px (default)

Home
Settings
User
Search
Bell
Heart
Star
Mail
Calendar
Clock

Size 24px

Home
Settings
User
Search
Bell
Heart
Star
Mail
Calendar
Clock