Home
DESIGN.mdStar on GitHub
Copied!

Retool

Build internal software better, with AI — the low-code platform for building powerful internal tools fast.

Colors
Brand
color-dark#151515Primary btn (light), bg (dark)
color-light#F7F8F4App background (light)
cream#E9EBDFPrimary btn (dark), text on dark
blue#518DD2Secondary outline, focus, selection
orange#E8765EAccent highlights
green#4D9987Success, confirmation
Surfaces
background#F7F8F4App background
surface#FFFFFFPanels, cards, canvas
surface-secondary#EDEDEAHover fills, headers
border#D8D5CCDividers, inputs
Text
text-primary#151515Body, headings
text-secondary#59554ESupporting, labels
text-muted#8B8780Placeholders, disabled
Semantic
error#EF4444
success#4D9987
warning#ECA438
Typography
saansFont (custom · ≈ Plus Jakarta Sans) — Display / Marketing
hero Build anywhere. Ship in Retool. 72px300lh 76px
display Apps that mean business 40px300
Px Grotesk (custom · ≈ DM Sans) — UI / Product
heading-lgApp builder18px600lh 1.3
heading-mdQuery editor15px600lh 1.4
heading-smComponent properties13px600lh 1.4
bodyStandard body text for interface copy13px400lh 1.5
labelField label11px500
captionCaption, metadata11px400
codeSELECT id, name FROM users WHERE active = true12pxmonolh 1.6
Components
Buttons
Form Inputs
Badges
Active Failed Pending Draft
Data Table
IDNameStatus
1Alice ChenActive
2Bob MuraiPending
3Carol SinghFailed
App Builder — Signature Component
Components
▦
Table
□
Button
≡
Text
⊟
Form
◱
Container
⌇
Chart
◳
Modal
☰
Select
⬚
Input
Users Dashboard
Preview Share
table1
IDNameEmailRoleStatus
1Alice Chenalice@co.ioAdmin Active
2Bob Muraibob@co.ioEditor Pending
3Carol Singhcarol@co.ioViewer Disabled
Inspect table1
Data source
Columns
Page size
Row height
Multiselect
Download CSV
Column resize
On row click
Spacing — 4px base
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
Guardrails
Do
  • Maximize information density — small text and tight spacing are features, not bugs
  • Use blue only for selection, focus rings, and secondary outlined actions — never as the primary CTA fill
  • Keep forms compact — Retool users are power users who read dense UIs
  • Use data tables as the default pattern for list data
  • Monospace for all query, formula, and transformer values
  • Keep border-radius at 4–6px — enterprise convention
Don't
  • Don't use decorative visuals, illustrations, hero gradients, or large white space
  • Don't animate canvas interactions — performance over delight
  • Don't use border-radius above 6px on any interactive element
  • Don't use more than one primary CTA per view
  • Don't show raw JS errors to the end user — wrap in readable messages
  • Don't override the canvas background — it's always white