Lattice

Overview

Lattice is a modern HR and AI platform built for forward-thinking teams who believe people are the competitive advantage. The brand embodies 'Accessible Enterprise'—combining the warmth and approachability of consumer design with the rigor and trust required in HR technology. The visual language is clean, optimistic, and human-centered: soft gradients (lime-green to sky-blue to lavender) evoke possibility and growth, while a deep forest-green primary (#046645) anchors the interface with confidence and stability. The emotional response is one of clarity and empowerment: users feel supported, not overwhelmed, by the platform's capabilities.

The brand voice is conversational yet authoritative, practical yet aspirational. Lattice speaks to HR leaders and people managers as peers, using language like 'unlock potential,' 'build high performance,' and 'succeed together'—never corporate jargon, never patronizing. The tone is direct and action-oriented: 'Join 5,000+ forward-thinking teams' (not 'Consider joining'). Example sentence in brand voice: 'Goals that align your teams, feedback that fuels growth—all in one place.'

Colors

The Lattice color system is rooted in a 'Vibrant Minimalism' philosophy: a clean white canvas (rgb(255, 255, 255)) is punctuated by a signature forest-green primary (#046645, rgb(4, 102, 69)) that signals trust, growth, and action. This primary is deployed on all CTAs, focus states, and brand-critical interactive elements. The secondary accent is a softer teal-green (#187a59, rgb(24, 122, 89)), used for supporting actions and secondary navigation. A tertiary purple (#642da2, rgb(100, 45, 162)) provides visual contrast and is reserved for status badges, highlights, and tertiary UI elements.

The surface stack is deliberately minimal: the base surface is pure white (#ffffff) with a dim variant at #f5f5f5 for subtle depth. Container surfaces progress from #fafafa (lowest) through #e8e8e8 (mid

Typography

The Lattice type system uses Matter (a humanist sans-serif from Webflow) as the sole typeface family, creating a unified, modern voice across all scales. The hierarchy is built on five core levels: Display (70px, 500 weight) for hero headlines with -0.02em letter-spacing to tighten the large scale; Headline-lg (48px, 500 weight) for section titles; Headline-md (36px, 500 weight) for subsections; Body-lg (18px, 400 weight) for hero copy and prominent text; Body-md (16px, 400 weight) for standard body copy and UI labels. All body text uses a 1.5x line-height ratio (28px for 18px text, 24px for 16px text) to ensure readability over the brand's colorful gradient backgrounds.

Label and button text uses Label-md (14px, 500 weight, 0.01em letter-spacing) to convey actionability without heaviness

Layout

Lattice uses a fluid 12-column grid with a max-width of 1200px, centered on the viewport. The gutter between columns is 24px (md spacing token), and the outer margin (container padding) is also 24px on desktop, reducing to 16px on tablet and 12px on mobile. Section separation uses the lg spacing token (40px) for major content blocks, creating a breathing rhythm that feels spacious without being wasteful. The hero section spans full-width with a 40px top margin and 64px bottom margin (xl spacing), establishing visual weight.

Card-based layouts (feature grids, testimonials, customer logos) use 24px gaps between cards, with each card taking equal flex space. The container max-width of 1200px is applied to text-heavy sections (copy, lists) but hero imagery and gradient backgrounds often exten

Elevation & Depth

Lattice uses a subtle shadow system to create depth without visual heaviness. The elevation scale has three levels: sm (0 1px 2px rgba(0, 31, 31, 0.06)) for subtle dividers and hover states on flat elements; md (0 4px 12px rgba(0, 31, 31, 0.08)) for standard cards and modals; lg (0 16px 40px rgba(0, 31, 31, 0.12)) for elevated modals and floating panels. Shadows use the on-surface color (rgba(0, 31, 31, ...)) rather than pure black, ensuring they harmonize with the brand's teal-tinted neutrals.

The hero section uses a different depth strategy: instead of shadows, a 12px rounded-corner card wi

Shapes

Lattice employs a 'Soft-Technical' shape philosophy: rounded corners are generous but not organic, signaling approachability and modernity without sacrificing clarity. Buttons and primary CTAs use a full-pill border-radius (9999px or border-radius: 50% on square elements), creating a friendly, action-oriented appearance. Standard cards and containers use a 1.5rem (24px) border-radius, balancing softness with structure. Input fields and secondary UI elements use a 0.5rem (8px) border-radius, maintaining visual consistency while reducing visual weight.

The rationale: large, pill-shaped buttons

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses the signature forest-green background (#046645) with light green text (#cdfacf), a full-pill border-radius (9999px), and 12px vertical / 28px horizontal padding, resulting in a 48px height. On hover, the background darkens to #035236 (a 8% lightness reduction) with a 200ms ease-out transition; on focus, a 2px solid outline in the primary color appears 2px outside the button. The button-secondary uses a light green background (#c4f5db) with dark teal text (#046645), maintaining the same dimensions and pill shape. Button-ghost uses a transparent background with a 1px outline in #c4cccc and dark teal text, useful for tertiary actions.

Containers & Surfaces Cards are the foundational contain

Do's and Don'ts

**Do**

• Do use the forest-green primary (#046645) exclusively for CTAs, focus states, and brand-critical interactive elements—it's the visual anchor that makes Lattice recognizable.
• Do apply the three-stop gradient (lime-green to cyan to lavender) to hero sections and feature cards to evoke optimism and forward momentum.
• Do maintain 40px+ vertical spacing between major sections and 24px between cards to create breathing room and prevent cognitive overload.
• Do use Matter 500 weight for all interactive elements (buttons, links, labels) and 400 weight for passive content to signal interactivity.
• Do apply the md shadow (0 4px 12px rgba(0, 31, 31, 0.08)) to cards and modals; reserve lg shadow for elevated, floating panels.
• Do use full-pill border-radius (9999px) on primary buttons and 1.5rem on cards to maintain the soft-technical aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text—use the on-surface color (#001f1f) for dark text and #cdfacf for light text on dark backgrounds to maintain brand harmony.
• Don't apply shadows to buttons in their default state; reserve shadows for hover states to avoid visual clutter.
• Don't mix typefaces—Matter is the sole typeface family across all scales and weights. Never introduce system fonts or serif faces.
• Don't use the secondary or tertiary colors as primary CTAs; reserve the forest-green primary (#046645) for all main call-to-action buttons.
• Don't reduce the border-radius below 0.5rem (8px) on interactive elements; tight corners feel harsh and contradict the brand's approachable personality.
• Don't apply text-shadow to body copy; reserve text-shadow (0 1px 2px rgba(0, 31, 31, 0.1)) only for small labels over busy gradient backgrounds.