# Retool — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces (dark)
| 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 |

### Text
| 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 |

### Accent
| 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).

## 3. Typography Rules

- Display: `Saans` (saansFont) — used LIGHT (weight 300) at very large sizes with tight tracking.
- Secondary / UI: `PX Grotesk` (pxGroteskFont) and a system sans stack for dense UI.
- Mono: system ui-monospace for code snippets.

| 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`).

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: cream fill `#e9ebdf`, dark text `#151515`, radius pill (9999px), h ~44px. ("Start for free")
- **Secondary (outline)**: transparent, 1px cream border, cream text, pill radius. ("Book a demo")
- **Ghost / nav**: plain cream text ("Sign in"), nav links with dropdown chevrons.
- **AI submit**: 40px blue circle `#518dd2`, white arrow — the one saturated control.

### AI-composer card (signature)
- Large cream card `#f7f8f4`, radius ~16–20px, dark text; multiline prompt area; bottom-left "Starter prompts" pill dropdown (cream, hairline), bottom-right blue circular submit. Soft outer glow over the dark stage.

### Chips / badges
- "NEW" pill: peachy-cream fill, dark text, uppercase 12px, pill radius. Feature pills ("Import apps…", "Build via MCP") are dark translucent pills with dropdown chevrons.

### Cards / panels
- Dark translucent panels and cream cards; radii 4/5px (small), 8/12/16/20px (cards), pill for controls. Ring-style hairline borders (`0 0 0 1px #e9ebdf`).

### Nav
- Transparent over hero, cream logo left, center dropdown links (Solution/Audience/Resources/Use cases/Pricing) + search, right "Sign in" + "Book a demo" (outline pill) + "Start for free" (cream pill).

## 5. Layout Principles

- Full-bleed dark hero stage; content centered; skewed dashboard screenshots in perspective behind.
- Composer card centered as the focal interactive element.
- Generous vertical rhythm; pill controls; mixed small (4–5px) and large (16–20px) radii.
- Warm maroon gradient wash anchors the bottom of the hero.

## 6. Depth & Elevation

- Radii: small `4px`/`5px`, cards `8`/`12`/`16`/`20px`, controls full pill (`9999`), some `36px`.
- Control height: buttons ~44px; composer submit 40px circle.
- Shadows: ring-style `0 0 0 1px #e9ebdf` hairlines on cream; soft outer glow/elevation on the floating composer card over the dark stage.

## 7. Motion

- Background dashboard screenshots drift/parallax subtly in perspective; hero has a play/pause control (background film).
- Composer and pills have hover states; blue submit animates on hover.
- Restrained, cinematic; treat as 200–400ms ease. Library not confirmed.

## 8. Backgrounds, Effects & WebGL

- **Signature**: dark charcoal stage (`#151515`) with skewed, perspective-tilted screenshots of real Retool dashboards floating behind the content, plus a warm maroon→charcoal gradient wash at the lower right.
- Background film with play/pause; soft glows around the composer.
- No overt WebGL scene observed; depth comes from perspective screenshots + gradient, not generated 3D.

## 9. Do's and Don'ts

### Do
- Use a near-black charcoal canvas (`#151515`) with warm off-white cream text (`#e9ebdf`).
- Set giant headlines in Saans at LIGHT weight (300) with tight tracking; mute the second line.
- Float an AI-prompt composer as a cream card over a dark stage of perspective dashboard screenshots.
- Reserve blue (`#518dd2`) for the AI submit and links; keep everything else cream/charcoal.
- Use pill CTAs — cream-filled primary, outline secondary.

### Don't
- Don't set the big headings bold — the light 300 weight is the signature.
- Don't add a second saturated accent beyond blue.
- Don't flatten the hero — the perspective screenshots + warm gradient give it depth.
- Don't use pure white as the base text — it's warm cream `#e9ebdf`.

## 10. Responsive Behavior

- Nav collapses; hero type scales down; composer card goes full-width.
- Perspective screenshots simplify on mobile.
- Specific breakpoints not captured (desktop only).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#151515` · Text `#e9ebdf` · Muted `#cbccc4` · Card `#f7f8f4` · Accent `#518dd2`
- Font: `Saans` (display, 300) / `PX Grotesk` (UI) · Body: 16px · Radius: pill / 16px card / 4–5px small · Control height: ~44px
- Primary button: cream `#e9ebdf` pill, dark text · AI submit: blue `#518dd2` circle · Ring: `0 0 0 1px #e9ebdf`

<retool_design_language>
Use the Retool design language: cinematic dark dev-platform. A near-black charcoal stage (#151515, raised #242424) washed with a subtle warm maroon gradient at the lower edge, with skewed perspective-tilted screenshots of real dashboards floating behind the content. Text is warm off-white cream (#e9ebdf, muted #cbccc4) — never pure white — and headlines are giant Saans at LIGHT weight 300 (72px, tight -2% tracking) with the second line dropped to the muted tone; UI uses PX Grotesk. The signature moment is a centered AI-prompt composer: a large cream card (#f7f8f4, ~16–20px radius, dark #151515 text) with a multiline prompt, a bottom-left "Starter prompts" pill dropdown, and a single blue circular submit button — blue #518dd2 is the ONLY saturated accent, reserved for that submit and for links. Chrome is cream-on-charcoal with pill controls: primary CTAs are cream-filled pills (#e9ebdf, dark text, ~44px), secondaries are outline pills, nav is transparent. Radii mix small 4–5px with 16–20px cards and full pills; elevation uses ring-style hairlines (0 0 0 1px #e9ebdf) and a soft glow around the floating composer. Deep green #0e352c appears only inside dashboard/data chrome. Motion is restrained and cinematic — perspective screenshots drift, blue submit animates on hover, 200–400ms. Feels: cinematic, confident, product-forward, dark-premium. Avoid: bold headings, pure-white base text, a second saturated accent, and a flat (non-perspective) hero.
</retool_design_language>