Retool Design System

Color Palette

Background Colors

Light Gray

#E9EBDF · ×3138

Black

#000000 · ×449

Dark Gray

#282522 · ×195

Dark Gray 2

#433E38 · ×129

Dark Gray 3

#151515 · ×127

Mid Gray

#8B867F · ×86

Dark Gray 4

#242424 · ×11

Light Green

rgba(233,235,223,.12)

White 2

rgba(247,248,244,.6)

Light Yellow

rgba(233,235,223,.063)

Dark Cyan

#0E352C

Dark Gray 6

#0E0E0E

Text Colors

White

#FFFFFF · ×318

Light Gray 2

#CBCCC4 · ×193

Light Gray 3

rgba(233,235,223,.4)

Light Gray 6

#B6B8AF

Border Colors

Light Gray 4

rgba(233,235,223,.2)

Dark Gray 5

rgba(21,21,21,.12)

Fill & Gradient Colors

Light Gray 5

#DED9D3

Light Blue

#B0CCEA

Red

#E8765E

Blue

#518DD2

Light Blue 2

#D8E6F3

Typography

Primary · pxGroteskFont

pxGrotesk

Build internal tools faster. From database queries to full-featured apps.

Light · 300 Regular · 400 Semi · 570

Mono · ui-monospace

ui-monospace

SELECT * FROM users WHERE active = true LIMIT 50;

Regular · 400 saansFont

Build faster

6xl · 54.10px · w570 · line-height: 56.80px · tracking: −1.08px

Build internal tools

5xl · 42.10px · w570 · line-height: 44.20px · tracking: −0.42px

Ship powerful tools, faster than ever

3xl · 26.10px · w570 · line-height: 27px · tracking: −0.30px

Connect your database, API, or any data source in minutes. Build and share internal tools using a drag-and-drop interface.

xl · 18px · Regular · line-height: 25.26px · tracking: −0.21px

Retool is the fastest way to build internal software. Connect to any database or API and build CRUD apps, dashboards, and admin panels.

base · 14px · Regular · line-height: 24px · tracking: +0.14px

Last deploy 3 minutes ago · 12 components · 3 queries

xs · 12px · Regular · line-height: 21px · tracking: +0.28px

COMPONENTS · QUERIES · RESOURCES

2xs · 10.82px · w570 · line-height: 12.52px · tracking: +0.28px

Line Heights

Tight

12.52px

Snug

14.4px

Normal

15.03px

Relaxed

16px

Loose

16.8px

lh-6

21px

lh-7

24px

lh-8

25.26px

lh-9

27px

lh-10

31.6px

lh-11

44.20px

lh-12

56.80px

Letter Spacing — 12 tokens (bidirectional)

Retool

Tight

−1.08px · hero display

Build tools

Normal

−0.42px · headings

COMPONENTS

ls-12

+0.28px · labels

Spacing

Spacing Scale

29 tokens — 1px → 430.5px (non-linear, modular-scale derived)

3.2

9.9

31.5

112

120

160

176

430.5

Borders

Border Radii

4px

6px

8px

xl (Capsule)

200px

2xl (Pill)

9999px

The 200px capsule radius is notable — used for large pill-shaped CTAs distinct from the 9999px full-pill. Only 5 tokens cover UI components (4–8px) and pill shapes (200px, 9999px).

Border Width

Hairline

1px · ×107

Single 1px hairline used throughout. The shadow-sm token uses a 1px inset as a sage-tinted border substitute on dark surfaces, complementing the border-width token.

Shadows / Elevation

Shadow Tokens

2 tokens

×1

rgba(233,235,223,.2) 1px inset — sage-tinted outline ring on dark surfaces

×1

rgba(0,0,0,.12) 1px 2px + 0.5px black ring — crisp card elevation

Elevation hierarchy is primarily achieved through background color stepping — #151515 → #1e1b18 → #282522 — rather than drop shadows alone.

Z-Index

Layer	Value	Usage
z-1	6	Base interactive content, sticky table headers
z-2	10	Floating labels, anchored tooltips
z-3	20	Navigation bars, dropdowns
z-4	1500	Modal backdrops, drawer overlays
z-5	2000	Modal dialogs, full-screen panels
z-6	9999	Toast notifications, global alerts

Notable gap: z-3 (20) → z-4 (1500). Normal UI chrome in single/double digits; modal system chrome jumps to four digits. Maximum at 9999 ensures toast notifications always appear over user-built Retool components.

Breakpoints

📱

400px

📲

SM / MD

543–544px

💻

LG / XL

640–768px

🖥️

3XL → BP-16

900–1920px

16 breakpoints from 400px to 1920px. Paired floor/ceiling values (543/544, 767/768, 1279/1280px) for precise boundary handling. Max at 1920px reflects Retool's focus on wide-screen dashboard layouts. A 26-column grid system (--dvt-grid-items: 26) scales fluidly across all breakpoints with 4 named cubic-bezier easing functions.

