# Dopper

> Dopper — Style Reference

## Prompt Content

```
# Dopper — Style Reference
> Đầm phá kem ngập nắng với dòng chảy xanh lam rực rỡ. Một khoảng beige ấm áp, nơi một luồng xanh điện và những tấm card full-bleed màu kẹo sáng cắt ngang như ánh nắng trên mặt nước.

**Theme:** light

Ngôn ngữ thị giác của Dopper mang phong cách một quầy sinh thái ngập nắng: một canvas kem ấm (#f6ecc8 hero, #fcfaf2 page body) với khoảng trắng rộng rãi và một màu xanh bão hòa duy nhất (#0067e5) làm nổi bật mọi phần tử tương tác. Giọng thương hiệu tự tin nhưng thân thiện — headline display cỡ lớn bằng custom face 'Dopper', bo góc 20px trên mọi card và button, cùng các khối giải pháp được tô bằng màu full-fill sáng như kẹo (teal, vàng, sky, navy) biến grid sản phẩm thành một tấm poster. Typography mang hai tính cách: một custom display face quirky cho điểm nhấn hero và một grotesque sạch sẽ (Gilroy) cho mọi thứ cấu trúc. Hệ thống tránh shadow nặng và trang trí, thay vào đó dùng khối màu, khoảng cách 20px rộng rãi, và ảnh sản phẩm lớn để tạo nhịp điệu.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Midnight Navy | `#000f2e` | `--color-midnight-navy` | Text chính, heading, card nền tối, logo wordmark — mực chủ đạo của hệ thống. Đủ đậm để neo canvas kem mà không cần đen tuyền |
| Warm Cream | `#f6ecc8` | `--color-warm-cream` | Nền hero band, nền section xen kẽ — tạo bầu không khí ấm áp, ngập nắng cho thương hiệu |
| Soft Off-White | `#fcfaf2` | `--color-soft-off-white` | Canvas trang, bề mặt card, text button trên nền xanh đặc — lớp nền cho mọi thứ |
| Electric Blue | `#0067e5` | `--color-electric-blue` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính |
| Heather Violet | `#515a8a` | `--color-heather-violet` | Text phụ muted, body copy hỗ trợ — giữ cho đoạn văn dài không cạnh tranh với heading Midnight Navy |
| Signal Yellow | `#fed200` | `--color-signal-yellow` | Fill card giải pháp, accent năng lượng cao trang trí — một trong những màu poster sáng như kẹo cho grid sản phẩm |
| Deep Teal | `#116973` | `--color-deep-teal` | Fill card giải pháp, accent đại dương trang trí — củng cố câu chuyện thương hiệu nước trong grid sản phẩm |
| Sky Wash | `#8ab1e6` | `--color-sky-wash` | Fill card giải pháp, màu xanh thương hiệu nhẹ nhàng — tông xanh nhạt hơn để đa dạng thị giác trong khối card |
| Black Ink | `#000000` | `--color-black-ink` | Viền button outlined, icon stroke, text trong ngữ cảnh nền tối — dùng tiết kiệm để tạo viền tương phản tối đa |
| Brand Blue Drift | `linear-gradient(90deg, rgb(0, 103, 229) 0px, rgb(65, 131, 217) 100%)` | `--color-brand-blue-drift` | Điểm cuối gradient kết hợp với Electric Blue — dùng trong gradient ngang thương hiệu tinh tế cho mảng màu trang trí |

## Tokens — Typography

### Dopper — Display hero headlines ('Hot, cold, or fizzy.') — custom face quirky với line-height chặt, trông như một miếng cắt từ poster. Thay thế bằng Fraunces hoặc display serif dày để gần đúng. · `--font-dopper`
- **Thay thế:** Fraunces
- **Weights:** 400
- **Cỡ chữ:** 58px, 72px
- **Line height:** 1.00
- **Vai trò:** Display hero headlines ('Hot, cold, or fizzy.') — custom face quirky với line-height chặt, trông như một miếng cắt từ poster. Thay thế bằng Fraunces hoặc display serif dày để gần đúng.

### Gilroy — Headline, subheading, card title, body emphasis — ngựa thồ cấu trúc. Weight 600 cho section heading ('Explore our solutions'), 700 cho card title, 400 cho body. Thay thế bằng Manrope hoặc Outfit. · `--font-gilroy`
- **Thay thế:** Manrope
- **Weights:** 400, 600, 700
- **Cỡ chữ:** 18px, 20px, 24px, 27px, 43px, 48px
- **Line height:** 1.10, 1.20, 1.30
- **Vai trò:** Headline, subheading, card title, body emphasis — ngựa thồ cấu trúc. Weight 600 cho section heading ('Explore our solutions'), 700 cho card title, 400 cho body. Thay thế bằng Manrope hoặc Outfit.

### -apple-system — System fallback cho utility text và body nhỏ — kế thừa nhịp điệu native của nền tảng. · `--font-apple-system`
- **Thay thế:** system-ui
- **Weights:** 400
- **Cỡ chữ:** 16px
- **Line height:** 1.00
- **Vai trò:** System fallback cho utility text và body nhỏ — kế thừa nhịp điệu native của nền tảng.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|------|
| caption | 14px | 1.3 | — | `--text-caption` |
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| body | 18px | 1.5 | — | `--text-body` |
| subheading | 24px | 1.3 | — | `--text-subheading` |
| heading-sm | 27px | 1.2 | — | `--text-heading-sm` |
| heading | 43px | 1.2 | — | `--text-heading` |
| heading-lg | 48px | 1.1 | — | `--text-heading-lg` |
| display | 72px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** thoải mái

### 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` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 96 | 96px | `--spacing-96` |
| 100 | 100px | `--spacing-100` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 20px |
| images | 20px |
| buttons | 20px |

### Layout

- **Page max-width:** 1280px
- **Section gap:** 80px
- **Card padding:** 20px
- **Element gap:** 20px

## Components

### Top Navigation Bar
**Vai trò:** Header với logo căn giữa, nav items nhóm, utility links

Thanh trắng trong suốt trên nền kem. Nhóm trái: 'Bottle', 'Travel Mug', 'Tap', 'Mission', 'Get Involved' (mỗi mục có dropdown chevrons). Giữa: Dopper wordmark màu Electric Blue (#0067e5). Nhóm phải: 'Find a Store' (link), 'For Businesses' (link đậm), 'EN' locale, icon giỏ hàng. Không có background fill, nằm trên nền kem của trang.

### Filled Blue Action Button
**Vai trò:** Primary action

Background #0067e5, text #fcfaf2, weight 600, ~16px font, 20px border-radius, ~20px horizontal padding × ~12px vertical. Hình dáng gần giống pill (20px không phải full pill). Dùng cho action quan trọng nhất trên mỗi màn hình.

### Outlined Dark Action Button
**Vai trò:** Secondary action đi kèm primary

Fill trong suốt, viền 1.5px đen (#000000), text đen, weight 600, 20px border-radius, padding tương ứng với filled button. Luôn xuất hiện cùng filled blue button trong hero và feature blocks.

### Hero Band
**Vai trò:** Section mở đầu full-bleed

Background #f6ecc8 cream, không có max-width — band kéo dài edge-to-edge. Display headline (Dopper 72px weight 400) căn trái ở nửa dưới. Body subtext (18px, Midnight Navy) theo sau. Cụm hai-button CTA căn trái. Chevron hướng xuống ở giữa phía dưới gợi ý scroll.

### Marquee Ticker
**Vai trò:** Dải thông báo chạy ngang

Nằm giữa hero và feature section. Lặp lại từ 'new' (Gilroy 27px weight 700, Midnight Navy) xen kẽ với icon giọt nước Electric Blue. Một hàng ngang duy nhất, không background, chỉ nhịp điệu inline text + icon.

### Feature Block (Image + Copy)
**Vai trò:** Highlight sản phẩm hai cột

Trái: ảnh sản phẩm lớn với bo góc 20px, không shadow. Phải: heading (Gilroy 43px weight 600, Midnight Navy) và body hỗ trợ (18px). Căn giữa theo chiều dọc, khoảng cách rộng (40-60px) giữa các cột.

### Solution Card — Teal Variant
**Vai trò:** Tile giải pháp sản phẩm

Background #116973 Deep Teal, 20px radius, bề mặt màu full-bleed. Card title (Gilroy 27px weight 700, trắng) ở trên, descriptive copy (16px, trắng) bên dưới, ảnh sản phẩm lấp đầy phần dưới, link 'Learn more' (trắng, gạch chân) ở góc dưới-trái.

### Solution Card — Yellow Variant
**Vai trò:** Tile giải pháp sản phẩm

Background #fed200 Signal Yellow, 20px radius. Cấu trúc giống teal variant: title, copy, ảnh sản phẩm, link 'Learn more'. Title và body màu Midnight Navy (#000f2e) để tương phản với nền vàng sáng.

### Solution Card — Electric Blue Variant
**Vai trò:** Tile giải pháp sản phẩm

Background #0067e5 Electric Blue, 20px radius. Title và body màu #fcfaf2 off-white. Có ảnh sản phẩm Tap với đồ họa giọt nước cách điệu.

### Solution Card — Sky Blue Variant
**Vai trò:** Tile giải pháp sản phẩm

Background #8ab1e6 Sky Wash, 20px radius. Title và body màu Midnight Navy (#000f2e) để dễ đọc trên nền xanh nhạt. Có ảnh sản phẩm Map với pin vị trí màu xanh lá.

### Solution Card — Photo Variant
**Vai trò:** Tile giải pháp sản phẩm với ảnh thật

Ảnh lifestyle full-bleed (người trên ván chèo) làm bề mặt card, 20px radius. Title và copy trắng phủ lên ảnh ở phía trên, link 'Learn more' màu trắng ở phía dưới.

### Section Heading
**Vai trò:** Giới thiệu cho content grids

Gilroy 48px weight 700, Midnight Navy (#000f2e), căn trái. Không gạch chân hay accent — chỉ dựa vào kích thước và weight. Đi kèm với container max-width và margin trên rộng (~70-80px) trước grid.

### Inline Link / 'Learn More'
**Vai trò:** Điều hướng cấp card

Link text gạch chân, Gilroy 16px weight 600, màu phù hợp với ngữ cảnh bề mặt card (trắng trên card tối/màu, Midnight Navy trên card sáng). Nằm ở góc dưới-trái của mọi solution card.

## Do's and Don'ts

### Do
- Dùng 20px border-radius trên mọi card, button và ảnh sản phẩm — sự nhất quán tạo nên nhận diện ấm áp bo tròn.
- Mặc định dùng band #f6ecc8 cream cho hero và nền section xen kẽ, và #fcfaf2 cho canvas trang chính.
- Dùng Gilroy weight 700 cho card title và section heading, weight 600 cho button và subheading, weight 400 cho body.
- Kết hợp filled Electric Blue button (#0067e5) với outlined black button trên mọi hero — cặp đôi này là pattern action đặc trưng.
- Giữ grid Solution Card với 5 cột bằng nhau trên desktop; sự đa dạng màu sáng như kẹo chỉ hiệu quả khi là một bộ hoàn chỉnh.
- Chỉ dùng Dopper display face ở 58px hoặc lớn hơn, weight 400, với line-height chặt 1.0 — đây là poster face, không phải body face.
- Duy trì khoảng cách 20px trong card và 40-60px giữa các phần tử layout chính để có mật độ thoải mái, rộng rãi.

### Don't
- Không thêm drop shadow vào card hay ảnh — hệ thống cố tình phẳng, chiều sâu đến từ khối màu.
- Không dùng trắng tinh (#ffffff) cho canvas — luôn dùng #fcfaf2 để giữ undertone kem ấm.
- Không giới thiệu nhiều hơn một button style trên mỗi màn hình — filled blue cho primary, outlined black cho secondary, không gì khác.
- Không dùng Dopper display face cho bất cứ thứ gì nhỏ hơn 48px — nó mất đi tính quirky ở cỡ body.
- Không làm loãng hero band kem với ảnh hay gradient — sự trống trải chính là thiết kế.
- Không dùng gray neutrals cho body text — Midnight Navy (#000f2e) và Heather Violet (#515a8a) là hai tông text.
- Không phá vỡ quy tắc 20px radius với góc 0px sắc trên card hay button; 9999px pill chỉ dành riêng cho tags.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Page Canvas | `#fcfaf2` | Nền trang mặc định, nền ấm off-white |
| 1 | Hero Cream | `#f6ecc8` | Hero band full-bleed và nền section xen kẽ |
| 2 | Solution Cards | `#0067e5` | Tile giải pháp sản phẩm nhiều màu, mỗi card một sắc thái thương hiệu |
| 3 | Navy Block | `#000f2` | Bề mặt tối cho section tương phản, khối nhiều text |

## Elevation

- **Solution cards, feature block images, hero product imagery:** `none — zero shadow. Chiều sâu đến từ 20px corner radius và tương phản màu với canvas kem, không phải từ drop shadow.`

## Imagery

Ảnh sản phẩm được cắt cận và chiếm ưu thế — chai, vòi và đồ họa bản đồ lấp đầy container mà không có ngữ cảnh trang trí. Hero section dùng khoảng trắng lớn thay vì ảnh hero, để display headline chiếm lấy khung hình. Solution cards kết hợp ảnh sản phẩm với một ảnh lifestyle thật (người chèo ván) để tạo sự ấm áp con người. Màu sắc trong ảnh rực rỡ và bão hòa để phù hợp với bảng màu card sáng như kẹo. Biểu tượng duy nhất là giọt nước Electric Blue, dùng làm brand mark nhỏ lặp lại trong marquee.

## Layout

Trang dùng container max-width căn giữa (~1200-1280px) cho mọi nội dung, nhưng hero và section background kéo dài full-bleed. Hero là text căn trái trên band kem, không có ảnh hero — chỉ typography thở trong không gian. Bên dưới hero, một marquee ngang phá vỡ luồng dọc. Các section nội dung xen kẽ: feature block là bố cục 2 cột text-phải/ảnh-trái, sau đó là grid card 5 cột bằng nhau gồm các tile màu. Navigation là top bar tối giản với logo căn giữa. Nhịp điệu dọc rộng rãi — ~70-80px giữa các section chính — tạo nhịp độ như poster thay vì bố cục thông tin dày đặc.

## Agent Prompt Guide

**Quick Color Reference**
- canvas: #fcfaf2
- hero/section band: #f6ecc8
- text: #000f2e
- border/stroke: #000000
- accent: #0067e5
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

Không quan sát thấy màu primary action riêng biệt; dùng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA filled.

2. *Solution card (teal variant)*: 20px border-radius, background #116973, padding 20px. Title 27px Gilroy weight 700 #fcfaf2. Body 16px Gilroy weight 400 #fcfaf2. Ảnh sản phẩm lấp đầy 60% dưới của card, 0px radius trên ảnh (bo tròn bởi parent overflow). Link 'Learn more' ở dưới: 16px Gilroy weight 600 #fcfaf2, gạch chân.

3. *Section heading + card grid*: 48px Gilroy weight 700 #000f2e, căn trái, 0-80px top margin. Bên dưới: grid 5 cột bằng nhau với column gap 20px. Mỗi card: 20px radius, fill màu full-bleed, ảnh sản phẩm, title, link 'Learn more'.

4. *Marquee ticker row*: Một hàng flex ngang, không background, row padding 20px. Cặp lặp lại: 'new' trong 27px Gilroy weight 700 #000f2e, gap 20px, icon giọt nước trong #0067e5 kích thước 24px, gap 40px, lặp lại.

5. *Feature block (image + copy)*: Grid hai cột, column gap 40px. Cột trái: ảnh sản phẩm với 20px border-radius, không shadow. Cột phải: heading 43px Gilroy weight 600 #000f2e, body text 18px Gilroy weight 400 #000f2e, căn giữa theo chiều dọc. Container ngoài: max-width 1200px, 80px top/bottom margin.

## Similar Brands

- **BKR** — Cùng thẩm mỹ kem ấm với ảnh sản phẩm bo tròn và một accent bão hòa duy nhất — không gian chai nước chia sẻ bảng màu sạch sẽ ngập nắng này.
- **Chilly's** — Bo góc 20px trên mọi card, headline display cỡ lớn, và grid sản phẩm sáng như kẹo gồm các tile màu — ngôn ngữ layout poster-card gần như giống hệt.
- **Hydroflask** — Khối màu full-bleed rực rỡ trong grid sản phẩm và hệ thống card phẳng không shadow — cả hai đều dựa vào độ bão hòa màu thay vì elevation để tạo phân cấp thị giác.
- **S'well** — Khoảng trắng rộng rãi, display type cỡ lớn mang cảm giác custom cho điểm nhấn hero, và một màu xanh thương hiệu duy nhất xuất hiện trong logo, CTA và các mark nhỏ lặp lại.
- **Boll & Branch** — Hero band kem ấm với headline display cỡ lớn căn trái và không có ảnh hero — cách tiếp cận text-trên-nền-kem cho trang mở đầu.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-navy: #000f2e;
  --color-warm-cream: #f6ecc8;
  --color-soft-off-white: #fcfaf2;
  --color-electric-blue: #0067e5;
  --color-heather-violet: #515a8a;
  --color-signal-yellow: #fed200;
  --color-deep-teal: #116973;
  --color-sky-wash: #8ab1e6;
  --color-black-ink: #000000;
  --color-brand-blue-drift: #4183d9;
  --gradient-brand-blue-drift: linear-gradient(90deg, rgb(0, 103, 229) 0px, rgb(65, 131, 217) 100%);

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

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.2;
  --text-heading: 43px;
  --leading-heading: 1.2;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --text-display: 72px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-96: 96px;
  --spacing-100: 100px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 20px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 20px;
  --radius-images: 20px;
  --radius-buttons: 20px;

  /* Surfaces */
  --surface-page-canvas: #fcfaf2;
  --surface-hero-cream: #f6ecc8;
  --surface-solution-cards: #0067e5;
  --surface-navy-block: #000f2;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-navy: #000f2e;
  --color-warm-cream: #f6ecc8;
  --color-soft-off-white: #fcfaf2;
  --color-electric-blue: #0067e5;
  --color-heather-violet: #515a8a;
  --color-signal-yellow: #fed200;
  --color-deep-teal: #116973;
  --color-sky-wash: #8ab1e6;
  --color-black-ink: #000000;
  --color-brand-blue-drift: #4183d9;

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

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.2;
  --text-heading: 43px;
  --leading-heading: 1.2;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --text-display: 72px;
  --leading-display: 1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-96: 96px;
  --spacing-100: 100px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 9999px;
}
```