Sharp · Warm · Intellectual

A design system
rooted in northern forests.

Created for a clean and lightweight design. Framework-agnostic tokens and component classes. Zero runtime, zero framework dependency.

Explore Get Started

About

A design system that knows what it is.

From the Old Saxon farn — feather-leaf, forest floor, northern ground.

Etymology

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.

Explore Foundations
Iron Night
Birch Mist
Forest
Bloom

Architecture

Tokens all the way down.

Three tiers, each building on the last. Swap a palette token and the entire system updates. Components never reference raw colours.

Browse Styles
Tier 1

Palette tokens

Named colour, spacing, type, and motion values. The raw vocabulary — never referenced by components directly.

--fo1-fern--in0-void--space-md
Tier 2

Semantic tokens

Purpose-named aliases that resolve per theme and surface. Light, dark, and surface overrides cascade automatically.

--color-bg--color-accent--color-text
Tier 3

Component tokens & classes

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

Four palettes.
One vocabulary.

Iron Night
Void
Iron
Slate
Ash
Birch Mist
Sand
Mist
Birch
Forest
Glade
Fern
Forest
Deepwater
Bloom
Ember
Ochre
Grain
Moss
Heather
Explore Colors
Farn.
DisplayFraunces — variable, optical size
BodyInstrument Sans — humanist, geometric
MonoJetBrains Mono — code, data

The token story

One component. Every surface.

Toggle the theme — tokens resolve automatically. The card, badge, and button below share no hardcoded colours.

Base

base

The page-level background. Every theming context starts here.

More about Surfaces

Layer

layer

Cards, panels, sidebars. One step above the base — naturally elevated.

More about Surfaces

Overlay

overlay

Modals, dropdowns, tooltips. The topmost surface, floating above.

More about Surfaces

Included

The complete token system.

CSS tokens

Two-layer architecture: palette → semantic. Custom properties that resolve automatically with data-theme and data-surface.

Component classes

Shipped CSS classes for buttons, cards, badges, forms, and more. Load farn-components.css alongside the token bundle.

Zero dependencies

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

Start building
with Farn.

CSS tokens and component classes. No runtime, no framework, no build step.
Just add the stylesheet and start building.

Get Started Discover Components