Retool
A dark, engineering-confident product interface built on a near-black canvas (#151515) with a bone-white primary action color (#e9ebdf) and the custom Saans display typeface set thin (weight 300) at large sizes with negative tracking. The system reads as serious developer-platform software — pill-shaped CTAs, prism/glass 3D hero artwork, light "AI prompt" cards floated over the dark field, monochrome logo walls, and pastel accent flecks that come from product chrome rather than brand color. Brand voltage comes from the thin large-scale Saans headline and the dark-on-light prompt card moments, not from saturated accents.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
72px · 300 · 1.05
The quick brown fox jumps
heading
24px · 380 · 1.2
The quick brown fox jumps
body
14px · 300 · 1.5
The quick brown fox jumps
button
16px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 40px | |
| xxl | 64px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 36px | |
| huge | 40px | |
| full | 9999px |
FAQ
- What colors does Retool use?
- Retool's core palette includes #e9ebdf, #cbccc4, #c8bfb5, #8b867f, #b6b8af. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Retool DESIGN.md.
- What font does Retool use?
- Retool's primary typeface is Saans. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Retool design system?
- A dark, engineering-confident product interface built on a near-black canvas (#151515) with a bone-white primary action color (#e9ebdf) and the custom Saans display typeface set thin (weight 300) at…