# Pirsch Analytics

> Pirsch Analytics — Style Reference

## Prompt Content

```
# Pirsch Analytics — Style Reference
> cuốn sổ giấy phơi nắng với các vệt highlighter

**Theme:** light

Pirsch sử dụng ngôn ngữ sổ giấy ấm áp: nền cream mềm mại (#f8f5ed) thay thế màu trắng SaaS thông thường, và điểm nhấn màu sắc duy nhất là vàng nắng (#ffda6e) — trông như một vệt highlighter, không phải một con dấu thương hiệu. Gần như toàn bộ giao diện là achromatic — chữ đen mực và viền 1px hairline đảm nhận công việc cấu trúc mà ở nơi khác shadow và fill đảm nhiệm. Typography là một hệ thống đơn font (DM Sans) chạy từ kích thước nhỏ 14px đến display 64px ấn tượng, với khoảng thở rộng rãi theo grid 8px và góc bo 24px bất thường khiến các card trông như sticky notes. Màu xanh lá (#6ece9d) xuất hiện dè dặt như tín hiệu trạng thái/sẵn sàng (badge happy-customer, chấm theme-toggle) và không bao giờ cạnh tranh với màu vàng. Cảm giác tổng thể là editorial và xúc giác — gần với một báo cáo in ấn hơn là một dashboard.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Sunshine Highlight | `#ffda6e` | `--color-sunshine-highlight` | Fill hành động chính, badge bước, điểm nhấn accent, nền callout |
| Mint Signal | `#6ece9d` | `--color-mint-signal` | Màu hành động xanh lá cho filled buttons, trạng thái navigation được chọn, và các thời điểm chuyển đổi tập trung |
| Cream Paper | `#f8f5ed` | `--color-cream-paper` | Canvas trang, bề mặt card, bên trong pill |
| Ink | `#000000` | `--color-ink` | Heading chính, body text, viền hairline 1px trên card, ảnh và divider |
| Graphite | `#707070` | `--color-graphite` | Body text phụ, link text, border và divider mờ |

## Tokens — Typography

### DM Sans — Hệ thống đơn font đảm nhận mọi thứ từ body copy đến display headline 64px. Weight 400 cho văn xuôi, 500 cho heading, badge bước và nhãn nút. Kích hoạt stylistic alternates ss03 và ss04 mang đến cho DM Sans tính cách nhân văn hơn, hơi hướng editorial phù hợp với ẩn dụ sổ giấy. · `--font-dm-sans`
- **Thay thế:** Inter, Nunito Sans
- **Weights:** 400, 500
- **Cỡ chữ:** 14, 16, 18, 20, 24, 28, 64
- **Line height:** 1.25–2.22
- **Letter spacing:** -0.016em trên display heading, +0.286em trên step badge in hoa
- **OpenType features:** `"ss03", "ss04"`
- **Vai trò:** Hệ thống đơn font đảm nhận mọi thứ từ body copy đến display headline 64px. Weight 400 cho văn xuôi, 500 cho heading, badge bước và nhãn nút. Kích hoạt stylistic alternates ss03 và ss04 mang đến cho DM Sans tính cách nhân văn hơn, hơi hướng editorial phù hợp với ẩn dụ sổ giấy.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.5 | — | `--text-caption` |
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| body | 18px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.5 | — | `--text-subheading` |
| heading-sm | 24px | 1.5 | — | `--text-heading-sm` |
| heading | 28px | 1.25 | — | `--text-heading` |
| display | 64px | 1.25 | -1.02px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 128 | 128px | `--spacing-128` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 24px |
| images | 12px |
| inputs | 6px |
| buttons | 24px |

### Layout

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

## Components

### Sunshine Filled Button
**Vai trò:** Primary action

Radius 24px, fill #ffda6, text #000000, padding 16px 24px, DM Sans 500. Text căn giữa, dùng cho CTA chính 'Get Started For Free'. Một instance duy nhất trên mỗi view — màu vàng được phân bổ có chủ đích.

### Ghost Ink Button
**Vai trò:** Secondary action

Radius 24px, fill trong suốt, border 1px #000000, text #000000, padding 16px 24px, DM Sans 500. Kết hợp với sunshine button hoặc đứng một mình trên các ngữ cảnh neutral.

