Farn.
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
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.
Farn