# Yellowbird®

> # Yellowbird® — Style Reference

## Prompt Content

```
# Yellowbird® — Style Reference
> Tấm biển quảng cáo sốt cà chua kiểu retro dưới nắng trưa — một mặt phẳng vàng dưới mặt trời đen, từng chữ được vẽ bằng bút dạ đậm.

Hệ thống thở qua tương phản màu sắc, không phải độ cao: vàng trên vàng được phân cách bởi các nét đen dày, với thẻ kem là điểm nghỉ trung tính duy nhất.

**Theme:** light

Yellowbird là một thế giới hai màu, dung lượng cao: một màu vàng tươi tràn ngập mọi section trong khi màu đen làm toàn bộ công việc cấu trúc và typography. Trang web mang phong cách như một tấm biển quảng cáo sốt vẽ tay — bề mặt phẳng, đường viền hairline dày thay vì đổ bóng, khoảng thở rộng rãi, và một custom display face chunky biến wordmark thành hero. Không có gradient depth, không glassmorphism, không xếp lớp card chồng card; sự phân cách không gian đến từ việc đổi màu (dải vàng → thẻ kem → nút đen) và padding rộng rãi. Interactive elements giữ ở mức tối thiểu và tự tin: hầu hết các bề mặt không có border trên nền vàng canvas, product cards dùng radius 30px và solid black stroke, và CTA thực sự duy nhất là nút pill đen đậm với chữ trắng. Màu xanh (#007aff) chỉ xuất hiện dưới dạng ghost-button border cho các hành động phụ, khiến nó có cảm giác như mượn tạm chứ không phải của riêng thương hiệu.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Sunglow | `#ffe845` | `--color-sunglow` | Brand canvas — nền chủ đạo cho tất cả các section, hero, footer, và announcement bar; cũng dùng cho product category tags và sticker burst shapes |
| Sauce Bottle Black | `#000000` | `--color-sauce-bottle-black` | Text chính, tất cả border và hairline, product card strokes, mascot linework, và nền của primary action button dạng filled — làm toàn bộ công việc cấu trúc và typography nặng nhọc |
| Pure White | `#ffffff` | `--color-pure-white` | Hairline borders, dividers, input outlines, và card edges trên bề mặt sáng. Không dùng làm màu CTA chính |
| Buttermilk | `#fbfaf2` | `--color-buttermilk` | Bề mặt card thay thế cho các product tile ít nổi bật hơn — màu trắng ngà đọc như kem ấm trên nền vàng bão hòa |
| Cool Link Blue | `#007aff` | `--color-cool-link-blue` | Ghost/outlined secondary action border — màu tiện ích mượn tạm cho các link ưu tiên thấp, không bao giờ dùng cho filled buttons hoặc primary navigation |

## Tokens — Typography

### Gooper — Signature wordmark display — logotype 'Yellowbird' khổng lồ và bất kỳ display heading cỡ lớn nào; một custom display face bong bóng, siêu chunky, hoạt động như biểu tượng của thương hiệu. Tracking chặt (-0.028em) giữ cho các form tròn không bị cảm giác lỏng lẻo ở 91px · `--font-gooper`
- **Thay thế:** Bagel Fat One, Fraunces 900, hoặc Bowlby One
- **Weights:** 400, 700
- **Cỡ chữ:** 91px
- **Line height:** 1.05
- **Letter spacing:** -0.0280em
- **Vai trò:** Signature wordmark display — logotype 'Yellowbird' khổng lồ và bất kỳ display heading cỡ lớn nào; một custom display face bong bóng, siêu chunky, hoạt động như biểu tượng của thương hiệu. Tracking chặt (-0.028em) giữ cho các form tròn không bị cảm giác lỏng lẻo ở 91px

### ABC Monument Grotesk — Primary workhorse — nav links, body copy, product names, section headings, button text, footer, và hero subhead. Một weight duy nhất (400) đảm nhận mọi vai trò từ caption 14px đến hero subhead 61px, thống nhất bởi negative tracking thắt chặt khi cỡ chữ tăng (-0.04em ở 14px đến -0.011em ở 61px) · `--font-abc-monument-grotesk`
- **Thay thế:** Inter, GT America, Söhne, hoặc General Sans
- **Weights:** 400
- **Cỡ chữ:** 14px, 18px, 27px, 30px, 41px, 45px, 61px
- **Line height:** 0.87, 0.90, 1.00, 1.10, 1.20, 1.30, 1.67
- **Letter spacing:** -0.0400em, -0.0300em, -0.0140em, -0.0110em, -0.0070em, -0.0060em
- **Vai trò:** Primary workhorse — nav links, body copy, product names, section headings, button text, footer, và hero subhead. Một weight duy nhất (400) đảm nhận mọi vai trò từ caption 14px đến hero subhead 61px, thống nhất bởi negative tracking thắt chặt khi cỡ chữ tăng (-0.04em ở 14px đến -0.011em ở 61px)

### Pitch Sans — Secondary utility — dùng cho badges, tags, micro-labels, và supporting metadata khi cần cảm giác hơi compact hơn. Weight 600 cho badge text tạo ra sự tương phản weight duy nhất trong hệ thống · `--font-pitch-sans`
- **Thay thế:** Söhne, Inter, hoặc Untitled Sans
- **Weights:** 400, 600
- **Cỡ chữ:** 16px, 18px, 27px
- **Line height:** 0.84, 1.00, 1.20, 1.30, 1.46
- **Letter spacing:** -0.0310em, -0.0120em, -0.0110em, 0.0500em
- **Vai trò:** Secondary utility — dùng cho badges, tags, micro-labels, và supporting metadata khi cần cảm giác hơi compact hơn. Weight 600 cho badge text tạo ra sự tương phản weight duy nhất trong hệ thống

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 14px | 1.2 | -0.56px | `--text-caption` |
| body-sm | 16px | 1.3 | -0.18px | `--text-body-sm` |
| body | 18px | 1.3 | -0.18px | `--text-body` |
| subheading | 27px | 1.2 | -0.57px | `--text-subheading` |
| heading | 41px | 1.1 | -0.45px | `--text-heading` |
| heading-lg | 61px | 0.9 | -0.67px | `--text-heading-lg` |
| display | 91px | 1.05 | -2.55px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 6px |
| cards | 30px |
| images | 30px |
| buttons | 14px |
| stickers | 36px |

### Layout

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

## Components

### Announcement Bar
**Vai trò:** Thanh utility mỏng toàn site phía trên nav

Nền #000000 full-width, cao ~36px, text trắng căn giữa Monument Grotesk 14px. Dùng cho shipping promos và trust signals. Không có padding ngoài căn giữa dọc.

### Primary Navigation Header
**Vai trò:** Nav chính của site neo ở đầu mỗi trang

Nền #ffe845, full-bleed. Nav links căn trái (SHOP, ABOUT, FIND US) và utility links căn phải (SEARCH, LOG IN, CART) bằng Monument Grotesk 18px, #000000, all caps, letter-spacing -0.011em. Logo bird-mark đặt ở giữa dưới dạng inline icon nhỏ. Không nền, không border — nav nổi trên nền vàng canvas.

### Hero Wordmark Block
**Vai trò:** Tuyên bố thương hiệu above-the-fold thay thế headline+subhead+CTA điển hình

Section #ffe845 full-bleed. Wordmark 'Yellowbird' Gooper 91px căn giữa, #000000, với mascot minh họa chim gai chồng lên phần trên của chữ. Không subtitle, không CTA — wordmark CHÍNH LÀ hero. Padding dọc ~80px trên và dưới.

### Hero Subhead Paragraph
**Vai trò:** Text giới thiệu dạng dài dưới hero wordmark

Monument Grotesk 45px, weight 400, line-height 1.0, letter-spacing -0.014em, #000000, căn giữa, max-width ~900px. Chữ đen trên nền vàng — không có background card. Đây là running text lớn nhất trong hệ thống.

### Product Card
**Vai trò:** Tile thương mại chính cho các SKU sốt trong featured grid

