# How inngest.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/inngest.com-design)

Last updated: 2026-07-28

## Design character

Inngest is a **dark developer-infrastructure** brand. The site feels like a polished product console turned marketing page: near-black grounds, warm stone neutrals (`#f5f5f4`, `#d6d3d1`), and a restrained gold accent (`#d8a657`). Heroes pair bold claims with product UI screenshots; pricing is clean card math on the same dark shell.

What should survive adaptation:
- Warm-neutral type on cool-black surfaces (not pure blue-dark SaaS)
- Gold used sparingly for emphasis and brand marks
- Product UI proof embedded in marketing bands
- Calm, wide pricing cards with obvious hierarchy

## Foundations

### Color

Measured:
- Lights / primary text: `#f5f5f4`, `#fafaf9`, `#f6f6f6`, `#ffffff`
- Secondary text: `#d6d3d1`
- Gold accent: `#d8a657`

Visual read:
- Canvas: deep charcoal/black
- Elevated panels slightly lighter than canvas
- Borders are low-contrast hairlines
- Success/info colors appear inside product shots, not as page chrome

### Typography

Family not declared; product sans with strong weight contrast.
- Display titles: large, tight, high contrast white/stone
- Body: mid size, comfortable line length
- Pricing numerals: oversized, tabular feel
- Nav and meta: smaller, medium weight

### Spacing and layout

Common steps **4 / 8 / 12 / 16 / 24 / 32px**, section gaps **48–96px**.
- Radii **4–12px** on cards/controls; full pills **9999** on some CTAs/chips
- Marketing max-width with centered heroes
- Pricing: 2–4 column card row with equal card radii

## Visual language

- Soft card elevation on dark (subtle shadow, not material slabs)
- Product screenshots with rounded frames and thin rings
- Diagram-like workflow graphics in brand gold/stone
- Minimal illustration; engineering clarity over playful mascots

## Components and states

- Sticky/top nav with logo, links, Login, primary CTA
- Hero: title + subcopy + dual CTAs + product visual
- Logo clouds in muted monochrome
- Feature rows: icon/title/body or screenshot + copy
- Pricing cards: plan name, price, feature list, CTA
- Footer link matrix in muted stone

## Responsive behavior

Home and pricing captured across multiple widths including tall full-page shots. Cards collapse from multi-column to stack; hero media moves under copy. Keep pricing comparison scannable when stacked (price and CTA still above the fold of each card).

## Practical guidance

**Preserve**
- Stone neutrals + gold on black
- Product UI as primary imagery
- Simple pricing card grammar

**Avoid**
- Cold pure-blue dark themes that lose the warm stone
- Rainbow gradient hero backgrounds
- Over-rounding everything into consumer bubbles

## Scope note

Studied home and pricing captures (multiple viewports). Color roles and radii measured; declared font families absent. Gradient/border/media structured families largely unsupported — screenshot interpretation fills those gaps.

## Captured pages

[![Pricing - Inngest](https://pin.fontofweb.com/7556?format=jpg)](https://design.withfudge.com/share/pin-7556)

[Pricing - Inngest](https://design.withfudge.com/share/pin-7556)

[![Pricing - Inngest](https://pin.fontofweb.com/7555?format=jpg)](https://design.withfudge.com/share/pin-7555)

[Pricing - Inngest](https://design.withfudge.com/share/pin-7555)

[![AI and backend workflows, orchestrated at any scale](https://pin.fontofweb.com/7554?format=jpg)](https://design.withfudge.com/share/pin-7554)

[AI and backend workflows, orchestrated at any scale](https://design.withfudge.com/share/pin-7554)

## Colors

- `#000000`
- `#f5f5f4`
- `#fafaf9`
- `#d6d3d1`
- `#d8a657`
- `#ffffff`
- `#f6f6f6`