inngest.com website design: fonts, colors and UI patterns

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.