What is the primary brand color and where does it appear?

The primary brand color is #cbb26a, a warm amber hue that surfaces on the main call‑to‑action button, badge outlines, and occasional icon fills. It is defined in the color token list as the only brand‑layer background value, making it the visual anchor for interactive elements. The contrast against the dark canvas (#1c1917) meets accessibility thresholds, and the color is also referenced in component definitions such as primary-button.backgroundColor, reinforcing a consistent accent across the system.

How does Inngest ensure text readability on its dark background?

Inngest uses #000000 as the ink token for primary body copy, which sits on the #1c1917 canvas to achieve a high contrast ratio. For lighter sections, the system switches to #f6f6f6 and #e7e5e4 for secondary text, preserving legibility while respecting the dark theme. Heading elements employ the Whyte typeface at larger sizes, but still inherit the #000000 ink token, guaranteeing uniform readability across headings, paragraphs, and code blocks.

Which typeface families dominate the system and how are they organized?

The token set features two primary font families: CircularXX (and its mono variant CircularXXMono) for most UI text, and Whyte for large display headings. CircularXX appears in eight typographic tokens ranging from 14px body text to 16px headings, with weights from 300 to 600. Whyte is used in two display tokens at 24px and 30px, both with a light 300 weight and distinct letter‑spacing adjustments. This hierarchy separates code‑oriented text from marketing headlines while keeping the overall visual language cohesive.

What border‑radius values are provided and how are they applied?

Four radius tokens are defined: 4px (sm), 6px (md), 12px (lg), and 9999px (full). The small and medium radii are applied to form fields, cards, and modal windows to soften corners without losing a technical feel. The large radius appears on pill‑shaped badges and the primary button when a rounded variant is requested. The full radius creates fully circular avatars and loading spinners, ensuring that each component receives an appropriate curvature that matches its functional intent.

What spacing strategy does the system use to maintain vertical rhythm?

Inngest defines seven spacing tokens measured in pure pixel values: 0px, 8px, 12px, 16px, 24px, 32px, and 48px. These tokens are used consistently for padding, margin, and gap properties across components. For example, primary-button uses 8px vertical and 16px horizontal padding, while section headings employ 24px bottom margin to separate them from following content. By anchoring the layout to a limited set of multiples, the system creates a predictable vertical rhythm that scales cleanly across different screen sizes.

Inngest Design System

Inngest’s design system uses a deep #1c1917 canvas, #000000 ink, #cbb26a primary accent, and CircularXX typeface across 15 reusable components for AI‑backed workflow UIs.

About Inngest DESIGN.md

Curated by Dov AzencotUpdated May 14, 2026Source inngest.com

Design & Creative Tools

The landing experience opens on a near‑black canvas (#1c1917) paired with pure #000000 ink for body copy, while the brand’s signature accent #cbb26a punctuates primary buttons and interactive highlights. CircularXX serves as the system’s core typeface, delivering consistent rhythm from code snippets to headings, and the underlying workflow model—durable functions that replace queues, state management, and scheduling—manifests as reusable UI primitives that developers can drop into any page.

Inside: the token set comprises 20 color tokens, 10 typography tokens, 5 rounded tokens, 7 spacing tokens, and 15 components that cover layout, navigation, forms, feedback, and data display. The palette follows a structural‑first hierarchy, with #1c1917 as canvas, #000000 as ink, and #e5e7eb as the hairline border. The design aligns with the Google Labs design‑system specification for CSS variable naming and token granularity, ensuring cross‑tool compatibility.

Designers and developers can feed the JSON into Claude, Cursor, or Copilot prompts, or paste the token definitions directly into a Tailwind config to generate utility classes. Because the system translates backend workflow concepts into visual language, studying Inngest reveals how operational semantics can be expressed through disciplined UI primitives.

What makes it distinct

A dark #1c1917 canvas anchors the visual hierarchyit provides a high‑contrast backdrop for white and light‑gray text, ensuring readability across dense documentation pages.
Primary accent #cbb26a appears on call‑to‑action elements and key iconsit signals forward movement and aligns with the brand’s focus on durable functions.
Hairline border #e5e7eb is used for subtle separationit creates a sense of elevation without relying on heavy shadows, keeping the interface lightweight.
Rounded token "full" (9999px) rounds only specific pill componentsthis selective use preserves a crisp rectangular language for code‑oriented UI elements.

Live at inngest.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

inngest.com

Explore Inngest

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Inngest design system FAQ

Common questions about Inngest's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Inngest — official site

Inngest's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.