A refined control room for engineering teams, blending serious operational focus with approachable clarity.
02
Color
#F25533Accent
#161618Ink
rgba(22,22,24,0.66)Ink soft
#FFFFFFBG
#F8F5F0BG soft
#F5F5F5BG quiet
rgba(22,22,24,0.4)Muted
rgba(22,22,24,0.08)Line
A primarily monochrome base of deep ink and warm whites, anchored by a single high-chroma brand orange used strictly for primary actions and critical highlights.
03
Typography
transitional-serif · geometric-sans · monospace
display80px · 400
h244px · 400
body-lg18px · 400
body16px · 400
Use STKBureauSerif or similar transitional-serif for large display and editorial headlines. · Use STKBureauSans or similar geometric-sans for all UI elements, navigation, and body copy. · Ensure tight letter-spacing and high contrast for maximum readability against the warm backgrounds.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
Generous whitespace and vertical padding (often 80px+) create a calm, editorial rhythm that separates distinct content blocks.
A standard 12-column centered grid with wide margins, providing an open, spacious canvas for the product showcase.
07
Motion & Interaction
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth 150ms transitions for standard UI interactions like color, opacity, and transform. · The headline word 'fast' features a subtle horizontal glitch/echo effect to dynamically represent velocity and breaking things.
Standard 150ms transitions for color and opacity changes on interactive elements, maintaining a fluid feel without distracting from the content. · Immediate visual feedback via standard button states, relying on subtle opacity or shadow shifts.
08
Components
buttonA highly differentiated system featuring a bold, pill-shaped orange primary button for 'Get a demo' and a contrasting dark or outlined secondary button for 'Start a free trial'.
cardClean, rounded cards (typically 12px radius) with subtle shadows or thin borders, often used to frame product UI screenshots or customer quotes.
chipSmall, pill-shaped badges (often with a colored dot) used for categorizing content, such as the 'AI SRE' feature tag.
inputMinimalist input fields with thin borders, relying on standard system styling but maintaining the overall geometric aesthetic.
heroA massive, centered layout anchored by a large serif headline, a concise sub-headline, prominent dual CTA buttons, and overlapping product interface mockups.
09
Voice & Don'ts
ToneConfident, direct, and technically authoritative, yet approachable and clearly designed for fast-moving engineering teams.
HeadlinesPunchy, action-oriented headlines, sometimes featuring expressive typography (like the 'fast' glitch) to emphasize the core value proposition.
CTAsHighly contrasting and action-oriented. 'Get a demo' is the primary, high-chroma call to action, while 'Start a free trial' is a more subdued secondary option.
Don't use generic sans-serif headlines — screenshot shows a prominent transitional-serif font for display text.
Don't use muted, desaturated accent colors — screenshot shows a bold, high-chroma orange as the primary action color.
Don't use sharp, 0px border-radius on interactive elements — screenshot shows a mix of 8px, 12px, and pill shapes.
Don't use dense, cramped layouts — screenshot shows generous whitespace and an editorial rhythm.
Don't use multiple competing high-chroma colors — screenshot shows a primarily monochrome palette with a single dominant orange accent.
Don't rely solely on static text for emphasis — screenshot shows expressive typography effects (glitch) to convey meaning.
Captured from the live site · real computed styles
11
System prompt
incident.io is a developer-focused SaaS platform for incident management, positioned as a modern, all-in-one solution. The design DNA is defined by a primary white (#FFFFFF) and warm off-white (#F8F5F0) background paired with a deep ink (#161618) for text, anchored by a single, bold, high-chroma orange (#F25533) used strictly for primary actions and critical highlights. Typography is a sophisticated mix, utilizing a transitional-serif for large display/headline text and a clean geometric-sans for all body copy and UI elements. Critical design rules include maintaining generous whitespace and editorial rhythm, ensuring strict color discipline (monochrome base + one accent), and using a distinct component shape system. Never use generic sans-serif headlines, use multiple competing high-chroma accent colors, or create dense, cramped layouts. Always frame the product with a confident, technically authoritative, yet approachable voice.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
