# Zipline

> # Zipline — Style Reference

## Prompt Content

```
# Zipline — Style Reference
> open meadow in morning light

**Theme:** light

Zipline mang phong cách bìa tạp chí thiên nhiên được tái hiện cho một startup giao hàng bằng drone: nền cream ấm áp (#f7f4e8) thay thế cho màu trắng SaaS lạnh lẽo thông thường, và toàn bộ nhịp điệu thị giác được định hình bởi fkScreamer — một display face cực nặng, cỡ lớn, đóng dấu những tuyên bố editorial khổng lồ lên trang. Nhiếp ảnh là phương tiện chính, được chụp ở tầm mắt với motion blur để cảnh vật tựa như đang chuyển động; UI là lớp thứ yếu chỉ xuất hiện với các đường viền đen mảnh, một điểm nhấn violet (#643aed) duy nhất cho card, và typography tiết chế. Các component có kích thước rộng rãi (radius 20px, padding trong 24px) nhưng không bao giờ mang tính trang trí — hệ thống đề cao không gian thở và sự tự tin tiết chế hơn là kiến trúc thông tin dày đặc.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Meadow Cream | `#f7f4e8` | `--color-meadow-cream` | Page canvas, bề mặt card, body text inverse, đường viền button — màu off-white ấm áp tạo nên tính chất ngoài trời, giống giấy cho toàn bộ hệ thống thay vì màu trắng SaaS vô trùng |
| Hillside Ink | `#000000` | `--color-hillside-ink` | Heading chính, body copy, nét icon, action button dạng fill, đường viền mảnh — màu đen tương phản tối đa giúp cream có không gian thở và headline fkScreamer tạo ấn tượng mạnh |
| Stone Border | `#c6c3ba` | `--color-stone-border` | Divider mờ, bề mặt thứ cấp, đường viền tương phản thấp — màu xám ấm đứng sau Meadow Cream một bước, ngăn canvas trông phẳng |
| Drone Violet | `#643aed` | `--color-drone-violet` | Nền card và feature block, bề mặt accent — nốt màu duy nhất trong một hệ thống gần như không màu; nổi bật trên nền cream, giúp các khối thu hút chú ý mà không phá vỡ không khí editorial |

## Tokens — Typography

### fkGroteskNeue — Body copy, navigation, button, caption, và mọi text nhỏ hơn display headline — grotesque đa năng xử lý toàn bộ UI chức năng ở 14–22px. Tracking -0.01em nhất quán giữ cho chữ gọn gàng ngay cả ở kích thước nhỏ. · `--font-fkgroteskneue`
- **Thay thế:** Inter, Neue Haas Grotesk, hoặc Söhne
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 14, 16, 18, 22, 120px
- **Line height:** 0.85, 1.0, 1.2, 1.4
- **Letter spacing:** -0.14px ở 14px, -0.16px ở 16px, -0.18px ở 18px, -0.22px ở 22px
- **Vai trò:** Body copy, navigation, button, caption, và mọi text nhỏ hơn display headline — grotesque đa năng xử lý toàn bộ UI chức năng ở 14–22px. Tracking -0.01em nhất quán giữ cho chữ gọn gàng ngay cả ở kích thước nhỏ.

### fkScreamer — Signature display face — chỉ dùng cho các tuyên bố editorial cỡ lớn (40–150px). Đây là giọng nói của thương hiệu: cực nặng, condensed mạnh mẽ, line-height 0.85 để các chữ gần như chạm vào nhau. Sự tiết chế khi chỉ dùng một weight cho một vai trò khiến những khoảnh khắc nó xuất hiện giống như pull-quote trên tạp chí, không chỉ đơn thuần là heading. · `--font-fkscreamer`
- **Thay thế:** Druk Wide, Antonio Bold, hoặc Tungsten Bold
- **Weights:** 700
- **Kích thước:** 40, 90, 120, 150px
- **Line height:** 0.85
- **Vai trò:** Signature display face — chỉ dùng cho các tuyên bố editorial cỡ lớn (40–150px). Đây là giọng nói của thương hiệu: cực nặng, condensed mạnh mẽ, line-height 0.85 để các chữ gần như chạm vào nhau. Sự tiết chế khi chỉ dùng một weight cho một vai trò khiến những khoảnh khắc nó xuất hiện giống như pull-quote trên tạp chí, không chỉ đơn thuần là heading.

### fkDisplay — Biến thể display mid-weight cho các sub-statement cần tính cách của fkScreamer ở tỷ lệ nhỏ hơn — cầu nối giữa editorial type khổng lồ và body fkGroteskNeue · `--font-fkdisplay`
- **Thay thế:** Tungsten, Druk Condensed, hoặc Compacta
- **Weights:** 400
- **Kích thước:** 22px
- **Line height:** 0.85
- **Vai trò:** Biến thể display mid-weight cho các sub-statement cần tính cách của fkScreamer ở tỷ lệ nhỏ hơn — cầu nối giữa editorial type khổng lồ và body fkGroteskNeue

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 14px | 1.2 | -0.14px | `--text-caption` |
| body | 16px | 1.4 | -0.16px | `--text-body` |
| body-lg | 18px | 1.4 | -0.18px | `--text-body-lg` |
| subheading | 22px | 1 | -0.22px | `--text-subheading` |
| heading-sm | 40px | 0.85 | — | `--text-heading-sm` |
| heading | 90px | 0.85 | — | `--text-heading` |
| heading-lg | 120px | 0.85 | — | `--text-heading-lg` |
| display | 150px | 0.85 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 120 | 120px | `--spacing-120` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 20px |
| cards | 20px |
| images | 20px |
| buttons | 20px |

### Layout

- **Section gap:** 60-128px
- **Card padding:** 24px
- **Element gap:** 24px

## Components

### Pill Action Button (Filled Black)
**Vai trò:** Hành động chuyển đổi chính