### Numbered Step Badge
**Vai trò:** Đánh dấu chỉ mục section

Pill (radius 9999px) chia làm hai vùng: ô vuông cream 24x24 bên trái với số #000000 ở cỡ 14px 500, và vùng bên phải với tên bước in hoa 14px 500 letterspaced +0.286em. Viền 1px #000000 bao quanh toàn bộ pill. Xác định '1 EASY START', '2 INSTANT OUTPUT', '6 GOOD COMPANY'.

### Feature Card
**Vai trò:** Nội dung feature hai cột

Bề mặt cream (#f8f5ed), radius 24px, viền hairline 1px #000000, padding 32px, không shadow. Heading ở 24px DM Sans 500, body ở 18px #707070. Card tự định nghĩa qua đường viền, không phải fill.

### Filter Tag Pill
**Vai trò:** Chip filter đang hoạt động

Radius 24px, fill gần trắng (#f8f5ed), border 1px #000000, 14px DM Sans 500 với icon dẫn đầu. Dùng cho bộ tag 'Pages / Entry Pages / Exit Pages / Referrers / Sources' và biến thể tối 'Country is Germany'.

### Dark Filter Chip
**Vai trò:** Trạng thái filter đã áp dụng

Radius 24px, fill #000000, text #f8f5ed, 14px DM Sans 500, với dấu × đóng ở cuối. Tương phản với filter tag sáng để hiển thị trạng thái đã áp dụng.

### Logo Grid Cell
**Vai trò:** Social proof / logo khách hàng

Trong suốt, không border, wordmark hoặc mark đơn sắc căn giữa màu #000000. Grid 8 cột responsive với gap 32px. Logo được render dưới dạng hình khối thô trên nền cream — không có card wrapper.

### Display Headline
**Vai trò:** Hero section trang

64px DM Sans 500, #000000, letter-spacing -0.016em (~-1.02px), line-height 1.25. Căn giữa, nằm dưới step badge với gap 32px. Mang trọng lượng editorial của toàn bộ trang.

### Section Subhead
**Vai trò:** Đoạn văn hỗ trợ

18px DM Sans 400, #707070, max-width ~640px, căn giữa. Giọng văn mang tính hướng dẫn và đơn giản — nằm cách display headline 16px.

### Status Dot Badge
**Vai trò:** Chỉ báo trạng thái Live / happy

Pill radius 24px hoặc hình tròn 12px, fill #6ece9 với nhãn #000000 tùy chọn. Dùng dè dặt cho chỉ báo 'happy customer' và chấm theme-toggle ở góc.

### Bordered Avatar Tile
**Vai trò:** Hiển thị brand mark

Hình vuông 48px (hoặc tương tự) với radius 12px, fill cream, border 1px #000000, icon đơn sắc căn giữa. Dùng cho logo lockup của Pirsch trong CTA block.

### CTA Block
**Vai trò:** Section chuyển đổi cuối cùng

Stack căn giữa: avatar tile (radius 12px) → câu hỏi display 64px → subtext 18px #707070 → sunshine button. Section padding 64px trên và dưới. Toàn bộ trang kết thúc tại đây.

### Image Frame
**Vai trò:** Viền ảnh nội tuyến

Radius 12px, border 1px #000000, không shadow. Mang lại cho mọi ảnh chụp màn hình sản phẩm cảm giác như in trên giấy.

## Do's and Don'ts

### Do
- Dùng #ffda6 (Sunshine Highlight) cho CTA chính duy nhất trên mỗi view; không bao giờ fill các bề mặt lớn hoặc nền với nó.
- Định nghĩa card và tile bằng viền hairline 1px #000000 với radius 24px — không bao giờ dùng drop shadow để tạo độ cao.
- Đặt display headline ở 64px DM Sans 500 với letter-spacing -0.016em; đây là neo editorial của mọi section.
- Dùng DM Sans 500 in hoa với letter-spacing +0.286em chỉ cho step badge và nhãn nhỏ; để body copy không tracking.
- Giữ nền cream (#f8f5ed) liền mạch xuyên suốt các section — thay đổi nhịp điệu qua spacing và border weight, không phải màu nền.
- Kích hoạt DM Sans stylistic alternates 'ss03' và 'ss04' toàn cục; chúng mang tính cách nhân văn làm cho hệ thống có cảm giác editorial.
- Dành riêng #6ece9d (Mint Signal) cho status dot và chip trạng thái tích cực; nó là tín hiệu, không phải màu thương hiệu.

### Don't
- Không thêm drop shadow, blur, hoặc bất kỳ dạng box-shadow elevation nào — hệ thống cố tình phẳng và mang phong cách mực trên giấy.
- Không giới thiệu font body thứ hai hoặc serif — DM Sans ở nhiều weight là toàn bộ giọng nói typographic.
- Không dùng trắng tinh (#ffffff) làm bề mặt — cream #f8f5ed là canvas, và màu trắng sẽ phá vỡ ẩn dụ giấy.
- Không dùng màu vàng (#ffda6e) cho body text ở cỡ nhỏ; độ tương phản của nó trên nền cream giảm xuống dưới ngưỡng đọc được.
- Không dùng màu xanh lá (#6ece9d) làm CTA hoặc nền button — nó là tín hiệu trạng thái, không phải màu hành động.
- Không đặt body hoặc caption text ở #000000 khi #707070 đọc rõ ràng; dành mực cho heading và điểm nhấn.
- Không thêm gradient, image overlay, hoặc decorative fill — hệ thống là flat color, đường 1px và một swatch accent.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Cream Page | `#f8f5ed` | Canvas cơ sở — nền giấy ấm áp mang toàn bộ hệ thống |
| 1 | Cream Card | `#f8f5ed` | Feature card nằm trên cùng cream nhưng được định nghĩa bởi viền hairline ink 1px và radius 24px, không phải bằng độ tương phản màu |
| 2 | Sunshine Callout | `#ffda6` | Bề mặt vàng dùng cho CTA chính và badge số bước — bề mặt có màu sắc duy nhất trong stack |

## Elevation

Hệ thống có hiệu quả zero shadow elevation. Card, ảnh và tile được định nghĩa hoàn toàn bằng viền hairline #000000 1px trên bề mặt cream — logic thị giác của đường mực trên giấy, không phải của các lớp nổi. Không drop shadow, không inner glow, không blur. Nếu một component cần cảm giác nổi lên trên trang, hãy tăng border weight hoặc chuyển sang bề mặt vàng — không bao giờ thêm shadow.

## Imagery

Imagery được kiềm chế và chức năng: ảnh chụp màn hình sản phẩm đơn sắc (dashboard tiles, filter chips, data tables) được đóng khung bởi viền ink 1px với radius 12px, không bao giờ full-bleed. Logo khách hàng xuất hiện dưới dạng wordmark đơn sắc thô trên nền cream, không có card wrapper hoặc xử lý màu sắc. Brand mark của Pirsch là một glyph đen duy nhất trên nền cream. Không photography, không illustration, không decorative graphics — màu sắc duy nhất trong hệ thống thị giác đến từ hai swatch accent, và chúng xuất hiện dưới dạng flat fill, không bao giờ là gradient hoặc ảnh nhuộm màu.

## Layout

Container căn giữa, max-width 1200px với section gap rộng 64px. Trang đọc như một scroll dọc các band editorial: logo cloud → numbered step → display headline → subtext căn giữa → feature card hai cột → logo cloud → CTA. Tất cả hero section đều là stack căn giữa trên nền cream — không có bố cục split text/image, không có layout bất đối xứng. Feature section sử dụng grid card 2 cột với column gap 32px; logo cloud sử dụng grid 4–8 cột. Navigation tối thiểu: wordmark nhỏ, không sticky header, không sidebar. Density comfortable và thoáng — mỗi section có đủ không gian dọc để lắng xuống trước khi section tiếp theo bắt đầu.

## Agent Prompt Guide

Quick Color Reference
- background: #f8f5ed (Cream Paper)
- text primary: #000000 (Ink)
- text secondary: #707070 (Graphite)
- border: 1px #000000 hairline
- accent: #ffda6e (Sunshine Highlight)
- status: #6ece9d (Mint Signal)
- primary action: #ffda6e (filled action)

Example Component Prompts
1. Tạo một hero section căn giữa trên nền #f8f5ed: một pill step badge (radius 24px, border 1px #000000, 14px DM Sans 500 với letter-spacing +0.286em, ô 24x24 bên trái có số) phía trên headline 64px DM Sans 500 màu #000000 với letter-spacing -0.016em, sau đó là subtext 18px #707070 giới hạn rộng 640px.
2. Xây dựng một feature card: fill #f8f5ed, radius 24px, border 1px #000000, padding 32px, heading 24px DM Sans 500 màu #000000, body 18px #707070. Không shadow.
3. Tạo một sunshine CTA button: fill #ffda6e, text #000000, radius 24px, padding 16px 24px, DM Sans 500. Căn giữa bên dưới subtext với gap 32px.
4. Xây dựng một hàng filter tag: pill radius 24px, fill #f8f5ed, border 1px #000000, nhãn 14px DM Sans 500, gap 8px giữa các tag, row padding 16px.
5. Tạo một logo cloud: grid 4 cột, gap 32px, mỗi ô chứa một wordmark đơn sắc #000000 căn giữa trên nền cream trong suốt — không card wrapper, không border.

## Stroke & Border System

Hairline border là công cụ cấu trúc chính. Mặc định dùng 1px solid #000000 trên mọi card, ảnh, input và element được nhóm. Dùng 1px #707070 cho divider tinh tế giữa các khối text. Border radius đậm và nhất quán: 24px cho card, button và tile lớn; 12px cho ảnh và tile nhỏ hơn; 9999px (pill) cho tag và step badge; 6px cho form input. Card radius 24px kết hợp với viền ink 1px là hình dạng dễ nhận biết nhất trong hệ thống — nó mang lại cho mọi container chất sticky-note, vẽ tay.

## Two-Accent Discipline

Hệ thống 0% màu sắc ở cấp độ cấu trúc, vì vậy hai màu accent của nó phải được sử dụng có chừng mực. #ffda6e được phân bổ hạn chế: một CTA filled trên mỗi view, cộng với các fill callout nhỏ. #6ece9d được phân bổ hạn chế hơn nữa: status dot, live indicator và đôi khi là chip tích cực. Cả hai màu hoạt động như swatch highlighter trên một trang sổ — nếu bạn thấy mình dùng chúng cho UI cấu trúc (nav, nền lớn, nhiều button), section đó đã mất đi sự điềm tĩnh editorial định nghĩa hệ thống.

## Similar Brands

- **Stripe** — Cùng single-family sans (dòng DM Sans / Inter), khoảng trắng rộng rãi và bảng màu gần như đơn sắc để một màu accent duy nhất mang hệ thống phân cấp
- **Linear** — Cùng logic hairline-border-on-light-surface không drop shadow, và kỷ luật phân bổ màu sắc cho một accent sống động trên mỗi view
- **Notion** — Cùng canvas off-white ấm áp, card radius bo tròn 20–24px, và hệ thống accent hai tông tối giản đọc như giấy chứ không phải màn hình
- **Fathom Analytics** — Đối thủ cạnh tranh trực tiếp trong không gian privacy-analytics với cùng cách tiếp cận editorial single-accent, cream canvas và display headline cỡ 64px

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-sunshine-highlight: #ffda6e;
  --color-mint-signal: #6ece9d;
  --color-cream-paper: #f8f5ed;
  --color-ink: #000000;
  --color-graphite: #707070;

  /* Typography — Font Families */
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.5;
  --text-heading: 28px;
  --leading-heading: 1.25;
  --text-display: 64px;
  --leading-display: 1.25;
  --tracking-display: -1.02px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-128: 128px;
  --spacing-192: 192px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 32px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 24px;
  --radius-images: 12px;
  --radius-inputs: 6px;
  --radius-buttons: 24px;

  /* Surfaces */
  --surface-cream-page: #f8f5ed;
  --surface-cream-card: #f8f5ed;
  --surface-sunshine-callout: #ffda6;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-sunshine-highlight: #ffda6e;
  --color-mint-signal: #6ece9d;
  --color-cream-paper: #f8f5ed;
  --color-ink: #000000;
  --color-graphite: #707070;

  /* Typography */
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.5;
  --text-heading: 28px;
  --leading-heading: 1.25;
  --text-display: 64px;
  --leading-display: 1.25;
  --tracking-display: -1.02px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-128: 128px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
}
```