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.

BackgroundAa
bg-background text-foreground
ForegroundAa
bg-foreground text-background
CardAa
bg-card text-card-foreground
PopoverAa
bg-popover text-popover-foreground
PrimaryAa
bg-primary text-primary-foreground
SecondaryAa
bg-secondary text-secondary-foreground
MutedAa
bg-muted text-muted-foreground
AccentAa
bg-accent text-accent-foreground
InfoAa
bg-info text-info-foreground
SuccessAa
bg-success text-success-foreground
WarningAa
bg-warning text-warning-foreground
ErrorAa
bg-error text-error-foreground
BorderAa
border-border
InputAa
border-input
OutlineAa
outline-outline

Dark

Preview uses the dark theme CSS variables.

BackgroundAa
bg-background text-foreground
ForegroundAa
bg-foreground text-background
CardAa
bg-card text-card-foreground
PopoverAa
bg-popover text-popover-foreground
PrimaryAa
bg-primary text-primary-foreground
SecondaryAa
bg-secondary text-secondary-foreground
MutedAa
bg-muted text-muted-foreground
AccentAa
bg-accent text-accent-foreground
InfoAa
bg-info text-info-foreground
SuccessAa
bg-success text-success-foreground
WarningAa
bg-warning text-warning-foreground
ErrorAa
bg-error text-error-foreground
BorderAa
border-border
InputAa
border-input
OutlineAa
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 insrc/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