Skip to content
DesignMunkDesignMunk Submit a site

Lattice Pricing

lattice.com
Make high performance a habit with Lattice’s people + AI platform
HR & Recruiting Software Webflow Pricing Matter
Share Visit site
lattice.com DESKTOP · 1440
Lattice Pricing

AI Breakdown

Design export

---
version: alpha
name: Lattice
description: Make high performance a habit with Lattice’s people + AI platform
colors:
  primary: "#001f1f"
  secondary: "#0c0c2c"
  tertiary: "#cdface"
  neutral: "#ffffff"
  brand-fall-river: "#f58e41"
  brand-glass-jar-blue: "#18b9a2"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Matter
    fontSize: 66px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.024em
  headline-md:
    fontFamily: Matter
    fontSize: 49px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.021em
  headline-sm:
    fontFamily: Matter
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: Matter
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.19
  body-md:
    fontFamily: Matter
    fontSize: 19.8px
    fontWeight: 400
    lineHeight: 1.52
rounded:
  sm: 11.9px
  md: 19.8px
spacing:
  xs: 2px
  sm: 10px
  md: 18px
  lg: 32px
  xl: 52px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#046645"
    rounded: "{rounded.sm}"
    padding: 11.8541px 23.7082px
    height: 41px
  button-secondary:
    backgroundColor: "#046645"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.sm}"
    padding: 11.8541px 23.7082px
    height: 41px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 26.3424px
---

# Lattice: Mint Cards and Calm, Readable Pricing

## Overview

Lattice's pricing communicates clarity and maturity for an HR/people-performance platform. The tone is measured, trustworthy, and lightly optimistic. Layouts are spacious, copy-forward, and built from repeatable cards that scale from plans to product tiles and FAQs. Interactions lean gentle—subtle shadows, soft mint accents, and medium-weight headlines that invite reading over hype.

## Colors

