# Inngest · Design system migration spec

> Source: https://www.inngest.com  ·  Curated by OpenDesign  ·  en

> Inngest provides an excellent reference for a premium developer tools brand, balancing technical credibility with a sophisticated, modern dark mode aesthetic.

## 1. Identity DNA

Inngest’s design language operates like industrial architecture: its aesthetic is not decorative but structural. The system’s identity is built on keywords of durability and scale, manifesting as a platform where workflows and agents run unbroken.

**One-liner:** Make any code durable by default.
**Keywords:** durable · workflows · unbreakable · scale · agents
**Analogy:** A reliable, industrial-strength platform for code that needs to run without failure.

## 2. Color

The palette establishes a dark, high-contrast environment anchored by a warm off-black background. A single golden accent provides the necessary heat for primary actions against the cool stone neutrals.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0C0A09` | main background |
| `--bg-soft` | `#1C1917` | card background |
| `--bg-quiet` | `#292524` | quiet area |
| `--ink` | `#FAFAF9` | body text |
| `--ink-soft` | `#A8A29E` | secondary text |
| `--muted` | `#9CA3AF` | placeholder |
| `--accent` | `#CBB26A` | single accent |
| `--line` | `rgba(168, 162, 158, 0.2)` | divider |

**Color principle:** Dark, high-contrast theme with warm stone neutrals and a single golden accent for primary actions.

The guiding principle is restriction: one accent color enforces hierarchy and prevents visual competition.

## 3. Typography

Typographic voice is split between geometric sans-serifs for impact and humanist sans-serifs for sustained reading. Display type is set with tight tracking to maximize authority, while body copy rests at a standard 16px for optimal legibility on dark surfaces.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 500 | -2px | Hero headlines |
| body | 16px | 1.5 | 400 | 0px | General body text |

**Type rules:**
- Display type uses a tight -2px letter-spacing for maximum impact.
- Body copy is set at a standard 16px for optimal readability on dark backgrounds.
- Primary brand font is a clean, geometric sans-serif.

## 4. Spacing

Rhythm is governed by a consistent 4px grid that dictates all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid system with generous spacing for breathing room between sections.

## 5. Surfaces

Depth is suggested through flat, border-based edges rather than heavy shadows. Subtle 1px borders using muted stone tones define containers without relying on glassmorphism or dark drop-shadows.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 1px 2px rgba(0, 0, 0, 0.1)
  - 0px 1px 3px rgba(0, 0, 0, 0.1)
- **Borders:** Subtle 1px borders using rgba(168, 162, 158, 0.2) to define edges without harsh contrast.

## 6. Layout

The structural skeleton is a centered content layout that prioritizes vertical whitespace. A clear left-aligned hierarchy ensures that generous margins support readability rather than competing for attention.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content layout with generous vertical whitespace and clear visual hierarchy.

## 7. Motion & Interaction

Motion is strictly utilitarian, reserved for immediate feedback on interactive elements. Fast micro-interactions confirm clicks and hovers, while structural state changes use slower, smooth transitions.

- **Durations:** micro 150ms · small 150ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle color and background transitions on hover.
  - Transformations on interactive elements.

- **Hover:** Subtle changes in background color or opacity for buttons and links.
- **Click:** Immediate visual feedback with transform or opacity changes.
- **Transition:** Smooth transitions for color, background-color, and border-color.
- **Keyboard:** Standard focusable elements with visible focus rings.

## 8. Voice & Don'ts

The editorial voice is confident, technical, and relentlessly reliability-focused. It favors short, punchy headlines that state benefits directly, avoiding playful language or vague marketing fluff.

- **Tone:** Confident, technical, and reliability-focused.
- **Headline style:** Short, punchy, and benefit-driven (e.g., 'Make any code durable by default').
- **CTA style:** Direct and action-oriented (e.g., 'Start building for free', 'Get a demo').
- **Avoid:** Avoid overly casual or playful language. / Avoid vague marketing fluff. / Avoid complex jargon without context.

### Don'ts
- ❌ Don't use bright neon colors — screenshot shows muted stone and golden tones.
- ❌ Don't use wide, decorative typography — screenshot shows tight, geometric sans-serif headlines.
- ❌ Don't use heavy shadows or glassmorphism — screenshot shows subtle, flat border-based depth.
- ❌ Don't use pure black (#000000) for backgrounds — screenshot shows warm off-black (#0C0A09).
- ❌ Don't use rounded pill shapes for primary buttons — screenshot shows sharp 4px corners.
- ❌ Don't use multiple competing accent colors — screenshot shows a single dominant golden accent.

The system deliberately omits bright neon colors, decorative typography, and rounded pill shapes in favor of sharp, industrial geometry.

## System Prompt (paste into AI tool)

```
Inngest is a developer tools SaaS platform with a dark, premium aesthetic. The design DNA is grounded in a warm, off-black background (#0C0A09) with high-contrast white text (#FAFAF9) and muted stone accents (#A8A29E). A single golden accent color (#CBB26A) is used for primary calls to action. Typography relies on clean, geometric sans-serifs for headlines with tight letter-spacing, and humanist sans-serifs for body text. Layout is centered and spacious, using a 12-column grid. Critical donts: do not use bright neon colors, do not use heavy shadows or glassmorphism, and do not use purely black backgrounds. The overall feel is technical, reliable, and sophisticated, aimed at engineering teams building robust systems.
```
