---
title: "Inngest design system"
variant: extended
source: https://www.inngest.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/inngest-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Inngest · Design System

> Dark developer tooling, sharpened by vivid signals.

**Theme:** dark · **Industry:** devtools · **Source:** https://www.inngest.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Inngest’s homepage pairs a near-black canvas and expressive oversized typography with vivid coral and electric-blue accents. Product interfaces, code samples, customer proof, and a long, carefully paced feature narrative make the developer platform feel tangible and reliable.

## North star

Keep a charcoal editorial canvas, use coral and blue as selective signals, and let real product UI carry the technical story.

## Overview

The page is built on a near-black, charcoal-toned canvas, with darker inset surfaces and restrained hairlines separating dense content without turning the layout into a stack of boxed cards. White headlines carry the message; muted grays handle supporting copy, while coral red gives the announcement strip, eyebrow labels, and primary calls to action a distinctive signal. Electric blue appears in select feature and comparison moments, including prominent illustrated sections, rather than as a general-purpose UI color. Whyte display faces give headings a geometric, editorial character, while CircularXX keeps paragraphs approachable. WhyteMonoV1 supplies uppercase navigation, labels, and buttons, reinforcing the developer-tool context. The long page alternates large headline-led bands with code, dashboard screenshots, testimonials, feature grids, and a split comparison. Broad breathing room around these blocks contrasts with compact, information-dense product visuals; thin rules and restrained borders preserve a technical, low-gloss mood.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Canvas | `#1c1c1c` | `--color-charcoal-canvas` | brand | Primary page canvas behind the hero, feature narratives, customer proof, and footer. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Main headline and body contrast, logos, navigation, and light button surfaces. |
| Deep Soot | `#0c0a09` | `--color-deep-soot` | surface | Deep inset surface and dark section areas that add subtle depth to the charcoal canvas. |
| Soft Ash | `#b3b3b3` | `--color-soft-ash` | neutral | Muted paragraph and footer copy, preserving legibility beneath prominent white headings. |
| Signal Coral | `#f65c4f` | `--color-signal-coral` | accent | Announcement band, hero eyebrow, primary start-free buttons, and small highlighted interface details. |
| Code Gray | `#9b9b9b` | `--color-code-gray` | neutral | Secondary card text and subdued code or product-interface details. |
| Graphite Surface | `#212121` | `--color-graphite-surface` | surface | Raised dark cards, operational-status control, and subtle section or gradient transitions. |
| Near Black | `#020202` | `--color-near-black` | surface | Deep gradient endpoint and near-black section or product-media backgrounds. |
| Smoky Charcoal | `#3d3d3d` | `--color-smoky-charcoal` | surface | Subtle tonal variation within dark section gradients and atmospheric background treatments. |
| Divider Gray | `#2e2e2e` | `--color-divider-gray` | semantic | Hairline section borders and quiet separators on the dark page. |
| Slate Gradient | `#4c4c4c` | `--color-slate-gradient` | surface | Subtle gray gradient transitions and decorative atmospheric treatment, not a core content color. |
| Granite Gradient | `#515151` | `--color-granite-gradient` | surface | Low-contrast gradient texture within dark section backgrounds. |
| Electric Blue | `#013cf6` | `--color-electric-blue` | accent | High-impact blue feature band and after-state in the before-and-after comparison illustration. |
| Pale Gray | `#bbbbbb` | `--color-pale-gray` | neutral | Minor secondary text accent; not a dominant brand or surface color. |
| Button Black | `#000000` | `--color-button-black` | semantic | Text on white start-free buttons and occasional dark product or control details. |
| Cool Mist | `#e5e7eb` | `--color-cool-mist` | neutral | Minor navigation, link, and footer text or border detail. |

### Semantic aliases

`--color-canvas` → `#1c1c1c` (Charcoal Canvas) · `--color-surface` → `#0c0a09` (Deep Soot) · `--color-surface-2` → `#212121` (Graphite Surface) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#b3b3b3` (Soft Ash) · `--color-text-subtle` → `#9b9b9b` (Code Gray) · `--color-border` → `#2e2e2e` (Divider Gray) · `--color-accent` → `#f65c4f` (Signal Coral) · `--color-accent-2` → `#013cf6` (Electric Blue) · `--color-on-accent` → `#ffffff` (Signal White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1c1c1c` | 17.04:1 | AAA |
| `#ffffff` | `#0c0a09` | 19.76:1 | AAA |
| `#ffffff` | `#212121` | 16.1:1 | AAA |
| `#b3b3b3` | `#1c1c1c` | 8.13:1 | AAA |
| `#b3b3b3` | `#0c0a09` | 9.42:1 | AAA |
| `#b3b3b3` | `#212121` | 7.68:1 | AAA |
| `#9b9b9b` | `#1c1c1c` | 6.13:1 | AA |
| `#9b9b9b` | `#0c0a09` | 7.11:1 | AAA |
| `#9b9b9b` | `#212121` | 5.79:1 | AA |
| `#f65c4f` | `#1c1c1c` | 5.33:1 | AA |

### Gradients

- `linear-gradient(135deg, rgba(124, 124, 124, 0.35) 0%, rgba(124, 124, 124, 0.55) 32%, rgba(124, 124, 124, 0.02) 72%, rgba(124, 124, 124, 0.5) 100%)`
- `linear-gradient(297deg, rgba(33, 33, 33, 0) -2.25%, rgb(2, 2, 2) 46.83%)`
- `linear-gradient(295deg, rgba(2, 2, 2, 0) 1.46%, rgb(33, 33, 33) 50.43%)`
- `linear-gradient(rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| CircularXX | `--font-body` | webfont | 400 | Body copy, paragraphs, and interface text | Inter |
| WhyteV1 | `--font-display` | webfont | 400 | Display and primary headings | Manrope |
| CircularXXMono | `--font-mono` | webfont | 400, 600, 700 | Code samples and technical snippets | IBM Plex Mono |
| WhyteMonoV1 | `--font-whytemonov1` | webfont | 400, 600 | Navigation, buttons, links, and eyebrows | Space Mono |
| Whyte | `--font-whyte` | webfont | 400 | Secondary heading style | Manrope |

- **CircularXX:** Comfortable sentence case with measured, slightly tight tracking; use for readable supporting copy.
- **WhyteV1:** Regular-weight geometric display; large headlines use tight negative tracking, with uppercase reserved for display treatments.
- **CircularXXMono:** Monospaced code styling; measured weights include regular, semibold, and bold.
- **WhyteMonoV1:** Compact uppercase labels with generous tracking and semibold emphasis.
- **Whyte:** Regular-weight heading face with neutral tracking; use for concise subheads, not dense paragraphs.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 0.95 | -0.02em | uppercase | WhyteV1 | Oversized uppercase editorial hero display, including outlined emphasis. |
| h1 | 64px | 400 | 1.25 | -0.035em | — | WhyteV1 | Primary page and section headings. |
| h2 | 43px | 400 | 1.1 | -0.02em | — | WhyteV1 | Major feature, testimonial, and content-section headings. |
| h3 | 40px | 400 | 1.25 | -0.01em | — | Whyte Inktrap | Feature titles and secondary content headings. |
| h4 | 32px | 400 | 1 | 0 | — | Whyte | Compact subheadings within cards and content blocks. |
| body | 18px | 400 | 1.5 | -0.01em | — | CircularXX | Readable explanatory paragraphs and feature descriptions. |
| caption | 16px | 400 | 1.5 | -0.01em | — | CircularXX | Supporting copy, product labels, and secondary interface text. |
| button | 12px | 600 | 1.5 | 0.067em | uppercase | WhyteMonoV1 | Uppercase CTA text in compact mono styling. |
| nav | 12px | 600 | 1 | 0.067em | uppercase | WhyteMonoV1 | Uppercase primary navigation labels. |
| link | 12px | 600 | 1.5 | 0.067em | uppercase | WhyteMonoV1 | Compact uppercase calls to action and documentation links. |
| eyebrow | 16px | 400 | 1 | 0.05em | uppercase | WhyteMonoV1 | Uppercase section labels and hero category text. |
| code | 13px | 400 | 1.54 | 0 | — | CircularXXMono | Monospaced code examples and technical snippets. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 48, 64, 160 px.
- Section rhythm 32px · element gap 16px · card padding 10px · max content width 1376px.

Use a wide, centered content frame with a measured maximum width of 1376px. The opening hero is a two-column composition, balancing left-aligned headline and copy against code imagery. The full page runs as a long, single-column sequence of distinct section bands, with internal grids for features, testimonials, and footer navigation. Measured spacing uses a 4px base unit, comfortable density, and broad section breathing room; keep text and product visuals aligned to clear columns rather than centering every block.

## Shape & elevation

- Radius: button `6px` · card `8px` · link `6px` · xs `6px` · sm `8px` · md `9px` · lg `10px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(28, 28, 28) 0px 0px 0px 2px`
- Shadow `inset` (button, link): `rgb(255, 255, 255) 0px 0px 0px 2px inset`
- Shadow `inset-2` (card): `rgba(0, 0, 0, 0) 2px 0px 0px 0px inset`
- Shadow `inset-3` (card): `rgb(102, 189, 139) 2px 0px 0px 0px inset`
- Shadow `inset-4` (text): `rgba(102, 189, 139, 0.4) 0px 0px 0px 1px inset`
- Shadow `md` (other): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 0px 1px, rgba(0, 0, 0, 0.45) 0px 4px 18px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.2, 0.8, 0.2, 1)` on interactive elements.

