# Render — Marketing Site Design Spec

> Source: render.com (live DOM, computed styles), 2026-07-15 (desktop 1512px).
> Coverage: homepage (top banner, nav, hero, dashboard mockup, CTAs). Dashboard/console: behind login (`needs-dashboard`). Responsive: breakpoints not captured (desktop only).

## 1. Visual Theme & Atmosphere

Cinematic, dark and engineered — a developer cloud that stages a near-black canvas (`#0d0d0d`) with a deep-purple glow and a signature purple→mint gradient as its one moment of colour. Headlines are set enormous in **Roobert at a light 300 weight** with tight negative tracking, so the hero reads sharp and modern rather than heavy. Body and UI run in **PP Neue Montreal**, and infra signals (a `$ git push` chip, instance labels) come in **PP Neue Montreal Mono**. Geometry is sharp — buttons are flat white or outlined rectangles with `0px` radius. The right side of the hero holds a faint blueprint grid and a dark product dashboard of service cards with green "Available" ticks and purple sparklines. It feels like serious, fast infrastructure that lets one gradient and a lot of black do the talking. Feels: dark, engineered, sharp, cinematic.

## 2. Color Palette & Roles

### Surfaces (dark)
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#0d0d0d` | Page background, hero |
| surface | `#141414` | Raised panels |
| surface-2 | `#272727` | Cards, insets, borders |
| purple-deep | `#48008c` | Hero glow / purple wash blocks |
| indigo-deep | `#180d43` | Deep gradient wash |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Primary text, headings |
| gray-200 | `#e3e3e3` | Bright secondary |
| gray-400 | `#b3b3b3` | Secondary / mono captions |
| gray-500 | `#8f8f8f` | Tertiary labels |
| gray-600 | `#6b6b6b` | Muted / placeholder |

### Accent — purple + green
| Token | Hex | Role / usage |
|---|---|---|
| purple | `#8a05ff` | Primary brand accent, links, sparklines |
| purple-grad | `#9b52fb` | Gradient start |
| green | `#00db7c` | Success / "Available" ticks |
| green-grad | `#b8ffd7` | Gradient end |
| green-bright | `#5cffb8` | Bright status highlight |

### Spectrum tints (dashboard / illustrations)
| Token | Hex | Role |
|---|---|---|
| blue | `#8ad6ff` | Chart / card tint |
| lavender | `#d1b8ff` | Chart / card tint |
| pink | `#f79ffe` | Chart / card tint |
| amber | `#e2a66e` | Chart / card tint |
| coral | `#f0989e` | Chart / card tint |

Rule: chrome is black + white + gray; colour is rationed to the purple→green signature gradient and the electric purple `#8a05ff`. The wider spectrum tints appear only inside product/dashboard visuals and charts.

## 3. Typography Rules

- Display: `Roobert, "Helvetica Neue", sans-serif` — hero + section headings, LIGHT weight (300).
- Sans: `PPNeueMontreal, ui-sans-serif, system-ui, sans-serif` — body, UI, buttons.
- Mono: `PPNeueMontrealMono, ui-monospace, monospace` — chips, instance labels, code.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 80 / 80 | 300 | -2.4px (-3%) |
| Section (h2) | ~40–56 | 300–400 | -2% |
| Body | 18–20 | 400 | normal |
| Button | 16–20 | 400 | normal |
| Nav / UI | 15–16 | 400–500 | normal |
| Mono chip / label | 11–14 | 400 | normal |

Patterns: display is huge and LIGHT (300) with tight negative tracking — never bold. PP Neue Montreal handles all UI at a regular 400. Mono is reserved for infra chips and instance labels.

## 4. Component Stylings

### Buttons (all sharp, 0px radius)
- **Primary (white block)**: bg `#ffffff`, text `#0d0d0d`, radius `0px`, tall (`~70px` hero / `66px` nav), padding `20px 24px`, PP Neue Montreal 20 (16 nav)/400, often a chevron.
- **Secondary (outline)**: transparent bg, text `#ffffff`, 1px border `#ffffff`, radius `0px`, same metrics.
- **Banner button**: small dark/white pill-less block, 26px, PP Neue Montreal 14/500.

### Inputs
- Not captured on homepage (console behind login) — `not captured`. Dark field with `#272727` border assumed but unverified.

### Cards / panels
- Dashboard service cards: dark `#141414`/`#0d0d0d`, hairline `#272727` borders, small radius (~8px), holding a title, a green "✓ Available" status, mono metric labels (MEMORY/CPU) and purple sparklines.

