# Incident

> Incident — Style Reference

## Prompt Content

```
# Incident — Style Reference
> Technical broadsheet về bê tông. Times-serif headlines nổi trên nền xám ấm với hairline black rules và một tia cam duy nhất phá vỡ sự tĩnh lặng như một tín hiệu.

**Theme:** light

Incident xử lý trang status như một ấn phẩm editorial: typeface Times-serif trên canvas màu xám bê tông, hairlines đen tuyền, và một màu cam tín hiệu ấm áp đóng vai trò như tia sáng xuyên qua mảng đơn sắc. Kỷ luật ở đây là cực đoan — màu sắc bị hạn chế tối đa, chỉ xuất hiện dưới dạng brand accent fill, logo marks, và file-type illustrations trang trí, không bao giờ dùng làm nền button hay action fills. Bề mặt phẳng, giống giấy; chiều sâu đến từ soft 2-layer shadows trên hình ảnh, không phải từ elevation stacking. Kết quả mang phong cách của một tờ technical broadsheet đáng tin cậy hơn là một dashboard điển hình — sự uy tín đến từ sự kiềm chế về typography, không phải từ khối lượng màu sắc.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Signal Orange | `#f25533` | `--color-signal-orange` | Brand accent, logo mark, decorative SVG fills, nav emphasis — điểm nhấn màu ấm duy nhất xuyên suốt hệ thống đơn sắc |
| Concrete | `#efefef` | `--color-concrete` | Page canvas, button background — tông bề mặt chủ đạo tạo cảm giác giấy ấm cho hệ thống |
| Ink | `#000000` | `--color-ink` | Primary text, hairline borders (920+ lần sử dụng), button outlines — màu đen tuyền đảm nhận toàn bộ đường nét cấu trúc |
| Paper | `#ffffff` | `--color-paper` | Card surfaces, nav fills — lớp trắng nằm trên canvas concrete |
| Carbon | `#161618` | `--color-carbon` | Gần đen dùng cho nav strokes, emphasis text, và tinted shadow base — mềm hơn pure ink cho các phần tử xếp lớp |
| Mist | `#dadada` | `--color-mist` | Tông drop-shadow nhẹ, decorative image edge tint |
| Fog | `#cccccc` | `--color-fog` | Tông shadow phụ, decorative image edge tint |
| Parchment | `#e4d9c8` | `--color-parchment` | Bề mặt trang trí màu kem ấm — gần xám nhưng mang tông beige kết nối với họ cam |
| Alert Red | `#ff492c` | `--color-alert-red` | Accent cam trang trí cho icons, marks, và chi tiết đồ họa nhỏ. Dùng làm accent hỗ trợ, không phải màu trạng thái |
| Ember | `#f1641e` | `--color-ember` | Accent outline cam cho tags, dividers, và focused UI edges. Dùng làm accent hỗ trợ, không phải màu trạng thái |

## Tokens — Typography

### Times (system serif) — Body text, headings, nav items, hero copy, card content, list items, footer — Times có hơn 770 lần sử dụng và là lựa chọn typography đặc trưng. Một serif body face trên sản phẩm B2B incident-management là phá vỡ quy ước: nó mượn sự uy tín của một tờ legal broadsheet hoặc technical manual, thay thế Inter/system-ui thông thường bằng thứ gì đó mang phong cách editorial có chủ đích. Weight 400 cho body, 700 cho emphasis và headings. · `--font-times-system-serif`
- **Thay thế:** Source Serif Pro, Lora, hoặc Crimson Text — các serif miễn phí vẫn giữ được cảm giác editorial broadsheet
- **Weights:** 400, 700
- **Sizes:** 16px, 19px, 24px, 32px
- **Line height:** 1.20
- **Vai trò:** Body text, headings, nav items, hero copy, card content, list items, footer — Times có hơn 770 lần sử dụng và là lựa chọn typography đặc trưng. Một serif body face trên sản phẩm B2B incident-management là phá vỡ quy ước: nó mượn sự uy tín của một tờ legal broadsheet hoặc technical manual, thay thế Inter/system-ui thông thường bằng thứ gì đó mang phong cách editorial có chủ đích. Weight 400 cho body, 700 cho emphasis và headings.

