Cinematic dark developer cloud: a near-black canvas with a deep-purple glow, huge light-weight Roobert headlines, PP Neue Montreal UI and mono infra chips, sharp white block buttons, and one signature purple-to-mint gradient over a dark dashboard of service cards with green ticks and purple sparklines.
Browse Render 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: 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).
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.
| 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 |
| 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 |
| 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 |
| 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.
Roobert, "Helvetica Neue", sans-serif — hero + section headings, LIGHT weight (300).PPNeueMontreal, ui-sans-serif, system-ui, sans-serif — body, UI, buttons.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.
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.