Keep the page mostly flat: dark tonal changes, hairline borders, and outlined controls do more work than drop shadows. Use modestly rounded controls and cards, with stronger contrast reserved for selected media frames and highlighted feature areas. Product screens can sit as visibly layered images over a section band; avoid adding decorative elevation to ordinary content.

## Imagery

Favor real product-interface screenshots and video frames showing dashboards, charts, workflow runs, and code. Place these in dark media panels against the charcoal canvas, often as wide crops or paired with adjacent text. The hero uses a code-led visual rather than lifestyle photography. Customer portraits appear sparingly with a monochrome, grainy treatment. Illustrative comparison and feature bands can use bold electric blue, but should remain distinct from the neutral product UI.

## Components

### Announcement strip

Full-width coral band at the top with a centered, underlined video announcement link.

### Hero and code visual

Left-aligned uppercase eyebrow, oversized multi-line headline, body copy, and paired install and coral start-free controls beside a dim code example.

### Primary CTA button

Compact uppercase WhyteMonoV1 label; the primary variant uses #f65c4f with white text, while secondary actions use a white surface.

### Product media panel

Wide, dark-framed dashboard video or screenshot; keep interface detail legible and avoid brightening the surrounding page.

### Feature narrative

Editorial heading and supporting copy paired with screenshots, or arranged in compact multi-column feature groups.

### Before-and-after comparison

Side-by-side dark and #013cf6 illustrative states with thin white framing and concise labels.

### Customer story

Portrait, customer marks, quote, attribution, and restrained case-study controls on a dark background.

### Footer link groups

Several compact link columns on charcoal with an operational-status control and subtle decorative background texture.

### Measured component styles

- **Primary button** (“START FREE”): background #f65c4f · text #ffffff · radius 6px · padding 0px 20px · 600 12px WhyteMonoV1 · uppercase
- **Secondary button** (“START FREE”): background #ffffff · text #000000 · radius 6px · padding 0px 20px · 600 12px WhyteMonoV1 · uppercase · shadow rgb(255, 255, 255) 0px 0px 0px 2px inset
- **Link** (“READ THE CASE STUDY”): transparent background · text #f6f6f6 · radius 0px · padding 0px · 400 16px CircularXX
- **Card** (“const uploadedImageURLs = await step.run”): transparent background · text #9b9b9b · radius 8px · padding 6px 14px · 400 13px CircularXXMono · shadow rgb(102, 189, 139) 2px 0px 0px 0px inset
- **Navigation item** (“Watch our CodeTV episode on YouTube! 📺 ”): transparent background · text #f6f6f6 · radius 0px · padding 0px · 400 16px CircularXX

