DESIGN.md — Retool

Overview

Retool's design system is uniquely dual-purpose: the builder interface is dense and utilitarian, while the apps built with it should feel clean and user-friendly. An orange accent injects energy into an otherwise neutral gray foundation, reflecting the speed of internal tool development.

Colors

Primary Palette

Typography

Components

Component Tray

• Left panel grid of draggable components
• Categories: Layout, Input, Display, Data
• Search with instant filter

Query Editor

• Bottom panel, tabbed (SQL, REST, GraphQL, JS)
• Syntax-highlighted code editor
• Run button in orange, results table below

Property Inspector

• Right sidebar, contextual to selected component
• Tabs: General, Interaction, Advanced
• Dynamic value inputs with {{ }} binding syntax

Do's and Don'ts

Do

• Use orange for primary builder actions (Run, Save, Deploy)
• Keep the builder UI dense — power users expect it
• Support dark mode for long building sessions

Don't

• Don't style the builder to look like the apps it builds
• Don't use orange for destructive actions — reserve red
• Don't hide the query panel by default