# incident.io · Design system migration spec

> Source: https://incident.io  ·  Curated by OpenDesign  ·  en

> The site is worth including for its masterful blend of editorial typography (transitional-serif) and clean, modern SaaS UI patterns, creating a distinctive and authoritative brand identity.

## 1. Identity DNA

The system's identity is that of a refined control room for engineering teams, where serious operational focus meets approachable clarity. It's built on the analogy of a calm, authoritative interface for managing chaos—much like a well-designed cockpit or command center.

**One-liner:** The modern, all-in-one AI platform for incident management and on-call, designed for fast-moving engineering teams.
**Keywords:** incident response · SRE · AI · reliability · operations
**Analogy:** A refined control room for engineering teams, blending serious operational focus with approachable clarity.

## 2. Color

The color system is one of disciplined restraint. A primarily monochrome base of deep ink and warm whites establishes a serious, editorial canvas, anchored by a single, high-chroma brand orange.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F5F0` | card background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#161618` | body text |
| `--ink-soft` | `rgba(22,22,24,0.66)` | secondary text |
| `--muted` | `rgba(22,22,24,0.4)` | placeholder |
| `--muted-soft` | `rgba(22,22,24,0.1)` | weak hint |
| `--accent` | `#F25533` | single accent |
| `--line` | `rgba(22,22,24,0.08)` | divider |

**Color principle:** 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.

The principle is absolute color discipline: monochrome foundation, one deliberate accent for primary actions and critical highlights.

## 3. Typography

The typographic voice is defined by a deliberate contrast between voices: a transitional-serif, like STKBureauSerif, commands large editorial display, while a geometric-sans, like STKBureauSans, handles all functional UI. This pairing creates a hierarchy that is both authoritative and clean.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -2px | Hero headline |
| h2 | 44px | 1.1 | 400 | -1px | Section headlines |
| body-lg | 18px | 1.4 | 400 | -0.18px | Subheadings and lead paragraphs |
| body | 16px | 1.5 | 400 | 0 | General body text |

**Type rules:**
- 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.

## 4. Spacing

The vertical rhythm is built on generous whitespace, with padding often exceeding 80px to create distinct, calm separations between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** Generous whitespace and vertical padding (often 80px+) create a calm, editorial rhythm that separates distinct content blocks.

## 5. Surfaces

Depth is communicated through a system of soft, graduated shadows and a singular, thin border style. Surfaces appear to float subtly, defined by low-contrast borders and layered shadows rather than heavy outlines.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 4px 6px rgba(22, 22, 24, 0.04)
  - 0px 8px 15px -3px rgba(22, 22, 24, 0.06)
  - 0px 20px 50px -12px rgba(22, 22, 24, 0.16)
- **Borders:** 1px solid rgba(22, 22, 24, 0.08)

## 6. Layout

The layout skeleton is a standard 12-column centered grid with wide margins. This provides an open, spacious canvas designed to frame product showcases and editorial content without crowding.

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

**Skeleton:** A standard 12-column centered grid with wide margins, providing an open, spacious canvas for the product showcase.

## 7. Motion & Interaction

Motion philosophy prioritizes fluid, immediate feedback for standard interactions, reserving expressive animation for key editorial moments. All UI transitions use a consistent, fast 150ms curve for a responsive, modern feel.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - 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.

- **Hover:** Standard 150ms transitions for color and opacity changes on interactive elements, maintaining a fluid feel without distracting from the content.
- **Click:** Immediate visual feedback via standard button states, relying on subtle opacity or shadow shifts.
- **Transition:** All transitions utilize a standard 0.15s cubic-bezier(0.4, 0, 0.2, 1) curve for consistent, modern easing.
- **Keyboard:** Standard focus management and tab order for accessibility, visually indicated by browser-default or subtle custom outlines.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and technically authoritative, tailored for fast-moving engineering teams. It avoids corporate jargon and passive language in favor of punchy, action-oriented headlines.

- **Tone:** Confident, direct, and technically authoritative, yet approachable and clearly designed for fast-moving engineering teams.
- **Headline style:** Punchy, action-oriented headlines, sometimes featuring expressive typography (like the 'fast' glitch) to emphasize the core value proposition.
- **CTA style:** Highly 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.
- **Avoid:** Corporate jargon / Overly complex technical jargon / Passive or hesitant language / Decorative fonts outside of display text

### Don'ts
- ❌ 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.

What the system deliberately omits is as defining as its inclusions: it forgoes decorative fonts outside display text, competing accent colors, and dense layouts.

## System Prompt (paste into AI tool)

```
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.
```