Design System

Schweitz Design System

A lightweight, token-driven design system built with atomic methodology. Every component enforces WCAG AA 2.2 compliance, supports light and dark modes, and uses logical CSS properties for RTL readiness.

Colors

All colors are defined as OKLCH values in CSS custom properties, enabling perceptually uniform light/dark mode transitions. The neutral palette is inherited from shadcn/ui; the brand palette extends it with a warm amber accent.

Semantic Palette

Background

--background

Foreground

--foreground

Card

--card

Card Foreground

--card-foreground

Primary

--primary

Primary Foreground

--primary-foreground

Secondary

--secondary

Secondary Foreground

--secondary-foreground

Muted

--muted

Accent

--accent

Accent Foreground

--accent-foreground

Destructive

--destructive

Border

--border

Input

--input

Ring

--ring

Brand Tonal Scale

100

200

300

400

500

600

700

800

900

Brand Semantic Tokens

Brand

--brand

Brand Foreground

--brand-foreground

Brand Primary

--brand-primary

Brand Primary FG

--brand-primary-foreground

Brand Muted

--brand-muted

Brand Hover

--brand-hover

Focus Ring

--focus-ring

Focus Outline

--focus-outline

Typography

Headings use Fraunces, a variable serif display font, rendered in the brand amber color for visual hierarchy. Body text uses Geist Sans and code uses Geist Mono. Sizes are defined as CSS custom properties and consumed via design system atoms.

Font Families

Fraunces

Variable serif display font used for all headings. Paired with the brand amber color for visual hierarchy.

--font-serif · font-serif

Geist Sans

Clean sans-serif used for body text, UI elements, and all non-heading content.

--font-sans · font-sans

Scale

Display (Fraunces)

3rem (48px) · --font-size-display

H1 (Fraunces)

2.5rem (40px) · --font-size-h1

H2 (Fraunces)

1.75rem (28px) · --font-size-h2

H3 (Fraunces)

1.375rem (22px) · --font-size-h3

H4 (Fraunces)

1.25rem (20px) · --font-size-h4

Body Large (Geist Sans)

1.125rem (18px) · --font-size-body-lg

Body (Geist Sans)

1.0625rem (17px) · --font-size-body

Small (Geist Sans)

0.9375rem (15px) · --font-size-small

Caption (Geist Sans)

0.8125rem (13px) · --font-size-caption

Overline (Geist Sans)

0.75rem (12px) · --font-size-overline

Weights

Semibold (600)

Bold (700)

Line Heights

The quick brown fox jumps over the lazy dog. This sentence demonstrates the line height in context.

Tight · 1.2 · --leading-tight

The quick brown fox jumps over the lazy dog. This sentence demonstrates the line height in context.

Snug · 1.3 · --leading-snug

The quick brown fox jumps over the lazy dog. This sentence demonstrates the line height in context.

Normal · 1.5 · --leading-normal

The quick brown fox jumps over the lazy dog. This sentence demonstrates the line height in context.

Relaxed · 1.7 · --leading-relaxed

Letter Spacing

Tight (-0.025em)

--tracking-tight

Wide (0.025em)

--tracking-wide

Widest (0.1em)

--tracking-widest

Spacing

A consistent spacing scale based on 4px increments. Used for padding, margins, and gaps throughout the system.

8px--space-2

12px--space-3

16px--space-4

20px--space-5

24px--space-6

32px--space-8

Radius

A simplified radius scale with five steps, from sharp corners to fully rounded.

Small

6px

Medium

10px

Large

16px

Full

9999px

Shadows

Four shadow levels for depth, with darker variants automatically applied in dark mode.

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

Transitions

Standardized durations and easing curves. All transitions respect prefers-reduced-motion and are disabled when the user prefers reduced motion.

Durations

Normal200ms

Slow300ms

Leisurely600ms

Easing

Defaultcubic-bezier(0.4, 0, 0.2, 1)

Softcubic-bezier(0.32, 0.08, 0.24, 1)

Components

Live examples of design system atoms, molecules, and organisms. Components use CVA for variant management and cn() for class merging.

Headings

Display

Heading 1

Heading 2

Heading 3

Heading 4

Text

Body Large — primary text

Body — default text

Small — secondary information

Caption — labels and metadata

Overline — category labels

Body — muted tone

Body — brand tone

Badges

DefaultBrandOutlineMuted

Links

Inline Link Brand Link Muted Link Nav Link

Buttons

Form Field

Name

Metric Cards

+42%
Conversion rate

$2.3M
Revenue impact

4.8
App store rating

Callout

"All the end of study is to make you a good man and a useful citizen."

— John Adams, Letter to John Quincy Adams, 18 May 1781

Device Frames

Lightweight browser and phone chrome components for presenting UI screenshots with context. Support static (aspect-ratio) and scrollable (fixed-height viewport) modes.

Browser — static

Browser — scroll

Portfolio homepage in a scrollable browser frame

Phone — static

Phone — scroll

Portfolio homepage in a scrollable phone frame

Device Carousel

A carousel that shows one framed device image at a time with prev/next navigation, dot indicators, and a click-to-zoom lightbox. Built on embla-carousel and Radix Dialog.

Portfolio homepage in a browser frame (slide 2) — Browser frame carousel with lightbox

Code

Use var(--brand) for the brand accent color.

:root {
  --brand: oklch(0.65 0.16 60);
  --brand-foreground: oklch(1 0 0);
}

Accessibility

This site targets WCAG AA 2.2 compliance. Accessibility is not a separate feature — it is baked into every token, component, and layout decision.

Compliance Statement

zachschweitzer.com is designed and built to conform to the Web Content Accessibility Guidelines (WCAG) 2.2 at Level AA. All color pairings meet minimum contrast ratios, all interactive elements are keyboard-operable, and all images include descriptive alt text.

Color Contrast Matrix

Every semantic color pairing is validated against WCAG AA contrast thresholds (4.5:1 for body text, 3:1 for large text and UI components).

Foreground