# Modern Business Intelligence

> # Modern Business Intelligence — Style Reference

## Prompt Content

```
# Modern Business Intelligence — Style Reference
> Sunlit greenhouse editorial

**Theme:** light

Mode sử dụng ngôn ngữ editorial phong cách thực vật: nền sage nhạt (#eef2e3) thay thế cho màu trắng SaaS vô trùng thông thường, và một điểm nhấn chartreuse duy nhất (#c8f169) tạo điểm nhấn cho các hành động với một pop sắc nét, gần như huỳnh quang. Font headline là một serif tùy chỉnh (Grenette) ở kích thước 56–96px với negative tracking mạnh — các chữ có cảm giác được kéo chặt, gần như condensed, và đọc giống như bìa tạp chí hơn là dashboard. Chiều sâu đến từ một stack màu ba lớp (sage → forest green → chartreuse) thay vì đổ bóng; các bề mặt nằm phẳng cạnh nhau và dựa vào tương phản hue để tạo hierarchy. Các phần tử tương tác sử dụng border-radius nhỏ 4px trong khi card và bề mặt lớn dùng 16px, tạo nên một ngôn ngữ hình học nhất quán. Mood tự tin, ấm áp và trí tuệ — BI không có sự lạnh lẽo của doanh nghiệp.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Pale Sage | `#eef2e3` | `--color-pale-sage` | Canvas trang, bề mặt card sáng, nền eyebrow, mat ảnh hero |
| Paper White | `#fcfcfc` | `--color-paper-white` | Bề mặt card nâng cao, nền nav, modal, footer |
| Ink Black | `#000000` | `--color-ink-black` | Text chính, stroke icon, hairline border, đường viền ghost button |
| Charcoal | `#242423` | `--color-charcoal` | Text phụ và fill icon — mềm hơn đen thuần cho các phần tử UI muted |
| Deep Forest | `#043f2e` | `--color-deep-forest` | Brand primary — nền section tối, stat card, text nav, text chính trên bề mặt sáng, màu illustration chủ đạo |
| Chartreuse Lime | `#c8f169` | `--color-chartreuse-lime` | Fill nút action chính, điểm nhấn accent, nền tag/badge, dấu chấm câu màu sắc duy nhất trên toàn UI |
| Forest Mid | `#2a6f2b` | `--color-forest-mid` | Trạng thái hover/active cho bề mặt forest, xanh lá phụ dùng trong chart highlight và stat card accent |
| Vivid Green | `#78c51c` | `--color-vivid-green` | Accent cấp ba — stroke chart trang trí, màu phụ trong data visualization, hỗ trợ cho chartreuse |

## Tokens — Typography

### Times (system serif fallback) — Chỉ fallback hệ thống — không phải lựa chọn thiết kế. Xuất hiện trong icon label và ngữ cảnh link cấp ba khi Graphik không load được · `--font-times-system-serif-fallback`
- **Thay thế:** Times New Roman
- **Weights:** 400
- **Kích thước:** 16px
- **Line height:** 1.20
- **Vai trò:** Chỉ fallback hệ thống — không phải lựa chọn thiết kế. Xuất hiện trong icon label và ngữ cảnh link cấp ba khi Graphik không load được

### Grenette — Display và section headline — một serif tùy chỉnh chỉ dùng ở kích thước lớn (36px+). Letter-spacing chặt (-0.02em đến -0.031em) và single weight (400) buộc hierarchy chỉ qua kích thước, tạo nên thẩm quyền editorial mà một bold sans-serif headline sẽ phá hỏng · `--font-grenette`
- **Thay thế:** Fraunces, Source Serif 4, Tiempos Headline
- **Weights:** 400
- **Kích thước:** 16px, 36px, 56px, 70px, 72px, 96px
- **Line height:** 0.90, 1.10, 1.20, 1.31
- **Letter spacing:** -0.72px ở 36px, -1.68px ở 56px, -2.1px ở 70px, -2.98px ở 96px
- **Vai trò:** Display và section headline — một serif tùy chỉnh chỉ dùng ở kích thước lớn (36px+). Letter-spacing chặt (-0.02em đến -0.031em) và single weight (400) buộc hierarchy chỉ qua kích thước, tạo nên thẩm quyền editorial mà một bold sans-serif headline sẽ phá hỏng

