Farn.
Design System — v0.1.0
A token-first CSS design system rooted in the forests of northern Germany. Framework-agnostic tokens and components for brand, websites, and web apps.
About
From the Old Saxon farn — feather-leaf, forest floor, northern ground.
Farn is built on a single conviction: that a design system should have a point of view. Not a collection of neutral components, but a coherent vocabulary — warm enough to feel human, sharp enough to feel considered.
The name and palette draw from the forests of northern Germany — birch, fern, iron, ash. These aren't decorative references; they shaped the specific colour choices. Four token palettes, a two-layer semantic architecture, framework-agnostic custom properties, and component classes with light and dark surface variants.
Explore the colour system →Foundations
Fraunces for display — an optical-size variable serif with visible personality. Instrument Sans for body and UI — humanist enough to feel warm, geometric enough to feel clean. A 12px-base spacing scale where proximity signals relationship.
Fraunces brings personality to headings without sacrificing legibility. Optical size axis at large weights gives it warmth and confidence.
The combination creates the "familiar but not like everything else" quality the system aims for. Geometric enough to feel clean, humanist enough to not feel cold.
Components
Every component is specified for both light and dark surfaces. Token-first — no hardcoded colours anywhere in the implementation.
Hairline — between list items
Section — between content groups
Decorative — editorial scene break
The platform is never finished. The moment you ship it, the next set of needs is already forming at the edges.
Good platform thinking starts with the developer, not the platform.
"Working this way changed how I think about internal tooling entirely. It stopped being infrastructure and started being product."
Maya Rodriguez
VP Engineering, Acme
Surfaces
Three depth levels, all relative to the current theme. Apply data-surface to any element — tokens cascade automatically. Combine with data-theme to force a specific context.
Base
Page-level background. Resets to base within any deeper surface context.
Layer
Cards, sidebars, panels. One depth level above the page.
Overlay
Modals, dropdowns, floating elements. Highest depth level.
Principles
Four ideas the system holds to — and enforces through its tokens.
The spacing scale encodes hierarchy — small gaps within components, large gaps between sections. Distance is meaning.
Every transition communicates a state change. Decorative animation earns its place or it doesn't ship. When in doubt, don't animate.
Every colour pair is tested for WCAG contrast. Focus rings are never removed. Touch targets stay at least 44×44px.
Components reference purpose-named tokens, never raw colours. Light, dark, and surface overrides resolve automatically.
What Farn is
Farn is not a JavaScript component framework — no React or Vue components, no runtime, no required build step. It ships CSS: a two-layer token system plus an opt-in set of component classes you style with. Works with any stack, or none. No Tailwind, no CSS-in-JS — just custom properties.
Farn