Evergreen Design System

The goal

Evergreen was created to provide a calm, consistent visual language that easily adapts to a variety of data-driven products. The goal was a lean, purposeful system: a focused set of design tokens, typography, and components that covers each product's everyday needs and grows with it.

Guiding principles

1. Calm and focused

Soft sage neutrals set a calm foundation for every screen, while brand and status colours highlight actions and meaning.

2. Named by purpose

Semantic tokens like background/tinted/primary and foreground/muted describe how each colour is used, making the right choice clear for designers and developers alike.

3. Lean by design

Each colour scale includes exactly the steps the product uses, keeping the system lean, easy to learn, and simple to maintain.

Foundations

Colour

The palette brings together five main colours (Juniper, Pear, Sage, Slate, and Clay) and three auxiliary colours (Denim, Forest, and Sienna).

Every colour shares the same HSL lightness scale, from step 50 (99% lightness) to step 1200 (8%). This keeps contrast consistent from one hue to the next and makes new colours simple to add. For more on this approach, see my post on colour variations with CSS relative colours.

Colour functions give each colour a clear role: backgrounds from light to extra dark, tinted backgrounds for primary, secondary, and danger messages, two border strengths, foreground colours with inverse versions for dark surfaces, and brand colours with darker hover states. Every colour combination is checked for accessible contrast.

Typography

Three typefaces each have a clear role: Spline Sans for headings, Hanken Grotesk for text, and Spline Sans Mono for data such as labels, tags, and numbers. Eleven text styles cover every need, and headings get tighter letter spacing and line height as they grow, so large text stays compact and balanced. Every size is defined in pixels and rem for a smooth handoff to code.

Iconography

A curated set of Lucide icons at 20px covers the CRM's everyday actions, from contacts and companies to goals and activity.

Components

36 components bring the foundations together. Each one is built from the same tokens, so the whole system stays consistent.

• Buttons: five variants (ghost, light, primary, secondary, and danger) with optional leading and trailing icons. Hover states use each colour's darker step.
• Inputs: text, select, textarea, and search fields, each with a variant for every background shade.
• Tiles and notes: content surfaces matched to the background tokens, with tinted versions for primary, secondary, and danger messages.
• Pills: compact tags set in the data typeface.
• Fit score: a ring that presents a score from 0 to 100, with colour variants from the auxiliary palette.