A people management platform for HR teams. Fits HR SaaS, performance-management tools, employee-engagement apps, and people-platform landing page designs.
Screenshots of 7 pages from lattice.com: homepage, platform, solutions, Why Lattice, resources, pricing and company.
Design tokens
15 colors · 10 type stylesDeep green (#046645) primary on a pure white (#ffffff) canvas, set in Matter throughout. These values are read from the Lattice DESIGN.md in the Pass bundle, which carries all 15 color tokens, 10 type styles, the radius and spacing scales and the full component rules.
Three ways to ship a Lattice-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Lattice. All trademarks belong to their respective owners.
About Lattice
Home page hero
The home page opens on a teal gradient with a large white headline, "Manage people and their performance," a short line about simplifying HR operations, and two buttons: request a demo and a platform overview. Two review ratings, from G2 and Capterra, sit at the right as quick credibility. Below the hero, six white cards float over the gradient, each naming one module with a one-line promise and a small product preview: Performance, Compensation, HRIS, OKRs and Goals, Grow, and Engagement.
Proof and stories
A grey logo strip follows, under a line saying that more than 5,000 organizations trust Lattice. It leads into "Experience the power of strategic HR," a two-row carousel of use-case cards. Some cards link to customer stories with logos and team photos, while others link to product areas such as Goals, Analytics and Reviews. A resources section then offers four entry points: customer support, a people strategy group, a library and a community.
Footer as a map
The footer is unusually structured. It groups links by product area, industry, company size, role and resources, so a visitor can enter the site as a CEO, an HR leader, a people manager or an individual contributor. A small "coming soon" tag marks the HRIS module.
Performance page
The Performance page opens with "Drive performance when you need it most" and a looping product preview of a team calibration grid. Five small cards (performance reviews, 1:1s, feedback, praise and updates) act as tabs for the section below, which explains how review cycles can run annually, quarterly or by project. Further down, deep teal and violet gradient bands separate "for managers" and "for employees" blocks, each with a testimonial from a customer's head of people and a product panel such as a 1:1 agenda or a sentiment chart.
Solutions page for agencies
A solutions page for agencies uses a lighter style. A centered headline, "A creative solution for people management," sits over a team photo with small floating cards for feedback, goals and engagement. A logo strip of agencies follows, then a numbered list of benefits that starts with client feedback.
Based on full-page screenshots of lattice.com: the home page, the performance page and an agencies solutions page. Ratings and customer counts are the site's own and were not verified here. Pricing, company and resources pages were not reviewed. Check the live site before relying on specific details.
Related designs
Catalog Pass included
