Barefoot (default)
Ink on paper, hairline borders, no shadows, small neutral radii. Zero overrides — this is the framework.
Barefoot CSS
Six starter themes and the neutral default, each rendered
live below — every card carries its own
data-bf-theme, so what you see is what you ship. No
screenshots: each preview is real components reading the same
tokens your app would.
Ink on paper, hairline borders, no shadows, small neutral radii. Zero overrides — this is the framework.
Serif voice, warm paper tones, square corners. Overrides the fonts, eight color tokens, and the radii.
Blue accent, denser controls, tighter radii. One accent change plus control height and spacing.
Rounded, saturated, bouncier transitions. Proof that personality is six variables away.
Deep greens on warm paper, soft green shadow. The quiet one of the set.
Warm coral daylight, amber dusk, a rounder corner. The warmest voice of the set.
Pure black on pure white (and mirrored in
dark). Also available as the OS-driven
prefers-contrast mode.
Each card is a file in src/themes/ — copy it, rename
the attribute value, tweak the variables, done. The
theming tutorial walks
through building your own from scratch, and
theming.md lists every token the
cards above are reading.
<html data-bf-theme="forest">