Skip to content

Retool Design System

Retool's deep #151515 canvas, saansFont headings and brand blue #518dd2 accent as a DESIGN.md, with components for internal-tool UIs in React and AI tools.

Get ProDownload DESIGN.md
Primary color
#518dd2
Typeface
saansFont
Shape
Sharp
Base radius
6px
Colors
13
Type tokens
10
Components
18
Spacing values
7

About Retool DESIGN.md

Curated by Dov Azencot, updated May 14, 2026. Source retool.com (opens in a new tab).

Retool’s homepage opens on a near‑black canvas (#151515) that stretches across the full viewport. The hero headline uses a 72px saansFont weight‑300 typeface in #e9ebdf, while the primary call‑to‑action button features the brand‑blue #518dd2 background, white text, and a full‑pill border radius. Below the fold the dark canvas persists, punctuated by light‑gray UI elements, a subtle border tone of #cbccc4, and a consistent use of the saansFont family for headings and body copy. The design system’s signature move is the use of hairline borders as a visual elevation cue, turning a 1px #cbccc4 stroke into a depth indicator for cards and inputs.

Inside this DESIGN.md file you will find 13 colors tokens grouped into primary, ink, body, muted, canvas, hairline, and six surface categories (base, muted, accent, success, warning, error, info). There are 10 typography tokens ranging from a 72px display style to a 12px footnote, 6 rounded values from 0px to 9999px, a spacing scale of seven single‑dimension steps (4px‑40px), and 18 components definitions covering buttons, cards, inputs, alerts, modals, tables, navigation links, and more. The token set follows the Google Labs specification for CSS custom properties, making it ready for import into Tailwind or CSS‑in‑JS workflows.

To use the file, import the JSON into a design‑token processor such as Claude, Cursor, or Copilot, then reference tokens directly in Tailwind config (e.g., theme.extend.colors.primary = '{colors.primary}') or as CSS variables (var(--primary)). Because the system balances a dark canvas with high‑contrast text and a disciplined spacing rhythm, it offers a reproducible visual language that other internal‑tool platforms rarely achieve, making Retool a compelling case study for token‑first design.

What makes it distinct

5 highlights

  1. Primary accentThe brand‑blue #518dd2 anchors CTA buttons, nav highlights, and focus rings, delivering a consistent signal across the UI.
  2. Ink contrastThe near‑white #e9ebdf supplies the dominant text color, ensuring legibility against the dark canvas without additional overrides.
  3. Rounded languageA full‑pill radius (9999px) on primary buttons creates a distinctive, approachable silhouette that differentiates action elements.
  4. Spacing hierarchyA modular scale from 4px to 40px structures padding and margins, allowing designers to compose layouts with predictable rhythm.
  5. Surface layeringA palette of muted grays (#242424, #0e0e0e, #433e38) defines background bands, while success, warning, and error surfaces (#233427, #4a2b11, #491f16) convey status clearly.

Live at retool.com

Retool in production, as captured. Scroll the window to see the whole page.

Visit retool.com (opens in a new tab)
Retool's website at retool.com

13 colors

Retool's system runs on #518dd2 as its primary voltage, used in 3 of 18 components. Type is set in saansFont across 10 tokens from 12px to 72px, weights 300–400. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.

Brand & Accent

Sparing, CTA-only voltage · 1

Surface

Page and card backgrounds · 8

Text

Headlines, body, captions · 3

Borders & Hairlines

Dividers, outlines, rules · 1

10 type tokens

Set in saansFont across 10 tokens, from 12px to 72px, weights 300–400. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-xl72px · weight 300 · lh 1.05 · tracking -1.584pxThe quick brown fox jumps over the lazy dog
  • display-lg60px · weight 300 · lh 1.05 · tracking -1.2pxThe quick brown fox jumps over the lazy dog
  • display-md48px · weight 300 · lh 1.05 · tracking -0.48pxThe quick brown fox jumps over the lazy dog
  • headline-lg36px · weight 300 · lh 1.05 · tracking -0.36pxThe quick brown fox jumps over the lazy dog
  • headline-md32px · weight 300 · lh 1.05 · tracking -0.32pxThe quick brown fox jumps over the lazy dog
  • body-lg24px · weight 380 · lh 1.2 · tracking -0.24pxThe quick brown fox jumps over the lazy dog
  • body-md18px · weight 300 · lh 1.5 · tracking 0.18pxThe quick brown fox jumps over the lazy dog
  • body-sm16px · weight 300 · lh 1.5 · tracking 0.16pxThe quick brown fox jumps over the lazy dog
  • caption14px · weight 400 · lh 1.14 · tracking 0.14pxThe quick brown fox jumps over the lazy dog
  • footnote12px · weight 400 · lh 1.2 · tracking 0.12pxThe quick brown fox jumps over the lazy dog

Radii and spacing

6 corner radii and 7 spacing values. Shape language: sharp, on a 6px base radius.

Radii6

  • none0px
  • sm4px
  • md6px
  • lg8px
  • xl12px
  • full9999px

Spacing7

  • xxs4px
  • xs8px
  • sm12px
  • md16px
  • base24px
  • lg40px
  • xl0px

18 components

Each rendered from its tokens (color, type, radius, padding) on Retool's own canvas.

  • Button Primary
    Button Primarybutton-primary
  • Button Secondary
    Button Secondarybutton-secondary
  • Card
    Cardcard
  • Input
    Inputinput
  • Nav Link
    Nav Linknav-link
  • Hero Heading
    Hero Headinghero-heading
  • Body Text
    Body Textbody-text
  • Badge
    Badgebadge
  • Alert Success
    Alert Successalert-success
  • Alert Warning
    Alert Warningalert-warning
  • Alert Error
    Alert Erroralert-error
  • Modal
    Modalmodal
  • Sidebar
    Sidebarsidebar
  • Footer
    Footerfooter
  • Table
    Tabletable
  • Dropdown
    Dropdowndropdown
  • Tooltip
    Tooltiptooltip
  • Pagination
    Paginationpagination

The system, in use

Retool's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Retool
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
RetoolA
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Retool design system FAQ

Retool's tokens, its components and how to use this DESIGN.md in your project.

What are the color tokens in the Retool DESIGN.md?

Retool's DESIGN.md has 13 color tokens: primary (#518dd2), ink (#e9ebdf), body (#cbccc4), muted (#b6b8af), canvas (#151515), hairline (#cbccc4) and 7 more. Every value is a quoted hex you can copy.

What is Retool's primary color hex code?

The color token `primary` is #518dd2, used by 3 components. The surface behind it is `canvas` (#151515).

How do I use Retool's colors in Tailwind CSS?

Map the tokens to your CSS variables: `primary` (#518dd2) to `--primary`, `canvas` (#151515) to `--background`, `ink` (#e9ebdf) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Retool's palette.

What is Retool’s primary brand color and where does it appear?

Retool’s primary brand color is the saturated blue #518dd2. It is defined in the CSS variable "--raw-blue-primary" and appears on interactive elements such as the active navigation item, the primary button background, and focus outlines for form controls. The same hue is used for link hover states and selected sub‑navigation items, providing a consistent visual anchor across the interface.

Which color serves as the dominant text (ink) and how is it applied in the Retool design system?

The dominant text color, referred to as ink, is #e9ebdf. It is applied to headings, body paragraphs, navigation links, and button labels throughout the site. The color is defined in variables like "--input-default-label-text" and "--nav-items-default-text", ensuring that all textual content maintains high contrast against the dark canvas while preserving a unified tonal quality.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Retool in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Retool.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Retool's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

Overview

Retool’s visual language revolves around a single disciplined move: Hairline-as-elevation. The system treats a 1 px #cbccc4 stroke as a depth cue, applying it to cards, inputs, and modal outlines to signal hierarchy without adding heavy shadows. Where most SaaS dashboards rely on layered gradients or drop‑shadows, Retool instead flips the conventional elevation model on its head, using subtle border tones to create a sense of stacking on a flat dark canvas. This approach reduces visual noise and keeps the interface crisp on high‑density screens.

Key Characteristics:

  • Dark canvas (#151515) provides a high‑contrast backdrop for white and light‑gray UI elements.
  • Primary accent (#518dd2) appears on interactive controls, navigation highlights, and focus rings.
  • Ink color (#e9ebdf) dominates all textual content, ensuring legibility against the dark background.
  • A modular spacing scale (4 px – 40 px) creates predictable padding and margin relationships.
  • Rounded language ranges from 0 px to a full‑pill radius, giving designers granular control over corner treatment.
  • Surface tokens (#242424, #0e0e0e, #433e38) define background bands for panels, cards, and sidebars.
  • Status surfaces (success #233427, warning #4a2b11, error #491f16) convey feedback with color alone.
  • Typography spans a 72 px display style down to a 12 px footnote, all anchored in the saansFont family for consistency.

The combination of these choices yields a UI that feels cohesive yet lightweight, allowing developers to assemble internal tools quickly while preserving a strong brand identity.

Known Gaps

  • The token set does not include a dedicated elevation token for shadows, which limits designers who prefer subtle drop‑shadows on top of the hairline‑as‑elevation approach.
  • No explicit dark‑mode toggle is provided; the system assumes a single dark canvas, making it harder to adapt the same tokens for a light‑theme variant.
  • The spacing scale lacks a true “auto” or fluid value, which can cause layout rigidity on very wide or narrow viewports.
  • Typography tokens do not expose a separate line‑height token for headings, requiring manual calculation when adjusting vertical rhythm.
  • Component definitions omit ARIA attributes and focus‑visible styles, leaving accessibility implementation to downstream developers.

More systems like this

Adobe, Boursorama, Bun and 23 more in Design & Creative Tools: each brand's colors, type and components in one file your AI agent builds from.

All 27 in Design & Creative Tools

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 7 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped