# Contrast

> Contrast — Style Reference

## Prompt Content

```
# Contrast — Style Reference
> tín hiệu neon coral trên nền trắng tĩnh lặng

**Theme:** light

Contrast vận hành trên nền trắng tĩnh lặng, bị ngắt quãng bởi một tín hiệu coral rực rỡ duy nhất. Toàn bộ hệ thống thị giác được kiềm chế có chủ đích — khoảng trắng rộng rãi, bề mặt đơn sắc, geometric type dày — để một CTA đỏ-ấm duy nhất có thể đảm nhận toàn bộ nhiệm vụ tạo cảm xúc. Các card nổi trên những đổ bóng gần như vô hình (alpha 0.06), bo góc rộng rãi và thiên về pill, và accent coral lặp lại như một hệ thống: button, border, icon, badge, mảng màu trang trí. Chữ đen gần như thuần (#0e0f10) thay vì xám làm mềm, mang lại cho headline trọng lượng và uy lực mà phần chrome mỏng manh kia sẽ thiếu nếu không có. Layout xen kẽ giữa hero stack full-bleed canh giữa và lưới card nhiều cột dày đặc, với một floating webinar widget cố định ở góc dưới-bên trái.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Signal Coral | `#ff5065` | `--color-signal-coral` | Primary action buttons, active links, icon accents, decorative badges — yếu tố màu sắc duy nhất được phép lấp đầy không gian |
| Ember Wash | `#ff7a59` | `--color-ember-wash` | Accent ấm phụ cho icon borders, decorative fills và illustration strokes khi coral cần một sắc độ nhẹ hơn đi kèm |
| Persimmon | `#ff5c35` | `--color-persimmon` | Accent ấm đậm nhất cho icon borders, decorative fills và hero illustration strokes |
| Coral Mist | `#ffe9eb` | `--color-coral-mist` | Mảng màu hồng nhạt mềm mại cho accent backgrounds, hover surfaces và decorative bands |
| Carbon Ink | `#0e0f10` | `--color-carbon-ink` | Primary text, filled neutral buttons, dark surface backgrounds |
| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, text on dark fills, outlined button borders |
| Fog | `#f4f4f8` | `--color-fog` | Section backgrounds nhẹ nhàng, tertiary surface layer |
| Graphite | `#2f3133` | `--color-graphite` | Badge fills, dark nav backgrounds, subtle card borders |
| Slate | `#7a7b7c` | `--color-slate` | Muted helper text, icon strokes, secondary borders, list dividers |
| Smoke | `#666666` | `--color-smoke` | Secondary text trên nền sáng |

## Tokens — Typography

### Gilroy — Toàn bộ UI và display text. Dùng ở 56px weight 700 cho hero headlines với leading cực kỳ chặt (~0.80), tạo khối display dày. Weight 600 cho section headings ở 48px, weight 500–600 cho body 16–18px, weight 500 cho nav và labels ở 14px · `--font-gilroy`
- **Thay thế:** Sora, DM Sans, hoặc Manrope
- **Weights:** 500, 600, 700
- **Cỡ chữ:** 14, 16, 18, 20, 48, 56
- **Line height:** 1.0–1.2 cho display, 1.4–1.6 cho body, 0.80–0.88 cho headline lockups chặt nhất
- **Letter spacing:** normal (0) ở mọi cỡ — tracking không bao giờ được điều chỉnh, để các geometric letterforms tự làm việc
- **Vai trò:** Toàn bộ UI và display text. Dùng ở 56px weight 700 cho hero headlines với leading cực kỳ chặt (~0.80), tạo khối display dày. Weight 600 cho section headings ở 48px, weight 500–600 cho body 16–18px, weight 500 cho nav và labels ở 14px

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 14px | 1.43 | — | `--text-caption` |
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| body | 18px | 1.56 | — | `--text-body` |
| subheading | 20px | 1.6 | — | `--text-subheading` |
| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |
| heading | 48px | 1.11 | — | `--text-heading` |
| display | 56px | 0.8 | — | `--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` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 88 | 88px | `--spacing-88` |
| 112 | 112px | `--spacing-112` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 4px |
| cards | 24px |
| badges | 100px |
| images | 100px |
| buttons | 100px |
| largeCards | 40px |
| smallCards | 16px |
| extraLargeCards | 120px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| xl | `rgba(38, 42, 62, 0.06) 0px 5px 25px 0px` | `--shadow-xl` |

