Design System

The design system behind this portfolio. Color tokens and typography are defined as CSS custom properties and composition classes in globals.css. Layout, spacing, and responsive behavior use Tailwind v3 utility classes. Toggle the theme to see both modes.

Color Tokens

Defined as CSS custom properties in globals.css with light and dark values. Mapped to Tailwind via tailwind.config.js so utilities like text-fg and bg-surface resolve to the active theme.

Background

--bg

Background Subtle

--bg-subtle

Surface

--surface

Foreground

--fg

Secondary

--fg-secondary

Accent

--accent

On Accent

--on-accent

Border

--border

Three-layer layout

--bg (page background)

--bg-subtle (section)

--surface (card)

Typography

Composition classes defined in @layer components in globals.css. Display sizes use fluid clamp() for smooth scaling across viewports. Body sizes step at the md breakpoint (16px to 20px).

Display 2XL

Cabinet Grotesk / clamp(48-96px)

The quick brown fox

Display XL

Cabinet Grotesk / clamp(40-80px)

The quick brown fox

Display LG

Cabinet Grotesk / clamp(32-60px)

The quick brown fox

Display MD

Cabinet Grotesk / clamp(24-36px)

The quick brown fox

Display SM

Cabinet Grotesk / clamp(20-24px)

The quick brown fox

Body

Areal / 16px / 20px

The quick brown fox

Label

Areal / 16px / 20px

UPPERCASE LABEL TEXT

Link

Areal / 16px / 20px

Inline link style

Badge

Areal / 16px

The quick brown fox

Meta

Areal / 14px

Small metadata text

Font families

Aa

Cabinet Grotesk

Display headings

Aa

Areal

Body, UI, labels

Aa

Ogg

Editorial accent

Spacing

4px base grid using the standard Tailwind numeric scale. All spacing in markup uses Tailwind utility classes (gap-4, p-6, mb-8, etc.) rather than custom tokens.

4px t-1
8px t-2
12px t-3
16px t-4
24px t-6
32px t-8
48px t-12
64px t-16
96px t-24

Components

Astro components in src/components/ui/. Styled with Tailwind utilities and design tokens. No client-side JavaScript shipped for any component.

Button

Badge

Figma React Tailwind User Research Design Systems

Card

Card with shadow

Surface background with section shadow for depth.

Media card

Tinted container for images and video.

Animations

CSS only. No JS animation libraries. Respects prefers-reduced-motion.

Scroll reveal

data-animate (fade + translateY) and data-animate-y (translateY only, VoiceOver safe for headings).

Theme transition

All color properties transition over 300ms. Toggle the theme to see it.