Design System — v0.1.0
A design system rooted in the forests of northern Germany. Framework-agnostic, token-first, built for brand, websites, and web apps.
About
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.
Four token palettes. A two-layer semantic architecture. Framework-agnostic CSS custom properties. Component definitions, each 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
Every section declares its own surface context. Components inherit the correct token values automatically — no conditional logic needed.
Light surface
Default page surface. Most content sections live here.
Dark surface
Hero, feature callouts, closing CTAs. High contrast.
Tinted surface
Subtle variation. Subsections, asides, secondary content.
Farn Design System
A warm, earthy colour system rooted in northern European forest landscapes. Seventeen carefully selected tokens across four named palettes — each with a distinct semantic role for dark and light surface design.
Four progressively lighter dark tones — from the deepest void to a warm slate. The backbone of dark surface design. Used for backgrounds, elevated surfaces, active states, and secondary text. Never used as foreground text on light backgrounds.
Three warm off-white tones — not pure white, but the colour of aged parchment, linen, and river sand. The foundation of all light surface design.
Four tones from calm sage through rich fern to a deep teal-inflected forest. The accent palette — every primary action, link, and interactive signal uses these tokens.
Five semantic colours with fixed meanings that must not be repurposed. All five meet WCAG AA (4.5:1) on Parchment. Never used decoratively.
Components never reference palette tokens directly. They reference semantic aliases that resolve to the correct palette value per mode. When the theme switches, every component adapts automatically — no conditional logic needed.
* Ash is AA-large only on Void. On elevated dark surfaces (Iron), use Sand for secondary text instead.
Key contrast pairs across the system. All primary text combinations exceed AA (4.5:1). Ash is AA-large only.
| Pair | Ratio | Result |
|---|---|---|
Parchment on Void | 13.07:1 | ✓ AA |
Sand on Void | 10.96:1 | ✓ AA |
Ash on Void | 3.35:1 | AA large only |
Void on Parchment | 13.07:1 | ✓ AA |
Iron on Parchment | 9.37:1 | ✓ AA |
Ash on Parchment | 4.39:1 | AA large only |
Fern on Void | 4.68:1 | ✓ AA |
Fern on Parchment | 4.80:1 | ✓ AA |
Sage on Void | 5.19:1 | ✓ AA |
Forest on Parchment | 5.38:1 | ✓ AA |
Ember on Parchment | 4.51:1 | ✓ AA |
Moss on Parchment | 4.51:1 | ✓ AA |
Heather on Parchment | 4.47:1 | ✓ AA |
Parchment on Fern (btn text) | 4.80:1 | ✓ AA |
Copy the full palette token block into your project's base CSS, or use the CDN link below.
/* Farn Design System — Palette Tokens v0.1.0 */ :root { /* ── Iron Night ──────────────────────────── */ --kn0-void: #0D1117; /* Primary dark bg */ --kn1-iron: #374151; /* Elevated surfaces */ --kn2-slate: #4B5563; /* Active line, selections*/ --kn3-ash: #6B7280; /* Placeholders, guides */ /* ── Birch Storm ─────────────────────────── */ --bs0-sand: #E4E2DA; /* Elevated UI, dark text */ --bs1-linen: #EEEDE9; /* Card fills, hover */ --bs2-parchment: #F5F4F0; /* Primary bg / dark text */ /* ── Forest ──────────────────────────────── */ --fr0-sage: #5C9E86; /* Dark accent, support */ --fr1-fern: #3E7A62; /* Primary accent */ --fr2-forest: #2D5E4A; /* Hover, badge text */ --fr3-deepwater: #254D5A; /* Code bg, selected dark */ /* ── Bloom ───────────────────────────────── */ --bl0-ember: #C5414C; /* Error */ --bl1-ochre: #AB5A2B; /* Annotation */ --bl2-grain: #8D6B20; /* Warning */ --bl3-moss: #567A37; /* Success */ --bl4-heather: #885DB4; /* Special */ }