# Seline Analytics

> # Seline Analytics — Style Reference

## Prompt Content

```
# Seline Analytics — Style Reference
> Đài quan sát dữ liệu ngập nắng trên nền giấy ấm — một canvas màu kem nơi chỉ một tín hiệu xanh duy nhất được phép lên tiếng.

**Theme:** light

Seline sử dụng ngôn ngữ không gian làm việc dữ liệu tràn ngập ánh sáng: một canvas màu kem ấm (#fafaf9) mang một tín hiệu xanh lam sống động duy nhất trên nền giao diện hoàn toàn trung tính, tạo nên một đài quan sát tĩnh lặng nơi một màu sắc luôn mang ý nghĩa "dữ liệu trực tiếp, nhấp vào đây, có sự kiện xảy ra". Bảng màu được cố tình giữ 96% thang xám ấm — giọng màu duy nhất là xanh da trời (#3ba6f1) đảm nhận vai trò cột biểu đồ, nền CTA, đường viền icon, link, và highlight nội tuyến, tất cả đều cùng một sắc độ. Typography kết hợp Inter (body và UI) với Roobert (display và heading lớn) — cả hai đều thuộc dòng geometric humanist, với display weight được kéo chặt ở negative tracking để headline đọc như những tuyên bố gọn gàng, tự tin thay vì copy SaaS mềm mại. Các component cực kỳ nhẹ: pill buttons với border-radius 9999px, đường viền đá mỏng 1px, và shadow chỉ dùng duy nhất cho thẻ preview sản phẩm — không dùng ở đâu khác; trang nằm trên bề mặt như tài liệu in trên giấy, không phải dashboard glassmorphic. Các chú thích viết tay và một cutout ảnh lặp lại mang đến cho hệ thống chất liệu tự nhận thức kiểu "chúng tôi tự xây cho mình", nhưng ngữ pháp cốt lõi vẫn kỷ luật: xám ấm, một màu xanh, một thẻ trắng, một công thức shadow.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Signal Blue | `#3ba6f1` | `--color-signal-blue` | Màu hành động xanh cho filled buttons, trạng thái navigation được chọn, và các thời điểm chuyển đổi tập trung. |
| Highlight Wash | `#c1e1f7` | `--color-highlight-wash` | Lớp phủ xám nhạt cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung. Không nâng cấp lên màu CTA chính. |
| Canvas Cream | `#fafaf9` | `--color-canvas-cream` | Nền trang, body của tài liệu — màu trắng kem ấm stone-50 giúp hệ thống không bị cảm giác lâm sàng. |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt thẻ, panel nâng cao, chữ trên nền tối, nền preview dashboard. |
| Stone Ink | `#0c0a09` | `--color-stone-ink` | Heading chính và body text — gần đen với undertone ấm, không bao giờ là #000 thuần. |
| Stone Charcoal | `#1c1917` | `--color-stone-charcoal` | Nền secondary button, bề mặt tối nhấn — ấm/sáng hơn Stone Ink một bậc cho các khoảnh khắc UI tối. |
| Warm Slate | `#78716c` | `--color-warm-slate` | Body text phụ, helper text, label tinh tế — màu xám làm việc của hệ thống. |
| Soft Slate | `#a8a29e` | `--color-soft-slate` | Text cấp ba, caption mờ, label ít nhấn mạnh. |
| Mist Gray | `#afafae` | `--color-mist-gray` | Nền icon trang trí, placeholder stroke, yếu tố đồ họa ít nhấn mạnh. |
| Pearl Border | `#e5e7eb` | `--color-pearl-border` | Hairline 1px chính — viền thẻ, divider, viền input, outline button; màu viền chiếm ưu thế về tần suất. |
| Warm Border | `#d6d3d1` | `--color-warm-border` | Viền thứ cấp — input field, divider section, hairline ấm hơn cho UI có container. |
| Fog Border | `#e1dfdd` | `--color-fog-border` | Viền navigation, divider tinh tế giữa các mục header — đường cấu trúc nhẹ nhất. |
| Heading Mute | `#c9c5c2` | `--color-heading-mute` | Headline placeholder, heading text bị vô hiệu — màu xám duy nhất có thể thay thế Stone Ink ở kích thước display. |

