Retool | Build internal software better, with AI.

DesignScan preview · https://retool.com · 2026-06-13

Colors

primary#518dd2
on-primary#111111
secondary#e9ebdf
on-secondary#151515
primary-hover#4b81bf
background#151515
text#e9ebdf
accent-1#cbccc4
accent-2#f7f8f4
on-accent-2#111111
border#433e38
muted-surface#242424
error#f15264
success#52bb9d
warning#e0a24e

Typography

display72px · 380 · lh 1.2
The quick brown fox jumps
display-4848px · 380 · lh 1.2
The quick brown fox jumps
headline-lg36px · 380 · lh 1.2
The quick brown fox jumps
headline-lg-3232px · 380 · lh 1.2
The quick brown fox jumps
headline-sm24px · 380 · lh 1.2
The quick brown fox jumps
title18px · 380 · lh 1.2
The quick brown fox jumps
body-lg16px · 400 · lh 1.5
The quick brown fox jumps
body14px · 400 · lh 1.5
The quick brown fox jumps
label12px · 400 · lh 1.5
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl20px
2xl24px
3xl40px

Radius

xs4px
sm6px
md8px
lg20px
xl36px

Layout

sm640px
md768px
lg1024px
xl1200px
2xl1280px
3xl1440px
containermax-width 1280px

Elevation

sm
md

Components

button-primary · :hover #4b81bf
button-secondary
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
surface-muted
Subtle secondary surface — sidebars, sections, callouts.
link
Inline link example →
badge Badge
feedback messages
error · Something went wrong — please try again.
success · Saved. Your changes are live.
warning · Heads up — this action can't be undone.