# Inngest — Marketing Site Design Spec > 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Surfaces | 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 | ### Text | Token | Hex | Role / usage | |---|---|---| | heading | `#ffffff` | White display / headings | | body | `#f6f6f6` | Primary body text | | gray-300 | `#b3b3b3` | Secondary text | | gray-500 | `#7a7a7a` | Muted | ### Accent | 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. ## 3. Typography Rules - `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. ## 4. Component Stylings ### Buttons - **Primary**: bg orange `#fb5536`, text white, radius `6px`, height `42px`, padding `0 20px`, WhyteMono 12px/600 UPPERCASE. - **Outline**: transparent, white text, 1px border, radius `6px`, same size (e.g. "Book a demo"). - **Solid light**: white bg, black text, radius `6px`, height `32px` (nav "Start free"). ### Code snippet list - Mono lines (`step.run()`, `step.waitForEvent()`, `step.score()`) with small orange square markers — the signature technical component. ### Chips / tags - Small full-pill (9999px) chips for tags. ### Nav - Wavy "INNGEST" wordmark; PLATFORM/USE CASES/CUSTOMERS/RESOURCES dropdowns, DOCS, PRICING; right "OPEN SOURCE 7.1K", SIGN IN, white "START FREE" pill. ### Cards / panels - Dark `#1c1c1c`/`#212121` surfaces at `6px` radius; diagram- and code-led content. ### Inputs - Not deeply captured; dark, 6px radius. ## 5. Layout Principles - Dark grainy hero with the particle field, a stacked solid+outline Whyte Inktrap headline on the left and a mono code-step list on the right. - Mono taglines ("NO WORKERS. NO QUEUES. NO REFACTORING.") under the display. - Sections on dark with diagrams, code blocks and Whyte headings; orange used sparingly. ## 6. Depth & Elevation - Radii: `6px` (buttons/cards), `9999px` (chips), plus `4/8/10px` minor. - Elevation: dark and mostly flat; depth from the grainy particle field and subtle surface steps rather than grey drop shadows. - The orange particle field and outlined type carry the visual energy. ## 7. Motion - Not captured in detail; the particle field and diagrams suggest lively but restrained ambient motion. ## 8. Backgrounds, Effects & WebGL - Warm near-black canvas with fine grain and a scattered **orange/grey particle field** (the signature backdrop). - Outlined (stroked) display type and code-step lists with orange markers. - No heavy WebGL confirmed; dark, textured, diagram-led surfaces. ## 9. Do's and Don'ts ### Do - Use a warm near-black `#0c0a09` canvas with fine grain and a scattered orange/grey particle field. - Pair solid and outline (stroked) Whyte Inktrap for the hero, uppercase. - Set every button, label, tagline and code line in uppercase Whyte Mono. - Make one hot orange `#fb5536` the single accent — primary button, particles, code markers. - Keep controls small at a crisp 6px radius; soften section headings into Whyte / CircularXX. ### Don't - Don't add a second accent colour; orange is the only one (green is a rare success state). - Don't set chrome in a normal sans; buttons/labels/code are uppercase mono. - Don't drop the grain + particle field or the outlined display; they are the brand. - Don't rely on grey drop shadows; depth is the textured dark field and surface steps. ## 10. Responsive Behavior - Not captured (desktop 1512px only). No cookie banner encountered on this pass. ## 11. Agent Prompt Guide Quick token reference: - Canvas `#0c0a09` · Surface `#1c1c1c` / `#212121` · Text `#f6f6f6` / white · Accent orange `#fb5536` - Fonts: `Whyte Inktrap` (hero display, solid + outline) / `WhyteV1` (headings 32/400) / `CircularXX` (body) / `WhyteMono` (buttons, labels, code UPPER) · Radius 6px · Button 42px - Buttons: orange `#fb5536` primary / white outline / white solid, WhyteMono 12/600 UPPER · Grainy orange particle field · outlined display type Use the Inngest design language: 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. Pair two treatments of the Whyte Inktrap display face in the hero — a SOLID white uppercase headline stacked above a HOLLOW, outline-only one 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 — an orange primary with white text, a white outline secondary, or a white solid with black text (WhyteMono 12/600). Chips are full pills; cards are dark `#1c1c1c`/`#212121` at 6px. Depth is the grainy particle field and subtle surface steps, not grey drop shadows. Feels: dark, technical, cinematic, precise. Avoid: a second accent colour, setting chrome in a normal sans, dropping the grain/particle field or the outlined display, and grey drop shadows.