## Tokens — Typography

### Inter — Body text, UI controls, navigation, buttons, form labels, footer — họ chủ lực; weight 400 cho đoạn văn, 500 cho button và label được nhấn mạnh, 600 cho inline emphasis mạnh · `--font-inter`
- **Thay thế:** Inter (Google Fonts) — đã có sẵn trên Google Fonts nên không cần thay thế
- **Weights:** 400, 500, 600
- **Kích thước:** 12px, 13px, 14px, 15px, 16px, 18px
- **Line height:** 1.43–1.92
- **Letter spacing:** 0.0030em đến 0.0250em; body ở 16px dùng ~0.003em (positive tracking nhẹ), caption ở 12px mở rộng lên 0.025em
- **OpenType features:** `"cv11", "ss01" bật cho chữ số và alternates UI tiêu chuẩn của Seline`
- **Vai trò:** Body text, UI controls, navigation, buttons, form labels, footer — họ chủ lực; weight 400 cho đoạn văn, 500 cho button và label được nhấn mạnh, 600 cho inline emphasis mạnh

### Roobert — Display và heading lớn — hero 52px, subheading 32px, và lead paragraph 20px; tracking chặt hơn ở kích thước lớn tạo câu lệnh gọn gàng, tự tin · `--font-roobert`
- **Thay thế:** Roobert (custom, bởi Displaay) — thay thế bằng "Geist" hoặc "General Sans" từ Fontshare; cả hai đều có tỷ lệ geometric humanist tương tự với display tracking chặt.
- **Weights:** 400, 500
- **Kích thước:** 16px, 18px, 20px, 32px, 52px
- **Line height:** 1.12–1.25
- **Letter spacing:** −0.025em ở 52px (= −1.3px), −0.021em ở 32px (= −0.67px), −0.017em ở 20px (= −0.34px), −0.005em ở 18px (= −0.09px), 0.003em ở 16px
- **OpenType features:** `"ss01" bật cho geometric alternates bo tròn tạo nên sự ấm áp đặc trưng của Roobert`
- **Vai trò:** Display và heading lớn — hero 52px, subheading 32px, và lead paragraph 20px; tracking chặt hơn ở kích thước lớn tạo câu lệnh gọn gàng, tự tin

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 12px | 1.5 | 0.3px | `--text-caption` |
| body-sm | 14px | 1.5 | 0.06px | `--text-body-sm` |
| body | 16px | 1.54 | 0.05px | `--text-body` |
| body-lg | 18px | 1.56 | -0.09px | `--text-body-lg` |
| subheading | 20px | 1.5 | -0.34px | `--text-subheading` |
| heading-sm | 32px | 1.2 | -0.67px | `--text-heading-sm` |
| heading | 52px | 1.12 | -1.3px | `--text-heading` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 10px |
| inputs | 4px |
| buttons | 9999px (pill) hoặc 10px (rectangular) |
| navItems | 9999px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| md | `rgba(0, 0, 0, 0.05) 0px 4px 16px 0px` | `--shadow-md` |
| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |
| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |
| xl | `rgba(17, 12, 46, 0.12) 0px 12px 45px 0px` | `--shadow-xl` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 96-128px
- **Card padding:** 24-32px
- **Element gap:** 8-16px

## Components

### Signal Blue Filled Button (Primary)
**Vai trò:** Call-to-action chính — "Add to your website", "Start free trial", "Get a demo"

Hình pill với border-radius 9999px, nền #3ba6f1, chữ #ffffff ở Inter 500 14-16px, padding ngang 12-16px, padding dọc 8-11px, không viền, không shadow. Đôi khi kèm icon inline nhỏ (mũi tên) màu trắng 16px.

