Barbajoe CSS specimen

CSS component catalog

This page exercises the maintained selectors, semantic HTML defaults, interactive states, and motion preferences.

Typography and links

First-level heading

Second-level heading

Body text with inline code, a regular link, and a disabled link.

Semantic color contract

Every named text role below is guaranteed against both the page and surface backgrounds. Borders and focus rings have a separate non-text contrast guarantee.

Forced light scheme

Page background
  • Text
  • Muted text
  • Link
  • Link hover / focus
  • Danger
Border sample
Focus-ring sample
Surface background
  • Text
  • Muted text
  • Link
  • Link hover / focus
  • Danger
Border sample
Focus-ring sample

Primitive swatches; no foreground guarantee

Accent
Inverse surface

Forced dark scheme

Page background
  • Text
  • Muted text
  • Link
  • Link hover / focus
  • Danger
Border sample
Focus-ring sample
Surface background
  • Text
  • Muted text
  • Link
  • Link hover / focus
  • Danger
Border sample
Focus-ring sample

Primitive swatches; no foreground guarantee

Accent
Inverse surface

Form elements

Choices

Motion and interaction

Hover or focus within

This surface scales only when motion is acceptable.

Focus this link
Disabled scale surface

This example remains static.

Dialog

Native modal dialog

This exercises the content grid, backdrop, focus handling, and motion preference.