Opacity

Opacity Tokens

4 tokens — 40% → 75%

opacity-40

40% · ×4

opacity-50

50% · ×3

opacity-60

60% · ×6

opacity-75

75% · ×46

Opacity-75 (×46) dominates — used for image overlays and disabled state dimming. Scale starts at 40%; lighter transparency is handled via RGBA color values in the raw token layer.

Accessibility — Contrast Ratios

WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1

⚠️ White and light gray text on the brand sage-green (#E9EBDF) all Fail — confirming that #E9EBDF is a background for dark content, not a canvas for light text.

Text Color	Background Color	Ratio	WCAG Rating
White	Light Gray (#E9EBDF)	1.21:1	Fail
White	Black (#000)	21:1	AAA
White	Dark Gray (#282522)	15.24:1	AAA
White	Dark Gray 2 (#433E38)	10.58:1	AAA
White	Dark Gray 3 (#151515)	18.26:1	AAA
Light Gray 2 (#CBCCC4)	Light Gray (#E9EBDF)	1.34:1	Fail
Light Gray 2 (#CBCCC4)	Black (#000)	12.97:1	AAA
Light Gray 2 (#CBCCC4)	Dark Gray (#282522)	9.42:1	AAA
Light Gray 2 (#CBCCC4)	Dark Gray 2 (#433E38)	6.54:1	AA
Light Gray 2 (#CBCCC4)	Dark Gray 3 (#151515)	11.28:1	AAA
Light Gray 3 (40%)	Black (#000)	17.37:1	AAA
Light Gray 3 (40%)	Dark Gray (#282522)	12.61:1	AAA
Light Gray 6 (#B6B8AF)	Dark Gray (#282522)	7.59:1	AAA
Light Gray 6 (#B6B8AF)	Dark Gray 2 (#433E38)	5.27:1	AA
Light Gray 6 (#B6B8AF)	Dark Gray 3 (#151515)	9.1:1	AAA

CSS Variables Reference

Background Colors

Light Gray (Sage)--color-light-gray#E9EBDF

Black--color-black#000000

Dark Gray--color-dark-gray#282522

Dark Gray 2--color-dark-gray-2#433E38

Dark Gray 3--color-dark-gray-3#151515

Mid Gray--color-mid-gray#8B867F

Dark Gray 4--color-dark-gray-4#242424

Light Green--color-light-greenrgba(233,235,223,.12)

Dark Cyan--color-dark-cyan#0E352C

Dark Gray 6--color-dark-gray-6#0E0E0E

Text, Border & Fill

White--color-white#FFFFFF

Light Gray 2--color-light-gray-2#CBCCC4

Light Gray 3--color-light-gray-3rgba(233,235,223,.4)

Light Gray 6--color-light-gray-6#B6B8AF

Border Light--color-light-gray-4rgba(233,235,223,.2)

Border Dark--color-dark-gray-5rgba(21,21,21,.12)

Light Gray 5--color-light-gray-5#DED9D3

Light Blue--color-light-blue#B0CCEA

Red--color-red#E8765E

Blue--color-blue#518DD2

Light Blue 2--color-light-blue-2#D8E6F3

Typography

pxGroteskFont--font-family-2pxGrotesk

System sans--font-family-baseui-sans-serif

Mono--font-family-3ui-monospace

saansFont--font-family-4saansFont

Light--font-weight-light300

w380--font-weight-w380380

Regular--font-weight-regular400

w570--font-weight-w570570

2xs--font-size-2xs10.82px

xs--font-size-xs12px

sm--font-size-sm12.52px

base--font-size-base14px

lg--font-size-lg16px

xl--font-size-xl18px

2xl--font-size-2xl21.05px

3xl--font-size-3xl26.10px

4xl--font-size-4xl30.10px

5xl--font-size-5xl42.10px

6xl (Hero)--font-size-6xl54.10px

Borders, Motion & Layers

Hairline--border-width-hairline1px

sm--radius-sm4px

md--radius-md6px

lg--radius-lg8px

xl (Capsule)--radius-xl200px

2xl (Pill)--radius-2xl9999px

Instant--duration-instant100ms

Fast--duration-fast200ms

Normal--duration-normal300ms

Slow--duration-slow400ms

Slower--duration-slower600ms

4 cubic-bezier easing in :root vars

opacity-40--opacity-4040%

opacity-50--opacity-5050%

opacity-60--opacity-6060%

opacity-75--opacity-7575%

UI Content--z-16

Tooltips--z-210

Navigation--z-320

Modal Backdrop--z-41500

Modal Dialog--z-52000

Toast / Alerts--z-69999

Design System Preview · Retool (Dark) · Generated 19/04/2026 · 23 color tokens · 11 font-size · 4 font-family · 4 font-weight · 12 line-height · 12 letter-spacing · 29 spacing · 5 radius · 1 border-width · 2 shadow · 5 duration · 0 easing tokens · 6 z-index · 16 breakpoints · 4 opacity