### Arial (system sans) — Small UI micro-text: button labels, nav utility text, icon-adjacent labels. Arial ở 13px xử lý các label chức năng trong khi Times đảm nhận giọng điệu — sự phân chia serif/sans có chủ đích, nơi Times nói điều gì đó còn Arial chỉ gắn thẻ. · `--font-arial-system-sans`
- **Thay thế:** Inter hoặc system-ui ở 13px
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.20
- **Vai trò:** Small UI micro-text: button labels, nav utility text, icon-adjacent labels. Arial ở 13px xử lý các label chức năng trong khi Times đảm nhận giọng điệu — sự phân chia serif/sans có chủ đích, nơi Times nói điều gì đó còn Arial chỉ gắn thẻ.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|-------------|----------------|-------|
| body | 16px | 1.2 | — | `--text-body` |
| body-lg | 19px | 1.2 | — | `--text-body-lg` |
| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |
| heading | 32px | 1.2 | — | `--text-heading` |

## Tokens — Spacing & Shapes

**Đơn vị cơ sở:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 16 | 16px | `--spacing-16` |
| 19 | 19px | `--spacing-19` |
| 20 | 20px | `--spacing-20` |
| 21 | 21px | `--spacing-21` |
| 40 | 40px | `--spacing-40` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 4px |
| cards | 12px |
| buttons | 4px |
| alertBanners | 8px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| 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
**Vai trò:** Điều hướng cấp cao nhất của site

