Typography
scale ratio 1.351- Matterdisplay + body400 500100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Matter | 72.19px | 500 | 0.9 | -0.024em |
| headline | Matter | 46.92px | 500 | 0.9 | -0.024em |
| title | Matter | 21.66px | 500 | 1.1 | -0.024em |
| body | Matter | 16.24px | 400 | 1.3 | 0em |
| body-sm | Matter | 12.63px | 500 | 1.3 | 0em |
| label | Matter | 16.24px | 500 | 1.2 | 0em |
Type scale
Aa7Aa11Aa12.5Aa14.5Aa16Aa18Aa19Aa21.5Aa47Aa72
- Body size
- 16px / 1.3
- Display size
- 72.19px
- Display tracking
- -0.024em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.41:1
- Muted on bg
- 7.42:1
- Accent on bg
- 5.65:1
- Dark mode
- none
Declared accent tokens
- --_sops---buttons--primary-color#E356A2not on page
Space, shape & depth
Spacing scale
- 3
- 3.5
- 4.5
- 6.5
- 7
- 8.5
- 10
- 11
- 11.5
- 14.5
- 18
- 21.5
- 29
- 36
Corner radii
1321.543.5pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 126px
Components
exact computed valuesbutton-primary
Request a demo
- backgroundColor
- #027653
- textColor
- #C4F7CA
- rounded
- 11.6px
- padding
- 10.1px 17.3px
- height
- 37.5px
- fontFamily
- Matter
- fontSize
- 14.44px
- fontWeight
- 500
button-secondary
Take a tour
- backgroundColor
- #C4F7CA
- textColor
- #027653
- rounded
- 13px
- padding
- 13px 26px
- height
- 45.5px
- fontFamily
- Matter
- fontSize
- 16.24px
- fontWeight
- 500
card
- rounded
- 21.7px
- padding
- 7.2px
- backgroundColor
- #FFFFFF
- shadow
- rgba(0, 0, 0, 0) 0px 64px 64px -32px, rgba(0, 0, 0, 0) 0px 32px 32px -16px, rgba(0, 0, 0, 0) 0px 16px 16px -8px, color(s
Layout & motion
- Container
- 1300px
- Grid columns
- 2
- Hero
- split
- Navigation
- top-sticky
- Page height
- 7,105px
- Easing
- cubic-bezier(0.165, 0.84, 0.44, 1)
- Durations
- 200ms 300ms 500ms 800ms
- Transitions
- 226
- Keyframes
- 1
- Stack
- webflow, gsap, jquery, segment, google-tag-manager, cloudflare
Page sections (10)
section labels are heuristic
01nav
02heroPeople + AI: Succeeding Together
03features?High-performing teams are built here
04feature detail?Unblock work and unlock potential with your personal AI Agent
05features?Build high performance through everyday habits
06testimonialsTrusted by top performers
07logosIntegrate everything. Align everyone.
08features?Power your high-performing organization
09cta?Your people are your business
10footer
How Lattice compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72.2px: larger than 76% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 69% of indexed sites (median 1.28×).
- Container
- 1300px: wider than 70% of indexed sites (median 1242px).
- Text contrast
- 16.4:1: lower than 64% of indexed sites (median 17.6:1).
- Page length
- 7,105px: shorter than 61% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Matter
- One of 2 indexed sites that load Matter (1%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Lattice use?
Lattice uses Matter for headings and body text.
What are Lattice's brand colors?
Lattice's website uses a light scheme: background #FFFFFF, surface #FCF6D9, text #1A1F2E, muted text #50565D.
How is Lattice's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.3 line height, and the page container is 1300px wide.
