---
title: "incident.io design system"
variant: extended
source: https://incident.io/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/incident-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# incident.io · Design System

> Warm editorial clarity with a signal-coral edge

**Theme:** light · **Industry:** saas · **Source:** https://incident.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

incident.io pairs oversized editorial serif headlines with a restrained, warm-neutral interface and vivid coral accents. Product UI, customer proof and soft orange-to-coral gradients make a complex reliability platform feel approachable and tangible.

## North star

Use generous white space and warm product panels to let editorial serif messaging lead, reserving coral for decisive actions and visual signals.

## Overview

The visual system balances a predominantly white canvas with warm cream section bands and product panels, using coral as a concentrated signal for primary actions, inline emphasis and large atmospheric gradients. Headings use STKBureauSerif: large, regular-weight, tightly tracked, and centered in the hero; STKBureauSans keeps navigation, body copy and controls crisp and practical. Layout is spacious and editorial, with centered hero messaging, broad product visuals, logo and customer-proof interludes, then repeated feature split cards. Product screenshots sit inside pale, softly tinted frames rather than being isolated on stark white. Warm gradients range from pale apricot to saturated coral, especially around the hero product visualization and final CTA. Rounded pill buttons contrast with modestly rounded cards; thin warm borders and restrained shadows support layered UI without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white space around the hero, and light product or media surfaces. |
| Signal Coral | `#f25533` | `--color-signal-coral` | brand | Primary demo CTA, small brand marks, link emphasis, and the saturated end of major gradients. |
| Oat Milk | `#f8f5f0` | `--color-oat-milk` | surface | Warm section bands, secondary CTA backgrounds, and broad feature-card surfaces. |
| Linen Edge | `#f1ebe2` | `--color-linen-edge` | surface | Warm hairlines and subtle boundaries between cards, navigation surfaces, and sections. |
| Soft Graphite | `#626162` | `--color-soft-graphite` | neutral | Muted body copy and secondary navigation text against the light canvas. |
| Editorial Black | `#000000` | `--color-editorial-black` | neutral | High-contrast serif headlines and primary text on white or cream. |
| Near Ink | `#161618` | `--color-near-ink` | neutral | Primary sans-serif interface text, dark button labels, and secondary content. |
| Apricot Glow | `#f5d094` | `--color-apricot-glow` | accent | Soft warm light within radial product and background gradients. |
| Pebble Line | `#e7e4df` | `--color-pebble-line` | semantic | Subtle card outline visible around white testimonial or content cards. |
| Sandstone Line | `#e0dbd2` | `--color-sandstone-line` | semantic | Low-contrast card boundary detail; use sparingly as a supporting hairline. |
| Honey Wash | `#f6d8a6` | `--color-honey-wash` | accent | Pale amber glow in decorative radial gradients behind product imagery. |
| Peach Flare | `#f69e70` | `--color-peach-flare` | accent | Intermediate warm tone in gradients and illustrated background effects. |
| Quiet Gray | `#a2a2a3` | `--color-quiet-gray` | neutral | Occasional low-emphasis text, particularly small supporting labels. |
| Cream Blush | `#f7dfc3` | `--color-cream-blush` | accent | Pale peach section tint and gradient component, not a primary interface color. |
| Coral Mist | `#f29982` | `--color-coral-mist` | accent | Soft coral tint in decorative section backgrounds and gradient transitions. |
| Slate Whisper | `#757680` | `--color-slate-whisper` | neutral | Rare supporting text and minor interface details; keep visually subordinate. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f5f0` (Oat Milk) · `--color-surface-2` → `#f1ebe2` (Linen Edge) · `--color-text` → `#000000` (Editorial Black) · `--color-text-muted` → `#626162` (Soft Graphite) · `--color-text-subtle` → `#161618` (Near Ink) · `--color-border` → `#f1ebe2` (Linen Edge) · `--color-accent` → `#f25533` (Signal Coral) · `--color-accent-2` → `#f5d094` (Apricot Glow) · `--color-accent-3` → `#f6d8a6` (Honey Wash) · `--color-on-accent` → `#f7f7f8`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f5f0` | 19.31:1 | AAA |
| `#000000` | `#f1ebe2` | 17.72:1 | AAA |
| `#626162` | `#ffffff` | 6.17:1 | AA |
| `#626162` | `#f8f5f0` | 5.67:1 | AA |
| `#626162` | `#f1ebe2` | 5.2:1 | AA |
| `#161618` | `#ffffff` | 18.07:1 | AAA |
| `#161618` | `#f8f5f0` | 16.62:1 | AAA |
| `#161618` | `#f1ebe2` | 15.25:1 | AAA |
| `#f25533` | `#ffffff` | 3.43:1 | AA-large |

