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
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.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for