# lattice.com

Source: https://lattice.com/
Captured: 2026-09-20
Tags: saas, landing, light, both, corporate-clean, bento, playful, friendly, optimistic, trustworthy, energetic
Colors: #fdfdfd, #c8e5de, #bbf69f, #dcb6fd, #acb9b5, #829090, #626e6e, #93e6ea
Type (h1): Matter · 72.192px/64.9728px · 500 · tracking -1.73261px — "People + AI: Succeeding Together"
Type (h2): Matter · 46.9248px/42.2323px · 500 · tracking -1.1262px — "High-performing teams are built here"
Type (h3): Matter · 21.6576px/23.8234px · 500 · tracking -0.519782px — "Performance"
Type (body): Matter · 21.6576px/28.1549px · 400 — "Join 5,000+ forward-thinking teams using Lattice’s HR and AI tools to manage peo"
Type (small): Matter · 12.6336px/16.4237px · 400 — "2026"
Type (button): Matter · 14.4384px/17.3261px · 500 — "Request a demo"
Button: "Request a demo" — fill #046645, text #cdface, radius 11.5507px, border 0px, padding 10.1069px 17.3261px, height 38px, type 14.4384px/500
Radii: 11.5507px (4), 18.048px (1), 2px (1), 14.4384px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/lattice-com/hero.webp?v=1caac755
- Page crop (mid-1): https://media.lvly.design/library/lattice-com/mid-1.webp?v=6426f69a
- Page crop (mid-2): https://media.lvly.design/library/lattice-com/mid-2.webp?v=3aa76186
- Hero (mobile): https://media.lvly.design/library/lattice-com/mobile-hero.webp?v=94a6a036
- Full page (desktop): https://media.lvly.design/library/lattice-com/full.jpg?v=94b6de28
- Full page (mobile): https://media.lvly.design/library/lattice-com/mobile-full.jpg?v=6def8ea0
- Clip preview (mp4): https://media.lvly.design/library/lattice-com/video-3nyaw4.preview.mp4?v=3c6116a5

An enterprise HR platform that refuses to look like one. The page is built on a near-white #fdfdfd ground and a single geometric sans (Matter) used at every size, then given all of its personality by color: a deep forest green #046645 for every primary action, and a pastel family — mint #c8e5de, lime #bbf69f, lilac #dcb6fd, cyan #93e6ea — that tints cards, section grounds and gradients. The hero sets the grammar: a 72px display heading at 0.90 line-height and -0.024em tracking, stacked three lines tight so it reads as a block rather than a sentence, beside a mesh-gradient pad that frames the product video in brand color instead of a border. Below it the page alternates between white sections of tinted bento cards and full-bleed color slabs with rounded top corners, so scrolling feels like turning between chapters. What keeps it corporate rather than cute is the discipline underneath: one radius scale (~11.5px controls, ~18px containers), one type family, small 38px controls, and product screenshots that are always plain white UI sitting inside the colored frame — the color is the wrapper, never the content.

## Steal-worthy details

- Display heading set at 0.90 line-height (72.2px type on 64.97px leading) with -1.73px tracking, so a three-line headline compresses into a single typographic mass rather than three sentences
- Primary CTA is deep green #046645 with a **pale lime** label #cdface rather than white — a two-tone button that reads as brand rather than default, at 38px tall, 11.55px radius, 14.4px/500 with 10/17px padding
- The primary/secondary pair shares one geometry: same height, same radius, same label size; the secondary is just a pale mint fill with dark green text, and a soft lime halo bleeds out from behind the primary to mark which one is the default
- Media chrome is a gradient pad, not a border: the white video card sits inside an ~18px-radius block of lime → mint → lilac → cyan mesh with roughly 45px of gradient visible on every side
- Every section opens with the same capsule label — a pale tint of that section's color, 14px/500 text, and a filled circular arrow disc pinned to the right end of the pill
- Customer logos are flattened to a single mid-gray and set on one baseline, so the proof strip reads as texture and never competes with the CTA above it
- Feature bento where each cell carries its own pastel ground, a matching colored icon, and a `+` disc in the top-right corner — a wide cell paired with a narrow one on the first row, three equal cells on the second — while the screenshots inside stay plain white UI
- Full-bleed color slabs are inset ~16px from the page edge and rounded at the top corners, so the white ground still frames them; one lilac, one blue-to-violet with white type and white app tiles
- Testimonial carousel deliberately peeks: cards bleed past both viewport edges at partial opacity and the pagination uses circular dots with the active one stretched into a colored pill

## Style recipe

Build on a near-white ground (`#fdfdfd`) with near-black ink (`#0b1f18`-ish) and one geometric grotesque for everything — Matter, or Aeonik/General Sans as a substitute. Type scale: display 72px/65px at -0.024em, weight 500; section head 47px/42px at -0.024em, weight 500; card title 21.7px/24px, weight 500; body 21.7px/28px, weight 400, normal tracking; micro 12.6px; control label 14.4px, weight 500. Never go above weight 500 — the tight tracking, not the weight, is what gives headings authority.

Color: one deep anchor (`#046645`) for every primary action and for heading accents, and a pastel family for surfaces — mint `#c8e5de`, lime `#bbf69f`, lilac `#dcb6fd`, cyan `#93e6ea`, plus a cream. Pastels only ever appear as *grounds* — card fills, section slabs, gradient pads, pill backgrounds — and never as text or as UI inside a product screenshot. Reverse the CTA's contrast on purpose: a dark green ground with a `#cdface` lime label, not white.

Geometry: two radii and nothing between them — ~11.5px on controls, pills and inputs; ~18px on cards, media frames and section slabs. Controls are small (38px tall, 10px/17px padding), which reads as competent rather than consumer. Borders are almost absent: separate things with a tint change or 1px of the card color darkened, and let the pastel do the work. Shadows are near-zero — at most a wide, very soft ambient shadow under a floating media card.

Rhythm: alternate white sections against full-bleed color slabs, inset the slabs ~16px from the viewport edge and round their corners so white always frames color. Open every section with a capsule label — pale tint of that section's hue, 14px/500 text, circular arrow disc on its right end — then a section head, then a one-sentence deck at body size. Compose features as a bento: one wide plus one narrow on the first row, three equal on the second, each cell its own pastel with a matching icon and a `+` affordance in the top-right corner.

Two moves make it recognizable: **wrap, don't tint** — a screenshot always stays plain white UI inside a gradient or pastel frame, so the product looks calm while the page looks alive; and **gradient as chrome** — where another site would draw a border, put a soft multi-stop mesh (lime → mint → lilac → cyan) behind the element with ~45px of it showing. Motion is restrained: 150–250ms ease-out fades and small rises on scroll, carousel cards that peek in from both edges, and a pagination dot that stretches into a pill for the active slide.