A dark, technical, slightly cinematic developer brand. The canvas is a warm near-black #0c0a09 overlaid with fine grain and a scattered field of tiny orange-and-grey particles, so the page reads like a dark control surface. The hero pairs two treatments of the Whyte Inktrap display face — a solid white uppercase headline ("UNBREAKABLE AGENTS.") stacked above a hollow, outline-only one ("INVISIBLE INFRA.") drawn with a text stroke. Everything technical is uppercase Whyte Mono: buttons, labels, taglines ("NO WORKERS. NO QUEUES.") and code-step lists (step.run()) with small orange square markers. One hot orange #fb5536 is the single accent — the primary button, the particles and the code markers; section headings soften into the plain Whyte face (32/40, weight 400) and body/UI runs in geometric CircularXX. Buttons are small at a crisp 6px radius (WhyteMono 12/600) — an orange primary, a white outline and a white solid; cards are dark #1c1c1c/#212121. Depth is the grainy particle field and subtle surface steps, not grey drop shadows.
Browse Inngest 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: inngest.com (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Dashboard: behind login (needs-dashboard). Responsive: breakpoints not captured. Motion: not captured in detail.
Inngest is a dark, technical, slightly cinematic developer brand. The canvas is a warm near-black #0c0a09 overlaid with a fine grain and a scattered field of tiny orange-and-grey particles, so the page feels like a dark control surface humming with activity. The hero pairs two treatments of the same Whyte Inktrap display face: a SOLID white uppercase headline ("UNBREAKABLE AGENTS.") stacked directly above a HOLLOW, outline-only one ("INVISIBLE INFRA.") drawn with a text stroke — a striking signature. Everything technical is monospace: buttons, labels, code snippets and the "NO WORKERS. NO QUEUES." line all use Whyte Mono in uppercase. One hot orange #fb5536 is the single accent — the primary button, the particles, and the little square markers beside code steps. Section headings soften into the plain Whyte face, and body/UI runs in the geometric CircularXX. Controls are small with a crisp 6px radius. Feels: dark, technical, cinematic, precise.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #0c0a09 | Warm near-black background |
| black | #000000 | Pure-black moments |
| ink-020 | #020202 | Deepest panel |
| surface | #1c1c1c | Raised surface |
| surface-2 | #212121 | Card / panel |
| white-alpha | rgba(255,255,255,.08) | Subtle inset fill |
| Token | Hex | Role / usage |
|---|---|---|
| heading | #ffffff | White display / headings |
| body | #f6f6f6 | Primary body text |
| gray-300 | #b3b3b3 | Secondary text |
| gray-500 | #7a7a7a | Muted |
| Token | Hex | Role / usage |
|---|---|---|
| orange | #fb5536 | Primary button, particles, code markers |
| orange-2 | #f76246 | Orange hover / variant |
| green | #0bdd48 | Rare success accent |
Rule: dark warm-black surfaces; one hot orange #fb5536 accent; colour otherwise from the particle field, not decorative UI.
Whyte Inktrap — the hero display face (ink-trap letterforms), used SOLID and as OUTLINE/stroke-only, UPPERCASE.WhyteV1 (Whyte) — section headings (32/40, weight 400, slight negative tracking).CircularXX — geometric sans for body and UI.WhyteMonoV1 (Whyte Mono) — buttons, labels, code, technical lines (UPPERCASE for chrome).| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Hero display | Whyte Inktrap | ~110px | bold | tight | UPPERCASE |
| Section heading | WhyteV1 | 32 / 40 | 400 | -0.32px | sentence |
| Body / UI | CircularXX | 16 / 24 | 400 | normal | sentence |
| Button / label | WhyteMonoV1 | 12 | 600 | normal | UPPERCASE |
| Code / mono line | WhyteMonoV1 | 14–16 | 400 | normal | — |
Patterns: the hero pairs solid + outlined Whyte Inktrap in uppercase; all chrome (buttons, labels, taglines, code) is uppercase Whyte Mono; sections and body soften into Whyte / CircularXX.
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.