## Do

- Use #1c1c1c as the main page canvas.
- Reserve #f65c4f for clear actions and highlighted labels.
- Use #013cf6 selectively for expressive feature moments.
- Pair Whyte-style headings with CircularXX body copy.
- Set navigation and CTA labels in tracked uppercase mono.
- Show authentic code and product-interface visuals.
- Separate long-form sections with tonal shifts and hairlines.

## Don't

- Do not turn every section into a raised card.
- Do not use coral or electric blue as large default surfaces throughout.
- Do not add unmeasured color values or ornamental gradients.
- Do not center all copy; preserve editorial left alignment.
- Do not let product screenshots overwhelm the page hierarchy.
- Do not use generic lifestyle imagery in place of product UI.

## Agent prompt

Build a new Inngest-style developer-tool page on a #1c1c1c Charcoal Canvas, using #0c0a09 Deep Soot and #212121 Graphite Surface for restrained tonal layering. Set major headings in a geometric Whyte-like sans, body copy in a readable CircularXX-like sans, and compact uppercase navigation and actions in a tracked mono. Use #ffffff Signal White for primary contrast, #b3b3b3 Soft Ash for supporting copy, and #f65c4f Signal Coral for the main CTA and selective labels. Bring in #013cf6 Electric Blue only for a prominent feature or comparison moment. Build a clear editorial grid with left-aligned copy, real code or dashboard media, spacious section transitions, and thin borders. Keep elevation minimal, avoid generic imagery, and make product visuals the evidence for the story.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long single-column homepage sequence with a two-column hero and varied editorial grids beneath. | Prominent start-free actions, Product proof through UI, Progressive feature storytelling | Dark canvas, Coral announcement band, Electric-blue feature block, Thin section dividers |

## Source CSS custom properties (selected)

```css
--shiki-color-text: rgb(36 36 36);
--shiki-color-background: rgb(var(--color-canvas-base));
--color-carbon-0: 254 254 254;
--color-carbon-50: 246 246 246;
--color-carbon-100: 226 226 226;
--color-carbon-200: 204 204 204;
--color-carbon-300: 176 176 176;
--color-carbon-400: 155 155 155;
--color-carbon-500: 124 124 124;
--color-carbon-600: 99 99 99;
--color-carbon-700: 75 75 75;
--color-carbon-800: 53 53 53;
--color-carbon-900: 36 36 36;
--color-carbon-950: 18 18 18;
--color-carbon-1000: 2 2 2;
--color-matcha-0: 239 249 242;
--color-matcha-100: 223 245 230;
--color-matcha-200: 196 239 212;
--color-matcha-300: 154 218 179;
--color-matcha-400: 102 189 139;
--color-matcha-500: 44 155 99;
--color-matcha-600: 2 122 72;
--color-matcha-700: 1 98 57;
--color-matcha-800: 1 84 48;
--color-matcha-900: 0 77 43;
--color-breeze-0: 239 247 255;
--color-breeze-100: 224 242 255;
--color-breeze-200: 206 233 255;
--color-breeze-300: 156 210 255;
--color-breeze-400: 82 178 253;
--color-breeze-500: 35 137 241;
--color-breeze-600: 19 101 214;
--color-breeze-700: 20 80 177;
--color-breeze-800: 23 67 155;
--color-breeze-900: 19 64 133;
--color-breeze-1000: 0 5 11;
--color-ruby-0: 254 244 243;
--color-ruby-100: 254 235 233;
--color-ruby-200: 254 222 220;
--color-ruby-300: 253 188 184;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/inngest-com