### Layout

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

## Components

### Coral Filled Button
**Vai trò:** Primary call-to-action trên toàn site

Background #ff5065, chữ trắng, border-radius 100px (pill), padding 12px 24px, font-weight 500 ở 16px, Gilroy. Dùng cho các hành động 'Start for free' và 'Register now'.

### Dark Filled Button
**Vai trò:** Secondary action trong navigation

Background #0e0f10, chữ trắng, border-radius 100px, padding 8px 16px, 14px Gilroy weight 500. Dùng cho 'Log in' trong header.

### Outlined Ghost Button
**Vai trò:** Secondary action đi kèm với coral CTAs

Background trắng, border đen 1px (#000000), chữ đen, border-radius 100px, padding 12px 24px, 16px Gilroy weight 500. Dùng cho 'Book a demo'.

### Navigation Bar
**Vai trò:** Site navigation cấp cao nhất

Background trắng, sticky, layout ngang với logo bên trái, nav links canh giữa, actions bên phải. Links là 16px Gilroy 500 màu #0e0f10. 'Partners' có badge 'new' nhỏ inline màu coral.

### 'New' Diagonal Badge
**Vai trò:** Đánh dấu mục nav mới được thêm

Chữ coral #ff5065 trên nền trắng, italic nhỏ 12px, đặt inline sau nav label. Lặp lại như một decorative marquee band trong dải sọc chéo hồng-coral.

### Hero Headline Block
**Vai trò:** Tiêu đề và phụ đề màn hình mở đầu

Layout canh giữa, 56px Gilroy weight 700, #0e0f10, line-height 0.80 (xếp chồng chặt). Subtitle ở 18px weight 500 màu #0e0f10. Bên dưới: hai CTA (coral filled + ghost outlined).

### Logo Marquee Strip
**Vai trò:** Social proof band

Một hàng logo khách hàng duy nhất ở chế độ grayscale trên nền trắng, không có divider, khoảng cách đều nhau, nằm giữa hero và section nội dung đầu tiên.

### Feature Screenshot Card
**Vai trò:** Panel giới thiệu sản phẩm

Bề mặt trắng, border-radius 16px hoặc 24px, shadow 0 5px 25px rgba(38,42,62,0.06). Chứa ảnh chụp màn hình UI sản phẩm phía trên một label ngắn. Shadow được làm mờ có chủ đích — card nằm trên trang chứ không lơ lửng phía trên.

### Testimonial Card
**Vai trò:** Social proof quote card

Background trắng, radius 24px, shadow nhẹ, padding 24px. Năm ngôi sao coral ở trên cùng, headline ở 18px weight 600, quote ở 16px weight 500, tác giả với avatar tròn 100px và tên + vai trò ở 14px.

### Floating Webinar Widget
**Vai trò:** Persistent lead-capture overlay

Card cố định góc dưới-bên trái, radius 16px, bề mặt trắng, soft shadow. Chứa label 'Upcoming webinar' với close icon, thumbnail 100px-radius, tiêu đề webinar ở 16px weight 600, và CTA coral full-width ('Register now') ở radius 100px.

### Coral Diagonal Marquee Band
**Vai trò:** Decorative announcement strip

Background pha coral #ffe9eb với chữ 'new' lặp lại trên góc chéo 45°, tạo hiệu ứng ribbon giữa các section.

### Rating Badge Row
**Vai trò:** Trust indicator cluster

Hàng icon nền tảng (G2, Capterra, HubSpot) đi kèm với số sao và rating ở 14px Gilroy 500. Sao coral, chữ đen, khoảng cách nhẹ giữa các nhóm.

### Footer Link Section
**Vai trò:** Site footer navigation

Background tối hoặc trắng, nhóm link dạng cột, 16px Gilroy 500 màu #0e0f10 hoặc #ffffff, row gap 8px giữa các link.

## Do's and Don'ts

### Nên làm
- Dùng #ff5065 làm màu sắc chromatic filled duy nhất cho primary actions, active states và icon accents
- Áp dụng border-radius 100px cho tất cả button, badge và ảnh nhỏ để tạo hình dạng pill đặc trưng
- Đặt display headlines ở 56px Gilroy weight 700 với line-height 0.80 để tạo khối xếp chồng chặt
- Dùng #0e0f10 (không phải #000000) cho primary text để giữ độ ấm trong các tông màu tối
- Áp dụng token shadow duy nhất 0 5px 25px rgba(38,42,62,0.06) cho tất cả card được nâng lên
- Tạo khoảng cách section ở 80px vertical gaps với card padding 24px làm nhịp điệu nội thất mặc định
- Giữ pattern floating webinar widget ở góc dưới-bên trái làm persistent lead-capture anchor

### Không nên làm
- Không thêm màu chromatic nào khác ngoài coral, ember, persimmon và pink wash
- Không dùng shadow nặng hoặc tối — toàn bộ hệ thống elevation chỉ dựa vào alpha 0.06
- Không làm mềm body text dưới weight 500 — các weight nhẹ hơn của Gilroy không được dùng ở đây
- Không dùng góc nhọn (0–4px) trên bất kỳ bề mặt nào người dùng tương tác, ngoại trừ chi tiết nav nhỏ
- Không thêm background colors vào body copy sections — khoảng trắng tĩnh lặng CHÍNH LÀ thiết kế
- Không áp dụng letter-spacing adjustments — tracking giữ nguyên normal ở mọi cỡ chữ
- Không dùng photography làm hero imagery — product UI screenshots và illustration đảm nhận trọng lượng thị giác

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Canvas | `#ffffff` | Primary page background — phần lớn site là nền trắng trần |
| 1 | Fog | `#f4f4f8` | Section bands nhẹ nhàng và tertiary containers |
| 2 | Card | `#ffffff` | Testimonial cards, feature cards, floating widget — giống canvas nhưng được xác định bằng shadow và border |
| 3 | Accent Wash | `#ffe9eb` | Decorative backgrounds và banner areas pha coral |
| 4 | Dark Surface | `#0e0f10` | Inverted sections, filled dark buttons, dark nav blocks |

## Elevation

- **Cards và floating panels:** `0 5px 25px rgba(38, 42, 62, 0.06)`

## Imagery

Product UI screenshots là tài sản thị giác chính, được hiển thị bên trong card trắng bo tròn với soft shadows. Photography không xuất hiện trên các bề mặt marketing — sản phẩm CHÍNH LÀ hero. Illustrated icons sử dụng nét vẽ coral và persimmon trên nền trắng. Một floating widget cố định (webinar thumbnail) ở góc dưới-bên trái tạo thêm một điểm neo thị giác cố định. Decorative diagonal 'new' marquee ribbon cung cấp kết cấu thị giác phi sản phẩm duy nhất.

## Layout

Max-width 1200px canh giữa, vertical rhythm rộng rãi với section gaps ~80px. Hero là một headline stack canh giữa với hai CTA bên dưới. Nội dung xen kẽ giữa các headline block full-bleed canh giữa và lưới card nhiều cột (3-column testimonials, 4-column logo marquee). Một floating webinar widget cố định ở góc dưới-bên trái xuyên suốt khi cuộn. Một diagonal coral 'new' marquee band xuất hiện như một decorative section divider. Navigation là một sticky white top bar với logo-trái, links-giữa, actions-phải.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #0e0f10
- background: #ffffff
- border: #000000 hoặc #7a7b7c
- accent: #ff5065
- muted text: #7a7b7c
- primary action: #ff5065 (filled action)

Ví dụ Component Prompts:

1. Tạo một Primary Action Button: background #ff5065, text #000000, radius 9999px, padding pill gọn. Dùng treatment filled này cho CTA chính.

2. Tạo một testimonial card: bề mặt trắng #ffffff, border-radius 24px, shadow 0 5px 25px rgba(38,42,62,0.06), padding 24px. Năm ngôi sao coral #ff5065 ở trên cùng, quote ở 16px Gilroy weight 500, #0e0f10, hàng tác giả với avatar tròn 100px-radius, tên ở 14px weight 600 và vai trò ở 14px weight 500 màu #7a7b7c.

3. Tạo một floating webinar widget: fixed góc dưới-bên trái, border-radius 16px, bề mặt trắng, soft shadow rgba(38,42,62,0.06). Label 'Upcoming webinar' ở 14px weight 600 màu #0e0f10, webinar thumbnail ở radius 100px, title ở 16px weight 600, CTA coral full-width (#ff5065, chữ trắng, radius 100px, padding 12px).

4. Tạo một feature screenshot card: background trắng, border-radius 16px, shadow 0 5px 25px rgba(38,42,62,0.06), product UI screenshot lấp đầy phần trên card với top radius 100px, label text ở 16px Gilroy weight 500 màu #0e0f10 bên dưới.

5. Tạo một navigation bar: sticky white top bar, logo bên trái, nav links canh giữa ở 16px Gilroy weight 500 màu #0e0f10 (một link có badge 'new' inline màu coral), actions bên phải với button 'Log in' tối (#0e0f10 fill, chữ trắng, radius 100px) và button 'Start for free' coral (#ff5065 fill, chữ trắng, radius 100px).

## Similar Brands

- **Cal.com** — Cùng single-accent coral trên nền trắng tĩnh lặng, pill-shaped buttons, heavy display headlines và soft-shadow card approach
- **Loom** — Restrained white canvas với một accent color rực rỡ duy nhất dẫn dắt CTAs, rounded card chrome, geometric sans display type
- **Webflow** — Layout sạch sẽ, whitespace-dominant, bold geometric type, radii rộng rãi và shadow elevation tối giản nhưng chính xác
- **Pitch** — High-contrast black text trên nền trắng với một warm accent duy nhất, pill buttons, tight headline leading và confident display weight

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-signal-coral: #ff5065;
  --color-ember-wash: #ff7a59;
  --color-persimmon: #ff5c35;
  --color-coral-mist: #ffe9eb;
  --color-carbon-ink: #0e0f10;
  --color-pure-white: #ffffff;
  --color-fog: #f4f4f8;
  --color-graphite: #2f3133;
  --color-slate: #7a7b7c;
  --color-smoke: #666666;

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

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.56;
  --text-subheading: 20px;
  --leading-subheading: 1.6;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --text-heading: 48px;
  --leading-heading: 1.11;
  --text-display: 56px;
  --leading-display: 0.8;

  /* Typography — Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-112: 112px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 40px;
  --radius-full: 100px;
  --radius-full-2: 120px;

  /* Named Radii */
  --radius-nav: 4px;
  --radius-cards: 24px;
  --radius-badges: 100px;
  --radius-images: 100px;
  --radius-buttons: 100px;
  --radius-largecards: 40px;
  --radius-smallcards: 16px;
  --radius-extralargecards: 120px;

  /* Shadows */
  --shadow-xl: rgba(38, 42, 62, 0.06) 0px 5px 25px 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-fog: #f4f4f8;
  --surface-card: #ffffff;
  --surface-accent-wash: #ffe9eb;
  --surface-dark-surface: #0e0f10;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-signal-coral: #ff5065;
  --color-ember-wash: #ff7a59;
  --color-persimmon: #ff5c35;
  --color-coral-mist: #ffe9eb;
  --color-carbon-ink: #0e0f10;
  --color-pure-white: #ffffff;
  --color-fog: #f4f4f8;
  --color-graphite: #2f3133;
  --color-slate: #7a7b7c;
  --color-smoke: #666666;

  /* Typography */
  --font-gilroy: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.56;
  --text-subheading: 20px;
  --leading-subheading: 1.6;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --text-heading: 48px;
  --leading-heading: 1.11;
  --text-display: 56px;
  --leading-display: 0.8;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-112: 112px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 40px;
  --radius-full: 100px;
  --radius-full-2: 120px;

  /* Shadows */
  --shadow-xl: rgba(38, 42, 62, 0.06) 0px 5px 25px 0px;
}
```