### Ghost Outlined Button (Secondary)
**Vai trò:** Hành động đồng hành với primary — "View live demo", "Get a demo"

Pill với border-radius 9999px, nền trong suốt hoặc #ffffff, viền 1px #e5e7eb, chữ Stone Ink (#0c0a09) ở Inter 500 14-16px, padding 12-16px ngang, 8-11px dọc. Đôi khi kèm icon Signal Blue 16px cạnh label.

### Dark Charcoal Button (Tertiary)
**Vai trò:** Button nhấn tối hiếm gặp để tạo biến thể nhấn mạnh

Pill với border-radius 9999px, nền #1c1917, chữ #ffffff ở Inter 500 14-16px, padding tương ứng với Signal Blue button để căn chỉnh thị giác khi đặt cạnh nhau.

### Dashboard Preview Card (Hero Asset)
**Vai trò:** Ảnh chụp màn hình sản phẩm lớn nổi trong hero section

Container với border-radius 10px, viền 1px #e5e7eb, shadow nhẹ rgba(0,0,0,0.05) 0px 4px 16px, kèm accent shadow sâu hơn rgba(17,12,46,0.12) 0px 12px 45px bên dưới để tạo hiệu ứng thẻ nổi. Nội dung bên trong là full dashboard mockup trên nền #ffffff.

### Feature Stat Card (In-Dashboard)
**Vai trò:** Ô metric bên trong product preview — Total Visits, Views per Visit, Visit Duration, Bounce Rate, Revenue

Thẻ phẳng trên bề mặt dashboard, border-radius 4px, không viền, không shadow, padding trong 8-12px. Label ở Inter 500 12px màu #78716c, value ở Roobert 400 20-24px màu #0c0a09, chỉ báo xu hướng (ví dụ "+21%") màu Signal Blue ở Inter 500 12px.

### Bar Chart Element
**Vai trò:** Trực quan hóa dữ liệu nội tuyến bên trong dashboard preview