Nền trắng (#ffffff), nằm trên canvas concrete. Dùng Times cho nav labels ở 16px weight 400. Brand mark màu Signal Orange (#f25533) neo bên trái. Hairline black (#000000) bottom border ngăn cách với nội dung trang. Carbon (#161618) dùng cho các phần tử logo được stroke.

### Neutral Button
**Vai trò:** Hành động tương tác chính

Nền Concrete (#efefef) — giống với page canvas, khiến button trông như một tấm thẻ nổi lên thay vì một action fill. Viền đen (#000000) 1px, radius 4px, padding 1px trên/dưới và 6px trái/phải (cố tình gọn gàng). Label bằng Arial 13px weight 400, Ink (#000000). Không color fill, không shadow — button là một hình chữ nhật có nhãn với khung hairline.

### Critical Alert Banner
**Vai trò:** Hiển thị trạng thái outage hoặc incident

Nền soft red/pink wash (pha màu Alert Red #ff492c ở độ mờ thấp), icon warning triangle căn trái màu Alert Red. Headline bằng Times 16px weight 700, body text bằng Times 16px weight 400. Card full-width với radius 8px và viền đỏ bão hòa trên container card bên dưới.

### Warning Alert Banner
**Vai trò:** Thông báo dịch vụ suy giảm hoặc bảo trì

Icon màu hổ phách/vàng (Ember #f1641e) với warning triangle. Headline bằng Times 16px weight 700, body mô tả bằng Times 16px weight 400. Nằm bên trong một thẻ trắng với viền màu hổ phách nhạt.

### Status Tag / Pill
**Vai trò:** Chỉ báo trạng thái cấp component (ví dụ: Website, App)

Tag góc bo nhỏ, radius 4px. Nền pha màu phù hợp với màu trạng thái: soft red wash cho outages, soft amber wash cho degraded. Label bằng Arial hoặc Times ở 13px, màu phù hợp với hue trạng thái. Inline, nằm cạnh các tag khác.

### Status Card
**Vai trò:** Container cho một báo cáo incident đơn lẻ

Nền trắng (#ffffff) trên canvas concrete. Radius 12px. Viền phụ thuộc vào màu trạng thái: đỏ-hồng cho active incidents, hổ phách cho warnings, xám nhạt cho resolved. Padding trong 24px. Chứa icon, headline, body, và dòng metadata màu xám nhạt.

### Section Heading (Serif)
**Vai trò:** Tiêu đề trang và section

Times weight 400 hoặc 700, scale 24–32px. Màu Ink (#000000) cho primary, Carbon (#161618) cho secondary. Không gạch chân, không trang trí — serif face tự đảm nhận công việc phân cấp. Thường đi kèm với đoạn body 16px bên dưới cùng family ở 16px.

### Text Link
**Vai trò:** Điều hướng nội tuyến đến subpage hoặc tài nguyên bên ngoài

Văn bản gạch chân màu xanh bão hòa (xuất hiện dạng ~#0000ff trong các link đã render), Arial hoặc Times tùy ngữ cảnh. Không mũi tên, không icon — gạch chân là affordance. Nằm trong các khối body text serif.

### File-Type Illustration
**Vai trò:** Đồ họa trang trí cho tham chiếu định dạng file

Icon hình tài liệu với góc gập, tô màu Signal Orange (#f25533), với text label trắng (ví dụ: 'PNG') bằng Arial bold. Không shadow, không border — flat brand-colored fill trên canvas concrete.

### Product Feature Card
**Vai trò:** Card ưu tiên văn bản mô tả khả năng sản phẩm

Không có container card hiển thị — text nằm trực tiếp trên canvas concrete. Serif headline (Times 24–32px), sans-serif body description (Arial 13px hoặc Times 16px), text link gạch chân. Kèm tùy chọn line-art illustration màu xanh hoặc cam. Mật độ văn bản tối đa mà không có card chrome.

## Do's and Don'ts

### Nên
- Dùng Times (hoặc Source Serif Pro thay thế) cho toàn bộ body copy, headings, nav items, và hero text — serif face là giọng điệu thương hiệu
- Đặt page canvas là #efefef (Concrete) và để cards nằm trong #ffffff (Paper) bên trên — không bao giờ đảo ngược thành trang trắng với thẻ xám
- Dùng #000000 cho tất cả structural borders và hairline rules — borderColor là vai trò chủ đạo của màu đen tuyền trong hệ thống này
- Dùng Signal Orange (#f25533) chỉ cho brand marks, logo elements, decorative fills, và file-type illustrations — không bao giờ dùng cho action buttons hoặc functional UI
- Đặt button background là #efefef với viền đen 1px, radius 4px, và padding 1px/6px — buttons nên trông như các khung có nhãn, không phải action fill
- Giữ type scale gọn gàng: 13px (Arial micro-labels), 16px (Times body), 19px (Times body-lg), 24px (Times heading-sm), 32px (Times heading) — không đưa vào kích thước ngoài phạm vi này
- Dùng status-tinted card borders (đỏ cho critical, hổ phách cho warning) để truyền đạt mức độ nghiêm trọng — màu viền làm công việc ngữ nghĩa, không phải nền màu

### Không nên
- Không dùng sans-serif (Inter, system-ui) cho body copy hoặc headings — thay thế Times sẽ phá vỡ bản sắc editorial
- Không thêm colored button fills (xanh, cam, xanh lá) cho primary actions — hệ thống dùng neutral concrete buttons với viền đen
- Không dùng gradients — không phát hiện gradient nào trong nguồn và thẩm mỹ editorial phẳng loại bỏ chúng
- Không dùng heavy drop-shadows cho elevation — shadows chỉ dành cho image containers ở độ mờ 2-4%
- Không đưa xanh lam hoặc xanh lá làm brand hoặc accent colors — bảng màu chỉ ấm (họ cam và hổ phách)
- Không bo tròn buttons quá 4px hoặc dùng pill shapes — button geometry hơi vuông củng cố cảm giác broadsheet
- Không dùng màu để chỉ trạng thái active hoặc selected — dựa vào weight (400→700) và underline affordances trong hệ thống serif

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Concrete | `#efefef` | Page canvas — nền xám nhạt ấm áp làm nền cho mọi thứ |
| 2 | Paper | `#ffffff` | Card surfaces và nav containers — lớp trắng bên trên concrete |
| 3 | Parchment | `#e4d9c8` | Tông ấm trang trí cho file-type illustrations và graphic elements |

## Elevation

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

## Imagery

Ngôn ngữ hình ảnh chủ yếu là text-dominant với iconography thưa thớt. Hình ảnh thuộc ba loại: (1) file-type illustrations — hình tài liệu phẳng màu Signal Orange với góc gập và nhãn định dạng trắng (ví dụ: 'PNG'), dùng để neo các feature sections về xử lý file; (2) line-art directional arrows màu xanh bão hòa, dùng làm decorative flow indicators trên product pages; (3) product screenshots hoặc UI captures với soft carbon-tinted shadow đặc trưng (rgba(22,22,24,0.02–0.04)). Không photography, không lifestyle imagery, không 3D renders. Trang mang phong cách editorial — hình ảnh là functional illustrations, không phải atmospheric decoration.

## Layout

Max-width ~1200px căn giữa trên canvas concrete. Các trang ưu tiên văn bản: serif headlines, single-column body blocks, khoảng trống dọc rộng rãi (64px section gaps). Không hero image — đầu mỗi trang là serif headline căn giữa hoặc căn trái trên nền canvas trống. Các section chảy thành các dải phẳng được phân cách bằng hairline black rules thay vì màu nền xen kẽ. Navigation là top bar đơn giản, không sticky hoặc floating. Product feature sections dùng bố cục hai cột bất đối xứng (text-left, illustration-right) không có card containers — text nằm trực tiếp trên canvas. Phần status page dùng full-width alert banners với chromatic-tinted borders. Mật độ tổng thể thấp: whitespace là yếu tố cấu trúc chính, với hairlines và serif hierarchy đảm nhận công việc tổ chức.

## Agent Prompt Guide

Tham chiếu màu nhanh:
- Text: #000000 (Ink) cho body, #161618 (Carbon) cho emphasis
- Background: #efefef (Concrete) page canvas, #ffffff (Paper) cards
- Border: #000000 (Ink) cho tất cả structural hairlines
- Accent: #f25533 (Signal Orange) cho brand marks và decorative fills
- Status critical: #ff492c (Alert Red)
- Status warning: #f1641e (Ember)
- primary action: không có màu CTA riêng biệt

3-5 Ví dụ Component Prompts:

1. Tạo một critical alert banner: nền soft red-pink wash, icon warning triangle màu Alert Red (#ff492c) bên trái. Headline 'Service disruption detected' bằng Times 16px weight 700, #000000. Body text bằng Times 16px weight 400, #000000. Full-width với border-radius 8px, nằm trên thẻ trắng với viền đỏ nhạt.

2. Tạo một neutral button: nền #efefef, viền 1px solid #000000, border-radius 4px, padding 1px trên/dưới và 6px trái/phải. Label 'Get started' bằng Arial 13px weight 400, #000000. Không shadow, không đổi fill khi hover.

3. Tạo một page section heading: 'On-call gets the right people in the room' bằng Times 32px weight 700, #000000, trên page canvas #efefef. Bên dưới, một đoạn body bằng Times 16px weight 400 ở line-height 19px. Không decorative elements, không gạch chân, không accent color.

4. Tạo một status card: nền trắng (#ffffff), border-radius 12px, viền 1px màu hổ phách nhạt (#f1641e ở độ mờ thấp). Padding trong 24px. Chứa icon warning triangle màu Ember (#f1641e), headline Times 16px weight 700, và description Times 16px weight 400.

5. Tạo một file-type illustration: hình tài liệu với góc trên bên phải gập, tô màu Signal Orange (#f25533), với 'PNG' bằng Arial bold trắng 32px căn giữa. Phẳng — không shadow, không border, không gradient. Nằm trên page canvas #efefef.

## Similar Brands

- **Stripe** — Cùng sự kiềm chế editorial với hairline rules và bề mặt đơn sắc tương phản cao, dù Stripe dùng sans-serif body face
- **Linear** — Cùng mức độ minimal colorfulness và xử lý bề mặt phẳng, nhưng Linear ưu tiên dark-mode và sans-serif
- **The Browser Company / Arc** — Cùng tông accent kem ấm và sẵn sàng dùng cá tính typography thay vì khối lượng màu sắc để xây dựng thương hiệu
- **Basecamp** — Cùng cách tiếp cận editorial text-dominant, mật độ màu thấp với bề mặt phẳng và UI chức năng thay vì trang trí

## 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;
}
```