#FBA41D
Sol Design System
Design atoms
meetsol.com
Colors
#F5EA5D
Sol Bright Yellow
#FEC512
Warm Yellow
#E84D00
Hot Orange
#FCFCF4
Cloud White
#F2F0E5
Warm Gray
#121619
Night Black
Spacing scale
| Token | Desktop | Mobile | Desktop sample | Mobile sample |
|---|---|---|---|---|
| space-xs | 8px | 8px | ||
| space-sm | 16px | 16px | ||
| space-md | 24px | 24px | ||
| space-lg | 48px | 32px | ||
| space-xl | 64px | 48px | ||
| space-2xl | 96px | 64px | ||
| space-3xl | 192px | 96px | ||
| space-4xl | 256px | 128px |
Grid
Desktop
Columns: 8 / Margin: 64px / Gutter: 8px
Mobile
Columns: 4 / Margin: 16px / Gutter: 8px
Type Scale: Desktop
desktop-display-lg-semibold
Family: Grenette Pro
Weight: SemiBold
Size: 72px
Line Height: 110%
Letter Spacing: -1%
Run at the pace...
desktop-display-lg
Family: Grenette Pro
Weight: Light
Size: 72px
Line Height: 110%
Letter Spacing: -1%
Today’s HR...
desktop-display-lg-italic
Family: Grenette Pro
Weight: Light Italic
Size: 72px
Line Height: 110%
Letter Spacing: -1%
Sol is an agentic...
desktop-display-md
Family: Grenette Pro
Weight: Light
Size: 56px
Line Height: 110%
Letter Spacing: -1%
Investors & Advisors
desktop-heading-lg
Family: Grenette Pro
Weight: Light
Size: 40px
Line Height: 110%
Letter Spacing: -1%
Not built for the future
desktop-heading-sm
Family: Grenette Pro
Weight: SemiBold
Size: 20px
Line Height: 110%
Letter Spacing: 0
Agentic by Design
desktop-body-lg
Family: Basis Grotesque Pro
Weight: Regular
Size: 22px
Line Height: 130%
Letter Spacing: 0
Built by the team that knows what it takes to create an enterprise HR foundation, and designed alongside the people leaders shaping the future of work.
desktop-body-sm
Family: Basis Grotesque Pro
Weight: Regular
Size: 18px
Line Height: 130%
Letter Spacing: 0
Replace your HRIS with an agentic HR foundation, built for change, designed to scale, and reimagined with AI from the ground up.
desktop-body-sm-bold
Family: Basis Grotesque Pro
Weight: Bold
Size: 18px
Line Height: 130%
Letter Spacing: 0
Replace your HRIS with an agentic HR foundation, built for change, designed to scale, and reimagined with AI from the ground up.
desktop-cta
Family: Basis Grotesque Pro
Weight: Regular
Size: 16px
Line Height: 110%
Letter Spacing: 0
Sign up for early access / Join us
desktop-label
Family: Grenette Pro
Weight: Regular
Size: 14px
Line Height: 110%
Letter Spacing: 2%
Our Story / Our Product / The Team / Contact
desktop-label-mono
Family: Basis Grotesque Mono Pro
Weight: Regular
Size: 14px
Line Height: 120%
Letter Spacing: 4%, uppercase
Our Story / Our Product / The Team / Contact
Type Scale: Mobile
mobile-display-lg-semibold
Family: Grenette Pro
Weight: SemiBold
Size: 48px
Line Height: 110%
Letter Spacing: -1%
Run at the pace...
mobile-display-lg
Family: Grenette Pro
Weight: Light
Size: 48px
Line Height: 110%
Letter Spacing: -1%
Today’s HR...
mobile-display-lg-italic
Family: Grenette Pro
Weight: Light Italic
Size: 48px
Line Height: 110%
Letter Spacing: -1%
Sol is an agentic...
mobile-display-md
Family: Grenette Pro
Weight: Light
Size: 40px
Line Height: 110%
Letter Spacing: -1%
Investors & Advisors
mobile-heading-lg
Family: Grenette Pro
Weight: Light
Size: 32px
Line Height: 110%
Letter Spacing: -1%
Not built for the future
mobile-heading-sm
Family: Grenette Pro
Weight: SemiBold
Size: 20px
Line Height: 110%
Letter Spacing: 0
Agentic by Design
mobile-body-lg
Family: Basis Grotesque Pro
Weight: Regular
Size: 18px
Line Height: 130%
Letter Spacing: 0
Built by the team that knows what it takes to create an enterprise HR foundation, and designed alongside the people leaders shaping the future of work.
mobile-body-sm
Family: Basis Grotesque Pro
Weight: Regular
Size: 16px
Line Height: 130%
Letter Spacing: 0
Replace your HRIS with an agentic HR foundation, built for change, designed to scale, and reimagined with AI from the ground up.
mobile-body-sm-bold
Family: Basis Grotesque Pro
Weight: Bold
Size: 16px
Line Height: 130%
Letter Spacing: 0
Replace your HRIS with an agentic HR foundation, built for change, designed to scale, and reimagined with AI from the ground up.
mobile-cta
Family: Basis Grotesque Pro
Weight: Regular
Size: 16px
Line Height: 110%
Letter Spacing: 0
Sign up for early access / Join us
mobile-label
Family: Grenette Pro
Weight: Regular
Size: 13px
Line Height: 110%
Letter Spacing: 2%
Our Story / Our Product / The Team / Contact
mobile-label-mono
Family: Basis Grotesque Mono Pro
Weight: Regular
Size: 12px
Line Height: 120%
Letter Spacing: 4%, uppercase
Our Story / Our Product / The Team / Contact
Buttons / CTAs
Primary button
Fill: Sol Bright Yellow
Text: Night Black
Height: 48px
Padding X: 48px / 32px mobile
Radius: Pill / 999px
Type: cta
Hover: Hot Orange / Night Black
Secondary button
Fill: Transparent
Text: Night Black
Height: 48px
Padding X: 48px / 32px mobile
Radius: Pill / 999px
Type: cta
Hover: Hot Orange / Night Black
Radius
Cards / radius-lg / 64px
Buttons/pills / radius-pill / 999px