--- version: alpha name: "Retool" website: "https://retool.com" description: "Retool delivers a low‑code platform for internal tools, featuring a dark canvas (#151515), a brand‑blue primary hue (#518dd2), the saansFont typeface across headings, and a token‑driven design system that powers over 18 reusable React components." seo: title: "Retool Design System for React — #518dd2, saansFont, 18 components" metaDescription: "Retool’s design system uses a deep #151515 canvas, the saansFont family for headings, and a brand‑blue #518dd2 accent. It ships with a curated set of components for internal‑tool UIs." highlights: - "Primary accent — the brand‑blue #518dd2 anchors CTA buttons, nav highlights, and focus rings, delivering a consistent signal across the UI." - "Ink contrast — the near‑white #e9ebdf supplies the dominant text color, ensuring legibility against the dark canvas without additional overrides." - "Rounded language — a full‑pill radius (9999px) on primary buttons creates a distinctive, approachable silhouette that differentiates action elements." - "Spacing hierarchy — a modular scale from 4px to 40px structures padding and margins, allowing designers to compose layouts with predictable rhythm." - "Surface layering — a palette of muted grays (#242424, #0e0e0e, #433e38) defines background bands, while success, warning, and error surfaces (#233427, #4a2b11, #491f16) convey status clearly." tags: - "Design & Creative Tools" lastUpdated: "2026-05-14" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://retool.com" title: "Retool — official site" description: "Retool's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "what-is-retool-s-primary-brand-color-and" title: "What is Retool’s primary brand color and where does it appear?" answer: "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." - id: "which-color-serves-as-the-dominant-text" title: "Which color serves as the dominant text (ink) and how is it applied?" answer: "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." - id: "how-does-the-system-differentiate-surfac" title: "How does the system differentiate surface layers and status indicators?" answer: "Surface layers are expressed through a hierarchy of muted grays: #242424 for base panels, #0e0e0e for muted backgrounds, and #433e38 for accent sections. Status indicators use dedicated hues: success surfaces use #233427, warning surfaces use #4a2b11, and error surfaces use #491f16. Each status surface pairs with white text (#e9ebdf) to guarantee legibility, and the colors are referenced by variables such as \"--surface-accent-background-green\" and \"--surface-accent-background-red\"." - id: "what-typographic-scale-does-retool-emplo" title: "What typographic scale does Retool employ for headings and body text?" answer: "Retool’s typographic scale is anchored by the saansFont family for headings and body copy. Display sizes include 72px, 60px, 48px, and 36px, all at weight 300 with negative letter‑spacing to tighten large headlines. Body sizes range from 24px (display‑xl) down to 12px (footnote) using either saansFont or pxGroteskFont. Line heights are set to roughly 1.05‑1.2 times the font size, and letter‑spacing varies from –1.584px on the largest headings to normal on small UI labels." - id: "how-are-rounded-corners-expressed-and-wh" title: "How are rounded corners expressed and why are they important for Retool’s UI?" answer: "Rounded corners are defined by six radius tokens: none (0px), sm (4px), md (6px), lg (8px), xl (12px), and full (9999px). The full radius creates pill‑shaped primary buttons, reinforcing a friendly interaction affordance, while smaller radii are applied to cards, inputs, and modals to soften edges without compromising the overall angular aesthetic. This tokenized approach lets designers swap radii globally, ensuring visual consistency across component families." colors: primary: "#518dd2" ink: "#e9ebdf" body: "#cbccc4" muted: "#b6b8af" canvas: "#151515" hairline: "#cbccc4" surface-base: "#242424" surface-muted: "#0e0e0e" surface-accent: "#433e38" surface-success: "#233427" surface-warning: "#4a2b11" surface-error: "#491f16" surface-info: "#1b2e44" typography: display-xl: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 72px fontWeight: 300 lineHeight: 1.05 letterSpacing: "-1.584px" display-lg: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 60px fontWeight: 300 lineHeight: 1.05 letterSpacing: "-1.2px" display-md: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 48px fontWeight: 300 lineHeight: 1.05 letterSpacing: "-0.48px" headline-lg: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 36px fontWeight: 300 lineHeight: 1.05 letterSpacing: "-0.36px" headline-md: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 32px fontWeight: 300 lineHeight: 1.05 letterSpacing: "-0.32px" body-lg: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 24px fontWeight: 380 lineHeight: 1.2 letterSpacing: "-0.24px" body-md: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0.18px body-sm: fontFamily: "saansFont, \"saansFont Fallback\", sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0.16px caption: fontFamily: "pxGroteskFont, \"pxGroteskFont Fallback\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.14 letterSpacing: 0.14px footnote: fontFamily: "pxGroteskFont, \"pxGroteskFont Fallback\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.12px rounded: none: "0px" sm: "4px" md: "6px" lg: "8px" xl: "12px" full: "9999px" spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" base: "24px" lg: "40px" xl: "0px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" borderRadius: "{rounded.full}" padding: "{spacing.sm} {spacing.lg}" fontFamily: "{typography.body-sm.fontFamily}" fontSize: "{typography.body-sm.fontSize}" fontWeight: "{typography.body-sm.fontWeight}" button-secondary: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink}" borderRadius: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" fontFamily: "{typography.caption.fontFamily}" fontSize: "{typography.caption.fontSize}" fontWeight: "{typography.caption.fontWeight}" card: backgroundColor: "{colors.surface-base}" borderRadius: "{rounded.md}" padding: "{spacing.base}" textColor: "{colors.ink}" fontFamily: "{typography.body-md.fontFamily}" fontSize: "{typography.body-md.fontSize}" input: backgroundColor: "{colors.canvas}" borderColor: "{colors.hairline}" borderRadius: "{rounded.sm}" padding: "{spacing.xs}" fontFamily: "{typography.body-sm.fontFamily}" fontSize: "{typography.body-sm.fontSize}" textColor: "{colors.ink}" nav-link: textColor: "{colors.ink}" fontFamily: "{typography.caption.fontFamily}" fontSize: "{typography.caption.fontSize}" fontWeight: "{typography.caption.fontWeight}" hero-heading: textColor: "{colors.ink}" fontFamily: "{typography.display-xl.fontFamily}" fontSize: "{typography.display-xl.fontSize}" fontWeight: "{typography.display-xl.fontWeight}" lineHeight: "1.05" body-text: textColor: "{colors.body}" fontFamily: "{typography.body-md.fontFamily}" fontSize: "{typography.body-md.fontSize}" fontWeight: "{typography.body-md.fontWeight}" badge: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" borderRadius: "{rounded.full}" fontFamily: "{typography.caption.fontFamily}" fontSize: "{typography.caption.fontSize}" alert-success: backgroundColor: "{colors.surface-success}" textColor: "{colors.canvas}" borderRadius: "{rounded.sm}" alert-warning: backgroundColor: "{colors.surface-warning}" textColor: "{colors.canvas}" borderRadius: "{rounded.sm}" alert-error: backgroundColor: "{colors.surface-error}" textColor: "{colors.canvas}" borderRadius: "{rounded.sm}" modal: backgroundColor: "{colors.surface-muted}" borderRadius: "{rounded.lg}" padding: "{spacing.base}" textColor: "{colors.ink}" sidebar: backgroundColor: "{colors.surface-base}" width: "240px" textColor: "{colors.ink}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" padding: "{spacing.md}" table: borderColor: "{colors.hairline}" fontFamily: "{typography.body-sm.fontFamily}" fontSize: "{typography.body-sm.fontSize}" dropdown: backgroundColor: "{colors.canvas}" borderRadius: "{rounded.sm}" borderColor: "{colors.hairline}" tooltip: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink}" borderRadius: "{rounded.xl}" fontFamily: "{typography.caption.fontFamily}" fontSize: "{typography.caption.fontSize}" pagination: textColor: "{colors.ink}" activeBackground: "{colors.primary}" borderRadius: "{rounded.sm}" --- ## 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.