Design System Reference

globals.css custom classes — usage cheatsheet

1 · Color tokens — className='bg-*' / 'text-*' / 'border-*'

All colors live in @theme inline so Tailwind generates bg-*, text-*, and border-* utilities automatically.

canvas-porcelain
white
midnight-ink
harbor-mist
forest-canopy
deep-teal
fresh-teal
muted-sage
soft-peach
muted-mandarin
sky-haze
lime-glow
spring-bud
fresh-teal-gradient

<div className="bg-deep-teal text-white" />

<p className="text-harbor-mist" />

<div className="border border-fresh-teal" />

<div className="bg-fresh-teal-gradient" /> {/* custom utility */}

2 · Typography — className='text-*'

Display 72px

className="text-display"

Heading LG 56px

className="text-heading-lg"

Heading 32px

className="text-heading"

Heading SM 24px

className="text-heading-sm"

Subheading 20px — The quick brown fox

className="text-subheading"

Body 18px — The quick brown fox jumps over the lazy dog.

className="text-body"

Body SM 16px — The quick brown fox jumps over the lazy dog.

className="text-body-sm"

font-sans (Open Sans / Proxima Nova) — used for everything

font-serif (Source Serif 4) — used sparingly for accents

font-mono (Geist Mono) — code only

3 · Card variants — className='card-*'

Each class sets background-color, border-radius: 16px, and padding: 32px. Just add content inside.

Title

Body text here.

.card-default

Title

Body text here.

.card-soft-peach

Title

Body text here.

.card-fresh-teal

Title

Body text here.

.card-muted-mandarin

Title

Body text here.

.card-sky-haze

<div className="card-soft-peach">
<h2 className="text-heading-sm">Title</h2>
<p className="text-body-sm text-harbor-mist">Body</p>
</div>

4 · Section backgrounds — className='section-dark' / 'bg-fresh-teal-gradient'

section-dark

.section-dark

gradient

.bg-fresh-teal-gradient

<section className="section-dark px-8 py-20">...</section>

<div className="bg-fresh-teal-gradient rounded-lg p-6">...</div>

5 · Buttons — shadcn <Button> variants + Workable utilities

On light background

bg-deep-teal

bg-fresh-teal

bg-fresh-teal-gradient

variant="outline" border-deep-teal

variant="ghost"

variant="destructive"

Workable utility classes (plain <button>)

.btn-nav-contained

.btn-nav-ghost

On .section-dark background

bg-fresh-teal (preferred on dark)

bg-fresh-teal-gradient

variant="outline" + white border

.btn-nav-contained

<Button className="rounded-[16px] bg-deep-teal text-white">Primary</Button>

<Button className="rounded-[16px] bg-fresh-teal text-midnight-ink">Accent</Button>

<Button className="rounded-[16px] bg-fresh-teal-gradient text-midnight-ink">Gradient</Button>

<button className="btn-nav-contained">Nav CTA</button>

<button className="btn-nav-ghost">Nav Link</button>

6 · Badges — shadcn <Badge> + .badge-ghost

deep-teal

deep-teal

fresh-teal

fresh-teal

soft-peach

soft-peach

muted-mandarin

muted-mandarin

sky-haze

sky-haze

lime-glow

lime-glow

spring-bud

spring-bud

outline

variant="outline"

ghost

.badge-ghost

<Badge className="rounded-[25px] border-0 bg-fresh-teal text-midnight-ink">Tag</Badge>

<Badge variant="outline" className="rounded-[25px] px-3">Tag</Badge>

<span className="badge-ghost">Tag</span>

7 · Inputs — shadcn <Input> rounded-[8px]

<Input placeholder="..." className="rounded-[8px]" />

// inputs use rounded-[8px] (navigation radius)

// buttons pair with rounded-[16px] (card/button radius)

8 · Dark mode — what the .dark class changes automatically

Toggle the theme (top right) to see these switch. All shadcn semantic tokens re-map automatically — you don't need dark: variants for base UI.

background (porcelain → forest canopy)

card (white → deep teal)

primary (deep teal → fresh teal)

accent (fresh teal → lime glow)

muted (soft peach → muted sage)

secondary (soft peach → muted sage)

destructive (same red)

border (dark → white/15)

// These just work in both modes — no dark: prefix needed:

<div className="bg-background text-foreground" />

<div className="bg-card text-card-foreground" />

<div className="bg-primary text-primary-foreground" />

9 · Border radius — when to use which

8px — inputs, nav items --radius-navigation

16px — cards, buttons --radius-cards / --radius-buttons

25px — badges --radius-badges

full — avatars, pills

10 · Spacing tokens — var(--spacing-*)

--spacing-8
8px — element gap
--spacing-16
16px — tight gap
--spacing-24
24px — inner padding
--spacing-32
32px — card padding (.card-* classes use this)
--spacing-40
40px — section padding
--spacing-64
64px — section gap
--spacing-88
88px — large section
--spacing-104
104px — hero padding