Customize

CSS variables

felt-css is plain CSS: every colour, radius, space and shadow is a custom property on :root. Override them to make the toolkit yours — no Sass, no build.

View page source on GitHub

On this page

Overriding#

All tokens live on :root inside @layer tokens. Any unlayered rule of yours wins over them, so overriding is just redefining:

:root {
  --font: "Atkinson Hyperlegible", system-ui, sans-serif;
  --radius: 6px;
  --container-max: 1200px;
}

Tokens can also be overridden on any element for that part of the page, like Bootstrap's component variables:

Badge

<div style="--primary: var(--moss); --primary-ink: #fff">
  <button type="button" class="btn btn-primary">Moss instead of denim</button>
  <span class="badge text-bg-primary">Badge</span>
</div>

Colors#

Theme colours and their families are described on Color. The neutral tokens:

Variable	Used for
`--body-bg`	Page background
`--surface`	Cards, list groups, accordions, toasts
`--surface-sunk`	Wells, code blocks, tracks
`--surface-raised`	Slightly raised surfaces: light buttons, `.alert-light`, `.table-light`
`--surface-overlay`	Dropdowns, popovers, modals, offcanvas — never darker than what they lie on
`--surface-hover`, `--surface-pressed`	Interaction states of neutral surfaces
`--field`, `--field-addon`, `--field-disabled`	Inputs, input-group addons, disabled inputs
`--border`, `--border-strong`	Hairlines; outlines that must reach 3:1 (checkboxes, radios)
`--text`, `--emphasis`	Body text; strongest text
`--muted`, `--subtle-text`	Secondary and tertiary text
`--link`	Links
`--focus`	Focus rings
`--track`	The empty part of progress bars
`--backdrop`	Modal and offcanvas backdrops

Type#

Variable	Default
`--font`	`system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`
`--font-heading`	`var(--font)`
`--font-mono`	`ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

Spacing, radius and shadows#

Variable	Default
`--space-1` … `--space-5`	`.25rem`, `.5rem`, `1rem`, `1.5rem`, `3rem` — the same scale as the spacing utilities
`--radius-sm`, `--radius`, `--radius-lg`, `--radius-xl`, `--radius-xxl`, `--radius-pill`	`6px`, `10px`, `14px`, `20px`, `32px`, `999px`
`--shadow-sm`, `--shadow`, `--shadow-lg`	Clean-look shadows, darker in dark mode
`--container-max`	`1080px`

Felt#

The felt look has its own tokens on :root[data-look="felt"]: the felt photos (--felt, --felt-light, --felt-dark and their -size), the sheet everything light is cut from (--sheet, --sheet-blend), edge and shadow tones (--felt-cut, --felt-shadow-near, --felt-shadow-far, …) and the seams (--seam-img, --seam-width, --seam-inset, --seam-filter, --seam-strength). They are tuned together with the images that tools/build_assets.py generates; change the script rather than single values if you want a different stitch.

A cheap tweak that works: --seam-strength (0–1) controls how strongly the thread shows on light felt, --seam-inset how far in from the edge it is sewn.