Design System
Typography, colors, buttons, and UI components. Toggle dark/light mode using the button in the navigation to preview both themes.
text-brand-700 - Primary text
text-brand-600 - Body text
text-brand-500 - Secondary/muted text
text-brand-400 - Placeholder text
text-brand-500 - Links & accents
dark:text-brand-100 - Primary headings
dark:text-brand-200 - Subheadings
dark:text-brand-300 - Body text alt
dark:text-brand-400 - Body text
dark:text-brand-300 - Links & accents
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
h1 - text-brand-700 dark:text-brand-100
h2 - text-brand-700 dark:text-brand-100
h3 - text-brand-700 dark:text-brand-200
h4 - text-brand-700 dark:text-brand-200
h5 - text-brand-700 dark:text-brand-300
h6 - text-brand-600 dark:text-brand-400
Large - text-lg text-brand-700 dark:text-brand-300
This is large body text. Use for lead paragraphs, introductions, and important descriptions that need extra emphasis.
Base - text-brand-700 dark:text-brand-400
This is standard body text. Use for general content, paragraphs, and most written content throughout the site. It provides good readability for longer passages.
Small - text-sm text-brand-700 dark:text-brand-400
This is small body text. Use for captions, helper text, metadata, and secondary information.
Extra Small - text-xs text-brand-700 dark:text-brand-400
This is extra small text. Use for fine print, timestamps, and tertiary information.
Eyebrow - text-sm uppercase tracking-[0.15em] text-brand-500 dark:text-brand-400
Eyebrow Text
Link - text-brand-500 dark:text-brand-300 hover:text-brand-600
This is a text linkQuote - text-xl italic text-brand-700 dark:text-brand-300
"This is a pull quote or testimonial style text."
Label - text-sm uppercase tracking-wider font-semibold text-brand-700 dark:text-brand-200
Section Label
btn btn-primary · btn btn-primary btn-sm · btn btn-primary btn-lg
btn btn-secondary · btn btn-secondary btn-sm · btn btn-secondary btn-lg
btn btn-link with inline SVG icon
.input-glass
.input-glass
.input-glass
Glassmorphic cards with backdrop blur for softer contrast. Best used over gradient or image backgrounds.
Most transparent option. Use when you want to see through to the background.
.card-glass-subtle
Balanced transparency. Good for general use with readable content.
.card-glass
Most opaque option. Use when content readability is priority.
.card-glass-strong
Frosted glass effect optimized for brand-50 (light) and brand-950 (dark) backgrounds. Softer contrast than solid white cards.
Semi-transparent with a frosted appearance. Softer than solid white cards.
.card-glass-solid
Subtle inset border creates depth and a floating appearance.
.card-glass-solid
Background blur softens the contrast while maintaining readability.
.card-glass-solid
Various badge styles for categories, status indicators, and tags