Nền fill Hillside Ink (#000000), text Meadow Cream (#f7f4e8), fkGroteskNeue 16px weight 500, radius 20px, padding dọc 14px / ngang 24px. Viền đen mảnh (1px #000000) nằm sát với phần fill.

### Ghost Outline Button
**Vai trò:** Hành động thứ cấp hoặc CTA điều hướng

Nền trong suốt, viền 1px Hillside Ink, text Hillside Ink, fkGroteskNeue 16px weight 500, radius 20px, padding dọc 12–14px / ngang 20–24px. Dùng cho CTA "Try it now" và "Get delivery".

### Editorial Display Statement
**Vai trò:** Headline hero hoặc section

fkScreamer 700, kích thước 90–150px, line-height 0.85, letter-spacing normal. Không cần ghi đè màu — hiển thị bằng Hillside Ink trên Meadow Cream. Bản thân type đã là component.

### Violet Feature Card
**Vai trò:** Khối nội dung được đánh dấu

Nền Drone Violet (#643aed), text Meadow Cream, radius 20px, padding 24px. Bề mặt màu duy nhất trong hệ thống — dùng tiết chế để đánh dấu nội dung nổi bật.

### Outlined Cream Card
**Vai trò:** Card nội dung tiêu chuẩn trên nền cream

Nền Meadow Cream (#f7f4e8), viền 1px Hillside Ink, radius 20px, padding 24px. Không đổ bóng — viền đảm nhận vai trò phân tầng.

### Full-Bleed Photo Hero
**Vai trò:** Nền hero section

Ảnh edge-to-edge (không max-width, không bo góc ở mép trang) với headline overlay Meadow Cream bằng fkScreamer. Ảnh tràn ra mọi phía; đường cong ở phía dưới chuyển tiếp vào canvas cream bên dưới.

### Top Navigation Bar
**Vai trò:** Header toàn cục

Nền trong suốt hoặc Meadow Cream, icon hamburger (trái), wordmark Zipline ở giữa, ghost outline CTA (phải) "Get delivery ↗". Không có nền fill — nằm trực tiếp trên hero photo hoặc cream canvas.

### Inline Thumbnail Token
**Vai trò:** Hình ảnh nhúng trong display text

Ảnh tròn nhỏ (radius 20px) được thả vào một dòng text fkScreamer như một inline element trực quan. Công cụ editorial độc đáo — hình ảnh trở thành một từ.

## Do's and Don'ts

### Do
- Dùng fkScreamer 700 ở 90–150px cho editorial headline; line-height 0.85 là bắt buộc — đó là yếu tố làm cho type trông như được đóng dấu thay vì được sắp chữ
- Giữ canvas ở Meadow Cream (#f7f4e8) trên mọi body section; chỉ dùng trắng tinh khiết cho những khoảnh khắc bạn muốn cảm giác vô trùng
- Mặc định tất cả button, card và image có radius 20px — giá trị duy nhất này thống nhất hệ thống và là shape token được lặp lại nhiều nhất
- Kết hợp body fkGroteskNeue ở 16px/1.4 với display fkScreamer; không bao giờ dùng fkScreamer cho bất cứ thứ gì dưới 40px
- Chỉ dùng Drone Violet (#643aed) làm bề mặt card hoặc feature block, không bao giờ dùng làm text color hay border — nhiệm vụ của nó là làm một khối nổi bật, không phải tô màu typography
- Dùng viền 1px Hillside Ink thay cho đổ bóng để phân tầng; hệ thống mặc định phẳng và viền đảm nhận việc phân cách
- Cho ảnh chạy full-bleed trong hero và section divider; tránh dùng card ảnh bo góc có viền ở tỷ lệ lớn

### Don't
- Không dùng fkScreamer cho body copy, navigation, caption, hay bất cứ thứ gì dưới 40px — weight và line-height sẽ bị sụp ở kích thước nhỏ
- Không thêm màu accent chromatic bổ sung; toàn bộ sự tiết chế của hệ thống phụ thuộc vào việc chỉ có đúng một màu violet
- Không thêm box-shadow vào card hay button — dùng viền 1px hoặc bề mặt violet để phân cách
- Không dùng trắng tinh khiết (#ffffff) làm nền; Meadow Cream là canvas và trắng tinh phá vỡ tông editorial ấm áp
- Không đặt body type ở bất cứ thứ gì khác ngoài fkGroteskNeue 16px/1.4 làm mặc định — cưỡng lại ý muốn trộn thêm serif hoặc sans thứ cấp
- Không áp radius nhỏ hơn 20px cho interactive element; button, card và image đều dùng chung một độ bo tròn rộng rãi
- Không dùng letter-spacing trên fkScreamer — nó có tracking normal và khoảng cách glyph dày đặc là một phần tạo nên sức mạnh

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Meadow Cream | `#f7f4e8` | Page canvas — nền off-white ấm áp làm nền tảng cho mọi nội dung |
| 1 | Stone Border | `#c6c3ba` | Bề mặt thứ cấp nhẹ nhàng và divider tone cho các section ít nhấn mạnh |
| 2 | Drone Violet | `#643aed` | Bề mặt accent card / feature block — bề mặt màu duy nhất trong hệ thống |
| 3 | Hillside Ink | `#000000` | Bề mặt inverted cho filled button, vùng ảnh hero tối, và khối text tương phản cao |

## Elevation

- **Outlined Cream Card:** `none (viền 1px #000000 thay vì đổ bóng)`
- **Violet Feature Card:** `none (tương phản màu bề mặt thay vì đổ bóng)`
- **Pill Action Button:** `none (fill phẳng, không đổ bóng)`

## Imagery

Ảnh phong cảnh full-bleed chiếm ưu thế: đồi xanh có motion blur, ảnh thiên nhiên góc thấp, và thumbnail chân dung nhỏ được nhúng inline với display type. Tất cả ảnh được chụp ở tầm mắt với ánh sáng tự nhiên — không studio, không sản phẩm trên nền trắng, không 3D render trừu tượng. Độ mờ và tốc độ trong hero photo truyền tải thông điệp 'giao hàng bằng drone' mà không cần cho thấy drone. Một thumbnail chân dung nhỏ của người xuất hiện như một visual token được thả vào giữa headline fkScreamer, một công cụ editorial đặc trưng.

## Layout

Layout full-bleed không có container max-width — các trang trải dài edge-to-edge. Hero là một bức ảnh phong cảnh full-viewport với headline (fkScreamer, màu cream) đặt ở góc dưới-bên trái và một ghost button bên dưới. Bên dưới hero, một curved mask chuyển tiếp ảnh vào Meadow Cream canvas. Phần body chính sử dụng display statement căn giữa ở 90–150px, thường được ngắt thành nhiều dòng, với body copy căn trái ở độ rộng hẹp hơn bên dưới. Navigation là một top bar tối giản (hamburger trái, wordmark giữa, ghost CTA phải) nổi trong suốt trên hero. Section gap rộng rãi (60–128px) và hệ thống dựa vào type scale và nhiếp ảnh, không phải grid hay cột, để tạo nhịp điệu.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000 (Hillside Ink)
- background: #f7f4e8 (Meadow Cream)
- border: #000000 (Hillside Ink) hoặc #c6c3ba (Stone Border)
- accent surface: #643aed (Drone Violet)
- primary action: #000000 (filled action)

## Example Component Prompts

1. **Editorial hero section**: Ảnh phong cảnh full-bleed làm nền. Headline ở 120px fkScreamer weight 700, #f7f4e8, line-height 0.85, đặt góc dưới-bên trái. Subtext ở 18px fkGroteskNeue weight 400, #f7f4e8. Ghost outline button bên dưới: viền 1px #f7f4e8, text #f7f4e8, radius 20px, padding 14px 24px, fkGroteskNeue 16px weight 500.

2. **Centered display statement on cream**: Nền Meadow Cream (#f7f4e8). Headline ở 90px fkScreamer weight 700, #000000, line-height 0.85, căn giữa. Body text ở 16px fkGroteskNeue weight 400, #000000, max-width 640px, căn giữa bên dưới với top margin 60px.

3. **Violet feature card**: Nền Drone Violet (#643aed), radius 20px, padding 24px. Headline ở 22px fkGroteskNeue weight 600, #f7f4e8. Body ở 16px fkGroteskNeue weight 400, #f7f4e8.

4. **Outlined cream card**: Nền Meadow Cream (#f7f4e8), viền 1px #000000, radius 20px, padding 24px. Không đổ bóng. Text màu #000000.

5. **Top navigation bar**: Nền trong suốt, không viền. Icon hamburger (stroke 2px) trái, wordmark "Zipline" ở giữa bằng fkGroteskNeue 16px weight 600, ghost button phải: viền 1px #000000, text #000000, radius 20px, padding 12px 20px.

## Type Pairing Logic

fkScreamer là font một vai trò: chỉ display, 40px+, weight 700, line-height 0.85. fkGroteskNeue xử lý mọi thứ còn lại (body, nav, button, caption) ở 14–22px, weights 400–700, line-height 1.0–1.4. fkDisplay (22px, weight 400) là tùy chọn cầu nối cho các câu mid-size cần tính cách display mà không cần âm lượng của Screamer. Sự tương phản giữa nén mạnh của Screamer và khả năng đọc sạch sẽ của Grotesk là dấu ấn của hệ thống — không bao giờ dùng chúng ở cùng kích thước trong cùng một khối.

## Similar Brands

- **Patagonia** — Cùng nền cream ấm áp, ảnh full-bleed thiên nhiên là chính, editorial type cỡ lớn, và một accent color tiết chế — cách tiếp cận print-magazine-over-photography
- **Allbirds** — Nền off-white ấm thay thế màu trắng thương mại điện tử thông thường, display type condensed cỡ lớn, và ảnh tràn edge-to-edge không có container bo tròn
- **Rivian** — Ảnh hero thiên nhiên với motion blur, UI chrome tối giản, và một accent color duy nhất (violet ở đây, teal ở Rivian) trên nền neutral ấm
- **Arc'teryx** — Bố cục trang sản phẩm editorial với display headline khổng lồ trên ảnh phong cảnh, viền đen mảnh thay vì đổ bóng, và cam kết một neutral ấm làm nền tảng hệ thống

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-meadow-cream: #f7f4e8;
  --color-hillside-ink: #000000;
  --color-stone-border: #c6c3ba;
  --color-drone-violet: #643aed;

  /* Typography — Font Families */
  --font-fkgroteskneue: 'fkGroteskNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fkscreamer: 'fkScreamer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fkdisplay: 'fkDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.2;
  --tracking-caption: -0.14px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.4;
  --tracking-body-lg: -0.18px;
  --text-subheading: 22px;
  --leading-subheading: 1;
  --tracking-subheading: -0.22px;
  --text-heading-sm: 40px;
  --leading-heading-sm: 0.85;
  --text-heading: 90px;
  --leading-heading: 0.85;
  --text-heading-lg: 120px;
  --leading-heading-lg: 0.85;
  --text-display: 150px;
  --leading-display: 0.85;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-128: 128px;

  /* Layout */
  --section-gap: 60-128px;
  --card-padding: 24px;
  --element-gap: 24px;

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

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

  /* Surfaces */
  --surface-meadow-cream: #f7f4e8;
  --surface-stone-border: #c6c3ba;
  --surface-drone-violet: #643aed;
  --surface-hillside-ink: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-meadow-cream: #f7f4e8;
  --color-hillside-ink: #000000;
  --color-stone-border: #c6c3ba;
  --color-drone-violet: #643aed;

  /* Typography */
  --font-fkgroteskneue: 'fkGroteskNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fkscreamer: 'fkScreamer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fkdisplay: 'fkDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.2;
  --tracking-caption: -0.14px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.4;
  --tracking-body-lg: -0.18px;
  --text-subheading: 22px;
  --leading-subheading: 1;
  --tracking-subheading: -0.22px;
  --text-heading-sm: 40px;
  --leading-heading-sm: 0.85;
  --text-heading: 90px;
  --leading-heading: 0.85;
  --text-heading-lg: 120px;
  --leading-heading-lg: 0.85;
  --text-display: 150px;
  --leading-display: 0.85;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-128: 128px;

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