Warm AI-builder brand: a soft off-white paper canvas, charcoal-gray ABC Diatype set at a light 400 with very tight tracking, one saturated Replit orange #ff3c00 on the logo, Agent badge and outline CTA pill, and a big rounded white prompt composer with a circular coral-to-orange send button over category icon tiles.
Browse Replit 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: replit.com (live DOM, computed styles), 2026-07-15 (desktop 1512px). Coverage: marketing home. Dashboard/workspace: pending login (needs-dashboard). Responsive: breakpoints not fully verified.
Warm, calm AI-builder brand that reads more like a design studio than a code IDE. The canvas is a soft warm off-white (paper, not clinical white), text is set in a near-neutral charcoal-gray rather than pure black, and the whole page is built around a single centered prompt composer — "What will you build?" — the way an AI app foregrounds its input. One saturated Replit orange (#ff3c00) carries every moment of energy: the logo mark, the Agent badge, the outline CTA pill, and the composer's send button. Type is a single grotesque (ABC Diatype) used at a light 400 weight with very tight negative tracking on the big display, so headlines feel large but soft-spoken. Structure comes from gentle warm-gray surfaces and hairline borders, not shadow. Feels: warm, approachable, focused, modern.
| Token | Hex | Role / usage |
|---|---|---|
| ink-900 | #0e0e0f | Strongest text, logo wordmark |
| ink-800 | #212225 | Dense body / card text |
| heading | #36373b | Display + heading gray (primary heading color) |
| ink-700 | #322f2f | Secondary headings (warm dark) |
| gray-600 | #52545a | Body text |
| gray-550 | #61646b | Secondary text |
| gray-500 | #76716f | Warm muted text |
| gray-450 | #898c94 | Tertiary / captions / placeholder (most-used text color) |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #faf5f0 | Page background (warm paper) |
| canvas-2 | #f1f0ee | Alt section background |
| surface | #f6f5f4 | Nav pills, chips, insets |
| surface-2 | #efeeec | Hover fills / tiles |
| card | #ffffff | Cards, composer inner |
| peach-tint | #f3e2dc | Soft peach panel |
| border | #d4d1ce | Hairline borders |
| border-warm | #ddd5cb | Warm border variant |
| border-strong | #c7c4ba | Stronger dividers |
| dark | #1a1a1a / #0e0e0f | Dark footer / inverted blocks |
| Token | Hex | Role / usage |
|---|---|---|
| orange | #ff3c00 | Signature Replit orange: logo, Agent badge, CTA pill, send button |
| peach | #ffb199 | Soft coral (send-button fill, illustration) |
| blue | #2492ff | Secondary link / info accent |
Rule: orange is the only high-energy color — reserve it for the logo, the primary/CTA, and the composer action. Chrome stays warm-gray.
"ABC Diatype Plus Variable", sans-serif (variable grotesque, used at 400)"ABC Diatype", sans-serif| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 64 | 400 | -3.84px (-6%) |
| Section (h2) | 60 / 53 | 400 | -3px (-5%) |
| Subhead (h3) | 26 / 31 | 400 | -0.78px |
| Body | 16 / 24 | 400 | 0 |
| UI / nav | 14 | 400 | 0 |
| Button label | 14 | 500 | 0 |
| Caption | 13 | 400 | 0 |
Patterns: very tight negative tracking on large display (-5 to -6%), light weight throughout — the softness is the brand.
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.