- **primary (#001f1f):** Deep ink for headlines, body text, and icons.
- **secondary (#0c0c2c):** Supplemental deep tone for illustrations or rare dark accents.
- **tertiary (#cdface):** Soft mint for primary buttons, tags, and gentle highlights.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **brand-fall-river (#f58e41):** Warm accent for metrics, badges, or occasional emphasis.
- **brand-glass-jar-blue (#18b9a2):** Teal accent for icons, checks, and data highlights.
- **surface (#ffffff):** Default surface color for panels and cards.
- **on-surface (#001f1f):** Standard text color on white surfaces.

## Typography

The entire system runs on Matter, a custom sans with medium contrast and friendly geometry. It is self-hosted and not vendor-loadable by default. Use these substitutes when Matter files are unavailable: Inter, Manrope, or Work Sans (all Google-available) for similar x-height, open apertures, and clean figures.
- headline-lg (66px/1.2, 500): Use for page heroes and key CTAs at the top of sections.
- headline-md (49px/1.2, 500): Section headers ("Build your custom package", FAQ heading).
- headline-sm (36px/1.19, 500): Card titles ("Foundations", "Enterprise", product tiles).
- headline-xs (27px/1.19, 500): Subheads within panels and testimonial headings.
- body-md (19.8px/1.52, 400): Primary paragraph copy, list items, and FAQ text. Keep contrast at on-surface for accessibility.

## Layout

Spacing uses a compact-to-roomy ladder: 2, 10, 18, 32, 52. Build vertical rhythm from 18px steps; reserve 32px and 52px for section gutters and card separation. Cards stack in a simple responsive grid: two-up for plan tiles on desktop, then a multi-card grid for products/add-ons. Content width is comfortable; allow generous breathing room above/below major headings using 52px blocks.

## Elevation & Depth

Depth is primarily handled by whitespace and tone. A layered small shadow provides lift: use the measured 'sm' shadow for interactive cards and plan tiles; larger tiers have none. When you need separation without elevation, rely on the hairline border present in the sm shadow stack and the neutral surface against the page background. Avoid heavier shadows (md/lg/xl are none).

## Shapes

Two radii define the language: sm 11.9px and md 19.8px. Buttons use sm for a soft, approachable pill; cards use md for a friendlier, product-centric silhouette. Keep inputs and badges consistent with these radii—no circles or mixed radii within the same component.

## Components

Buttons and Card (token-defined)
- Button—Primary: background #cdface, text #046645, height 41px, 11.9px radius, 11.8541px × 23.7082px padding. Use for "Get started".
- Button—Secondary: background #046645, text #cdface, height 41px, 11.9px radius. Use for sales/contact actions on light surfaces.
- Button—Link: text #001f1f, radius 0. Use for inline navigation ("Customer stories →").
- Card: background #ffffff, text #001f1f, 19.8px radius, 26.3424px internal padding.

### Pricing plan tiles
- Structure: two cards (Foundations, Enterprise) using card token. Title set in headline-sm; summary in body-md. Feature bullets in two columns on wide screens.
- Accents: "Most Popular" tag and primary action use #cdface; secondary action uses #046645.
- Spacing: 32px gap between the two tiles; 18px between title, copy, lists, and CTA.

### Product grid (Base products)
- Three cards in a responsive grid. Each uses headline-sm for the product name, body-md for description and feature list.
- Price line ends each card; maintain 18px spacing above it. Actions link to sales.

### Add-ons
- Same card style as base products. Price modifiers are shown with copy in body-md; keep the +$ lines near the CTA with 18px spacing.

### Customer logos strip
- A single-row grid of logos in monochrome on surface #ffffff. Use 32px vertical padding and 18px–32px horizontal gaps.

### Testimonial spotlight
- A two-column layout: quote copy in body-md with a bold metric callout; attribution beneath. Container is a card with md radius and the sm shadow for lift.

### FAQ accordion
- Each question is headline-xs; answers in body-md. Group items in a stacked list with 18px internal spacing and a 1px low-contrast divider using the shadow's border color.

### Final CTA band
- Headline-md text with two actions: primary mint (#cdface) and secondary green (#046645). Container can sit on plain surface with 52px vertical padding.

## Do's and Don'ts

- Do use #cdface for primary actions and highlights; pair with #046645 for readable button text.
- Do keep headings at weight 500 and body at 400; avoid bolding beyond the specified levels.
- Do space sections in 18px multiples; reserve 52px for major section breaks.
- Don't introduce heavier shadows; use only the measured small shadow for lift.
- Don't mix additional radii—buttons stay 11.9px, cards 19.8px.
- Don't overuse brand-fall-river (#f58e41); keep it for badges or small emphasis, not full backgrounds.

## Agent Prompt Guide

Quick color reference
- Text: #001f1f
- Background: #ffffff
- Border: #001f1f (use at low opacity for 1px dividers)
- Accent: #cdface

1) Build the two-plan hero
- Container: two cards (#ffffff, radius 19.8px, padding 26.3424px), 32px gap.
- Type: h1 66px/1.2 weight 500; card titles 36px weight 500; body 19.8px/1.52.
- Buttons: Primary (#cdface text #046645, height 41px, radius 11.9px), Secondary (#046645 text #cdface).
- Fonts: "Matter", Inter, system-ui.

2) Product grid (3-up)
- Grid: 3 columns, 32px gutters; stack to 1 column on narrow screens.
- Card spec: #ffffff, radius 19.8px, padding 26.3424px, small shadow for hover.
- Headline 36px/1.19 500; body 19.8px/1.52. Price line at end.

3) Add-ons row
- Same card spec as products. Title 36px, body 19.8px. Price modifier in body with leading "+".
- CTA: Secondary button (#046645 on #ffffff, radius 11.9px, height 41px).

4) Testimonial spotlight
- Card container radius 19.8px, padding 26.3424px; optional small shadow.
- Quote set in 27px/1.19 500; body copy 19.8px. Accent metric can use #f58e41.

5) FAQ accordion
- Stack items with 18px vertical padding; 1px divider using low-opacity #001f1f.
- Question: 27px/1.19 500; Answer: 19.8px/1.52. Link color remains #001f1f.

## Similar Brands

- Rippling: similarly modular pricing and soft cards; Rippling leans bolder with higher-contrast CTAs.
- BambooHR: calm palette and friendly sans; uses squarer corners versus Lattice's 19.8px card radius.
- Gusto: approachable greens and rounded buttons; more playful iconography than Lattice's restrained tone.
- Workday: enterprise-first layout and testimonials; heavier typography and denser grids compared to Lattice's breathing room.

More like this

Browse HR & Recruiting →
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 5 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 17 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 18 hours ago
understory.io
Understory Marketing
Understory
More bookings, less admin—bookings and ads that grow your experiences.
Homepage · 24 hours ago