Cột dọc rộng 8px, khoảng cách cột 2-4px, tô màu Signal Blue (#3ba6f1) mặc định và #c1e1f7 cho cột thứ cấp/kỳ trước, nằm trên baseline trong suốt; không hiển thị trục, tối giản.

### Stat Block (Feature Section)
**Vai trò:** Ô metric lớn với label + value + sublabel

Label ở Inter 500 12-14px viết hoa hoặc Sentence case màu #78716c, value ở Roobert 400 32-52px màu #0c0a09, sublabel ở Inter 400 14px màu #78716c. Không có card chrome — nằm trực tiếp trên canvas.

### Testimonial Card (Inline)
**Vai trò:** Khối trích dẫn khách hàng hai cột

Không viền thẻ hay nền — nằm trên canvas. Năm sao vàng (#facc15 hoặc tương tự) kích thước 12-14px, trích dẫn ở Inter 400 16-18px màu #0c0a09 với inline emphasis màu xanh in đậm cho các cụm từ được trích dẫn, tên tác giả ở Inter 500 14-16px, vai trò màu #78716c. Avatar hình tròn 32-40px, đặt bên trái tên.

### Star Rating (Năm Sao)
**Vai trò:** Yếu tố bằng chứng xã hội phía trên testimonials

Năm ngôi sao nhỏ đầy màu Signal Blue hoặc vàng ấm (#fbbf24), mỗi sao 12-14px, khoảng cách 1-2px chặt, không có container nền.

### Navigation Bar (Top Header)
**Vai trò:** Header cố định với logo, nav links, auth actions

Nền trong suốt hoặc #fafaf9, chiều cao ~56-64px, padding ngang 24-40px, logo bên trái, nav links căn giữa hoặc căn trái ở Inter 500 14-15px màu #0c0a09, "Sign in" dạng ghost text link, primary CTA pill button ở xa nhất bên phải. Avatar stack ba hình tròn 24px chồng lên nhau để tạo bằng chứng xã hội ở giữa.

### Avatar Stack (Social Proof Inline)
**Vai trò:** Ba ảnh người dùng chồng lên nhau trong nav, hiển thị "trusted by X people"

Ba hình tròn 24-28px chồng lên nhau khoảng 8px, viền mỏng 2px màu #fafaf9 để phân tách, không có container nền.

### Highlighted Text Run (Inline Emphasis)
**Vai trò:** Từ hoặc cụm từ ngắn có nền xanh lam nhạt để thu hút sự chú ý — dùng trong headline và body để nhấn mạnh

Nền #c1e1f7, màu chữ #0c0a09, không viền, không border-radius (nằm inline với chữ), padding 0 4px, kích thước lớn hơn một chút (lớn hơn một bậc so với chữ xung quanh) để tạo hiệu ứng "callout" trong dòng.

### Input Field (Form)
**Vai trò:** Thu thập email hoặc văn bản trong bất kỳ ngữ cảnh form nào

Chiều cao 40-44px, viền 1px #d6d3d1, border-radius 4px, nền #ffffff, placeholder text màu #a8a29e ở Inter 400 14-16px, trạng thái focus chuyển viền sang Signal Blue (#3ba6f1) với độ rộng 1-2px.

### Tab Strip (Dashboard UI)
**Vai trò:** Tab navigation bên trong product preview — Dashboard / Visitors / Journeys / Funnels

Hàng ngang nội tuyến, không nền, tab active ở Inter 500 14-15px màu #0c0a09 với underline 2px màu Signal Blue, tab inactive màu #78716c, padding ngang 24px mỗi tab, chiều cao hàng 32-40px.

### Hover Annotation (Handwritten Note)
**Vai trò:** Callout trang trí phong cách viết tay chỉ vào các tính năng sản phẩm

Xoay 0-3°, chữ viết tay không đều ở Inter italic hoặc font handwriting, màu mực tối #0c0a09, kèm đường cong mảnh nối đến tính năng dashboard. Thêm cá tính mà không ảnh hưởng đến layout.

### Logo / Brand Mark
**Vai trò:** Chữ "S" hoặc wordmark của Seline trong nav và footer

Màu Stone Ink tối (#0c0a09) hoặc Signal Blue (#3ba6f1) cho icon mark, wordmark ở Roobert 500 18-20px; cấu trúc geometric sạch sẽ với một đường cắt góc nhẹ.

## Do's and Don'ts

### Nên làm
- Sử dụng Signal Blue (#3ba6f1) cho chính xác một mục đích tại một thời điểm trên bất kỳ bề mặt nào — không bao giờ để CTA, icon, cột biểu đồ và link cùng chia sẻ trọng lượng màn hình; để một cái chiếm ưu thế và phần còn lại lùi về phía sau
- Kết hợp Inter cho body và UI với Roobert (hoặc Geist/General Sans thay thế) cho bất kỳ text nào từ 20px trở lên — hệ thống hai họ font là thứ tạo nên sự gọn gàng đặc trưng cho headline
- Đặt display text tracking ở −0.025em tại 52px và mở rộng dần về 0 khi kích thước giảm; display tracking chặt là signature, không phải tai nạn
- Xây dựng button và tag với border-radius 9999px (full pill) và input/card bên trong với 4px — sự tương phản radius giữa pill controls và bề mặt dữ liệu hình chữ nhật là ngữ pháp cấu trúc của hệ thống
- Sử dụng #c1e1f7 (Highlight Wash) chỉ làm text-background highlight nội tuyến trong copy, không bao giờ làm nền button hoặc bề mặt lớn — nó là emphasis, không phải màu sắc
- Neo mọi surface card vào Canvas Cream (#fafaf9) và chỉ để dashboard preview hoặc feature card nâng cao dùng Pure White (#ffffff) — canvas kem là nền, trắng là sự nâng cao
- Sử dụng Inter weight 500 cho mọi button label và tab — weight 400 đọc như văn bản đoạn, weight 600 đọc như la hét; 500 là lựa chọn đúng duy nhất cho action labels

### Không nên làm
- Không đưa màu sắc thứ hai — success green, error red, warning amber — vào design system; đây là one-blue-show, và trạng thái ngữ nghĩa nên được truyền đạt qua hình dạng, text hoặc chính Signal Blue
- Không sử dụng shadow trên button, input, nav items hoặc tag; chỉ dành elevation riêng cho dashboard preview card và thỉnh thoảng là stat card
- Không sử dụng Pure White (#ffffff) làm nền trang — Canvas Cream (#fafaf9) là lựa chọn có chủ đích giúp hệ thống cảm thấy ấm áp thay vì lâm sàng
- Không sử dụng Stone Ink (#0c0a09) ở kích thước body dưới 14px mà không tăng weight lên 500; weight 400 ở 12px với màu gần đen sẽ bị nát ở độ tương phản thấp và chống lại bảng màu ấm
- Không sử dụng letter-spacing chặt hơn −0.025em trên display 52px; không sử dụng positive letter-spacing trên 0.05em ở bất kỳ đâu ngoại trừ micro-label viết hoa toàn bộ
- Không sử dụng border-radius 4px cho card, hero asset hoặc feature block; chỉ dành 4px riêng cho input và inline data element nơi góc sắc hỗ trợ khả năng quét
- Không sử dụng Signal Blue text trên nền Signal Blue, hoặc trên Highlight Wash mà không kiểm tra độ tương phản; Signal Blue text chỉ dùng để nhấn mạnh trên bề mặt kem/trắng
- Không thêm gradient, glow hoặc shadow màu — hệ thống sử dụng chính xác một công thức shadow (rgba(0,0,0,0.05) 0px 4px 16px) cộng thêm một accent shadow cho floating hero card; đó là toàn bộ vốn từ vựng về elevation

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Canvas Cream | `#fafaf9` | Nền trang, body tài liệu |
| 1 | Pure White | `#ffffff` | Bề mặt thẻ, dashboard preview, input field, độ tương phản chữ trên nút |
| 2 | Floating Card | `#ffffff` | Dashboard hero asset, stat card nâng cao với shadow mờ 16px |
| 3 | Dark Accent | `#1c1917` | Nền button tối hiếm gặp hoặc footer accent — không bao giờ quá 5% bất kỳ trang nào |

## Elevation

- **Dashboard Preview Card (Hero):** `rgba(0, 0, 0, 0.05) 0px 4px 16px 0px`
- **Dashboard Preview Card (Accent):** `rgba(17, 12, 46, 0.12) 0px 12px 45px 0px`
- **Floating Icon / Avatar Cluster:** `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- **Sticky Nav:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`

## Imagery

Nhiếp ảnh xuất hiện ở ba vai trò: (1) avatar hình tròn nhỏ (24-40px) cho bằng chứng xã hội và tác giả testimonial — trung tính, chân thực, hơi giảm bão hòa; (2) hệ thống overlay chú thích vẽ tay sử dụng đường cong mảnh và callout phong cách viết tay chỉ vào các tính năng dashboard, tạo cho trang kết cấu "được phác thảo bởi đội đã xây dựng nó"; và (3) một cutout phong cách sống duy nhất của một người mặc áo hoodie tối, dáng thoải mái, được dùng làm yếu tố con người trang trí bên cạnh hero CTA. Hình ảnh sản phẩm bị chi phối bởi chính ảnh chụp màn hình dashboard, được render dưới dạng UI mockup độ trung thực cao với cột biểu đồ Signal Blue — sản phẩm là hero thị giác, không phải nhiếp ảnh. Không có ảnh hero full-bleed, không có video nền, không có hệ thống minh họa; đồ họa chỉ giới hạn ở dashboard preview cộng với đường chú thích. Phong cách icon xuyên suốt là monochromatic stroke (1.5-2px) màu Signal Blue hoặc Stone Ink, không bao giờ filled đa sắc.

## Layout

Mô hình trang: max-width 1200px căn giữa, canvas full-bleed. Hero là bố cục hai hàng cổ điển: hàng trên cùng là headline stack căn trái (display 52px + subhead 18px + hàng hai nút + logo social proof strip + dòng Google Review 5 sao), với dashboard preview card đặt bên phải và thấp hơn một chút, tạo luồng chéo vào section. Navigation là thanh trên cùng căn giữa với logo trái, links + avatar stack ở cụm giữa, và Sign in + primary CTA pill bên phải. Bên dưới hero, layout chuyển sang một cột căn giữa với cột đọc ~800px max-width: mẫu headline + subhead + CTA xen kẽ, với lưới testimonial hai cột (chia 50/50, gap 24-40px). Các section được phân cách bằng khoảng trống dọc 96-128px trên canvas kem — không có divider, không thay đổi màu nền giữa các section, nhịp điệu đến từ spacing. Card grids (khi có) là 2-3 cột với gap 24-32px. Mật độ tổng thể compact nhưng không bao giờ chật chội: canvas kem làm công việc phân tách nội dung mà không cần border hoặc section có màu nền.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- Nền trang/canvas: #fafaf9
- Thẻ/bề mặt: #ffffff
- Text chính: #0c0a09
- Text phụ: #78716c
- Viền: #e5e7eb (chính), #d6d3d1 (phụ)
- Accent / hành động chính: #3ba6f1 (filled action)
- Highlight wash: #c1e1f7

**3-5 Prompt Component Mẫu**

1. Tạo Primary Action Button: nền #3ba6f1, chữ #0c0a09, border-radius 9999px, padding pill compact. Dùng filled treatment này cho CTA chính.

4. **Stat block (metric lớn)**: Không có card chrome, nằm trên canvas. Label ở Inter 500 13px uppercase màu #78716c, value ở Roobert 400 48px màu #0c0a09 với tracking −0.96px, sublabel ở Inter 400 14px màu #78716c. Khoảng cách dọc 16px giữa label và value, 8px giữa value và sublabel.

5. **Testimonial block (hai cột)**: Hai cột bằng nhau, gap 40px. Mỗi cột có: hàng năm ngôi sao filled 14px màu #facc15, gap 16px bên dưới đến trích dẫn ở Inter 400 18px màu #0c0a09 (với một cụm từ được nhấn mạnh ở Inter 500 + màu Signal Blue), gap 24px bên dưới đến hàng tác giả: avatar hình tròn 36px + tên ở Inter 500 14px #0c0a09 + vai trò ở Inter 400 14px #78716c xếp chồng dọc.

## Signature Element — The Blue Highlight Run

Công cụ typography đặc biệt nhất trong hệ thống này là cụm từ được highlight nội tuyến: một chuỗi từ với nền #c1e1f7 nằm inline với text xung quanh, màu sắc không đổi ở #0c0a09. Nó KHÔNG phải button, KHÔNG phải link, KHÔNG phải chip — nó là emphasis thuần túy thông qua background wash. Padding là 0 4-6px, không viền, không border-radius, text giữ nguyên kích thước hoặc lớn hơn một bậc so với dòng xung quanh. Đây là cách hệ thống thu hút sự chú ý đến cụm từ quan trọng nhất trong headline ("simple & actionable") mà không bao giờ rời khỏi nhịp điệu editorial. Sử dụng một cách tiết kiệm: không quá một cái mỗi headline, không bao giờ quá hai cái mỗi page section.

## One-Blue Rule

Signal Blue (#3ba6f1) là màu sắc duy nhất trong toàn bộ hệ thống. Nó phục vụ năm vai trò riêng biệt: CTA fill, icon stroke, cột biểu đồ, link text, và inline highlight (thông qua pha loãng #c1e1f7). Trên bất kỳ màn hình nào, hãy quyết định cái nào trong năm vai trò này là giọng nói chính cho view đó — thường là CTA — và để những cái khác lùi lại bằng cách sử dụng kích thước nhỏ hơn một chút, độ mờ thấp hơn, hoặc giảm số lượng của chúng. Không bao giờ để một trang có nhiều hơn ba Signal Blue elements riêng biệt ở độ bão hòa đầy đủ phía trên fold. Đây là điều giữ cho hệ thống cảm thấy như một sản phẩm duy nhất thay vì một cầu vồng.

## Similar Brands

- **Plausible Analytics** — Cùng accent một màu (xanh lá) trên nền kem/trắng, cùng typography compact kiểu Inter, cùng hero product-first với dashboard preview làm neo thị giác
- **Fathom Analytics** — Privacy-first analytics với cách tiếp cận ngữ pháp tối giản gần như giống hệt — một accent color, một công thức shadow, nền kem ấm, pill buttons, Inter cho UI
- **Vercel** — Canvas kem/trắng ngà, một chromatic accent, display type tracking chặt, pill buttons, và floating product-card hero với dual-layer shadow tinh tế — cùng kỷ luật "một tín hiệu màu, mọi thứ khác trung tính"
- **Linear** — Geometric humanist type, pill UI controls, neutral xám ấm tinh tế, hero product-screenshot-first, và cùng sự kiềm chế về elevation và màu sắc (mặc dù Linear là dark-first, các quyết định cấu trúc phản ánh Seline)
- **Cal.com** — Canvas kem ấm với một chromatic accent (xanh lam của họ), Inter-family body type, pill buttons, và cùng giọng điệu định vị "simple alternative to a giant"

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-signal-blue: #3ba6f1;
  --color-highlight-wash: #c1e1f7;
  --color-canvas-cream: #fafaf9;
  --color-pure-white: #ffffff;
  --color-stone-ink: #0c0a09;
  --color-stone-charcoal: #1c1917;
  --color-warm-slate: #78716c;
  --color-soft-slate: #a8a29e;
  --color-mist-gray: #afafae;
  --color-pearl-border: #e5e7eb;
  --color-warm-border: #d6d3d1;
  --color-fog-border: #e1dfdd;
  --color-heading-mute: #c9c5c2;

  /* Typography — Font Families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.3px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.06px;
  --text-body: 16px;
  --leading-body: 1.54;
  --tracking-body: 0.05px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.56;
  --tracking-body-lg: -0.09px;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --tracking-subheading: -0.34px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.67px;
  --text-heading: 52px;
  --leading-heading: 1.12;
  --tracking-heading: -1.3px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 96-128px;
  --card-padding: 24-32px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 10px;
  --radius-inputs: 4px;
  --radius-buttons: 9999px (pill) or 10px (rectangular);
  --radius-navitems: 9999px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 4px 16px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-xl: rgba(17, 12, 46, 0.12) 0px 12px 45px 0px;

  /* Surfaces */
  --surface-canvas-cream: #fafaf9;
  --surface-pure-white: #ffffff;
  --surface-floating-card: #ffffff;
  --surface-dark-accent: #1c1917;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-signal-blue: #3ba6f1;
  --color-highlight-wash: #c1e1f7;
  --color-canvas-cream: #fafaf9;
  --color-pure-white: #ffffff;
  --color-stone-ink: #0c0a09;
  --color-stone-charcoal: #1c1917;
  --color-warm-slate: #78716c;
  --color-soft-slate: #a8a29e;
  --color-mist-gray: #afafae;
  --color-pearl-border: #e5e7eb;
  --color-warm-border: #d6d3d1;
  --color-fog-border: #e1dfdd;
  --color-heading-mute: #c9c5c2;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.3px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.06px;
  --text-body: 16px;
  --leading-body: 1.54;
  --tracking-body: 0.05px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.56;
  --tracking-body-lg: -0.09px;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --tracking-subheading: -0.34px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.67px;
  --text-heading: 52px;
  --leading-heading: 1.12;
  --tracking-heading: -1.3px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 4px 16px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-xl: rgba(17, 12, 46, 0.12) 0px 12px 45px 0px;
}
```