Skip to content

Inngest Design System

Inngest's UI kit: a deep #1c1917 canvas, black ink, a muted gold #cbb26a accent and CircularXX type, with components for durable-workflow apps in React.

Get ProDownload DESIGN.md
Primary color
#cbb26a
Typeface
CircularXX
Shape
Sharp
Base radius
6px
Colors
20
Type tokens
10
Components
15
Spacing values
7

About Inngest DESIGN.md

Curated by Dov Azencot, updated May 14, 2026. Source inngest.com (opens in a new tab).

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 colors 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

4 highlights

  1. 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.
  2. 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.
  3. Hairline border #e5e7eb is used for subtle separationIt creates a sense of elevation without relying on heavy shadows, keeping the interface lightweight.
  4. 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

Inngest in production, as captured. Scroll the window to see the whole page.

Visit inngest.com (opens in a new tab)
Inngest's website at inngest.com

20 colors

Inngest's system runs on #cbb26a as its primary voltage, used in 2 of 15 components. Type is set in CircularXX across 10 tokens from 14px to 30px, weights 300–600. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.

Brand & Accent

Sparing, CTA-only voltage · 3

Surface

Page and card backgrounds · 3

Text

Headlines, body, captions · 11

Borders & Hairlines

Dividers, outlines, rules · 3

10 type tokens

Set in CircularXX across 10 tokens, from 14px to 30px, weights 300–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-xxl30px · weight 300 · lh 1.2 · tracking -0.75pxThe quick brown fox jumps over the lazy dog
  • display-xl24px · weight 300 · lh 1.33The quick brown fox jumps over the lazy dog
  • heading-lg16px · weight 500 · lh 1.5 · tracking 0.8pxThe quick brown fox jumps over the lazy dog
  • heading-md14px · weight 600 · lh 1.71The quick brown fox jumps over the lazy dog
  • heading-sm14px · weight 500 · lh 1.43The quick brown fox jumps over the lazy dog
  • body-lg14px · weight 400 · lh 1.63The quick brown fox jumps over the lazy dog
  • body-md14px · weight 400 · lh 1.71The quick brown fox jumps over the lazy dog
  • body-sm14px · weight 300 · lh 1.43The quick brown fox jumps over the lazy dog
  • code14px · weight 400 · lh 1.63The quick brown fox jumps over the lazy dog
  • caption14px · weight 400 · lh 1.43The quick brown fox jumps over the lazy dog

Radii and spacing

5 corner radii and 7 spacing values. Shape language: sharp, on a 6px base radius.

Radii5

  • none0px
  • sm4px
  • md6px
  • lg12px
  • full9999px

Spacing7

  • zero0px
  • xs8px
  • sm12px
  • md16px
  • lg24px
  • xl32px
  • xxl48px

15 components

Each rendered from its tokens (color, type, radius, padding) on Inngest's own canvas.

  • Primary Button
    Primary Buttonprimary-button
  • Hero Heading
    Hero Headinghero-heading
  • Section Title
    Section Titlesection-title
  • Body Text
    Body Textbody-text
  • Nav Link
    Nav Linknav-link
  • Card
    Cardcard
  • Badge
    Badgebadge
  • Input
    Inputinput
  • Modal
    Modalmodal
  • Tooltip
    Tooltiptooltip
  • Table
    Tabletable
  • Avatar
    Avataravatar
  • Footer
    Footerfooter
  • Sidebar
    Sidebarsidebar
  • Toast
    Toasttoast

The system, in use

Inngest's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
A
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Inngest design system FAQ

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

What are the color tokens in the Inngest DESIGN.md?

Inngest's DESIGN.md has 20 color tokens: primary (#cbb26a), ink (#000000), canvas (#1c1917), hairline (#e5e7eb), muted (#9ca3af), surface-1 (#0c0a09) and 14 more. Every value is a quoted hex you can copy.

What is Inngest's primary color hex code?

The color token `primary` is #cbb26a, used by 2 components. The surface behind it is `canvas` (#1c1917).

How do I use Inngest's colors in Tailwind CSS?

Map the tokens to your CSS variables: `primary` (#cbb26a) to `--primary`, `canvas` (#1c1917) to `--background`, `ink` (#000000) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Inngest's palette.

What is the primary brand color and where does it appear in the Inngest design system?

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.

Related reading

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

Use Inngest in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Inngest.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Inngest's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

Overview

Inngest’s visual language rests on a disciplined token hierarchy that treats borders as the primary cue for depth. Hairline-as-elevation.

Unlike many SaaS sites that rely on heavy drop shadows, Inngest uses subtle hairline borders to suggest depth, keeping the interface lightweight while preserving hierarchy. The system’s dark canvas (#1c1917) anchors the page, while the bright #cbb26a accent punctuates calls to action. CircularXX provides a monospaced, code‑friendly feel for body copy, and Whyte delivers high‑impact headings. Together these choices create a coherent experience that mirrors the brand’s focus on durable, backend‑centric workflows.

Key Characteristics:

  • Dark canvas (#1c1917) establishes a high‑contrast foundation.
  • Primary accent #cbb26a signals interactive intent.
  • Hairline border #e5e7eb serves as the sole elevation mechanism.
  • Rounded tokens range from 4px to full circles, applied selectively.
  • Spacing tokens follow an 8‑12‑16‑24‑32‑48 pixel scale for vertical rhythm.
  • Typography hierarchy separates code (CircularXXMono) from marketing copy (Whyte).
  • Color tokens differentiate structural, brand, and status semantics.
  • Component set covers layout, navigation, forms, feedback, and data display.
  • Tokens align with Google Labs CSS‑variable conventions.
  • System is ready for Tailwind or custom CSS integration.

Known Gaps

  • The token set does not include explicit dark‑mode overrides for the light‑text variants, requiring developers to manually adjust text colors when switching themes.
  • No dedicated elevation tokens exist beyond the hairline border, limiting designers who prefer layered shadow cues for complex UI surfaces.
  • The spacing scale lacks a 20px step, which occasionally forces designers to combine multiple tokens to achieve intermediate gaps.
  • While the typeface family list is comprehensive, there is no italic variant defined, restricting typographic emphasis options in documentation.
  • The component library omits a data‑grid component, leaving developers to build table layouts from low‑level primitives without a pre‑styled solution.

More systems like this

Adobe, Boursorama, Bun and 23 more in Design & Creative Tools: each brand's colors, type and components in one file your AI agent builds from.

All 27 in Design & Creative Tools

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 7 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped