Skip Navigation

Style Guide

A quick reference for the color system and typography defined in src/styles/global.css.

Logo

Light

Preview uses the light theme CSS variables.

Dark

Preview uses the dark theme CSS variables.

Colors

Light

Preview uses the light theme CSS variables.

Background Aa
bg-background text-foreground
Foreground Aa
bg-foreground text-background
Card Aa
bg-card text-card-foreground
Popover Aa
bg-popover text-popover-foreground
Primary Aa
bg-primary text-primary-foreground
Secondary Aa
bg-secondary text-secondary-foreground
Muted Aa
bg-muted text-muted-foreground
Accent Aa
bg-accent text-accent-foreground
Info Aa
bg-info text-info-foreground
Success Aa
bg-success text-success-foreground
Warning Aa
bg-warning text-warning-foreground
Error Aa
bg-error text-error-foreground
Border Aa
border-border
Input Aa
border-input
Outline Aa
outline-outline

Dark

Preview uses the dark theme CSS variables.

Background Aa
bg-background text-foreground
Foreground Aa
bg-foreground text-background
Card Aa
bg-card text-card-foreground
Popover Aa
bg-popover text-popover-foreground
Primary Aa
bg-primary text-primary-foreground
Secondary Aa
bg-secondary text-secondary-foreground
Muted Aa
bg-muted text-muted-foreground
Accent Aa
bg-accent text-accent-foreground
Info Aa
bg-info text-info-foreground
Success Aa
bg-success text-success-foreground
Warning Aa
bg-warning text-warning-foreground
Error Aa
bg-error text-error-foreground
Border Aa
border-border
Input Aa
border-input
Outline Aa
outline-outline

Buttons

Light

Preview uses the light theme CSS variables.

Dark

Preview uses the dark theme CSS variables.

Forms

Light

Preview uses the light theme CSS variables.

Dark

Preview uses the dark theme CSS variables.

Surfaces & Radius

Light

Preview uses the light theme CSS variables.

Card · rounded-sm
bg-card text-card-foreground
Card · rounded-md
bg-card text-card-foreground
Card · rounded-lg
bg-card text-card-foreground
Popover · rounded-xl
bg-popover text-popover-foreground
Popover · rounded-2xl
bg-popover text-popover-foreground
Popover · rounded-3xl
bg-popover text-popover-foreground

Dark

Preview uses the dark theme CSS variables.

Card · rounded-sm
bg-card text-card-foreground
Card · rounded-md
bg-card text-card-foreground
Card · rounded-lg
bg-card text-card-foreground
Popover · rounded-xl
bg-popover text-popover-foreground
Popover · rounded-2xl
bg-popover text-popover-foreground
Popover · rounded-3xl
bg-popover text-popover-foreground

Focus & Accessibility

Use Tab to navigate these elements and verify focus-visible outlines.

Light

Preview uses the light theme CSS variables.

Focusable link

Dark

Preview uses the dark theme CSS variables.

Focusable link

Typography

These examples are rendered inside the site’s default .prose wrapper and reflect the typography rules in src/styles/global.css.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Body

This is a paragraph with an inline link. It should use text-foreground and the link should use text-primary.

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three