Web Design System 2.0

Product project

Typography → Headings

Headline

Headline

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6

Typography → Paragraphs

Body Large

Large body lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body (All Pages)
All Paragraphs

Default body lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body Small

Small body lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body XSmall

Small body lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Bolds

This is a bold text

Typography → Labels & Miscellaneous

Label
Label Large
This is a large label
Label
This is a default label
Label
Label Small
This is a small label
Tag
This is a tag
Caption
This is a Caption
Breadcrumb
Performance
Reviews
Product Label
Performance
All Unordered Lists
All Lists Items
  • Item 1
  • Item 2
  • Item 3
Checklist
Checklist Item
  • Default
  • Green
  • No
  • Default
  • Green
  • No
  • Default
  • Green
  • No
  • Default
  • Green
  • No
All Block Quotes
Block Quote

Colors → Backgrounds

Color BG Nocturne
Color BG Mill
Color BG Moon
Color BG Blizzard
Color BG Forest
Color BG Aqua
Color BG Teal
Color BG Breeze
Color BG Snow
Color BG Ghost

Colors → Texts

Color TXT Nocturne
This is a coloured text
Color TXT Mill
This is a coloured text
Color TXT Moon
This is a coloured text
Color TXT Blizzard
This is a coloured text
Color TXT Forest
This is a coloured text
Color TXT Aqua
This is a coloured text
Color TXT Teal
This is a coloured text
Color TXT Breeze
This is a coloured text
Color TXT Snow
This is a coloured text

UI → Buttons

Button
Button
Button
Secondary
Button
Button
Tertiary
Link
Button
Small
Button
Button
Secondary
Small
Button
Button
Tertiary
Small
Link

UI → Cards

Photo of Stephanie Mardell

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Photo of Stephanie Mardell

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

UI → VS Table

Lattice

Compare

Item 1

Limited
Limited

Item 2

Limited
Limited

UI → FAQ

Question

Answer

UI → Charts

Statistic
91%
84%
54%
46%

UI → Tabs

Label

Heading

Paragraph

Link
Label

Heading

Paragraph

Link
Label

Heading

Paragraph

Link
Label

Heading

Paragraph

Link

Layouts → Grids

Grid 1 Col
Grid 1 Col
Grid 2 Col
Grid 2 Col
Grid 2 Col
1/1
Grid 2 Col
1/1
Grid 2 Col
1/3
Grid 2 Col
1/3
Grid 2 Col
2/3
Grid 2 Col
2/3
Grid 3 Col
Grid 3 Col
Grid 3 Col
Grid 4 Col
Grid 4 Col
Grid 4 Col
Grid 4 Col
Grid 5 Col
Grid 5 Col
Grid 5 Col
Grid 5 Col
Grid 5 Col
Grid 6 Col
Grid 6 Col
Grid 6 Col
Grid 6 Col
Grid 6 Col
Grid 6 Col

Layouts → Spacing

Divider
Small
Divider
Divider
Large

Layouts → Margins

Margin Auto
Margin XSmall
Margin Small
Margin Medium
Margin Large
Margin XLarge
Margin XXLarge

Forms → UI

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By submitting your information, you agree to Lattice's Terms of Service and Privacy Policy. You can opt out anytime.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By submitting your information, you agree to Lattice's Terms of Service and Privacy Policy. You can opt out anytime.

Forms → Marketo

By submitting your information, you agree to Lattice's Terms of Service and Privacy Policy. You can opt out anytime.
Label Icon

Assets → Aspect Ratio

Image Ratio Wrapper
Image Ratio 4:5 ↕️
Photo of Stephanie Mardell
Image Ratio Wrapper
Image Ratio 1:1 ⏹
Photo of Stephanie Mardell
Image Ratio Wrapper
Image Ratio 5:4 ↔️
Photo of Stephanie Mardell
Image Ratio Wrapper
Image Ratio 16:9 ↔️
Photo of Stephanie Mardell

Assets → Image Fit

Image Fit Cover
Photo of Stephanie Mardell
Image Fit Contain
Photo of Stephanie Mardell
Image Fit Ratio
Photo of Stephanie Mardell

Effects → Shadows

Shadow Small
Shadow Medium
Shadow Big

Symbols → Headers

Hero — Product
Performance

Heading

Paragraph

Button
Hero — Subproduct
Performance
Reviews

Heading

Paragraph

See Lattice

Symbols → Banners

Banner — Clients
Banner — G2
99% overall customer satifaction rating on G2

Symbols → Grids

Grid 2 Col
Label

Heading

Paragraph

Link
Label

Heading

Paragraph

Link
Grid 3 Col
Label

Heading

Paragraph

  • Item 1
  • Item 2
  • Item 3
Link
Label

Heading

Paragraph

  • Item 1
  • Item 2
  • Item 3
Link
Label

Heading

Paragraph

  • Item 1
  • Item 2
  • Item 3
Link
Grid 4 Col
Label

Heading

Paragraph

  • Item 1
  • Item 2
  • Item 3
Link
Label

Heading

Paragraph

  • Item 1
  • Item 2
  • Item 3
Link
Label

Heading

Paragraph

  • Item 1
  • Item 2
  • Item 3
Link
Label

Heading

Paragraph

  • Item 1
  • Item 2
  • Item 3
Link
Featured Resource

Symbols → Quotes

Testimonial

Powering strategic people teams

Lattice supports each of us to focus on doing our best work and not be burdened with clunky systems that subscribe to outdated notions of performance management.

Katelin Holloway  —  Founding Partner, 776
“I don’t know what we would have done without Lattice. There’s no way we could have managed shifting to remote without it.”
Photo of Julia Karnezis
Julia Karnezis
Director of People Experience — TopSpot
Melisa Guerbi
Director of People and Culture
“With Lattice, we found the opportunity to maintain a pulse on how employees are feeling across all our locations while keeping them engaged and focused on their growth and development.”
Photo of Nicole Hopkins
“We know your people are everything. That’s why our Customer Experience Team is committed to making sure that you feel welcomed and successful from the moment you begin with Lattice so that you can focus your time and energy on the things that matter the most - building the best workplace and culture for your people.”
Gillian Heltai —  Chief Customer Officer

The best places to work use Lattice

Learn why 4,250+ leaders use Lattice

We've seen completion rates for performance reviews increase over time — cycle upon cycle — because of Lattice.”

Tara Mansfield
People Exp. Director
Monzo Bank
1,500 employees

I would tell other HR professionals… if you’re working on performance strategies with senior leadership just get Lattice. It will solve everything. Literally.”

Marvin Au
People Business Partner
Zeus Living
250+ employees

We never had a tool that made it easy to facilitate development… Lattice Grow is the missing piece to holistic talent management.”

Nicole Hopkins
Director of People Operations
Webflow
170+ employees

Lattice collected our feedback directly. As a customer, it was great. It made us feel like they were building the feature just for us.”

Kae Bandoy
VP of People Development
Third Bridge
900+ employees

We ultimately we went with Lattice because it was simple and easy to use for admins and users.”

Lauren Yee
People Coordinator
Rainforest
100+ employees

Symbols → Videos

Video — Full-width
Video — Offset
Video — Story