# Shelby Kay

> # Shelby Kay — Style Reference

## Prompt Content

```
# Shelby Kay — Style Reference
> botanical editorial spread trên nền vải lanh ấm — hệ thống mực hai màu trên giấy cũ, với display type tràn ra ngoài mép trang và metadata thì thầm từ lề.

**Theme:** light

Shelby Kay là một portfolio editorial chủ đề thực vật: canvas vải lanh ấm, một màu mực olive đậm, và một điểm nhấn sage-green duy nhất làm toàn bộ công việc thể hiện thương hiệu. Typography cực đoan — Ranade display type kéo dài tới 265px và tràn edge-to-edge, trong khi Switzer xử lý mọi thứ còn lại ở dải compact 10–20px, tạo ra sự căng thẳng kiểu magazine-spread giữa header hoành tráng và metadata thì thầm. Navigation chỉ là text, không có button, không control bo tròn, không shadow — giao diện đọc như một cuốn sách nghệ thuật in, không phải phần mềm. Các section chuyển qua các lớp tông ấm (cream → tan → taupe) thay vì các khối màu cứng xen kẽ, và toàn bộ hệ thống tưởng thưởng cho sự kiềm chế: hierarchy đến từ kích thước, weight và whitespace, không bao giờ từ màu sắc hay chrome.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Olive Ink | `#393c2a` | `--color-olive-ink` | Text chính, border và stroke cấu trúc — tất cả type từ body đến display headings, tất cả card và image borders, tất cả interactive outlines |
| Sage Type | `#737955` | `--color-sage-type` | Display headings và brand voice — dùng cho wordmark SHELBY hoành tráng, section anchors, và các điểm nhấn heading chọn lọc mang bản sắc thực vật của thương hiệu |
| Linen | `#efe6d9` | `--color-linen` | Canvas chính và bề mặt card — nền trang, card fills, tông ấm nền tảng mà toàn bộ hệ thống nằm trên |
| Sienna | `#d6b292` | `--color-sienna` | Orange wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung |
| Driftwood | `#afa199` | `--color-driftwood` | Bề mặt cấp ba và muted helpers — nền profile-section, metadata bão hòa thấp, UI text và divider ít quan trọng |
| Riverstone | `#7b8785` | `--color-riverstone` | Neutral tông lạnh cho chuyển đổi tương phản tinh tế — bề mặt phụ, hover hoặc muted state cho UI element cần tách biệt thị giác khỏi nền ấm |

## Tokens — Typography

### Ranade — Display và editorial headlines. Dùng ở tỉ lệ cực lớn (83–265px) cho wordmark và section anchors, và ở 24px cho callout CONTACT. Dạng hình học hơi condensed tạo cho thương hiệu giọng nói hoành tráng nhưng kiềm chế — type lấp đầy khung hình mà không la hét. Thay thế: Boldonse hoặc Bold Neue cho display, Space Grotesk cho các mục nhỏ hơn. · `--font-ranade`
- **Thay thế:** Boldonse, Space Grotesk
- **Weights:** 400, 700
- **Kích thước:** 24px, 83px, 158px, 265px
- **Line height:** 0.90, 1.00, 1.20
- **Vai trò:** Display và editorial headlines. Dùng ở tỉ lệ cực lớn (83–265px) cho wordmark và section anchors, và ở 24px cho callout CONTACT. Dạng hình học hơi condensed tạo cho thương hiệu giọng nói hoành tráng nhưng kiềm chế — type lấp đầy khung hình mà không la hét. Thay thế: Boldonse hoặc Bold Neue cho display, Space Grotesk cho các mục nhỏ hơn.

### Switzer — Mọi thứ còn lại: body copy, nav, labels, metadata, card titles, list items. Grotesque compact đọc như editorial running text. Weight 500–600 là dải workhorse; 700 dành riêng cho section headers và emphasized nav. Thay thế: Inter, Untitled Sans, hoặc Suisse Int'l để có full weight coverage. · `--font-switzer`
- **Thay thế:** Inter, Untitled Sans
- **Weights:** 500, 600, 700
- **Kích thước:** 10px, 11px, 14px, 16px, 20px
- **Line height:** 1.00, 1.20, 1.25, 1.30
- **Vai trò:** Mọi thứ còn lại: body copy, nav, labels, metadata, card titles, list items. Grotesque compact đọc như editorial running text. Weight 500–600 là dải workhorse; 700 dành riêng cho section headers và emphasized nav. Thay thế: Inter, Untitled Sans, hoặc Suisse Int'l để có full weight coverage.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|-------------|----------------|-------|
| caption | 10px | 1.2 | — | `--text-caption` |
| body | 14px | 1.3 | — | `--text-body` |
| heading-sm | 20px | 1.2 | — | `--text-heading-sm` |
| heading | 24px | 1.2 | — | `--text-heading` |
| display | 83px | 0.9 | — | `--text-display` |
| display-lg | 158px | 0.9 | — | `--text-display-lg` |
| wordmark | 265px | 0.9 | — | `--text-wordmark` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 45 | 45px | `--spacing-45` |
| 56 | 56px | `--spacing-56` |

### Border Radius

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

### Layout

- **Section gap:** 36-56px
- **Card padding:** 20px
- **Element gap:** 12px

## Components

### Wordmark Display
**Vai trò:** Brand-defining type element

