Design system
01
Typography
Headlines
H1
Geist
72px / 72px
600 · Semibold
Build better.
H1 Medium
Geist
64px / 64px
600 · Semibold
Move faster.
H1 Small
Geist
56px / 60px
600 · Semibold
Your next big idea.
H2
Geist
48px / 56px
600 · Semibold
Make work flow.
H2 Medium
Geist
40px / 48px
600 · Semibold
Built for your team.
H2 Small
Geist
32px / 40px
600 · Semibold
One connected workspace.
H3
Geist
24px / 32px
600 · Semibold
Lorem Insights that move you forward.
H4
Geist
20px / 28px
600 · Semibold
Make every decision count.
H5
Geist
16px / 24px
600 · Semibold
Stay focused on what matters.
H6
Geist
14px / 20px
600 · Semibold
A clearer way to collaborate.
Text Styles
Lead Large
Geist
24px / 36px
400 · Regular
Bring your people, projects, and data into one seamless workspace. Spend less time managing tools and more time moving ideas forward.
Lead
Geist
20px / 30px
400 · Regular
From the first idea to the final launch, give your team the clarity and flexibility to do its best work.
Body Large
Geist
18px / 28px
400 · Regular
Your workspace should work the way you do. Organize projects, automate the busywork, and keep everyone aligned without adding another layer of complexity.
Body
Geist
16px / 26px
400 · Regular
Create a shared space for your team to plan, collaborate, and track progress. Connect your favorite tools, build repeatable workflows, and keep important details within reach.
Body Small
Geist
14px / 22px
400 · Regular
Set up your workspace in minutes. Invite teammates, assign roles, and manage permissions from one place. Every update stays in sync, so everyone has the context they need.
Caption
Geist
13px / 20px
400 · Regular
Last synced 2 minutes ago · All changes saved
Labels
Label XL
Geist
20px / 28px
500 · Medium
Workspace overview
Label Large
Geist
18px / 26px
500 · Medium
Team performance
Label Medium
Geist
16px / 24px
500 · Medium
Monthly recurring revenue
Label
Geist
14px / 20px
500 · Medium
Project settings
Label Small
Geist
13px / 20px
500 · Medium
Updated just now
Label XS
Geist
12px / 18px
500 · Medium
ACTIVE SUBSCRIPTION
Misc
Button Large
Geist
16px / 20px
500 · Medium
Get started
Button
Geist
14px / 1em
500 · Medium
Explore features
Button Small
Geist
12px / 16px
500 · Medium
View details
02
Color
Neutrals
100
Light #f2f2f2 / Dark #1a1a1a
Subtle neutral backgrounds and soft separators.
200
Light #ebebeb / Dark #1f1f1f
Subtle neutral backgrounds and soft separators.
300
Light #e6e6e6 / Dark #292929
Subtle neutral backgrounds and soft separators.
400
Light #ebebeb / Dark #2e2e2e
Muted surfaces, dividers and interface details.
500
Light #c9c9c9 / Dark #454545
Muted surfaces, dividers and interface details.
600
Light #a8a8a8 / Dark #878787
Muted surfaces, dividers and interface details.
700
#8f8f8f
Secondary text and medium-contrast UI elements.
800
#7d7d7d
Secondary text and medium-contrast UI elements.
900
Light #666666 / Dark #a1a1a1
High-contrast text and prominent neutral elements.
1000
Light #171717 / Dark #ededed
High-contrast text and prominent neutral elements.
Surface
Surface Primary
Light #ffffff / Dark #000000
Primary background for content and UI surfaces.
Surface Secondary
Light #ffffff / Dark #0a0a0a
Secondary background and layered surfaces.
Surface Tertiary
Light #fafafa / Dark #1a1a1a
Subtle alternate background for nested surfaces.
Surface Elevated
Light #ffffff / Dark #1f1f1f
Cards, popovers and elevated interface surfaces.
Accent
Focus
#0072f5
Keyboard focus rings and focus indicators.
Info
Light #0072f5 / Dark #52a8ff
Informational messages and status indicators.
Success
Light #45a557 / Dark #62c073
Successful outcomes and confirmation states.
Warning
Light #a35200 / Dark #ff990a
Cautionary states and important notices.
Error
Light #e5484d / Dark #ff6166
Errors, destructive actions and validation alerts.
Border
Border Default
Light #ebebeb / Dark #2e2e2e
Standard outlines and low-contrast separators.
Border Strong
Light #c9c9c9 / Dark #454545
More prominent borders and emphasized divisions.
Text
Text Primary
Light #171717 / Dark #ededed
Primary body copy and high-emphasis headings.
Text Secondary
Light #666666 / Dark #a1a1a1
Supporting copy and secondary information.
Text Tertiary
Light #8f8f8f / Dark #878787
Captions, hints and low-emphasis labels.
Text Inverse
Light #ffffff / Dark #0a0a0a
Text placed on contrasting or dark fills.
03
Spacing
4px
Extra extra small spacing for tight UI elements
8px
Very small spacing for micro gaps and fine adjustments
16px
Small spacing for compact layouts and grouped elements
24px
Default small spacing for UI components and cards
32px
Medium spacing for sections and layout breathing room
48px
Large spacing for clear separation between blocks
64px
Extra large spacing for major section separation
96px
Very large spacing for strong layout hierarchy
128px
Maximum spacing for hero sections and dramatic whitespace
04
Imagery
