# Retool design system: colors, fonts and tokens

> 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.

Source: https://retool.com, captured 25 June 2026. Page: https://designlang.app/design-system/retool

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#e9ebdf` | 3154 |
| Secondary | `#518dd2` | 2 |
| Accent | `#f7f8f4` | 13 |

Neutrals: `#151515`, `#ffffff`, `#cbccc4`, `#242424`, `#8b867f`, `#b6b8af`, `#000000`, `#d9d9d9`, `#433e38`

Backgrounds: `#151515`, `#000000`, `#e9ebdf`, `#242424`

## Fonts

- saansFont (sans), 486 elements
- pxGroteskFont (sans), 394 elements

## 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

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

## Radii

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

## Motion

Feel: mixed. Durations: 100ms, 200ms, 300ms, 500ms.

## Audit

Overall 90/100 (grade A).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/retool-com/retool-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/retool-com/retool-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/retool-com/retool-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/retool-com/retool-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/retool-com/retool-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/retool-com/retool-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/retool-com/retool-com-DESIGN.md)

Regenerate: `npx designlang retool.com`