Retool Design System

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 23 color 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 component 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.