### Graphik — Body, UI, button, navigation — workhorse sans-serif. Positive tracking 0.06em ở 12–18px tạo nhãn eyebrow uppercase và small caps; -0.01em ở 36px thắt chặt subheading nhẹ. Weight 600 chỉ dành cho nav và button label, không bao giờ dùng cho body · `--font-graphik`
- **Thay thế:** Inter, Söhne, Untitled Sans
- **Weights:** 400, 500, 600
- **Kích thước:** 12px, 14px, 16px, 18px, 22px, 36px
- **Line height:** 1.00, 1.03, 1.10, 1.18, 1.20, 1.30, 1.44
- **Letter spacing:** 0.72–1.08px ở 12–18px (eyebrow/uppercase), -0.36px ở 36px (subheading)
- **Vai trò:** Body, UI, button, navigation — workhorse sans-serif. Positive tracking 0.06em ở 12–18px tạo nhãn eyebrow uppercase và small caps; -0.01em ở 36px thắt chặt subheading nhẹ. Weight 600 chỉ dành cho nav và button label, không bao giờ dùng cho body

### --fonts-sans — --fonts-sans — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-fonts-sans`
- **Weights:** 400
- **Kích thước:** 16px
- **Line height:** 1.2
- **Vai trò:** --fonts-sans — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 12px | 1.2 | 0.72px | `--text-caption` |
| body-sm | 14px | 1.3 | — | `--text-body-sm` |
| body | 16px | 1.3 | — | `--text-body` |
| subheading | 18px | 1.44 | — | `--text-subheading` |
| heading-sm | 22px | 1.2 | — | `--text-heading-sm` |
| heading | 36px | 1.1 | -0.72px | `--text-heading` |
| heading-lg | 56px | 1.1 | -1.68px | `--text-heading-lg` |
| display | 96px | 0.9 | -2.98px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 56 | 56px | `--spacing-56` |
| 88 | 88px | `--spacing-88` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |
| 128 | 128px | `--spacing-128` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Phần tử | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 16px |
| inputs | 4px |
| buttons | 4px |
| largeSurfaces | 16px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 56-80px
- **Card padding:** 16-24px
- **Element gap:** 12-20px

## Components

### Display Headline (Grenette Serif)
**Vai trò:** Hero và section-spanning headline

