Skip to content
Library

Lattice. A quiet cream canvas where dark forest ink does the speaking and pastel specimen cards provide the color.

  • SaaS
  • Light theme
  • 23 colors
  • 1 typeface

Lattice reads like a botanical field journal rendered in product form: a warm parchment canvas (#f7f6f2) carries the entire site, with a single near-black forest ink (#001f1f) doing the heavy lifting as both primary text and primary action surface. The signature is a system of pastel-tinted feature cards — mint, lime, lavender, buttercream — each color-coding a product module like a specimen tray, paired with dark filled and outlined buttons in the same forest green. Typography is a single geometric sans (Matter) at compact sizes, with tight tracking on large display copy and wide tracking on small uppercase labels. Everything sits on generous rounded corners (14–29px), soft 1px-tinted shadows, and zero decorative noise — color appears as functional punctuation, not ornament.

Screenshot of Lattice
Captured from lattice.com on October 11, 2026

Lattice design system

Lattice

Brand3

  • Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color

  • Dark green accent for data visualization, illustration strokes, and secondary green elements. Distinct from Forest Ink in that it reads clearly as green, not near-black

  • Secondary brand accent — teal-toned borders, illustration fills, and data visualization. Used alongside Deep Forest for multi-color charts and decorative elements

Accent14

  • Pill badge fills, success highlights, and light accent surfaces. The signature light green for category tags, status indicators, and soft highlight washes

  • Chart and illustration accent — the yellow-green in the multi-color palette system. Used in data bars, category indicators, and decorative strokes

  • Magenta-pink accent for data visualization and illustration. The warm-cool counterpoint in the multi-color palette system

  • Amber-gold accent for data visualization and illustration. The warm yellow in the multi-color palette system, used in charts and decorative strokes

  • Violet accent for data visualization, illustration strokes, and the integrations section gradient. The cool counterpoint in the multi-color palette

  • Pastel feature card background — the pale aqua tint assigned to product modules like Performance. Each product area gets its own pastel home

  • Pastel feature card background — the pale yellow-green tint for modules like Goals & OKRs. The warmest pastel in the system

  • Pastel card background — pale violet for testimonial cards, secondary feature blocks, and the cool side of the pastel system

  • Pastel card background — near-white pink for subtle surface differentiation. The quietest of the pastel tints

  • Warm pastel accent surface — soft yellow for tag backgrounds and light highlight zones

  • Green pastel accent for tag backgrounds and soft category highlights. A more saturated green than Lime Surface

  • Pink pastel accent for tag backgrounds and soft category highlights

  • Muted violet for illustration strokes and decorative outlines

  • Hero radial gradient — the lime-to-teal aurora behind the product device frame. Evokes a natural, organic light source rather than a tech glow

Neutrals6

  • Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color

  • Secondary text and medium-emphasis borders. Sits between Forest Ink and the lighter grays — use for body descriptions, supporting copy, and subtle dividers

  • Muted body text, nav borders, and tertiary UI elements. The readable-but-quiet gray for descriptions and helper text

  • Lightest text tier — captions, metadata, tertiary labels. Use for timestamps, footnotes, and non-essential annotations

  • Page background — the warm off-white canvas that gives the entire system its paper-like, non-clinical feel. Never use pure white for the body background

  • Card surfaces, product UI mockups, and embedded media containers — pure white lifted above the parchment canvas to create subtle elevation without shadows

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper White on Forest Ink

17.27 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.