CURATED · OPEN · FREE

Inngest

Make any code durable by default.

devtoolsdark

↓ Download design system (8 MB)Open in OpenDesign

Visit: https://www.inngest.com

📦 Browse pack contents →

Identity DNA

durableworkflowsunbreakablescaleagents

A reliable, industrial-strength platform for code that needs to run without failure.

Color

#CBB26AAccent

#FAFAF9Ink

#A8A29EInk soft

#0C0A09BG

#1C1917BG soft

#292524BG quiet

#9CA3AFMuted

rgba(168, 162, 158, 0.2)Line

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

Typography

geometric-sans · humanist-sans · monospace

display60px · 500
body16px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px grid system with generous spacing for breathing room between sections.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

Subtle 1px borders using rgba(168, 162, 158, 0.2) to define edges without harsh contrast.

0px 1px 2px rgba(0, 0, 0, 0.1) · 0px 1px 3px rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

150mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle color and background transitions on hover. · Transformations on interactive elements.

Subtle changes in background color or opacity for buttons and links. · Immediate visual feedback with transform or opacity changes.

Components

button Primary uses golden accent with dark text; secondary uses transparent background with white border.
card Dark containers (bgSoft/bgQuiet) with subtle borders and slight padding.
chip Used for tags or labels, often with subtle borders or muted backgrounds.
input Clean, minimal input fields with subtle borders and focus states.
hero Large, bold typography paired with abstract geometric background patterns.

Voice & Don'ts

Tone Confident, technical, and reliability-focused.
Headlines Short, punchy, and benefit-driven (e.g., 'Make any code durable by default').
CTAs Direct and action-oriented (e.g., 'Start building for free', 'Get a demo').

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.
Avoid: Avoid overly casual or playful language.
Avoid: Avoid vague marketing fluff.
Avoid: Avoid complex jargon without context.

Inside the pack — real screenshots

Inngest — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko