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

Submit is prevented in this non-networked example. Cancel is intentionally inert; Reset restores the initial values.

Buttons — Updated Soft

Native submit, button, and reset types provide primary, secondary, and tertiary emphasis. Text color stays unchanged on hover. These type="button" examples use the optional emphasis override and perform no action.

Light buttons

Primary text contrast: 9.40:1 resting, 15.36:1 hovered.

Dark buttons

Primary text contrast: 7.98:1 resting, 10.79:1 hovered (existing light gray).

Article footer

Only the application-shell footer receives page-specific margin and alignment.

Article metadata stays in the article's normal flow.

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.

Dialogs

Both dialogs start at the same viewport-relative top offset. Short content leaves the footer at the minimum-height bottom. Long content grows to the viewport cap, then only its body scrolls. Footer order is Reset, Cancel, Submit. Submit validates and closes; Cancel or clicking outside closes without validation; Reset restores initial values and stays open. Closing does not reset the form.

Short dialog

Clear the title to exercise native required-field validation.

Long dialog

Edit the values, then use Reset to restore them. Submit and Cancel close the dialog without making a network request.

Content-driven sizing

The dialog grows with its contents rather than reserving a fixed preferred height. Its minimum leaves space for a useful short form.

Viewport limits

The maximum is eighty percent of the visible viewport, with outer gutters retained on exceptionally short screens. The minimum shrinks when the viewport cannot accommodate it.

Scroll ownership

The header and footer remain visible while this body scrolls. Move through these fields with Tab or scroll with your pointer to review the whole form.

Keyboard and validation

Clear the required title and try Submit. Native validation keeps the dialog open. Cancel does not submit or validate the form. Escape also dismisses the native modal.

This is the end of the scrolling body. Footer actions remain independently accessible.