Nền trắng (#ffffff) hoặc kem (#fbfaf2), border 1.5–2px solid #000000, border-radius 30px. Padding trong ~24px. Ảnh sản phẩm căn giữa, category badge chồng lên trên ở giữa, tên sản phẩm Monument Grotesk 18–27px bên dưới. Không shadow — sự phân cách đến từ black stroke trên nền vàng.

### Product Category Badge
**Vai trò:** Label tag chồng lên product cards (CLASSIC, ORGANIC, SMALL BATCH)

Nền #ffe845 với border 1.5px #000000, border-radius 6px, padding dọc ~15px và ngang ~18px. Pitch Sans 16px weight 600, #000000, all caps. Nằm ở trên cùng giữa của product card, hơi chồm lên mép card.

### Primary Action Button
**Vai trò:** CTA filled duy nhất — dùng cho SHOP ALL và checkout actions

Nền #000000, text #ffffff, border-radius 14px, padding dọc ~15px và ngang ~18px. Monument Grotesk 18px weight 400, all caps, letter-spacing -0.011em. Không border, không shadow, không hover lift — nằm phẳng như một sticker trên nền vàng canvas.

### Ghost Secondary Action
**Vai trò:** Outlined secondary button cho các link ưu tiên thấp hơn

Nền trong suốt, border 1.5px #007aff, border-radius 10px, padding dọc ~10px và ngang ~18px. Monument Grotesk 18px, text #007aff. Nơi duy nhất màu xanh xuất hiện trong hệ thống — coi xanh như utility mượn tạm, không phải brand.

### Starburst Sticker
**Vai trò:** Decorative seal/burst shape cho callouts và trust signals

Nền #ffe845 với stroke #000000, border-radius 36px, xấp xỉ hình răng cưa vẽ tay. Monument Grotesk 18px, weight 400, #000000, all caps, xoay nhẹ (~5°). Dùng có chừng mực như một dấu chấm than thị giác — không bao giờ quá một cái mỗi viewport.

### Testimonial Quote Block
**Vai trò:** Dải quote khách hàng full-width

Nền #ffe845, không card. Monument Grotesk 45px italic-feel weight 400, #000000, căn giữa, với dấu ngoặc kép mở/đóng hiển thị cực lớn. Attribution bằng Pitch Sans 16px, letter-spacing 0.05em (positive tracking duy nhất trong hệ thống), all caps, #000000. Carousel arrow controls nằm ở mép trái/phải bằng #000000.

### Section Divider
**Vai trò:** Dải phân cách ngang giữa các content bands

Hairline 1px #000000 mỏng trải dài toàn bộ chiều rộng nội dung. Dùng có chừng mực — hầu hết sự phân cách section đến từ đổi màu, không phải đường kẻ thấy được.

### Starburst Mascot Mark
**Vai trò:** Icon thương hiệu nhỏ dùng ở giữa nav và testimonial accent

Minh họa mặt chim hoạt hình lông gai bằng linework #000000, cao ~40px trong nav, lớn hơn trong testimonial accent. Không fill, không màu — mực đen thuần trên nền vàng.

## Do's and Don'ts

### Nên
- Dùng #ffe845 làm canvas full-bleed cho mọi section full-width — hero, product grids, testimonials, và footer đều nên nằm trên nền vàng, không bao giờ trên nền trắng hoặc xám
- Đặt body và heading copy ở Monument Grotesk weight 400 duy nhất; hệ thống không có bold weight cho font này, vì vậy hierarchy đến từ kích thước và tracking, không phải weight
- Dùng border-radius 30px cho tất cả product cards và images; 14px cho primary buttons; 6px cho category badges — ba radius này định hình ngôn ngữ shape
- Phân cách section bằng đổi màu (dải vàng → thẻ kem → dải vàng), không phải bằng shadow hoặc divider — thiết kế cố tình phẳng
- Chỉ dùng Gooper 91px display face cho wordmark và các tuyên bố thương hiệu tương đương; không bao giờ dùng cho product names, body, hoặc UI text
- Định cỡ tất cả CTA bằng Monument Grotesk 18px all caps với tracking -0.011em — sự nhất quán trong button typography là một signature
- Áp dụng pattern starburst sticker cho đúng một callout mỗi viewport — nó mất tác dụng nếu lặp lại

### Không nên
- Không bao giờ thêm màu sắc mới ngoài bộ vàng/đen/trắng/kem/xanh — sức mạnh của hệ thống là kỷ luật hai màu
- Không bao giờ thêm drop shadows, inner glows, hoặc blur effects vào cards hoặc buttons — sự phân cách đến từ solid black strokes, không phải độ cao
- Không bao giờ dùng màu xanh (#007aff) làm nền filled button hoặc cho navigation; nó chỉ là màu utility ghost-border
- Không bao giờ dùng font weight nặng hơn 400 cho Monument Grotesk; font không có sẵn bold, và fake bold phá vỡ sự đồng đều hình học
- Không bao giờ đặt body copy trên nền trắng trên nền vàng canvas mà không có bề mặt card — text nổi trên nền trắng trông hỏng; luôn dùng kem hoặc trắng thuần làm bề mặt card
- Không bao giờ dùng positive letter-spacing cho body hoặc display text — positive tracking duy nhất (0.05em) chỉ dành cho Pitch Sans testimonial attributions
- Không bao giờ giảm wordmark dưới 61px hoặc thay thế Gooper bằng standard display face; custom face bong bóng là element dễ nhận biết nhất của thương hiệu

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 1 | Sunglow Canvas | `#ffe845` | Nền trang full-bleed cho mọi section bao gồm hero, product grid, testimonial band, và footer |
| 2 | Cream Card | `#fbfaf2` | Nền product tile thay thế cho các SKU ít nổi bật hơn |
| 3 | White Card | `#ffffff` | Bề mặt product card chính nằm trên nền vàng canvas |
| 4 | Black Button | `#000000` | Bề mặt action chính — pattern CTA filled duy nhất |

## Elevation

Thiết kế cố tình tránh shadow. Sự phân cách không gian chỉ đạt được thông qua: (1) tương phản màu sắc — bề mặt vàng với white cards viền đen, (2) black strokes dày 1.5–2px solid trên tất cả các element nâng lên, và (3) padding rộng rãi. Không có z-axis hierarchy — hệ thống cố tình phẳng, đọc giống như bao bì in lụa hơn là một SaaS UI điển hình dùng depth. Thêm dù chỉ một shadow nhẹ cũng sẽ phá vỡ cảm giác poster in ấn định nghĩa thương hiệu.

## Imagery

Product photography chặt chẽ, căn giữa, và cách ly trên nền thẻ trắng thuần — chai được chụp thẳng diện, không có lifestyle context, không tay, không food pairings. Hero wordmark đi kèm với mascot chim hoạt hình linework đen vẽ tay (lông gai, mắt biểu cảm, không fill màu) hoạt động như tài sản thương hiệu phụ. Một hình sticker starburst vẽ tay với các cạnh răng cưa xuất hiện như con dấu trang trí. Không full-bleed photography, không video, không abstract gradients — imagery giới hạn ở: (1) ảnh sản phẩm nền trắng sạch, (2) minh họa mascot linework đen, và (3) starburst vẽ tay. Iconography hoàn toàn custom và dạng line-art, hiển thị bằng đen đặc trên nền vàng.

## Layout

Nền vàng canvas full-bleed không có max-width constraint trên background color. Nội dung max-width ~1280px căn giữa. Hero là stack wordmark căn giữa + mascot với subhead paragraph lớn bên dưới, tiếp theo là product card grid 3 cột (3 sản phẩm thấy được mỗi hàng ở desktop). Sections được phân cách bằng đổi màu thay vì divider hoặc thay đổi shadow — nhịp đọc là vàng → dải vàng-với-cream-cards → vàng → vàng. Navigation là một thanh ngang full-bleed duy nhất ở trên cùng, không có sticky behavior, không sidebar. Product grid dùng kích thước card đồng nhất với gutter bằng nhau. Bên dưới grid, nút SHOP ALL căn giữa đóng vai trò section closer. Dải testimonial theo sau ở full viewport width với carousel arrows ở cạnh, sau đó là footer. Vertical rhythm rộng rãi: ~80px giữa các section chính, ~24px giữa cards và các element bên trong card.

## Agent Prompt Guide

**Quick Color Reference**
- Canvas: #ffe845
- Text: #000000
- Card surface: #ffffff
- Alternate card: #fbfaf2
- Border/stroke: #000000
- Primary action: #ffe845 (filled action)
- Secondary action: #007aff (outlined ghost border only)

**3-5 Example Component Prompts**

1. **Product Card**: Nền trắng (#ffffff), border 1.5px solid #000000, border-radius 30px, padding 24px. Ảnh chai sốt căn giữa. Category badge chồng lên trên ở giữa: nền #ffe845, border 1.5px #000000, radius 6px, Pitch Sans 16px weight 600, all caps, #000000. Tên sản phẩm bên dưới bằng Monument Grotesk 27px, #000000, letter-spacing -0.011em.

2. Tạo Primary Action Button: nền #ffe845, text #000000, radius 9999px, padding pill nhỏ gọn. Dùng treatment filled này cho CTA chính.

3. **Hero Subhead Paragraph**: Nền #ffe845 full-bleed, không card. Monument Grotesk 45px, weight 400, line-height 1.0, letter-spacing -0.014em, #000000, căn giữa, max-width 900px. Padding dọc ~80px trên và dưới.

4. **Starburst Sticker**: Nền #ffe845, stroke 1.5px #000000, border-radius 36px với cạnh răng cưa vẽ tay, xoay ~5°. Monument Grotesk 18px, weight 400, #000000, all caps, căn giữa bên trong. Đặt ở góc trên bên phải viewport như một callout trang trí duy nhất.

5. **Testimonial Quote Section**: Nền #ffe845 full-bleed. Monument Grotesk 45px, weight 400, #000000, căn giữa, với dấu ngoặc kép cỡ lớn. Attribution bằng Pitch Sans 16px, letter-spacing 0.05em, all caps, #000000, bên dưới quote. Carousel arrow controls bằng #000000 ở mép trái và phải.

## Similar Brands

- **HEATONIST** — Cùng bảng màu vàng-đen bão hòa cho thương hiệu sốt cay với custom display typography dày và product grids dạng card phẳng
- **Cholula** — Branding sốt đậm với một màu thương hiệu chủ đạo, custom display wordmark, và mascot identity dạng flat illustration
- **Omsom** — Thương hiệu thực phẩm packaging-forward tương phản cao dùng black strokes dày, màu canvas bão hòa, và ngôn ngữ component phẳng không shadow
- **Fly By Jing** — Thương hiệu sốt cao cấp với mascot minh họa vui nhộn, custom display type cỡ lớn, và hệ thống nhận diện hai màu

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-sunglow: #ffe845;
  --color-sauce-bottle-black: #000000;
  --color-pure-white: #ffffff;
  --color-buttermilk: #fbfaf2;
  --color-cool-link-blue: #007aff;

  /* Typography — Font Families */
  --font-gooper: 'Gooper', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-monument-grotesk: 'ABC Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pitch-sans: 'Pitch Sans', 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.56px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: -0.18px;
  --text-body: 18px;
  --leading-body: 1.3;
  --tracking-body: -0.18px;
  --text-subheading: 27px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.57px;
  --text-heading: 41px;
  --leading-heading: 1.1;
  --tracking-heading: -0.45px;
  --text-heading-lg: 61px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -0.67px;
  --text-display: 91px;
  --leading-display: 1.05;
  --tracking-display: -2.55px;

  /* 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-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-3xl: 30px;
  --radius-3xl-2: 36px;

  /* Named Radii */
  --radius-tags: 6px;
  --radius-cards: 30px;
  --radius-images: 30px;
  --radius-buttons: 14px;
  --radius-stickers: 36px;

  /* Surfaces */
  --surface-sunglow-canvas: #ffe845;
  --surface-cream-card: #fbfaf2;
  --surface-white-card: #ffffff;
  --surface-black-button: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-sunglow: #ffe845;
  --color-sauce-bottle-black: #000000;
  --color-pure-white: #ffffff;
  --color-buttermilk: #fbfaf2;
  --color-cool-link-blue: #007aff;

  /* Typography */
  --font-gooper: 'Gooper', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-monument-grotesk: 'ABC Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pitch-sans: 'Pitch Sans', 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.56px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: -0.18px;
  --text-body: 18px;
  --leading-body: 1.3;
  --tracking-body: -0.18px;
  --text-subheading: 27px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.57px;
  --text-heading: 41px;
  --leading-heading: 1.1;
  --tracking-heading: -0.45px;
  --text-heading-lg: 61px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -0.67px;
  --text-display: 91px;
  --leading-display: 1.05;
  --tracking-display: -2.55px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-3xl: 30px;
  --radius-3xl-2: 36px;
}
```