Screenshot of Lattice

Lattice

lattice.com

The reference for HR/People platforms with rainbow-gradient personality — deep teal text on cream, pastel feature cards, multi-coloured wave logo, Matter at fractional rem-math sizes.

Hr Platform People Performance Platform strong

Design tokens

white
cream
tealDark
tealMid
tealMute
black
emerald
limeGreen
olive
pastelGreen
pastelLime
pastelMint
display
Matter, sans-serif
body
Matter, sans-serif
mono
(none)

Do / Don't

Reference it for

  • Cream background + deep teal text (#001f1f — very dark warm green-black, 1405 text hits)
  • Emerald green #046645 primary CTA pill — Lattice's signature green
  • Rainbow gradient "W" wave logo combining green + yellow-amber + coral red
  • Pastel-quadrant feature cards (light blue / pink / yellow / purple) in the resources section
  • Purple #5b40d9 customer logo wall mode-flip with real B2B logos
  • Matter at two weights (400, 500) — paid Display Type Foundry face
  • Fractional rem-math type scale — sizes generated by precise rem multipliers, responsive to root-font-size changes
  • 8-section dense page with full-sentence H2s ending in periods

Do not copy

  • The Matter font licence (paid Display Type Foundry)
  • The Lattice rainbow wave logo
  • The "Lattice 2026" version-number branding
  • The customer logos (Greenhouse, Robinhood, Loom, Duolingo, etc.) — Lattice-specific customers
  • The "High-performing teams" copy positioning
  • The emerald #046645 CTA hue specifically
  • The purple #5b40d9 logo-wall background hue

Signature moves

pastel-quadrant feature cards with arrow-circle buttons

feature cards use a four-colour pastel quadrant (light blue / pink / yellow / purple) each with a right-arrow-in-a-circle button, on a cream ground with deep-teal #001f1f text

CSS spring-physics timing function

a complex CSS linear() timing function with 13 keyframe stops approximates spring physics in pure CSS, alongside expoOut and easeOutQuart curves at ~300ms

eyebrow-chip section headers with full-sentence H2s

each section opens with an eyebrow-as-chip (e.g. "RESOURCES" in a green pill on light-green) above full-sentence H2s that end in periods, across an 8-section dense page with fractional rem-math sizes

Related references

Screenshot of Slack

Slack

flagship

Saas Product

a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.
Screenshot of Adaline

Adaline

strong

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.
Screenshot of Dub

Dub

strong

Developer Tool

The reference for open-source link-attribution platform — pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.
Screenshot of Figma

Figma

flagship

Saas Product

a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.