---
name: incident.io
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#161618"
  secondary: "rgba(22,22,24,0.66)"
  tertiary: "#F25533"
  neutral: "rgba(22,22,24,0.4)"
  bg-soft: "#F8F5F0"
  bg-quiet: "#F5F5F5"
  muted-soft: "rgba(22,22,24,0.1)"
  line: "rgba(22,22,24,0.08)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  h2:
    fontFamily: geometric-sans
    fontSize: 44px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1px"
  body-lg:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.18px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

The modern, all-in-one AI platform for incident management and on-call, designed for fast-moving engineering teams.

*A refined control room for engineering teams, blending serious operational focus with approachable clarity.*

## Colors

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.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#161618`)** — uses `ink` token
- **Secondary text (`rgba(22,22,24,0.66)`)** — uses `ink-soft` token
- **Accent (`#F25533`)** — uses `accent` token
- **Muted (`rgba(22,22,24,0.4)`)** — uses `muted` token
- **Borders (`rgba(22,22,24,0.08)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous whitespace and vertical padding (often 80px+) create a calm, editorial rhythm that separates distinct content blocks.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** A 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'.
- **card:** Clean, rounded cards (typically 12px radius) with subtle shadows or thin borders, often used to frame product UI screenshots or customer quotes.
- **chip:** Small, pill-shaped badges (often with a colored dot) used for categorizing content, such as the 'AI SRE' feature tag.
- **input:** Minimalist input fields with thin borders, relying on standard system styling but maintaining the overall geometric aesthetic.
- **hero:** A massive, centered layout anchored by a large serif headline, a concise sub-headline, prominent dual CTA buttons, and overlapping product interface mockups.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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