### Nav
- Dark bar, Render logo + wordmark left; links (Product, Developers, Solutions, Pricing, Company); right: "Migrate to Render", "Sign In", and a full-height white "Get Started" block at the far right edge.

### Top banner
- Full-width green→purple gradient bar with a promo message + small "Apply now" button.

## 5. Layout Principles

- Split hero: left column is the huge Roobert headline with a gradient word + sub + dual CTA (white primary + outline); right column is a faint blueprint grid holding a `$ git push` mono chip and the dark product dashboard mockup.
- Wide content, generous vertical rhythm; dark sections stacked, some with purple washes.
- Footer: dark, multi-column links.

## 6. Depth & Elevation

- Radii: `0px` for buttons and the brand blocks (sharp), ~`8px` for dashboard cards.
- Control height: tall — ~70px hero buttons, 66px nav block.
- Mostly flat: hairline `#272727` borders over black; glow comes from purple radial washes behind the hero, not drop shadows.

## 7. Motion

- Restrained micro-transitions on hover (color/opacity), short durations. Dashboard sparklines and the blueprint grid may animate subtly; gradient text is static. Animation library not positively identified (`not captured`).

## 8. Backgrounds, Effects & WebGL

- Near-black canvas. Signature effects: (1) a **purple→mint linear gradient** `linear-gradient(to right,#9b52fb,#b8ffd7)` used as text-fill on hero accent words; (2) a deep-purple radial **glow** (`#48008c`/`#180d43`) behind the hero; (3) a faint **blueprint/dot grid** framing the dashboard; (4) the green→purple **banner gradient**. No blur/glass observed. WebGL `not captured`.

## 9. Do's and Don'ts

### Do
- Use a near-black canvas (`#0d0d0d`) with white text on a neutral-gray ladder (`#e3e3e3`, `#b3b3b3`, `#8f8f8f`, `#6b6b6b`).
- Set headlines in Roobert at a LIGHT 300 weight with tight negative tracking (-3% at 80px).
- Ration colour to the purple→mint gradient and electric purple `#8a05ff`; keep green `#00db7c` for success.
- Use PP Neue Montreal Mono for infra chips (`$ git push`) and instance labels.
- Make buttons flat white or outlined rectangles with `0px` radius; keep them tall.
- Let a deep-purple radial glow and a blueprint grid supply depth, not shadows.

### Don't
- Don't set headlines bold — Roobert stays at 300.
- Don't round the buttons — corners are sharp `0px`.
- Don't spray the spectrum tints as UI accents; they belong in dashboard/chart visuals.
- Don't use a flat gray or navy canvas — it is near-black with a purple glow.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). Split hero likely stacks; nav collapses to a menu (pattern present, not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#0d0d0d` · Text `#ffffff` · Muted `#6b6b6b` · Border `#272727` · Accent purple `#8a05ff`
- Font: `Roobert` display 300 (h1 80/-3%), `PP Neue Montreal` body/18–20, `PPNM Mono` chips · Radius 0px buttons / 8px cards · Button height ~70px
- Signature gradient: `linear-gradient(to right,#9b52fb,#b8ffd7)` · Success green `#00db7c`

<render_design_language>
Use the Render design language: a near-black canvas (#0d0d0d, panels #141414, cards/borders #272727) with white text on a neutral-gray ladder (#e3e3e3, #b3b3b3, #8f8f8f, #6b6b6b muted). Headlines are set in Roobert at a LIGHT 300 weight with tight negative tracking (-3% at 80px) — never bold; body and UI run in PP Neue Montreal at 400, and infra chips (a $ git push chip) and instance labels use PP Neue Montreal Mono. Colour is rationed to one signature purple&rarr;mint gradient (linear-gradient(to right,#9b52fb,#b8ffd7)) used as text-fill on accent words, the electric purple #8a05ff for links and sparklines, and green #00db7c for success/"Available" ticks; a wider spectrum of tints (#8ad6ff, #d1b8ff, #f79ffe, #e2a66e, #f0989e) appears only inside dashboard and chart visuals. Geometry is sharp: buttons are flat WHITE blocks (#fff bg, #0d0d0d text) or 1px white OUTLINE rectangles, all 0px radius and tall (~70px); dashboard cards get a small ~8px radius with hairline #272727 borders. Depth comes from a deep-purple radial glow (#48008c/#180d43) behind the hero and a faint blueprint grid, not drop shadows. Feels: dark, engineered, sharp, cinematic. Avoid: bold headlines, rounded buttons, a flat gray/navy canvas, or spraying the spectrum tints around as loose UI accents.
</render_design_language>