Cinematic dark dev-platform: a charcoal stage with a warm gradient and perspective dashboard screenshots, giant light-weight Saans headlines, cream-on-charcoal pill CTAs, a floating cream AI-prompt composer, and one blue #518dd2 accent.
Browse Retool in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: retool.com (live DOM, computed styles), 2026-07-10 (desktop 1512px). Coverage: marketing home (dark hero + AI-composer). Dashboard: pending login (needs-dashboard). Responsive: behavior only; mobile not verified.
Cinematic dark dev-platform design — a near-black charcoal stage washed with a subtle warm maroon gradient at the lower edge, with skewed screenshots of real Retool dashboards floating in perspective behind the content. The recognizable brand moment is the centered AI-prompt composer: a large cream card floating over the dark stage, holding a "Build a customer support queue…" prompt, a "Starter prompts" pill, and a single blue circular submit button. Type is huge and LIGHT — Saans at weight 300, 72px, with the second headline line dropped to a muted tone — giving it a confident, editorial, product-forward feel. Chrome is monochrome cream-on-charcoal with pill controls; blue is the one saturated accent, reserved for the AI submit and links. Feels: cinematic, confident, product-forward, dark-premium.
| Token | Hex | Role / usage |
|---|---|---|
| ink-950 | #151515 | Deepest background |
| ink-900 | #242424 | Raised dark surface, nav hover |
| green-950 | #0e352c | Deep green (dashboard blocks, accents) |
| card-cream | #f7f8f4 | AI-composer card, light panels |
| cream-200 | #e9ebdf | Primary cream text / CTA fill |
| gray-300 | #d9d9d9 | Light dividers on cream |
| Token | Hex | Role / usage |
|---|---|---|
| cream | #e9ebdf | Primary text on dark (warm off-white) |
| cream-muted | #cbccc4 | Secondary text, dropped headline line |
| gray-500 | #8b867f | Muted / captions |
| ink | #151515 | Text on cream cards |
| white | #ffffff | Pure-white highlights |
| Token | Hex | Role / usage |
|---|---|---|
| blue-500 | #518dd2 | Primary accent: AI submit button, links, active |
| green-950 | #0e352c | Secondary (data viz / dashboard chrome) |
Rule: cream-on-charcoal chrome; blue #518dd2 is the single saturated accent (AI submit, links).
Saans (saansFont) — used LIGHT (weight 300) at very large sizes with tight tracking.PX Grotesk (pxGroteskFont) and a system sans stack for dense UI.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 72 / 75.6 | 300 | -1.58px (-2.2%) |
| Section head (h2) | 32–44 | 300–400 | ~-1% |
| Body / lead | 16–18 / 24 | 400 | 0 |
| UI / buttons | 15–16 | 400–500 | 0 |
| Badge / caption | 12–13 | 500 | +2% (uppercase for NEW) |
Patterns: giant headings at LIGHT weight (300) with tight negative tracking — the lightness at scale is the signature. Second headline line often muted (#cbccc4).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.