Design System

Explore the Tailwind CSS design tokens and typography system used throughout the starter.

Color Palette

Semantic color tokens that adapt to light and dark themes

Primary

bg-primary

Secondary

bg-secondary

Accent

bg-accent

Muted

bg-muted

Destructive

bg-destructive

Typography

Consistent text styles using Tailwind utility classes

Heading 1

text-4xl font-bold tracking-tight

Heading 2

text-3xl font-semibold tracking-tight

Heading 3

text-2xl font-semibold tracking-tight

Heading 4

text-xl font-semibold tracking-tight

Body text with comfortable line height for easy reading.

text-base leading-7

Small text for secondary information

text-sm text-muted-foreground

Spacing Scale

Consistent spacing using Tailwind's spacing scale

p-1 (4px)

p-2 (8px)

p-4 (16px)

p-6 (24px)

p-8 (32px)

p-12 (48px)

p-16 (64px)

p-20 (80px)

p-24 (96px)

Border Radius

Consistent rounded corners throughout the design

rounded-none

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Customization

How to customize the design system for your project

Theme Colors

Edit the CSS variables in app/globals.css:

:root {
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  /* Add your custom colors */
}

Adding New Components

Use the shadcn/ui CLI to add more components:

npx shadcn@latest add [component-name]