Colors
Surfaces
Text
Primary, secondary & accent
Borders, input & ring
Tag palette
Primitive ramps
Typography
Titles (serif)
The quick brown foxtext-title-xl · 30px
The quick brown foxtext-title-lg · 24px
Body
The quick brown foxtext-body-lg · 18px · 400
The quick brown foxtext-body-lg-semibold · 600
The quick brown foxtext-body-base · 16px · 400
The quick brown foxtext-body-base-medium · 500
The quick brown foxtext-body-sm · 14px · 400
The quick brown foxtext-body-sm-semibold · 600
Radius & elevation
Radius
Elevation
Design tokens
Type families
--font-sans
"Inter", ui-sans-serif, system-ui
--font-serif
"PT Serif", ui-serif, Georgia
Radius scale
--radius-sm
0.25rem
--radius-md
0.375rem
--radius-lg
0.5rem
--radius-xl
0.75rem
--radius-full
9999px
Motion
--duration-fast
100ms
--duration-base
200ms
--ease-out
cubic-bezier(.16,1,.3,1)
Icons
Buttons
Variants
Start recording
Secondary
Outline
Ghost
Delete
Sizes
Small
Medium
Large
Badges
Inputs
Email address
Share what you learned…
Pick a method
Controls
Email digest
Include closed studies
Daily
Weekly
Monthly
Feedback
Progress bars
Tabs
OverviewFindings
A high-level summary of the study.
Interview card
How do you typically approach a new design problem?
Start recording
Data list
Study name
User research Q4
Created
Jun 15, 2026
Status
Live
Participants
24 / 50
Charts
Bar list
Progress ring
User & org
Org switcher
AC
Acme Corporation
User inline
LM lydia@verso.com
JD jean@verso.com
A admin@company.io
Theme toggle
Light
Dark mode