# Incident Design System

> High-contrast utility meets warm sand textures, punctuated by a high-voltage alarm orange.

**Source:** https://incident.io | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Incident.io utilizes a "Sand and Alarm" aesthetic that balances the urgency of incident management with a calm, editorial foundation. The palette is anchored by "Light Sand" (#f8f5f0) and "Sand" (#f1ebe2) surfaces, which soften the high-contrast "Full Logo" black (#161618) typography. The primary brand voltage is delivered via "Alarmalade" (#f25533), a vibrant orange used for primary CTAs and critical UI indicators. Typography pairs a high-character display serif (STKBureauSerif) for headlines with a functional, multi-weight sans (STKBureauSans) for UI and body, often utilizing tight negative letter-spacing on large display sizes to maintain a dense, authoritative feel.

## Signature DNA
1. **The Alarmalade Punch** (#f25533 used as a high-contrast action color against both white and sand canvases to signal urgency and primary pathing).
2. **Editorial Sand Foundations** (The pervasive use of #f8f5f0 and #f1ebe2 instead of pure white for section backgrounds and cards, creating a sophisticated, non-SaaS-standard warmth).
3. **Serif Display Authority** (STKBureauSerif at 80px and 44px with aggressive negative tracking (-3.2px to -1.32px) provides a "newsroom" gravity to the technical product).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| Full Logo Black | `#161618` | Primary text, borders, dark surface backgrounds | 750 | 1 | brand_page |
| White | `#ffffff` | Page background, button backgrounds, card surfaces | 120 | 1 | computed_style |
| Light Sand | `#f8f5f0` | Secondary section backgrounds, card surfaces | 51 | 1 | brand_page |
| Sand | `#f1ebe2` | Borders, tertiary surface backgrounds | 18 | 1 | brand_page |
| Gray | `#e5e7eb` | Default table and divider borders | 58 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| Alarmalade | `#f25533` | Primary CTA background, active states, brand icons | 55 | 1 | brand_page |
| Dark Gray | `#111827` | Secondary text, button text on light backgrounds | 12 | 0.8 | computed_style |
| Soft Orange | `#f79c87` | Decorative surface background (decorative_only) | 3 | 0.6 | computed_style |
| Burgundy | `#5a0a17` | Deep decorative background (decorative_only) | 1 | 1 | brand_page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| STKBureauSerif | 400 | Display, Headlines, Blockquotes | Source Serif 4 | Proprietary |
| STKBureauSans | 300, 400, 500, 700 | Body, UI, Navigation, Buttons | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 80px | 80px | -3.2px | 400 | Hero H1 | `h1.text-h2.md:text-h1` |
| `{type.display.lg}` | 44px | 48.4px | -1.32px | 400 | Section H2 | `h2.text-h2.text-balance` |
| `{type.heading.md}` | 36px | 41.4px | -0.9px | 400 | Sub-section H2 | `h2.text-h4.md:text-h3` |
| `{type.heading.sm}` | 24px | 31.2px | -0.24px | 500 | Card titles | `h3.text-h4.mb-2` |
| `{type.body.lg}` | 20px | 30px | normal | 500 | Lead paragraphs | `p.font-medium.text-xl` |
| `{type.body.md}` | 18px | 25.2px | -0.18px | 500 | Primary CTAs | `a#homepage-hero-request-a-demo` |
| `{type.body.sm}` | 16px | 22.4px | -0.16px | 400 | Secondary body | `p.text-body-sm.text-body-secondary` |
| `{type.caption}` | 12px | 16px | normal | 500 | Badges, labels | `div.flex.gap-1` |

### Principles
1. **Negative display tracking.** Headlines above 36px always use negative letter-spacing (-0.9px to -3.2px) to create a tight, impactful typographic lockup.
2. **Serif for Narrative, Sans for Utility.** Use STKBureauSerif for storytelling and customer quotes; use STKBureauSans for technical features and pricing tables.
3. **Lightweight tables.** Pricing and comparison tables use weight 300 (Light) for data rows to maintain legibility in dense grids.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 111 |
| `{space.sm}` | 12px | 160 |
| `{space.md}` | 16px | 125 |
| `{space.lg}` | 24px | 31 |
| `{space.section}` | 80px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp UI | 683 occurrences |
| `{radius.sm}` | 4px | Small cards, inputs | 40 occurrences |
| `{radius.md}` | 8px | Standard cards, feature blocks | 66 occurrences |
| `{radius.lg}` | 12px | Elevated cards, modals | 31 occurrences |
| `{radius.pill}` | 9999px | Buttons, badges, tags | 40 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | None | Default section blocks | Standard page flow |
| Raised | `rgba(10, 20, 33, 0.05) 0px 2px 6px 0px` | Hoverable cards | Pricing cards |
| Floating | `rgba(22, 22, 24, 0.16) 0px 20px 50px -12px` | Modals, dropdowns | Feature detail cards |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action
**Pages observed:** https://incident.io, https://incident.io/pricing
**Spec:** Background: `#f25533` | Text: `#ffffff` | Radius: `9999px` | Padding: `12px 24px` | Typography: `STKBureauSans 500 18px`
**States observed:** Default | Hover: brightness[0.95] | Active: captured

#### Button Secondary
**Role:** Alternative actions
**Pages observed:** https://incident.io
**Spec:** Background: `#ffffff` | Text: `#161618` | Border: `1px #e5e7eb` | Radius: `9999px` | Padding: `12px 24px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** https://incident.io
**Spec:** Background: `#f8f5f0` | Border: `1px #ffffff` | Radius: `4px` | Padding: `24px`
**States observed:** Default | Hover: none

#### Pricing Tier
**Role:** Plan selection
**Pages observed:** https://incident.io/pricing
**Spec:** Background: `#ffffff` | Border: `1px #e5e7eb` | Radius: `12px` | Shadow: `rgba(22, 22, 24, 0.06) 0px 8px 15px -3px`
**States observed:** Default

### Tier 3: Surface-specific

#### Badge / Tag
**Role:** Metadata and status labels
**Pages observed:** https://incident.io, https://incident.io/pricing
**Spec:** Background: `#f1ebe2` | Text: `#161618` | Radius: `9999px` | Padding: `4px 12px` | Typography: `12px 500`
**States observed:** Default

#### Navigation Bar
**Role:** Global header
**Pages observed:** https://incident.io
**Spec:** Background: `rgba(255, 255, 255, 0.8)` | Backdrop-filter: `blur` | Text: `#161618` | Height: `80px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px |
| Section Gutter | 24px |
| Vertical Rhythm | 80px - 96px between sections |

## Do's
- Use `#f25533` (Alarmalade) exclusively for primary actions and critical status.
- Apply negative letter-spacing to STKBureauSerif headlines to maintain visual density.
- Use `#f8f5f0` (Light Sand) for large background sections to reduce eye strain compared to pure white.
- Keep border radii consistent: `9999px` for interactive pills, `8px` or `12px` for content containers.
- Pair serif blockquotes with `#f25533` accents for customer testimonials.

## Don'ts
- Do not use `#f25533` for body text; it is reserved for UI signals and CTAs.
- Do not use pure black `#000000` for text; use the brand-specific `#161618`.
- Do not mix multiple serif families; stick to STKBureauSerif for headlines only.
- **Wrong:** Using a generic orange (#ff4500) for buttons. **Right:** Use `#f25533`. **Reason:** Alarmalade is the specific brand signature.
- **Wrong:** Setting display headlines with positive tracking. **Right:** Use negative tracking (-1.32px+). **Reason:** The brand identity relies on tight, editorial typographic lockups.

## Similar brands
- Linear (High-contrast utility, tight typography)
- Vercel (Monochrome foundations with high-voltage accents)
- Ramp (Editorial SaaS aesthetic, sand/warm tones)

## Quick start

### CSS Variables
```css
:root {
  --color-alarmalade: #f25533;
  --color-ink: #161618;
  --color-sand-light: #f8f5f0;
  --color-sand: #f1ebe2;
  --font-display: "STKBureauSerif", serif;
  --font-sans: "STKBureauSans", sans-serif;
  --radius-pill: 9999px;
  --radius-card: 12px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-alarmalade: #f25533;
  --color-sand-light: #f8f5f0;
  --color-sand: #f1ebe2;
  --color-ink: #161618;
  --font-display: STKBureauSerif;
  --font-sans: STKBureauSans;
}
```

## Agent prompt examples
- "Create a primary CTA button using Alarmalade #f25533 background, white text, and a full pill radius of 9999px."
- "Generate a feature section header using STKBureauSerif at 44px with -1.32px letter-spacing and #161618 color."
- "Design a content card with a Light Sand #f8f5f0 background, 12px border radius, and a subtle shadow of rgba(22, 22, 24, 0.06) 0px 8px 15px."

## Known gaps
- Hover and active states for secondary buttons were not fully captured in the automated crawl.
- Mobile-specific navigation transitions were not observed.
- Dark mode tokens were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://incident.io | 1440px | 2026-06-06 |
| Pricing | https://incident.io/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://incident.io | 390px | 2026-06-06 |