Dark interfaceMeasured retool.com

Retool

A serious, builder-focused tool with a dark moody marketing site and a plain light workspace underneath.

This page is styled with Retool’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#151515
Page behind everything

Surface#242424
Cards, panels, menus

Text#E9EBDF
Headings and body

Muted text#CBCCC4
Secondary info

Line#8B867F
Dividers and outlines

Accent#0E352C
Main button, links, selection

On accent#E9EBDF
Text on the accent

Contrast

Text on background 15.1:1Muted on background 11.3:1Text on accent 11.1:1

Every colour found on their site

#E9EBDF#CBCCC4#151515#161616#F7F8F4#242424#D9D9D9#000000#8B867F

Typography

Headings use saansFont (company-only; shown here with the free look-alike Inter). Body text uses saansFont (company-only; shown with Inter).

h1	saansFont · 72px · 300 · -1.584px	Secure your vibe-coded apps
h2	saansFont · 48px · 300 · -0.48px	Apps that mean business
h3	saansFont · 48px · 300 · -0.48px	Build powerful apps from anywhere
h4	saansFont · 24px · 380 · -0.24px	Retool app builder
p	saansFont · 14px · 300 · 0.14px	Ship vibe-coded apps securely

Corners & shadows

Corner sizes used

4px

8px

5px

pill

36px

20px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Retool’s live website. Click to enlarge.

Buttons · 3

Retool button: Book a demo — No fill · corners 3.35544e+07px · 40px

Retool button: Start for free — #E9EBDF · corners 3.35544e+07px · 40px

Retool button: Import code — #D9D9D9 · corners 12px · 38px

Navigation bar · 1

Retool Navigation bar: Public Beta: Retool CLI — no fill · square · ui-sans-serif 16px

Buttons · 5

Retool Buttons: Book a demo — no fill · corners 3.35544e+07px · pxGroteskFont 14px

Retool Buttons: Start for free — fill #E9EBDF · corners 3.35544e+07px · pxGroteskFont 14px

Retool Buttons: Starter prompts — no fill · corners 8px · pxGroteskFont 14px

Retool Buttons: Import code — fill #D9D9D9 · corners 12px · pxGroteskFont 14px

Retool Buttons: See what's new. — fill #000000 · corners 3.35544e+07px · ui-sans-serif 16px

Tags and badges · 3

Retool Tags and badges: Public Beta: Retool CLI — fill #E9EBDF · corners 36px · pxGroteskFont 14px

Retool Tags and badges: Learn more ↗ — fill #151515 · corners 36px · pxGroteskFont 14px

Retool Tags and badges: NEW — fill #F7F8F4 · corners 36px · pxGroteskFont 12px

Cards and panels · 1

Retool Cards and panels: Build a customer support queue that pull — fill #E9EBDF · corners 20px · ui-sans-serif 16px

Icons

7 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Retool product screen: 1920 × 1080 — 1920 × 1080

Retool product screen: 1380 × 1035 — 1380 × 1035

Retool product screen: 1238 × 742 — 1238 × 742

Retool product screen: 2560 × 1440 — 2560 × 1440

Retool product screen: 1760 × 1768 — 1760 × 1768

Retool product screen: 800 × 424 — 800 × 424

Retool product screen: 1280 × 600 — 1280 × 600

Retool product screen: 1366 × 768 — 1366 × 768

Retool product screen: 1024 × 613 — 1024 × 613

Do & don’t

What makes it Retool

Dark charcoal background with warm off-white (not pure white) text
Pill-shaped outline buttons next to a solid cream 'inverted' button
Small rounded badge tags like 'NEW' and 'Public Beta' in muted dark green

Use warm off-white text on dark charcoal, not pure white on black
Keep most buttons as thin outline pills, reserve the solid cream button for the top action
Use small muted badges to flag new features

Don’t

Don't use bright saturated colours for emphasis
Don't use pure white or pure black
Don't make every button solid-filled

For AltLeads: Borrow the dark, serious builder theme for an internal ops/admin screen used by the calling team, keeping actual lead data on a plain light surface.

Copy the tokens

Paste into any project to try this look.

/* Retool · values measured from https://retool.com/ · reference only, their brand belongs to them */
:root {
  --bg: #151515;
  --surface: #242424;
  --text: #E9EBDF;
  --muted: #CBCCC4;
  --line: #8B867F;
  --accent: #0E352C;
  --on-accent: #E9EBDF;
  --radius-button: 999px;
  --radius-card: 20px;
  --radius-small: 4px;
  --button-height: 40px;
  --font-heading: "saansFont", "Inter", system-ui, sans-serif;
  --font-body: "saansFont", "Inter", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(233, 234, 231) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0;
}