Grenette ở 56–96px, weight 400, letter-spacing -0.031em đến -0.02em, line-height 0.90–1.10. Màu luôn là Deep Forest (#043f2e) trên nền sage, hoặc đen trên trắng. Không bao giờ bold, không bao giờ italic — hình dạng serif và tracking chặt mang trọng lượng.

### Section Heading (Grenette Serif)
**Vai trò:** Tiêu đề section giữa trang, tiêu đề card trong section forest-green

Grenette ở 36px, weight 400, letter-spacing -0.02em (-0.72px), line-height 1.10. Chuyển sang Paper White (#fcfcfc) khi nằm trên nền Deep Forest.

### Filled CTA Button (Chartreuse)
**Vai trò:** Hành động chính — 'Try for free'

Nền Chartreuse Lime (#c8f169), text Ink Black (#000000), radius 4px, padding 12px 20px, Graphik 16px weight 500. Không border. Hover tối dần về Forest Mid (#2a6f2b). Đây là filled chromatic button duy nhất trong hệ thống.

### Ghost CTA Button
**Vai trò:** Hành động phụ — 'Request demo'

Nền trong suốt, border 1px Ink Black, radius 4px, padding 12px 20px, Graphik 16px weight 500, text Ink Black. Chuyển sang border/text trắng trên section forest tối.

### Navigation Pill Button
**Vai trò:** Mục nav trên cùng, link footer

Nền trong suốt, không border, Graphik 16px weight 500, padding ngang 16px, padding dọc 2px. Trạng thái active hiển thị underline nhẹ hoặc chuyển weight lên 600.

### Pale Sage Card
**Vai trò:** Feature card, khối nội dung, mat ảnh

Nền Pale Sage (#eef2e3), radius 16px, padding 24px, không border, không shadow. Sage-on-sage biến mất ở cấp trang — card được định nghĩa bởi nội dung, không phải độ cao. Thường bao quanh ảnh không có padding bên trong.

### Forest Stat Card
**Vai trò:** Hiển thị metric hero, thống kê nổi bật

Nền Deep Forest (#043f2e), radius 16px, padding 24px, text Paper White (#fcfcfc). Dùng cho stat hero '8.2K'. Graphik weight 400 ở kích thước lớn, tracking chặt. Card dày đặc — nội dung nằm sát mép.

### Paper White Elevated Card
**Vai trò:** Pricing tier, so sánh tính năng, nội dung modal

Nền Paper White (#fcfcfc), radius 16px, padding 24px, tùy chọn border 1px hairline. Dùng khi card cần nâng lên khỏi canvas sage mà không dùng shadow.

### Announcement Banner
**Vai trò:** Dải quảng cáo đầu trang

Thanh full-width ở đầu trang. Nền Pale Sage hoặc trắng, text Graphik 14px căn giữa, 'Learn More' là link pill filled Chartreuse (radius 4px) hoặc link bold inline.

### Eyebrow Label
**Vai trò:** Pre-headline section, tag danh mục

Graphik 12–14px weight 500, letter-spacing 0.06em (positive tracking), uppercase, Ink Black hoặc Deep Forest. Nằm phía trên section headline như một category marker all-caps nhỏ.

### Tag / Badge
**Vai trò:** Tag tính năng, chỉ báo gói

Nền Chartreuse Lime (#c8f169) hoặc Pale Sage (#eef2e3), text Ink Black, radius 4px (hoặc 9999px cho biến thể pill), padding 2px 8–12px, Graphik 12–14px weight 500.

### Hero Image Block
**Vai trò:** Ảnh trong hero và feature section

Full-bleed hoặc nằm trong sage card, radius 16px khi nằm trong card. Ảnh ấm áp, con người, phong cách tài liệu — người tại bàn làm việc, nhóm cộng tác — không bao giờ là stock dàn dựng. Không overlay hoặc duotone treatment.

### Icon
**Vai trò:** Icon UI, bullet tính năng, chỉ báo nav

Stroke-based, weight 1.5–2px, stroke Ink Black hoặc Deep Forest, không fill. Chuyển sang Paper White trên section tối. Dạng hình học đơn giản — không có trang trí cầu kỳ.

## Do's and Don'ts

### Nên làm
- Dùng Deep Forest (#043f2e) cho tất cả body text trên bề mặt Pale Sage hoặc Paper White — tương phản 18.4:1 là có chủ đích, không phải fallback
- Dùng Grenette serif cho tất cả display và section heading ở 36px+; không bao giờ dùng Graphik cho kích thước trên 36px
- Dùng Chartreuse Lime (#c8f169) làm nền filled CTA với text Ink Black; đây là màu filled button duy nhất trong hệ thống
- Áp dụng radius 16px cho tất cả card, khối ảnh và bề mặt lớn; radius 4px cho tất cả button, input và tag
- Xếp lớp bề mặt bằng stack sage → forest → chartreuse (sáng đến tối, neutral đến chromatic) thay vì đổ bóng để tạo chiều sâu
- Dùng Graphik uppercase 12–14px với letter-spacing 0.06em cho tất cả eyebrow label phía trên section heading
- Giữ ảnh ấm áp, phong cách tài liệu, con người; không bao giờ dùng stock dàn dựng, duotone hoặc color overlay trên ảnh

### Không nên làm
- Không dùng Graphik cho display headline — tương phản serif/sans ở kích thước lớn là signature và không được phá vỡ
- Không thêm box-shadow vào card hoặc button — chiều sâu đến từ color stack sage/forest/chartreuse, không phải elevation
- Không dùng pure white (#ffffff) làm nền trang — luôn dùng Pale Sage (#eef2e3) cho canvas, Paper White (#fcfcfc) chỉ cho elevated card
- Không áp dụng bold (600+) cho body hoặc display text — weight giữ ở 400 trong serif headline, tối đa 500 trong Graphik UI
- Không dùng nhiều hơn một chromatic accent trên mỗi viewport — Chartreuse Lime là accent duy nhất, Forest Mid là hover, Vivid Green chỉ dùng cho data-viz
- Không trộn radii: không bao giờ dùng 8px, 12px hoặc 20px — hệ thống chỉ dùng 4px (nhỏ/button) và 16px (lớn/card)
- Không áp dụng serif cho kích thước dưới 36px — mất tác động editorial và khó đọc ở kích thước body

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Sage Canvas | `#eef2e3` | Nền trang — màu off-white ấm áp định nghĩa toàn bộ hệ thống |
| 1 | Paper White | `#fcfcfc` | Card nâng cao, thanh navigation, footer, modal — màu trắng thật duy nhất |
| 2 | Chartreuse Highlight | `#c8f169` | Bề mặt accent cho tag, filled CTA và stat highlight |
| 3 | Forest Dark | `#043f2` | Nền section tối, hero stat card, container text inverted |

## Elevation

Thiết kế này cố tình tránh hoàn toàn box-shadow. Chiều sâu và hierarchy đạt được thông qua hệ thống màu ba lớp: Pale Sage canvas → Paper White elevated card → Deep Forest dark section. Chartreuse Lime accent nằm trên tất cả các lớp như dấu chấm câu màu sắc duy nhất. Thêm shadow sẽ phá vỡ chất phẳng, editorial, giống tạp chí của hệ thống.

## Imagery

Ảnh mang phong cách tài liệu và con người — người cộng tác tại bàn, nhóm xem lại màn hình, khoảnh khắc workspace chân thực. Ảnh có tông ấm, ánh sáng tự nhiên, không bao giờ là stock dàn dựng hoặc quá bóng bẩy. Ảnh nằm trong Pale Sage card với radius 16px, thường kéo dài đến mép card không có padding bên trong. Không duotone, không color overlay, không filter trang trí. Nền sage hoạt động như một mat ấm giúp ảnh có cảm giác grounded và editorial thay vì corporate.

## Layout

Max-width 1200px nội dung căn giữa trong canvas sage full-bleed. Hero là split hai cột bất đối xứng: headline serif lớn và stat card bên phải, ảnh con người bên trái, cả hai nằm trong card tông sage. Nhịp điệu section xen kẽ giữa dải trắng và sage với khoảng cách dọc rộng rãi 56–80px. Feature section dùng layout text+ảnh hai cột xen kẽ. Navigation là top bar tối giản với link căn giữa, logo căn trái và cặp CTA căn phải. Mật độ tổng thể comfortable và rộng rãi — cái này đọc giống brand site hơn là product dashboard.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #043f2e (Deep Forest) trên sage, #fcfcfc trên forest
- background: #eef2e3 (Pale Sage canvas), #fcfcfc (elevated card)
- border: #000000 (1px hairline)
- accent: #c8f169 (Chartreuse Lime)
- primary action: #c8f169 (filled action)

**Ví dụ Component Prompt**

1. **Hero Headline**: Render một display headline trong Grenette serif (thay thế: Fraunces), 96px, weight 400, letter-spacing -2.98px, line-height 0.90, màu Deep Forest #043f2e, trên nền Pale Sage #eef2e3.

2. **Primary CTA Button**: Filled button, nền Chartreuse Lime #c8f169, text Ink Black #000000, radius 4px, padding 12px 20px, Graphik (thay thế: Inter) 16px weight 500. Nhãn text căn giữa, không icon.

3. **Feature Card**: Nền Pale Sage #eef2e3, radius 16px, padding 24px, không shadow. Chứa heading Grenette serif ở 36px, weight 400, letter-spacing -0.72px, màu Deep Forest, và một đoạn body trong Graphik 16px weight 400, line-height 1.30.

4. **Forest Stat Card**: Nền Deep Forest #043f2e, radius 16px, padding 24px. Số metric lớn trong Graphik 36px weight 400, màu Paper White #fcfcfc, với label nhỏ phía trên trong Graphik uppercase 12px weight 500, letter-spacing 0.72px, màu #c8f169.

5. **Eyebrow + Heading Pair**: Xếp chồng một eyebrow Graphik uppercase 14px weight 500 với letter-spacing 0.72px trong Deep Forest, nằm cách 12px phía trên một heading Grenette serif 56px trong Deep Forest với letter-spacing -1.68px và line-height 1.10.

## Similar Brands

- **Notion** — Cùng canvas off-white ấm áp thay thế trắng SaaS vô trùng, và một chromatic accent duy nhất dùng tiết kiệm cho hành động chính
- **Linear** — Tương tự cách dùng cặp serif/grotesque tùy chỉnh cho display headline, với negative tracking chặt ở kích thước lớn tạo thẩm quyền editorial
- **Pitch** — Cùng mood botanical-editorial — nền neutral nhạt, display type serif tự tin, và một màu accent sống động tạo điểm nhấn thay vì áp đảo
- **Mercury** — Cùng triết lý bề mặt phẳng không shadow, chiều sâu đạt được qua xếp lớp màu và nền off-white ấm áp đặc trưng
- **Stripe** — Cùng cách dùng serif tùy chỉnh ở kích thước display với negative tracking mạnh, kết hợp với sans hình học cho UI — tương phản serif/sans là signature

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pale-sage: #eef2e3;
  --color-paper-white: #fcfcfc;
  --color-ink-black: #000000;
  --color-charcoal: #242423;
  --color-deep-forest: #043f2e;
  --color-chartreuse-lime: #c8f169;
  --color-forest-mid: #2a6f2b;
  --color-vivid-green: #78c51c;

  /* Typography — Font Families */
  --font-times-system-serif-fallback: 'Times (system serif fallback)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-grenette: 'Grenette', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fonts-sans: '--fonts-sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.72px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --text-body: 16px;
  --leading-body: 1.3;
  --text-subheading: 18px;
  --leading-subheading: 1.44;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --text-heading: 36px;
  --leading-heading: 1.1;
  --tracking-heading: -0.72px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.68px;
  --text-display: 96px;
  --leading-display: 0.9;
  --tracking-display: -2.98px;

  /* 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-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-88: 88px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-200: 200px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 56-80px;
  --card-padding: 16-24px;
  --element-gap: 12-20px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 16px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;
  --radius-largesurfaces: 16px;

  /* Surfaces */
  --surface-sage-canvas: #eef2e3;
  --surface-paper-white: #fcfcfc;
  --surface-chartreuse-highlight: #c8f169;
  --surface-forest-dark: #043f2;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pale-sage: #eef2e3;
  --color-paper-white: #fcfcfc;
  --color-ink-black: #000000;
  --color-charcoal: #242423;
  --color-deep-forest: #043f2e;
  --color-chartreuse-lime: #c8f169;
  --color-forest-mid: #2a6f2b;
  --color-vivid-green: #78c51c;

  /* Typography */
  --font-times-system-serif-fallback: 'Times (system serif fallback)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-grenette: 'Grenette', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fonts-sans: '--fonts-sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.72px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --text-body: 16px;
  --leading-body: 1.3;
  --text-subheading: 18px;
  --leading-subheading: 1.44;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --text-heading: 36px;
  --leading-heading: 1.1;
  --tracking-heading: -0.72px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.68px;
  --text-display: 96px;
  --leading-display: 0.9;
  --tracking-display: -2.98px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-88: 88px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
}
```