Retool
An internal tool builder with a developer-native dark canvas (#1D1D1D) for the editor and white surfaces for deployed applications. Retool's primary accent is a distinctive orange (#EF5350 — actually a warm red-orange) paired with blue (#3D5AFE) for interactive components. The drag-and-drop builder uses a grid-based canvas where component panels dock left and right. The visual language is functional rather than beautiful — Retool trusts that internal tools don't need to look like consumer apps, they need to work fast and handle real data. Typography uses Inter at dense sizes throughout.
Color Tokens
version: alpha name: Retool description: "An internal tool builder with a developer-native dark canvas (#1D1D1D) for the editor and white surfaces for deployed applications. Retool's primary accent is a distinctive orange (#EF5350 — actually a warm red-orange) paired with blue (#3D5AFE) for interactive components. The drag-and-drop builder uses a grid-based canvas where component panels dock left and right. The visual language is functional rather than beautiful — Retool trusts that internal tools don't need to look like consumer apps, they need to work fast and handle real data. Typography uses Inter at dense sizes throughout."
colors: primary: "#3D5AFE" on-primary: "#ffffff" primary-hover: "#3451E0" secondary: "#EF5350" ink: "#1A1A1A" ink-muted: "#6B7280" canvas: "#ffffff" surface-1: "#F8F8F8" surface-2: "#F0F0F0" border: "#E0E0E0" editor-bg: "#1D1D1D" editor-surface: "#262626" editor-border: "#3A3A3A" editor-ink: "#E0E0E0" component-selected: "#3D5AFE" query-success: "#22C55E" query-error: "#EF5350"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.02em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0 code: fontFamily: "JetBrains Mono, Monaco, Consolas, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.5
spacing: base: 8px scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
radius: sm: 2px md: 4px lg: 8px pill: 9999px
shadows: card: "0 1px 3px rgba(0,0,0,0.12)" elevated: "0 4px 12px rgba(0,0,0,0.15)" editor-elevated: "0 4px 20px rgba(0,0,0,0.5)" component-selected: "0 0 0 2px #3D5AFE"
motion: duration-fast: 80ms duration-base: 150ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Retool is where developers build internal tools — admin panels, CRUD interfaces, support dashboards — without writing full-stack frontend code. The builder itself is a dark-chrome environment (similar to IDE dark themes) that serious developers find natural. Deployed apps run on clean white, because the customer service rep or ops manager using the finished tool expects a regular web app. Blue (#3D5AFE) is the selection accent in the editor and the primary action color in apps; the visual consistency helps developers see how their selections translate to the finished product.
2. Color System
Builder (dark chrome):
- Background: #1D1D1D — IDE-like dark environment
- Selection: #3D5AFE — selected component, focused query
- Surface: #262626 — panel backgrounds, property inspector
Deployed apps (light):
- White canvas with standard light surfaces
- Blue primary for buttons and interactive states
- Red-orange (#EF5350) for delete actions and destructive warnings
3. Typography
Inter at 13px body — internal tools need maximum data density. Property inspector labels are 12px. Query editor uses JetBrains Mono. The small sizes are a feature, not a flaw: engineers building tools for engineers expect dense UIs.
4. Components & Patterns
- Canvas grid: 12px snap grid, component drop zones, blue selection outline on active component
- Component library: Left panel, searchable, organized by type (Table, Form, Button, Chart...)
- Property inspector: Right panel, contextual to selected component (data source, style, events)
- Query editor: Bottom panel, SQL/API/JS query with results table, run button
- Table component: The most-used Retool component — column config, sorting, pagination, inline actions
- JavaScript editor: Inline JS transform functions with Monaco editor, autocomplete on Retool globals
5. Spacing & Layout
Builder: left panel (240px) + canvas (flex) + right panel (280px). Bottom query panel: 200–400px adjustable. Canvas components: 12px grid snap. Property inspector inputs: 100% width within panel.
6. Motion & Interaction
Component selection is instant — no animation. Query execution shows a loading spinner in the component receiving data. Component drag shows a placement ghost. Property changes reflect immediately in the canvas. Speed over delight.