Ranade ở 265px, weight 400, line-height 0.90, Sage Type (#737955), không letter-spacing. Trải dài full viewport width edge-to-edge, character spacing trực quan chặt chẽ. Đây là signature element — một từ duy nhất lấp đầy khung hình. Luôn uppercase, luôn ở tỉ lệ tối đa.

### Section Anchor
**Vai trò:** Section transition label

Ranade ở 24px, weight 400, line-height 1.20, Olive Ink (#393c2a). Căn giữa, dùng như một callout nhẹ nhàng như 'CONTACT' mời gọi scroll thay vì ra lệnh hành động. Không gạch chân, không trang trí — typographic scale làm tất cả.

### Rotated Side Label
**Vai trò:** Vertical decorative element

Ranade ở 83–158px, weight 400, Olive Ink (#393c2a), xoay 90° ngược chiều kim đồng hồ, ghim vào cạnh phải của viewport. Hoạt động như một running header tương đương — cố định hoặc xuất hiện trên hero để đánh dấu danh tính trang mà không cạnh tranh với wordmark.

### Minimal Nav
**Vai trò:** Text-only site navigation

Switzer 11–14px, weight 500, uppercase, Olive Ink (#393c2a), letter-spacing normal. Căn chỉnh theo mép trang (trái cho primary links, phải cho meta như '2026'). Không button, không background, không separator giữa các item — whitespace định nghĩa các link. Link có underline hoặc border Olive Ink khi hover.

### Project Card
**Vai trò:** Work grid item

Ảnh full-bleed bên trong khung 0px-radius trên nền Sienna (#d6b292). Date stamp ở góc trên bên trái với Switzer 10px, weight 500, Olive Ink. Nhãn hai chữ cái viết tắt căn giữa bên dưới card với Switzer 11px, weight 600, Olive Ink. Không card border, không shadow — ảnh CHÍNH LÀ card.

### Date Stamp
**Vai trò:** Editorial metadata

Switzer 10px, weight 500, Olive Ink (#393c2a), định vị tuyệt đối ở góc trên bên trái của project card hoặc section. Định hướng dọc (xoay 90°). Hoạt động như số phát hành trên bìa tạp chí — thiết lập phép ẩn dụ editorial.

### Client List Column
**Vai trò:** Sidebar content list

Switzer 11–14px, weight 500, Olive Ink (#393c2a), không bullet point, không thụt lề — các item xếp chồng trực tiếp. Hoạt động như một type-only index, chạy dọc theo lề trái của work section.

### Portrait Image Card
**Vai trò:** Profile photo với duotone treatment

Ảnh vuông hoặc gần vuông, 0px radius, desaturated để nằm trong bảng màu olive. Không border, không caption box. Ảnh tiếp xúc trực tiếp với bề mặt Driftwood (#afa199). Hoạt động như khoảnh khắc 'media' duy nhất trên profile page — type làm phần còn lại.

### Recognition / Award List
**Vai trò:** Right-aligned metadata column

Switzer 11–14px, weight 500, Olive Ink, text căn phải. Mục nhập nhiều dòng với tên dự án trên một dòng, chi tiết giải thưởng thụt lề bên dưới. Dày đặc, compact — đọc như colophon hoặc index page từ sách in.

### Full-Bleed Botanical Background
**Vai trò:** Hero atmosphere layer

Ảnh thiên nhiên/thực vật lớn ở độ mờ cực thấp (khoảng 10–15%) phủ lên canvas Linen (#efe6d9). Ảnh kéo dài edge-to-edge không border. Tạo bầu không khí greenhouse/atelier mà không cạnh tranh với wordmark. Không rounded corners, không mask.

### Hero Subtitle
**Vai trò:** Opening statement bên dưới wordmark

Switzer 14–16px, weight 500, line-height 1.30, Olive Ink (#393c2a). Tối đa hai dòng ngắn, căn trái. Thiết lập giọng nói editorial — đọc như tiểu sử tác giả trên bìa sách, không phải tagline marketing.

## Do's and Don'ts

### Do
- Dùng Ranade ở 83px hoặc lớn hơn cho bất kỳ brand hoặc section-defining headline nào — đây là type duy nhất được phép lấp đầy khung hình.
- Đặt body và metadata bằng Switzer weight 500–600 ở 10–16px — grotesque compact là workhorse và nên xử lý 90% giao diện.
- Xây dựng bảng màu từ chính xác hai brand colors: Olive Ink (#393c2a) cho cấu trúc, Sage Type (#737955) cho brand voice. Dùng Sage một cách tiết kiệm — tối đa một display element mỗi section.
- Để canvas chuyển qua các lớp tông ấm (Linen → Sienna → Driftwood) để định nghĩa section thay vì hard borders hoặc color blocks.
- Dùng 0px border-radius ở mọi nơi — cards, images, tags. Phép ẩn dụ trang in đòi hỏi góc sắc.
- Dùng padding 7–8px cho container metadata chặt chẽ và 20px cho card padding — base unit 8px chi phối tất cả spacing.
- Dùng Olive Ink (#393c2a) cho tất cả text và borders. Tỉ lệ tương phản 9.2:1 trên Linen giúp nó dễ đọc ở 10px và hoành tráng ở 265px.

### Don't
- Đừng thêm drop shadows, glows, hoặc bất kỳ CSS elevation nào — hệ thống cố tình phẳng và giống in ấn.
- Đừng đưa rounded corners (border-radius > 0) vào bất kỳ element nào — nó phá vỡ phép ẩn dụ editorial.
- Đừng dùng Sage Type (#737955) cho body text — tỉ lệ tương phản 3.7:1 trên Linen không đạt chuẩn readability. Chỉ dùng cho display headings.
- Đừng tạo filled button backgrounds với bất kỳ màu nào — hệ thống này không có CTA buttons. Navigation chỉ là text, contact là typographic anchor.
- Đừng dùng gradients, brand illustrations, hoặc icon sets — ngôn ngữ thị giác chỉ là photography, type và tonal layering.
- Đừng dùng bất kỳ cool hoặc neutral gray nào ngoài token Riverstone (#7b8785) — tất cả neutral phải giữ ấm để duy trì bầu không khí thực vật.
- Đừng căn giữa body text. Căn trái mọi thứ ngoại trừ section anchors, là element duy nhất được xử lý căn giữa.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Linen | `#efe6d9` | Canvas trang chính — hero, section background mặc định |
| 2 | Sienna | `#d6b292` | Work/index section — tonal page break |
| 3 | Driftwood | `#afa199` | Profile section background — chuyển ấm sâu hơn |
| 4 | Riverstone | `#7b8785` | Neutral pha lạnh cho contrast states hoặc secondary overlays |

## Elevation

Hệ thống phẳng theo nguyên tắc thiết kế editorial: không drop shadows, không elevation, không floating surfaces. Chiều sâu chỉ được tạo ra thông qua tonal layering của các bề mặt ấm, border lines và ảnh full-bleed. Cards nằm trực tiếp trên bề mặt section của chúng với hairline border hoặc không có gì — phép ẩn dụ trang in cấm digital lift.

## Imagery

Photography mang tính thực vật và bầu không khí, được dùng như lớp texture mờ phía sau wordmark — cây lớn, cọ, tán lá hiển thị ở độ mờ 10–15% để chúng đọc như bóng nhà kính chứ không phải chủ thể. Một ảnh portrait full-bleed xuất hiện trên profile page, desaturated để nằm trong bảng màu olive và crop chặt. Không product photography, không abstract 3D, không illustration. Không icon system — element đồ họa duy nhất là chính type. Image treatment luôn full-bleed với 0px radius và không border hoặc mask. Imagery mang tính bầu không khí, không bao giờ giải thích.

## Layout

Full-bleed layout không có max-width container — wordmark kéo dài edge-to-edge, và section backgrounds trải dài full viewport. Hero là một headline khổng lồ duy nhất (SHELBY) phủ lên botanical photography mờ, với hero subtitle ở góc dưới bên trái và minimal nav dọc theo cạnh dưới. Một nhãn 'KAY' xoay nằm ở lề phải. Work section dùng lưới card 4 cột trên nền tan ấm, với client list dọc chạy dọc lề trái. Profile section chuyển sang layout 3 cột: portrait trái, label/title giữa, metadata dày đặc phải. Nhịp điệu section được xác định bởi chuyển đổi bề mặt tông (cream → tan → taupe) thay vì divider cứng. Navigation là thanh text minimal căn dưới trên hero; không có trên interior pages dùng scrolling. Mô hình trang là editorial — bất đối xứng, khoảng thở dọc rộng rãi giữa các section, không có ràng buộc max-width căn giữa.

## Agent Prompt Guide

**Quick Color Reference**
- text: #393c2a (Olive Ink)
- background: #efe6d9 (Linen)
- border: #393c2a (Olive Ink)
- accent: #737955 (Sage Type)
- primary action: không có màu CTA riêng biệt

**3-5 Example Component Prompts**

1. **Build the wordmark hero**: Canvas #efe6d9 full-bleed với ảnh thực vật lớn ở độ mờ ~12% lấp đầy nền. Display heading 'SHELBY' căn giữa bằng Ranade weight 400, kích thước 265px, line-height 0.90, màu #737955, kéo dài edge-to-edge. Hero subtitle bên dưới bằng Switzer weight 500, 14px, line-height 1.30, màu #393c2a, căn trái, tối đa hai dòng ngắn.

2. **Build a project card for the work grid**: Trên nền section #d6b292, render ảnh full-bleed với 0px border-radius làm thân card. Phủ date stamp ở góc trên bên trái bằng Switzer weight 500, 10px, màu #393c2a, xoay 90°. Bên dưới card, căn giữa nhãn hai chữ cái bằng Switzer weight 600, 11px, màu #393c2a. Không border, không shadow, gap 20px giữa các card.

3. **Build the minimal nav bar**: Cố định hoặc căn dưới, padding dọc 7px. Bên trái: ba text links ('WORK', 'PROFILE', 'CONTACT') bằng Switzer weight 500, 11px, uppercase, màu #393c2a, cách nhau 20px gap. Bên phải: nhãn năm ('2026') cùng style, căn phải. Không backgrounds, không borders, không divider — whitespace định nghĩa các item.

4. **Build the profile section**: Trên nền #afa199, đặt ảnh portrait vuông bên trái (0px radius, không border). Ở giữa, nhãn 'RECOGNITION' bằng Switzer weight 700, 14px, màu #393c2a, theo sau là danh sách tên dọc bằng Switzer weight 500, 11px. Bên phải, cột award entries căn phải bằng Switzer weight 500, 11px, với tên dự án trên một dòng và chi tiết bên dưới. Gap 36px giữa các section.

5. **Build the rotated side label**: Ghim element text 'KAY' vào cạnh phải của viewport, xoay 90° ngược chiều kim đồng hồ. Ranade weight 400, 158px, màu #393c2a, line-height 0.90. Định vị căn giữa dọc trong hero. Hoạt động như running header — type chạm mép khung không padding.

## Typography Philosophy

Hệ thống hoạt động trên sự tương phản radical type-scale: Ranade ở 265px cho wordmark, Switzer ở 10px cho metadata. Tỉ lệ 26× này là công cụ thị giác chính — hierarchy được tạo ra chỉ bằng kích thước, không bao giờ bằng màu sắc hoặc biến thể weight trong cùng một loại element. Ranade dùng weight 400 cho display (weight nhẹ nhưng kích thước hoành tráng, tạo uy quyền qua scale chứ không qua độ đậm). Switzer weight 500 là body mặc định; weight 600 cho emphasized labels; weight 700 dành riêng cho section headers. Không italic, không underline decoration, không drop-cap — type nói qua scale và hệ thống mực hai màu.

## Similar Brands

- **Locomotive (locomotive.ca)** — Cùng cách tiếp cận editorial-portfolio với display type khổng lồ tràn edge-to-edge, bảng màu neutral ấm, và botanical/nature photography làm nền bầu không khí
- **Bureau Cool** — Hệ thống mực hai màu (tối + một accent) trên canvas cream ấm, custom display type ở tỉ lệ cực lớn, text-only navigation, không buttons hoặc shadows
- **Pentagram (pentagram.com)** — Nhịp điệu portfolio editorial — full-bleed sections, type-as-imagery, chuyển đổi bề mặt tông thay vì color blocks, zero chrome giữa các section
- **Rauno Freiberg** — Minimal text-only nav, tương phản type cực đoan giữa display và metadata, bề mặt phẳng không shadows, bảng màu neutral ấm
- **Eli Hava (personal portfolio)** — Hero wordmark lớn kéo dài, rotated side text element, card-based work grid với date stamps — cùng cấu trúc magazine-spread

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-olive-ink: #393c2a;
  --color-sage-type: #737955;
  --color-linen: #efe6d9;
  --color-sienna: #d6b292;
  --color-driftwood: #afa199;
  --color-riverstone: #7b8785;

  /* Typography — Font Families */
  --font-ranade: 'Ranade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.3;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --text-display: 83px;
  --leading-display: 0.9;
  --text-display-lg: 158px;
  --leading-display-lg: 0.9;
  --text-wordmark: 265px;
  --leading-wordmark: 0.9;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-45: 45px;
  --spacing-56: 56px;

  /* Layout */
  --section-gap: 36-56px;
  --card-padding: 20px;
  --element-gap: 12px;

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

  /* Surfaces */
  --surface-linen: #efe6d9;
  --surface-sienna: #d6b292;
  --surface-driftwood: #afa199;
  --surface-riverstone: #7b8785;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-olive-ink: #393c2a;
  --color-sage-type: #737955;
  --color-linen: #efe6d9;
  --color-sienna: #d6b292;
  --color-driftwood: #afa199;
  --color-riverstone: #7b8785;

  /* Typography */
  --font-ranade: 'Ranade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.3;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --text-display: 83px;
  --leading-display: 0.9;
  --text-display-lg: 158px;
  --leading-display-lg: 0.9;
  --text-wordmark: 265px;
  --leading-wordmark: 0.9;

  /* Spacing */
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-45: 45px;
  --spacing-56: 56px;
}
```