# Replit — Marketing Site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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

### Surfaces & borders
| 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 |

### Accent & semantic
| 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.

## 3. Typography Rules

- Display/UI: `"ABC Diatype Plus Variable", sans-serif` (variable grotesque, used at 400)
- UI/body: `"ABC Diatype", sans-serif`
- Weight ceiling is light: display sits at 400; CTA labels at 500.

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

## 4. Component Stylings

### Buttons
- **CTA (outline pill)**: bg transparent, text `#ff3c00`, border 1.5px `#ff3c00`, radius 999px, h 41px, 14px/500, padding `0 20px` ("Create account"). Hover: subtle orange tint fill.
- **Primary (filled)**: bg `#ff3c00`, white text, pill radius — used for the loud CTA.
- **Badge (Agent)**: bg `#ff3c00`, white text, radius 6px, small — carries a count chip.
- **Nav pill / ghost**: bg `#f6f5f4`, text `#36373b`, radius 6px, h 32px, no border on hover items.
- **Send button (composer)**: circular (50%), coral `#ffb199`→orange fill, white arrow.

### Inputs / composer
- Signature prompt composer: white card, large radius (~20px), soft border `#d4d1ce`, leading `+` icon, trailing circular send button. Placeholder `#898c94`.

### Cards / panels
- bg white, hairline border `#d4d1ce`, radius 12–16px, shadow `0 1px 2px rgba(0,0,0,.02)` (near-flat).
- Category tiles: rounded-square `#f6f5f4` icon tiles (~56px) with a label beneath (Website, Mobile, Design, Slides, Animation).

### Nav
- h ~72px, transparent over canvas, logo left (orange mark + wordmark), center dropdown links + Agent badge, right actions (Contact sales, Log in, Create account pill).

## 5. Layout Principles

- Centered hero composition: wordmark row → 64px display question → one-line subhead → composer → category tile row.
- Max content width ~1120px, centered.
- Spacing on a 4px grid; generous vertical breathing room around the composer.
- Warm-gray section bands (`#f1f0ee`) separate content; logo walls in grayscale.

## 6. Depth & Elevation

- Radii: chips/pills `6px`, cards `12–16px`, composer/large `20px`+, CTA `999px`, circles `50%`.
- Elevation is minimal — hairline borders + a whisper shadow `0 1px 2px rgba(0,0,0,.02)`; the composer/modals use `0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08)`.

## 7. Motion

- Micro-transitions: `fill 0.2s` (icons/orange), `background-color 0.12s ease-out` (hover), `background 0.2s`, `opacity 0.2s`. Ease-out character, 120–200ms.
- No heavy scroll library detected; the hero rotates example prompts inside the static composer.

## 8. Backgrounds, Effects & WebGL

- Flat warm-paper canvas; no WebGL, no background video. A faint radial glow sits behind the composer. Soft peach illustration accents. Otherwise flat solid surfaces with hairline borders.

## 9. Do's and Don'ts

### Do
- Use a warm off-white canvas (`#faf5f0`), not pure white; text in charcoal-gray `#36373b`, not pure black.
- Keep orange `#ff3c00` for the logo, primary/CTA and the composer action only.
- Set display in ABC Diatype at weight 400 with tight negative tracking (-5 to -6%).
- Build the hero around a single large rounded prompt composer with a circular send button.
- Use warm-gray surfaces (`#f6f5f4`) and hairline borders (`#d4d1ce`) instead of shadows.
- Keep controls compact: nav pills 32px radius 6px; CTA pill 41px radius 999px.

### Don't
- Don't use pure-black text or a cold pure-white canvas.
- Don't reach past weight 500 — the brand is light and soft.
- Don't add a second loud accent; blue `#2492ff` stays a quiet link/info color.
- Don't replace hairline borders with heavy drop shadows.

## 10. Responsive Behavior

- Nav collapses to a menu on small screens; hero composer goes full-width. Breakpoints not fully verified — captured at desktop 1512px.

## 11. Agent Prompt Guide

- Canvas `#faf5f0` · Text `#36373b` · Muted `#898c94` · Border `#d4d1ce` · Accent `#ff3c00`
- Font: `ABC Diatype, sans-serif` · Body: 16px · Radius: 6px chip / 12–16px card / 999px pill · Control height: 32–41px
- Focus/hover: warm surface `#f6f5f4`; CTA outline 1.5px `#ff3c00`

<replit_design_language>
Use the Replit design language: a warm off-white paper canvas (#faf5f0, sections #f1f0ee), charcoal-gray text #36373b (strongest #0e0e0f) rather than pure black, warm-gray surfaces #f6f5f4 and hairline borders #d4d1ce instead of shadows. One saturated Replit orange #ff3c00 is the only energy color — logo mark, Agent badge, the outline CTA pill (1.5px #ff3c00, radius 999px, 41px, label weight 500), and the circular coral-to-orange send button; blue #2492ff stays a quiet link. Set everything in ABC Diatype at a light 400 weight — display 64px with very tight -6% tracking, softly-spoken and large. Build the hero around a single big rounded white prompt composer (radius ~20px) with a leading + and a circular send button, over category icon tiles. Nav pills are radius 6px, 32px tall on #f6f5f4; cards radius 12-16px, near-flat (shadow 0 1px 2px rgba(0,0,0,.02)). Motion is 120-200ms ease-out on fill/background. Feels: warm, approachable, focused. Avoid: pure-black text, a cold white canvas, weights above 500, a second loud accent, and heavy drop shadows.
</replit_design_language>