lattice.com

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.

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.