incident___style_reference:
  info: "> Technical broadsheet on concrete. Times-serif headlines float on a warm-gray page with hairline black rules and a single orange flare that breaks the calm like a signal beacon."

  theme: "light"

  info: "Incident treats the status page like an editorial publication: a Times-serif typeface on a concrete-gray canvas, hairlines of pure black, and one warm signal-orange that acts as a flare against the monochrome. The discipline is extreme — chromatic color is rationed, appearing only as brand accent fills, logo marks, and decorative file-type illustrations, never as button backgrounds or action fills. Surfaces are flat and paper-like; depth comes from soft 2-layer shadows on imagery rather than elevation stacking. The result reads as a trusted technical broadsheet rather than a typical dashboard — authority through typographic restraint, not color volume."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Orange | `#f25533` | `--color-signal-orange` | Brand accent, logo mark, decorative SVG fills, nav emphasis — the single warm chromatic note that cuts through the monochrome system |"
    info: "| Concrete | `#efefef` | `--color-concrete` | Page canvas, button background — the dominant surface tone that gives the system its paper-like warmth |"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, hairline borders (920+ uses), button outlines — pure black carries all structural line work |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, nav fills — the white layer that sits on top of the concrete canvas |"
    info: "| Carbon | `#161618` | `--color-carbon` | Near-black for nav strokes, emphasis text, and the tinted shadow base — softer than pure ink for layered elements |"
    info: "| Mist | `#dadada` | `--color-mist` | Subtle drop-shadow tone, decorative image edge tint |"
    info: "| Fog | `#cccccc` | `--color-fog` | Secondary shadow tone, decorative image edge tint |"
    info: "| Parchment | `#e4d9c8` | `--color-parchment` | Warm cream decorative surface — near-gray but carries a beige cast that ties to the orange family |"
    info: "| Alert Red | `#ff492c` | `--color-alert-red` | Orange decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"
    info: "| Ember | `#f1641e` | `--color-ember` | Orange outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color |"

  tokens___typography:

    times_system_serif___body_text__headings__nav_items__hero_copy__card_content__list_items__footer___times_carries_770__uses_and_is_the_signature_typographic_choice__a_serif_body_face_on_a_b2b_incident_management_product_is_anti_convention__it_borrows_the_authority_of_a_legal_broadsheet_or_technical_manual__replacing_the_usual_inter_system_ui_with_something_that_reads_as_deliberately_editorial__weight_400_for_body__700_for_emphasis_and_headings_____font_times_system_serif:
      - "**Substitute:** Source Serif Pro, Lora, or Crimson Text — freely available serifs that preserve the editorial broadsheet feel"
      - "**Weights:** 400, 700"
      - "**Sizes:** 16px, 19px, 24px, 32px"
      - "**Line height:** 1.20"
      - "**Role:** Body text, headings, nav items, hero copy, card content, list items, footer — Times carries 770+ uses and is the signature typographic choice. A serif body face on a B2B incident-management product is anti-convention: it borrows the authority of a legal broadsheet or technical manual, replacing the usual Inter/system-ui with something that reads as deliberately editorial. Weight 400 for body, 700 for emphasis and headings."

    arial_system_sans___small_ui_micro_text__button_labels__nav_utility_text__icon_adjacent_labels__arial_at_13px_handles_the_functional_labels_while_times_carries_the_voice___a_deliberate_serif_sans_split_where_times_says_something_and_arial_just_tags_it_____font_arial_system_sans:
      - "**Substitute:** Inter or system-ui at 13px"
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.20"
      - "**Role:** Small UI micro-text: button labels, nav utility text, icon-adjacent labels. Arial at 13px handles the functional labels while Times carries the voice — a deliberate serif/sans split where Times says something and Arial just tags it."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 16px | 1.2 | — | `--text-body` |"
      info: "| body-lg | 19px | 1.2 | — | `--text-body-lg` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 40 | 40px | `--spacing-40` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 4px |"
      info: "| cards | 12px |"
      info: "| buttons | 4px |"
      info: "| alertBanners | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(22, 22, 24, 0.02) 0px 8px 15px -3px, rgba(22, 22, 24...` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    navigation_bar:
      role: "Top-level site navigation"

      info: "White (#ffffff) background, sits on the concrete canvas. Uses Times for nav labels at 16px weight 400. The brand mark in Signal Orange (#f25533) anchors the left. Hairline black (#000000) bottom border separates it from page content. Carbon (#161618) used for stroked logo elements."

    neutral_button:
      role: "Primary interactive action"

      info: "Concrete (#efefef) background — the same as the page canvas, making the button feel like a raised card rather than a filled action. Black (#000000) 1px border, 4px radius, padding 1px top/bottom and 6px left/right (deliberately compact). Label in Arial 13px weight 400, Ink (#000000). No color fill, no shadow — the button is a labeled rectangle with a hairline frame."

    critical_alert_banner:
      role: "Outage or incident status display"

      info: "Soft red/pink wash background (tinted toward Alert Red #ff492c at low opacity), left-aligned warning triangle icon in Alert Red. Headline in Times 16px weight 700, body text in Times 16px weight 400. Full-width card with 8px radius and a saturated red border on the container card below."

    warning_alert_banner:
      role: "Degraded service or maintenance notice"

      info: "Amber/yellow icon (Ember #f1641e) with warning triangle. Headline in Times 16px weight 700, descriptive body in Times 16px weight 400. Sits inside a white card with a light amber-tinted border."

    status_tag___pill:
      role: "Component-level status indicator (e.g. Website, App)"

      info: "Small rounded-corner tag, 4px radius. Tinted background matching the status color: soft red wash for outages, soft amber wash for degraded. Label in Arial or Times at 13px, color matching the status hue. Inline, sits adjacent to other tags."

    status_card:
      role: "Container for a single incident report"

      info: "White (#ffffff) background on the concrete canvas. 12px radius. Border is chromatic and status-dependent: red-pink for active incidents, amber for warnings, subtle gray for resolved. Internal padding 24px. Contains icon, headline, body, and metadata line in muted gray."

    section_heading_serif:
      role: "Page and section titles"

      info: "Times weight 400 or 700, 24–32px scale. Color is Ink (#000000) for primary, Carbon (#161618) for secondary. No underline, no decoration — the serif face does the hierarchy work. Often paired with a 16px body paragraph below in the same family at 16px."

    text_link:
      role: "Inline navigation to subpages or external resources"

      info: "Underlined text in a saturated blue (appears as ~#0000ff in rendered links), Arial or Times depending on context. No arrow, no icon — the underline is the affordance. Sits within serif body text blocks."

    file_type_illustration:
      role: "Decorative graphic for file format references"

      info: "Document-shape icon with a folded corner, filled in Signal Orange (#f25533), with white label text (e.g. 'PNG') in Arial bold. No shadow, no border — flat brand-colored fill on the concrete canvas."

    product_feature_card:
      role: "Text-first card describing a product capability"

      info: "No visible card container — text sits directly on the concrete canvas. Serif headline (Times 24–32px), sans-serif body description (Arial 13px or Times 16px), underlined text link. Accompanied optionally by a line-art illustration in blue or orange. Maximum text density without card chrome."

  do_s_and_don_ts:

    do:
      - "Use Times (or Source Serif Pro as substitute) for all body copy, headings, nav items, and hero text — the serif face is the brand voice"
      - "Set the page canvas to #efefef (Concrete) and let cards sit in #ffffff (Paper) above it — never invert to a white page with gray cards"
      - "Use #000000 for all structural borders and hairline rules — borderColor is the dominant role of pure black in this system"
      - "Use Signal Orange (#f25533) only for brand marks, logo elements, decorative fills, and file-type illustrations — never for action buttons or functional UI"
      - "Set button background to #efefef with a 1px black border, 4px radius, and 1px/6px padding — buttons should feel like labeled frames, not filled actions"
      - "Keep the type scale tight: 13px (Arial micro-labels), 16px (Times body), 19px (Times body-lg), 24px (Times heading-sm), 32px (Times heading) — do not introduce sizes outside this range"
      - "Use status-tinted card borders (red for critical, amber for warning) to communicate severity — the border color does the semantic work, not a colored background fill"

    don_t:
      - "Do not use sans-serif (Inter, system-ui) for body copy or headings — replacing Times breaks the editorial identity"
      - "Do not add colored button fills (blue, orange, green) for primary actions — the system uses neutral concrete buttons with black borders"
      - "Do not use gradients — no gradient was detected in the source and the flat editorial aesthetic rejects them"
      - "Do not use heavy drop-shadows for elevation — shadows are reserved for image containers at 2-4% opacity only"
      - "Do not introduce blue or green as brand or accent colors — the chromatic palette is exclusively warm (orange family and amber)"
      - "Do not round buttons beyond 4px or use pill shapes — the slightly squared button geometry reinforces the broadsheet feel"
      - "Do not use color to indicate active or selected states — rely on weight (400→700) and underline affordances within the serif system"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Concrete | `#efefef` | Page canvas — the warm light-gray base everything sits on |"
    info: "| 2 | Paper | `#ffffff` | Card surfaces and nav containers — white layer above the concrete |"
    info: "| 3 | Parchment | `#e4d9c8` | Decorative warm tint for file-type illustrations and graphic elements |"

  elevation:

    - "**Image cards and decorative graphics:** `rgba(22, 22, 24, 0.02) 0px 8px 15px -3px, rgba(22, 22, 24, 0.04) 0px 4px 6px -2px`"

  imagery:

    info: "Visual language is overwhelmingly text-dominant with sparse iconography. Imagery falls into three categories: (1) file-type illustrations — flat document shapes in Signal Orange with a folded corner and white format label (e.g. 'PNG'), used to anchor feature sections about file handling; (2) line-art directional arrows in saturated blue, used as decorative flow indicators on product pages; (3) product screenshots or UI captures with the signature soft carbon-tinted shadow (rgba(22,22,24,0.02–0.04)). No photography, no lifestyle imagery, no 3D renders. The page reads as editorial — images are functional illustrations, not atmospheric decoration."

  layout:

    info: "Max-width ~1200px centered on a concrete canvas. Pages are text-first: serif headlines, single-column body blocks, generous vertical breathing room (64px section gaps). No hero image — the top of each page is a centered or left-aligned serif headline over empty canvas. Sections flow as flat bands separated by hairline black rules rather than alternating background colors. Navigation is a simple top bar, not sticky or floating. Product feature sections use a asymmetric two-column layout (text-left, illustration-right) with no card containers — text sits directly on the canvas. The status page section uses full-width alert banners with chromatic-tinted borders. Overall density is low: whitespace is the primary structural element, with hairlines and serif hierarchy doing the organization work."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "Text: #000000 (Ink) for body, #161618 (Carbon) for emphasis"
    - "Background: #efefef (Concrete) page canvas, #ffffff (Paper) cards"
    - "Border: #000000 (Ink) for all structural hairlines"
    - "Accent: #f25533 (Signal Orange) for brand marks and decorative fills only"
    - "Status critical: #ff492c (Alert Red)"
    - "Status warning: #f1641e (Ember)"
    - "primary action: no distinct CTA color"

    info: "3-5 Example Component Prompts:"

    - "Create a critical alert banner: soft red-pink wash background, Alert Red (#ff492c) warning triangle icon on the left. Headline 'Service disruption detected' in Times 16px weight 700, #000000. Body text in Times 16px weight 400, #000000. Full-width with 8px border-radius, sitting on a white card with a light red border."

    - "Create a neutral button: #efefef background, 1px solid #000000 border, 4px border-radius, padding 1px top/bottom and 6px left/right. Label 'Get started' in Arial 13px weight 400, #000000. No shadow, no fill change on hover."

    - "Create a page section heading: 'On-call gets the right people in the room' in Times 32px weight 700, #000000, on a #efefef page canvas. Below it, a body paragraph in Times 16px weight 400 at 19px line-height. No decorative elements, no underline, no accent color."

    - "Create a status card: white (#ffffff) background, 12px border-radius, light amber-tinted (#f1641e at low opacity) 1px border. 24px internal padding. Contains a warning triangle icon in Ember (#f1641e), a Times 16px weight 700 headline, and a Times 16px weight 400 description."

    - "Create a file-type illustration: a document shape with a folded top-right corner, filled in Signal Orange (#f25533), with 'PNG' in white Arial bold 32px centered. Flat — no shadow, no border, no gradient. Sits on the #efefef page canvas."

  similar_brands:

    - "**Stripe** — Same editorial restraint with hairline rules and high-contrast monochrome surfaces, though Stripe uses a sans-serif body face"
    - "**Linear** — Shared minimal colorfulness and flat surface treatment, but Linear is dark-mode-first and sans-serif-driven"
    - "**The Browser Company / Arc** — Similar warm-cream accent tones and a willingness to use typographic personality over color volume to build brand"
    - "**Basecamp** — Same text-dominant, low-color-density editorial approach with flat surfaces and functional rather than decorative UI"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-orange: #f25533;
          --color-concrete: #efefef;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-carbon: #161618;
          --color-mist: #dadada;
          --color-fog: #cccccc;
          --color-parchment: #e4d9c8;
          --color-alert-red: #ff492c;
          --color-ember: #f1641e;
        
          /* Typography — Font Families */
          --font-times-system-serif: 'Times (system serif)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-arial-system-sans: 'Arial (system sans)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.2;
          --text-body-lg: 19px;
          --leading-body-lg: 1.2;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 32px;
          --leading-heading: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-6: 6px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-40: 40px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 12px;
          --radius-buttons: 4px;
          --radius-alertbanners: 8px;
        
          /* Shadows */
          --shadow-md: rgba(22, 22, 24, 0.02) 0px 8px 15px -3px, rgba(22, 22, 24, 0.04) 0px 4px 6px -2px;
        
          /* Surfaces */
          --surface-concrete: #efefef;
          --surface-paper: #ffffff;
          --surface-parchment: #e4d9c8;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-orange: #f25533;
          --color-concrete: #efefef;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-carbon: #161618;
          --color-mist: #dadada;
          --color-fog: #cccccc;
          --color-parchment: #e4d9c8;
          --color-alert-red: #ff492c;
          --color-ember: #f1641e;
        
          /* Typography */
          --font-times-system-serif: 'Times (system serif)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-arial-system-sans: 'Arial (system sans)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.2;
          --text-body-lg: 19px;
          --leading-body-lg: 1.2;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 32px;
          --leading-heading: 1.2;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-40: 40px;
        
          /* Shadows */
          --shadow-md: rgba(22, 22, 24, 0.02) 0px 8px 15px -3px, rgba(22, 22, 24, 0.04) 0px 4px 6px -2px;
        }