Barefoot Studio — One Color. Infinite Theme.

v5.3 Generative morphology
Hover, subtle, border & focus auto-generate via oklch(from var(--bf-primary) …)
0.375rem
250 0.13 12-step OKLCH ramp and the whole visual language — radius, spacing, type & motion — regenerate from --bf-seed-h / --bf-seed-c (v5.3 morphology).

Container-adaptive reflow

Drag the bottom-right corner — the table reflows to a card stack as its container narrows, not the viewport.

NameRoleStatus
AdaEngineerActive
LinDesignerAway
RizWriterActive

Container-scoped theming

A dark panel inside a light page — zero JS, no class war. The data-bf-scope="dark" element becomes a container; its subtree re-skins per container via @container style(). Resize the panel: the scope follows the box, not the viewport.

Dark scope

This card is dark even though the page is light. Buttons, borders and text all follow --bf-surface / --bf-text.

Contrast scope

A high-contrast region inside a normal page — useful for a focused callout.

Export — paste into your CSS

A pasteable :root theme — primary, radius, font, and the generative seed so the whole 12-step ramp reproduces. No build step. AA is checked at npm run check.

:root {
  --bf-primary: #2563eb;
  --bf-radius: 0.375rem;
  --bf-font: "Inter", system-ui, sans-serif;
}

Or as tokens.json

The same overrides as a machine-readable map — drop it into a design-token pipeline.

{}