Retool design system

Retool's website (retool.com) uses a dark interface with #e9ebdf as its primary color and saansFont as the main typeface, with pxGroteskFont alongside it. designlang measured 11 font sizes from 11.3846px to 68.9231px, 13 spacing values, 9 corner radii.

Captured 25 June 2026Dark UI2,200 elements read

Download tokens Read it yourself

Retool colors

The brand roles and neutrals retool.com renders, with how many elements use each one.

Brand colors

Primary#e9ebdf3,154 uses
Secondary#518dd22 uses
Accent#f7f8f413 uses

Neutrals

#151515355 uses
#ffffff348 uses
#cbccc4158 uses
#24242445 uses
#8b867f32 uses
#b6b8af12 uses
#0000006 uses
#d9d9d94 uses
#433e383 uses

Backgrounds

#151515
#000000
#e9ebdf
#242424

Text colors

#ffffff18.26:1 on #151515
#e9ebdf15.14:1 on #151515
#1515151:1 on #151515
#f7f8f417.12:1 on #151515
#cbccc411.28:1 on #151515
#2424241.18:1 on #151515
#8b867f5.06:1 on #151515
#b6b8af9.1:1 on #151515

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#151515`	`#f7f8f4`	17.12:1	AAA
`#e9ebdf`	`#242424`	12.87:1	AAA
`#e9ebdf`	`#0e352c`	11.13:1	AAA

Retool fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

saansFont: sans, most text (486 elements)
pxGroteskFont: sans, body (394 elements)

Body text: 22.4615px at weight 380, line height 26.9538px.

Weights in use: 400, 380, 300.

Type scale

Size	Weight	Line height	Tracking	Used on
68.9231px	300	72.3693px	-1.51631px	h1, span
56.9231px	300	59.7693px	-1.13846px	h2
44.9231px	300	47.1693px	-0.449231px	h2, h4
28.9231px	300	30.3693px	-0.289231px	span, h2
22.4615px	380	26.9538px	-0.224615px	span, svg, path, div
18px	300	27px	0.18px	span, svg, path, h2
16px	400	24px	normal	html, head, iframe, meta
14px	300	21px	0.14px	p, span
13.2308px	400	13.2308px	0.132308px	span, a, button, svg
12px	400	14.4px	0.12px	button, svg, g, rect
11.3846px	400	13.6615px	0.113846px	span

Spacing and radii

Spacing scale

1px
20px
24px
28px
32px
40px
56px
64px
71px
80px
120px
158px
384px

Corner radii

4px
8px
12px
16px
20px
24px
36px
50px
pill

Pill-shaped controls are a large share of the rounded elements. 3 distinct box shadows.

Motion

The motion reads as mixed.

Durations

xs: 100ms
sm: 200ms
md: 300ms
lg: 500ms

Easing

custom (153 uses): cubic-bezier(0.72, 0, 0.12, 1)
ease-out (3 uses): cubic-bezier(0.12, 1, 0.72, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

90/100, grade A

Components found: buttons (58), cards (7), links (138), navigation (33), footer (35), modals (1).

By category

Color Discipline	92/100
Typography Consistency	92/100
Spacing System	100/100
Shadow Consistency	100/100
Border Radius Consistency	80/100
Accessibility	100/100
CSS Tokenization	100/100

106 !important rules — prefer specificity over overrides
79% of CSS is unused — consider purging
3292 duplicate CSS declarations

Download the tokens

The files designlang wrote for retool.com. Run it yourself for a fresh read: npx designlang retool.com.

The core values as CSS variables

:root {
  --color-primary: #e9ebdf;
  --color-secondary: #518dd2;
  --color-accent: #f7f8f4;
  --color-background: #151515;
  --color-text: #ffffff;
  --color-neutral-1: #151515;
  --color-neutral-2: #ffffff;
  --color-neutral-3: #cbccc4;
  --color-neutral-4: #242424;
  --font-primary: "saansFont", sans-serif;
  --font-secondary: "pxGroteskFont", sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Read retool.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Spotify design system

Dark UI, SpotifyMixUI, #1ed760

Netflix design system

Dark UI, Netflix Sans, #e50914

Linear design system

Dark UI, Inter Variable, #e4f222

Raycast design system

Dark UI, Inter, #ff6363

Quick answers

What font does Retool use?

retool.com sets most of its text in saansFont (486 elements), with pxGroteskFont alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Retool's brand colors?

The brand roles on retool.com are primary #e9ebdf, secondary #518dd2 and accent #f7f8f4, on a #151515 background. The neutrals used most are #151515, #ffffff and #cbccc4.

How do I use the Retool design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang retool.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from retool.com's public pages on 25 June 2026, so it shows what the site renders, not Retool's internal source files. Retool is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of retool.com on 25 June 2026. Retool is a trademark of its owner; designlang is not affiliated with it. More: the full Retool brand kit, the token extraction guide and the markdown version of this page.