Design system
One foundation for the website, dashboard, and sign-in experience. Inter, MD3-inspired roles, and a 4px font-size grid with a 14px Label Medium exception and relative line heights.
Typography
Display, Headline, Title, Body, and Label. Each role has large, medium, and small sizes.
display-large · 56px / 1.2emYour ideas. Every perspective.
display-medium · 44px / 1.2emYour ideas. Every perspective.
display-small · 36px / 1.2emYour ideas. Every perspective.
headline-large · 32px / 1.2emYour ideas. Every perspective.
headline-medium · 28px / 1.2emYour ideas. Every perspective.
headline-small · 24px / 1.4emYour ideas. Every perspective.
title-large · 24px / 1.4emYour ideas. Every perspective.
title-medium · 20px / 1.4emYour ideas. Every perspective.
title-small · 16px / 1.4emYour ideas. Every perspective.
body-large · 16px / 1.4emYour ideas. Every perspective.
body-medium · 14px / 1.4emYour ideas. Every perspective.
body-small · 12px / 1.4emYour ideas. Every perspective.
label-large · 16px / 1.4emYour ideas. Every perspective.
label-medium · 14px / 1.4emYour ideas. Every perspective.
label-small · 12px / 1.4emYour ideas. Every perspective.
Color
Neutral, red, yellow, green, and blue shades 50–950. Semantic roles are shared by the website, dashboard and login.
neutral
red
yellow
green
blue
Theme roles
primaryon-primaryprimary-containeron-primary-containersurfaceon-surfaceoutlineerrorLabel Medium weights
Regular · 400
Medium · 500
Buttons
Filled, outlined, tonal, and text. Labels and icons align centrally; button dimensions follow their content and token padding.
Layout & spacing
Header Type 2: Container → Leading (logo + menu) / Trailing (account + CTA). Hero Type 1: Container → centered Section Header / Content. Section: Container → Section Header / Content. The outer section owns padding; the container only constrains width. Section Header: Frame → Eyebrow + Frame (Headline / Body), followed by actions.