Design System

Foundation

A living demonstration of this site's design tokens, component library, and theming architecture — built with shadcn/ui, Tailwind CSS, and CSS custom properties. Switch themes above to see the system adapt in real time.

Themes

Light

Default light mode — clean, professional

Dark

Dark mode — reduced eye strain, modern

Brand

Rich indigo/violet — immersive brand expression

High Contrast

WCAG AAA — maximum legibility for all users

Color tokens

Semantic tokens

Background

--background

Foreground

--foreground

Card

--card

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Surface

--surface

Border

--border

Typography

Type scale

Display

48px / bold

Design systems at scale

36px / bold

Design systems at scale

30px / semibold

Building for accessibility

24px / semibold

Component patterns

20px / semibold

Token-based theming

Body Large

18px / regular

Design is the bridge between intent and experience.

Body

16px / regular

Design is the bridge between intent and experience.

Small

14px / regular

Caption and supporting copy.

XSmall

12px / medium

LABEL / BADGE / META

Components

Buttons

Badges

Default

Secondary

Outline

Accent

Cards

Card

Card title

Cards are surface elements used to group related content. They use the --card token for background.

Surface

Surface variant

Surface tokens provide a slightly elevated background, useful for nested content areas.

Form elements

Input label

Select

Textarea

Checked option

Unchecked option

Disabled option

Navigation patterns

Brand

Navigation bar pattern with active state, icon actions, and user avatar

Accessibility (A11y)

Commitments

WCAG AA compliant
All text meets minimum 4.5:1 contrast ratio (regular text) and 3:1 (large text)
High contrast theme (WCAG AAA)
The A11y theme targets 7:1+ contrast — exceeding AAA requirements
Keyboard navigable
All interactive elements are reachable and operable via keyboard alone
Focus visible
Clear, high-visibility focus rings on all interactive components (enhanced in A11y theme)
Semantic HTML
Proper use of landmarks, headings, lists, and ARIA labels throughout
Screen reader tested
Components verified with VoiceOver and NVDA
Reduced motion
Animations respect prefers-reduced-motion media query

Try the A11y theme — use the theme switcher in the header to enable the High Contrast theme and see how this design system adapts to serve users with visual impairments.

Spacing & Radius

Border radius

sm

md

lg (--radius)

xl

2xl

full