Farn.
Sharp · Warm · Intellectual
Created for a clean and lightweight design. Framework-agnostic tokens and component classes. Zero runtime, zero framework dependency.
About
From the Old Saxon farn — feather-leaf, forest floor, northern ground.
Farn is built on one conviction: a design system should have a point of view. Not neutral components, but a coherent vocabulary — warm enough to feel human, sharp enough to feel considered. Four token palettes, a two-layer semantic architecture, and component classes with light and dark surface variants.
Architecture
Three tiers, each building on the last. Swap a palette token and the entire system updates. Components never reference raw colours.
Named colour, spacing, type, and motion values. The raw vocabulary — never referenced by components directly.
Farn--fo1-fern --in0-void --space-md Purpose-named aliases that resolve per theme and surface. Light, dark, and surface overrides cascade automatically.
--color-bg --color-accent --color-text Opt-in CSS classes built on top of semantic tokens. Override at the component level without touching the palette.
.btn.btn-p .card .badge Palette
The token story
Toggle the theme — tokens resolve automatically. The card, badge, and button below share no hardcoded colours.
Included
Two-layer architecture: palette → semantic. Custom properties that resolve automatically with data-theme and data-surface.
Shipped CSS classes for buttons, cards, badges, forms, and more. Load farn-components.css alongside the token bundle.
Pure CSS custom properties. Load from CDN or install from npm. Works with any stack — React, Vue, Svelte, plain HTML, or none.
Ready to build
CSS tokens and component classes. No runtime, no framework, no build step.
Just add the stylesheet and start building.