Design System

A live reference for every token and shared component this site uses.

Colors

Core (shadcn)

--background

--foreground

--primary

--primary-foreground

--muted

--muted-foreground

--accent-surface

--border

--input

--ring

Surfaces

--color-background

--color-background-subtle

--color-background-muted

--color-background-active

--color-surface-secondary

--color-surface-tertiary

Text

--color-foreground

--color-foreground-strong

--color-foreground-muted

--color-foreground-medium

--color-foreground-subtle

Borders

--color-border

--color-border-hover

Brand accent

--color-accent

--color-accent-hover

--color-accent-subtle

--hero-link-resume-accent

--hero-link-linkedin-accent

Semantic feedback

--color-accent-green

--color-warningdefined, not yet consumed

--color-warning-subtledefined, not yet consumed

--color-errordefined, not yet consumed

--color-error-subtledefined, not yet consumed

Typography

Sav Phillips--font-size-xs

Sav Phillips--font-size-sm

Sav Phillips--font-size-base

Sav Phillips--font-size-lg

Sav Phillips--font-size-xl

Sav Phillips--font-size-2xl

Sav Phillips--font-size-3xl

Sav Phillips--font-size-4xl

Sav Phillips--font-size-5xl

Spacing

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-8

--space-10

--space-12

--space-16

--space-20

Radius

--radius-xs

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-2xl

--radius-full

Shadow

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

Motion

Hover a card — each demonstrates a real duration/easing pairing.

--duration-hover-in--ease-hover

--duration-hover-out--ease-hover-out

--duration-normal--ease-out

--duration-slow--ease-snappy