### Gradients

- `radial-gradient(52% 48% at 74% 56%, rgba(241, 197, 146, 0.55) 0%, rgba(241, 197, 146, 0) 72%), radial-gradient(52% 48% at 74% 66%, rgba(241, 197, 146, 0.5) 0%, rgba(241, 197, 146, 0) 72%), radial-gradient(54% 52% at 37% `
- `radial-gradient(circle, rgba(245, 205, 140, 0.9) 0%, rgba(245, 205, 140, 0) 70%)`
- `radial-gradient(72% 107% at 53.2% 104.6%, rgb(242, 85, 51) 0%, rgba(242, 85, 51, 0.976) 33%, rgba(242, 85, 51, 0.86) 48%, rgba(242, 85, 51, 0.55) 62%, rgba(242, 85, 51, 0.2) 74%, rgba(242, 85, 51, 0.03) 89%, rgba(242, 85`
- `radial-gradient(circle, rgba(247, 214, 160, 0.9) 0%, rgba(247, 214, 160, 0) 70%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| STKBureauSans | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, buttons, cards and supporting interface text. | Inter |
| STKBureauSerif | `--font-display` | webfont | 400 | Display headlines and major section headings. | DM Serif Display |
| Geist Mono | `--font-mono` | webfont | 400 | Small code or technical labels where a monospace treatment is needed. | IBM Plex Mono |

- **STKBureauSans:** Use practical sans-serif forms with regular-to-bold weights; compact tracking and sentence case keep interface copy clear.
- **STKBureauSerif:** Regular-weight editorial serif with tight negative tracking; use large, centered headline blocks without uppercase styling.
- **Geist Mono:** Reserve for concise technical details; regular weight and neutral, untracked presentation.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | -0.04em | — | STKBureauSerif | Oversized editorial statement headlines, led by the centered hero. |
| h1 | 60px | 400 | 1.1 | -0.03em | — | STKBureauSerif | Primary page headline or prominent campaign heading. |
| h2 | 44px | 400 | 1.1 | -0.03em | — | STKBureauSerif | Major feature and platform section headings. |
| h3 | 36px | 400 | 1.15 | -0.025em | — | STKBureauSerif | Feature-card and customer-story titles. |
| h4 | 24px | 500 | 1.3 | -0.01em | — | STKBureauSans | Smaller card headings and strong subheads. |
| body | 18px | 400 | 1.4 | -0.01em | — | STKBureauSans | Explanatory paragraphs, product descriptions, and testimonials. |
| caption | 13px | 400 | 1.4 | -0.01em | — | STKBureauSans | Navigation details, metadata, labels, and small supporting copy. |
| button | 18px | 500 | 1.4 | -0.01em | — | STKBureauSans | Primary and secondary CTA labels. |
| nav | 13px | 400 | 1.4 | -0.01em | — | STKBureauSans | Top-level navigation and compact menu labels. |
| link | 18px | 500 | 1.4 | -0.01em | — | STKBureauSans | Inline calls to action and feature discovery links. |
| code | 12px | 400 | 1.33 | 0 | — | Geist Mono | Technical snippets or compact monospace interface details. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 112px · element gap 8px · card padding 48px · max content width —.

A spacious, vertically flowing marketing page built from centered headline blocks and broad content areas. The hero centers copy and paired CTAs above a large framed product visual. Customer logos and proof sections create pauses between feature bands; later sections use repeated split layouts pairing concise copy and testimonial snippets with product UI. Preserve generous separation between sections and restrained content density. The measured data does not specify a page max width, so follow the screenshot's broad centered composition rather than imposing an invented dimension.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `50%` · nav `4px` · link `8px` · xs `3px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · 2xl `15px` · pill `9999px`
- Shadow `xl` (card, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 22, 24, 0.16) 0px 20px 50px -12px, rgba(22, 22, 24, 0.0`
- Shadow `sm` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(10, 20, 33, 0.03) 0px 1px 2px 0px, rgba(10, 20, 33, 0.05) 0`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(10, 20, 33, 0.1) 0px 1px 2px 0px, rgba(10, 20, 33, 0.1) 0px`
- Shadow `md-2` (media): `rgba(22, 22, 24, 0.02) 0px 8px 15px -3px, rgba(22, 22, 24, 0.04) 0px 4px 6px -2px`
- Shadow `hairline` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(22, 22, 24, 0.04) 0px 10px 10px -5px, rgba(22, 22, 24, 0.06`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most surfaces are flat, with warm hairline borders defining selected cards and panels. Product media and occasional cards use restrained, soft shadows to separate layers from pale backgrounds. Keep the visual hierarchy calm: rounded card edges and floating UI elements provide depth without heavy outlines or dark drop shadows.

## Imagery

The page relies on product-interface screenshots and diagrams rather than decorative photography. Frame screenshots within warm cream panels, with soft ambient apricot and coral gradients behind hero visuals. Use customer logos, testimonial media and small interface details as proof; keep controls and product text legible. Video appears as a contained customer-story preview.

## Components

### Announcement strip

A narrow warm-neutral banner above the navigation, centered on a short event or product announcement.

### Primary CTA

Coral pill button with light text; measured styling uses 18px medium STKBureauSans and 12px 20px padding.

### Secondary CTA

Pale cream pill button with near-ink text, paired beside the coral primary action.

### Product showcase frame

Large product UI visual in a softly tinted warm panel, with an ambient coral-to-apricot gradient.

### Feature split card

Warm cream panel pairing a concise serif-led feature description and testimonial with a product screenshot.

### Customer proof block

Logo row or customer story with concise result copy, attribution, and optional contained video preview.

### Measured component styles

- **Primary button** (“Get a demo”): background #f25533 · text #f7f7f8 · radius 3.35544e+07px · padding 12px 20px · 500 18px STKBureauSans
- **Secondary button** (“Get started for free”): background #f8f5f0 · text #161618 · radius 3.35544e+07px · padding 12px 20px · 500 18px STKBureauSans
- **Link** (“incident.io agent”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px STKBureauSans
- **Card** (“On-call gets the right people in the roo”): background #f8f5f0 · text #000000 · radius 8px · padding 48px · 400 16px STKBureauSans
- **Navigation item** (“incident.io Brand Assets Download .PNG l”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px STKBureauSans

## Do

- Keep the canvas predominantly white and introduce warm cream in defined content bands.
- Use coral for primary actions and selective emphasis, not as a universal text color.
- Set major messaging in a large, regular-weight editorial serif.
- Pair product screenshots with pale warm frames and soft ambient gradients.
- Alternate spacious centered moments with clear copy-and-product split layouts.
- Use subtle borders and restrained shadows to distinguish layered surfaces.

## Don't

- Do not fill the whole page with saturated coral.
- Do not replace the serif display voice with bold geometric headings.
- Do not crowd feature cards or remove the generous section pauses.
- Do not use heavy dark borders or pronounced shadows.
- Do not let decorative gradients reduce product screenshot legibility.
- Do not add unmeasured colors, dimensions, spacing values, or radii.

## Agent prompt

Build a new incident.io-style SaaS page with a predominantly Gallery White (#ffffff) canvas, warm Oat Milk (#f8f5f0) content panels, and Signal Coral (#f25533) reserved for primary actions and selective emphasis. Use an editorial serif such as DM Serif Display for large, regular-weight, tightly tracked headlines; use Inter-like sans-serif for navigation, body copy, and controls. Create a centered hero with concise messaging, paired pill CTAs, and a broad product-interface visual in a soft apricot-to-coral gradient. Follow with customer proof and spacious feature splits that pair short copy and testimonials with legible UI screenshots. Use Linen Edge (#f1ebe2) or Pebble Line (#e7e4df) for understated boundaries, and keep shadows soft. Match the page's calm density; avoid invented measurements and extra palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | 单列白底末尾区域，位于完整页面最下方。 | 页面结束 | 白色画布 |

## Source CSS custom properties (selected)

```css
--color-content-primary: #161618;
--color-content-secondary: #161618a8;
--color-content-tertiary: #16161866;
--color-surface-primary: #fff;
--color-surface-secondary: #f8f5f0;
--color-surface-tertiary: #f1ebe2;
--color-surface-quaternary: #e4d9c8;
--color-stroke-primary: #16161814;
--color-stroke-hover: #cacace;
--color-burgundy: #5a0a17;
--color-burgundy-light: #6d1523;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/incident-io