# San Rita

> San Rita — Style Reference

## Prompt Content

```
# San Rita — Style Reference
> field guide vùng núi cao trên giấy sage

**Theme:** mixed

San Rita mang phong cách một cuốn nhật ký thực địa cho thương hiệu giày outdoor: ảnh phong cảnh rộng lớn, một điểm nhấn mint nhạt duy nhất nổi bật như bút highlight trên giấy topo, và một display face condensed tùy chỉnh biến các section opener thành những tuyên bố chắn ngang khung cảnh. Nhịp điệu thị giác xen kẽ giữa ảnh full-bleed sáng và các dải tối gần như đen (#161b13) nơi những bức ảnh kiểu Polaroid nghiêng rải rác khắp canvas như một cuốn nhật ký câu cá ruồi. Typography mang tính thực dụng và nhỏ cho mọi thứ ngoại trừ các khoảnh khắc display — mono caps xử lý UI chrome trong khi một dòng display khổng lồ 300px+ mang bản sắc của từng section. Các component vẫn phẳng và không trang trí: button outline mảnh, không đổ bóng, không bo góc để làm mềm các cạnh. Toàn bộ hệ thống giống như bản đồ địa hình kết hợp với tạp chí phiêu lưu — tự tin, chất outdoor, và cố tình thô mộc thay vì SaaS bóng bẩy.

## Tokens — Màu sắc

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Highlighter Mint | `#e2ffcc` | `--color-highlighter-mint` | Điểm nhấn thương hiệu chính — display text, nav links, button labels, icon fills. Màu đặc trưng; đọc như bút highlight trên bản đồ topo |
| Sage Stone | `#84907f` | `--color-sage-stone` | Điểm nhấn phụ trung tính — nền mờ nhẹ, UI elements nhẹ nhàng khi Highlighter Mint quá chói |
| Carbon Ink | `#161b13` | `--color-carbon-ink` | Nền section tối — gần như đen với sắc xanh lá cực nhẹ, neo các dải tối của trang |
| Forest Charcoal | `#2d3329` | `--color-forest-charcoal` | Text và border tối vừa trên nền sáng — mềm hơn đen thuần, giữ ấm áp xanh lá nhất quán |
| Topo Gray | `#dde2e4` | `--color-topo-gray` | Nền section sáng, bề mặt card, hairlines — canvas nền cho các dải sáng |
| Pure Black | `#000000` | `--color-pure-black` | Icon strokes, link underlines, điểm nhấn tương phản cao khi cần độ mạnh tối đa |

## Tokens — Typography

### F37stout — Display face cho section openers và brand wordmark. Tỷ lệ condensed cực đoan với line-height 0.90 và một weight duy nhất (400) tạo ra headline chắn ngang khung cảnh, đọc như signage đóng dấu, không phải web type. Ở 366px nó lấp đầy viewport; ở 40–48px nó trở thành nhãn section chặt chẽ. · `--font-f37stout`
- **Thay thế:** Bebas Neue, Anton, Oswald
- **Weights:** 400
- **Cỡ chữ:** 40px, 48px, 366px
- **Line height:** 0.90
- **Letter spacing:** normal
- **Vai trò:** Display face cho section openers và brand wordmark. Tỷ lệ condensed cực đoan với line-height 0.90 và một weight duy nhất (400) tạo ra headline chắn ngang khung cảnh, đọc như signage đóng dấu, không phải web type. Ở 366px nó lấp đầy viewport; ở 40–48px nó trở thành nhãn section chặt chẽ.

### mono — Tất cả UI chrome, body copy, nav, captions, buttons, footer text. Tracking -0.01em và line-height 1.20 chặt chẽ tạo mật độ in lụa, field-guide. Weight 700 được dùng tiết kiệm để nhấn mạnh; weight 400 đảm nhận phần lớn. Xử lý all-caps chiếm ưu thế — face này hoạt động như máy chữ. · `--font-mono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono
- **Weights:** 400, 700
- **Cỡ chữ:** 10px, 12px, 16px
- **Line height:** 1.20
- **Letter spacing:** -0.01em
- **Vai trò:** Tất cả UI chrome, body copy, nav, captions, buttons, footer text. Tracking -0.01em và line-height 1.20 chặt chẽ tạo mật độ in lụa, field-guide. Weight 700 được dùng tiết kiệm để nhấn mạnh; weight 400 đảm nhận phần lớn. Xử lý all-caps chiếm ưu thế — face này hoạt động như máy chữ.

### Times — Serif accent cho inline links, tạo độ tương phản báo chí/biên tập với mono body. Dùng tiết kiệm — một hoặc hai link moment mỗi trang. · `--font-times`
- **Thay thế:** Times New Roman, bất kỳ system serif nào
- **Weights:** 400
- **Cỡ chữ:** 16px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Vai trò:** Serif accent cho inline links, tạo độ tương phản báo chí/biên tập với mono body. Dùng tiết kiệm — một hoặc hai link moment mỗi trang.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 10px | 1.2 | -0.01px | `--text-caption` |
| body | 16px | 1.2 | -0.01px | `--text-body` |
| subheading | 40px | 0.9 | — | `--text-subheading` |
| heading | 48px | 0.9 | — | `--text-heading` |
| display | 366px | 0.9 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 5 | 5px | `--spacing-5` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 40 | 40px | `--spacing-40` |
| 67 | 67px | `--spacing-67` |
| 70 | 70px | `--spacing-70` |
| 190 | 190px | `--spacing-190` |

### Border Radius

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

### Layout

- **Section gap:** 67px
- **Card padding:** 16px
- **Element gap:** 24px

## Components

### Brand Wordmark
**Vai trò:** Logo lockup ở góc trên bên trái

Custom display face (tương đương F37stout) hiển thị 'San Rita' ở khoảng 40px. Màu là Highlighter Mint (#e2ffcc) trên section tối, Forest Charcoal (#2d3329) trên section sáng. Không icon, không container — chỉ wordmark như một con dấu trực tiếp.

### Outlined Nav Button
**Vai trò:** Primary navigation CTA trong header (ví dụ 'SHOW TRAILS')

Border 1px solid màu text hiện tại, fill trong suốt, radius 0px, padding ngang 12–16px, mono caps ở 10–12px. Nằm sát phải trong header. Trên nền tối: border và text màu Highlighter Mint (#e2ffcc). Trên nền sáng: border và text màu Forest Charcoal (#2d3329).

### Display Headline
**Vai trò:** Text mở section lấp đầy viewport

F37stout ở 366px, line-height 0.90, letter-spacing normal, weight 400. Đặt màu Highlighter Mint (#e2ffcc) và chồng lên nền ảnh. Tỷ lệ cực lớn có nghĩa một dòng text chiếm toàn bộ chiều rộng — headline CHÍNH LÀ layout, không bị giới hạn trong nó.

### Tilted Photo Card
**Vai trò:** Cụm ảnh kiểu scrapbook trên section tối

Ảnh rộng khoảng 280–360px, đặt ở các góc xoay khác nhau (khoảng -8°, +12°, +4°) để tạo hiệu ứng rải tay, như Polaroid vung vãi. Không border, không shadow, không radius — góc 0px thô. Chồng lấn và che một phần ảnh lân cận. Nằm trên nền Carbon Ink (#161b13).

### Circular Icon Badge
**Vai trò:** Icon minh họa độc lập ghim vào section

Badge tròn nhỏ (đường kính khoảng 40–48px) với stroke outline 1.5px màu Highlighter Mint (#e2ffcc), fill trong suốt. Chứa một line illustration đơn giản (ví dụ mũ, nhà, pin vị trí). Hoạt động như marker trang trí — không phải chrome tương tác.

### Footer Caption Block
**Vai trò:** Text vị trí/credit caps nhỏ ở góc dưới bên phải

Mono 10–12px, line-height 1.20, letter-spacing -0.01em, màu Highlighter Mint (#e2ffcc) trên nền tối. All-caps. Hai đến ba dòng ngắn copy về địa lý/dòng dõi thương hiệu. Căn phải, nằm gần cạnh dưới với margin rộng (190px+ từ một cạnh).

### Section Band — Dark
**Vai trò:** Dải nội dung tối full-bleed

Nền Carbon Ink (#161b13), kéo dài toàn bộ chiều rộng viewport, không giới hạn max-width. Chứa các tilted photo cards rải rác, icon badges, và text Highlighter Mint. Section padding khoảng 67–70px trên/dưới.

### Section Band — Light
**Vai trò:** Dải nội dung sáng full-bleed

Nền Topo Gray (#dde2e4) hoặc ảnh. Mono body text màu Forest Charcoal (#2d3329). Section padding 67–70px. Thường là dải trên cùng dưới hero ảnh full-bleed.

### Inline Link
**Vai trò:** Text links trong body copy

Serif (Times) ở 16px, có underline, màu Forest Charcoal (#2d3329) trên nền sáng. Khoảnh khắc serif duy nhất trong hệ thống — đọc như editorial anchor text.

### Scroll Cue Indicator
**Vai trò:** Element cố định nhỏ gần cuối viewport

Icon tròn hoặc lục giác nhỏ (khoảng 24px) với stroke 1px màu Forest Charcoal (#2d3329) hoặc Highlighter Mint (#e2ffcc). Gợi ý hướng cuộn xuống. Không fill, không chrome hoạt ảnh — một gợi ý hướng đi lặng lẽ.

## Do's and Don'ts

### Nên làm
- Chỉ dùng F37stout cho các khoảnh khắc display — để headline 366px chiếm viewport, không bao giờ thu nhỏ dưới 40px
- Đặt tất cả display text màu Highlighter Mint (#e2ffcc) và để nó chồng lên nền ảnh
- Giữ line-height ở 0.90 cho tất cả F37stout type — độ chặt cực đoan là đặc trưng
- Dùng mono (system mono substitute) ở 10/12/16px cho tất cả UI, body, và caption text với tracking -0.01em
- Đặt section gaps ở 67–70px và element gaps ở 24px — nhịp điệu đến từ base unit 6px được scale lên
- Rải các tilted photo cards ở góc xoay khác nhau (-12° đến +12°) trên nền Carbon Ink (#161b13)
- Giữ radius ở 0px cho tất cả component — góc sắc là bắt buộc, ngôn ngữ thiết kế là topo-map crisp

### Không nên làm
- Đừng thêm border-radius vào buttons, cards, hoặc images — góc sắc là không thể thương lượng
- Đừng dùng điểm nhấn màu thứ hai — Highlighter Mint là khoảnh khắc màu duy nhất mang thương hiệu
- Đừng đặt F37stout ở cỡ trung gian (16–36px) — nó chỉ hoạt động ở display scale hoặc subheading scale (40–48px)
- Đừng dùng Times cho body copy — nó chỉ là link accent, phần còn lại của hệ thống là mono
- Đừng áp shadow hoặc elevation — bề mặt được định nghĩa hoàn toàn bằng màu sắc và lớp ảnh
- Đừng căn giữa body text — mono UI copy nên căn trái hoặc căn phải, không bao giờ căn giữa
- Đừng giới thiệu neutral thứ ba — thang năm tông (#dde2e4 → #84907f → #2d3329 → #161b13 → #000000) là dải tông hoàn chỉnh

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Topo Gray | `#dde2e4` | Canvas trang sáng và card base |
| 1 | Highlighter Mint | `#e2ffcc` | Bề mặt điểm nhấn cho text blocks được highlight và nhấn mạnh tông |
| 2 | Sage Stone | `#84907f` | Bề mặt trung tông cho các section nhẹ nhàng |
| 3 | Forest Charcoal | `#2d3329` | Bề mặt UI sâu trên theme sáng |
| 4 | Carbon Ink | `#161b13` | Nền section tối — dải trang thay thế |

## Elevation

Không shadow, không drop shadow, không glow effects. Chiều sâu được tạo hoàn toàn thông qua lớp chồng lấn của các yếu tố ảnh trên nền màu đặc, và qua thang bề mặt từ Topo Gray đến Carbon Ink. Sự phẳng là có chủ đích — nó đọc như giấy in, không phải UI kỹ thuật số.

## Imagery

Nhiếp ảnh là nội dung thị giác chính — ảnh phong cảnh rộng lớn của hẻm núi, núi non, và môi trường câu cá ruồi, được xử lý như hero background full-bleed không qua color grading hay filter. Dải tông từ ấm golden-hour đến mát hoàng hôn. Hình ảnh thứ cấp xuất hiện dưới dạng ảnh chụp kiểu Polaroid rải rác, nghiêng tay (xoay -12° đến +12°) trên section tối, tạo thẩm mỹ scrapbook/zine. Không illustrations, không product renders, không abstract graphics. Hình ảnh phi nhiếp ảnh duy nhất là icon badges line-drawn đơn giản (mũ, nhà, marker vị trí) với stroke 1.5px. Nhiếp ảnh chiếm khoảng 60% tổng diện tích trang — nặng về ảnh, với text đánh dấu hơn là chiếm ưu thế.

## Layout

Layout full-bleed edge-to-edge không có max-width container — canvas kéo dài đến cạnh viewport trên tất cả section. Hero pattern: ảnh phong cảnh full-viewport với display headline khổng lồ chồng lên phần dưới của ảnh. Nhịp section xen kẽ giữa dải ảnh/sáng và dải tối đặc (#161b13), mỗi dải kéo dài toàn bộ chiều rộng. Section tối có cụm ảnh rải rác, bất đối xứng thay vì grid. Navigation là top bar tối giản — wordmark trái, một outlined button phải — không có sticky behavior rõ ràng. Sắp xếp nội dung cố tình phi grid: ảnh xoay và chồng lấn, text blocks nằm ở margin bất thường (67px, 70px, 190px quan sát được), tạo bố cục journal/zine thay vì SaaS dashboard. Không card grids, không pricing tables, không feature matrices. Khoảng thở rộng giữa các section (67–70px) nhưng spacing nội bộ chặt (12–24px).

## Agent Prompt Guide

## Quick Color Reference
- text: #2d3329 (trên nền sáng) / #e2ffcc (trên nền tối)
- background: #dde2e4 (sáng) / #161b13 (tối)
- border: #2d3329 (trên nền sáng) / #e2ffcc (trên nền tối)
- accent: #e2ffcc (Highlighter Mint)
- primary action: không có màu CTA riêng biệt

## 3 Example Component Prompts

### 1. Outlined Ghost Nav Button
Tạo một nav button: border 1px solid #e2ffcc, fill trong suốt, radius 0px, padding 12px 16px. Text: 'SHOW TRAILS' mono 10px, weight 400, letter-spacing -0.01em, color #e2ffcc, all-caps. Không background fill — border CHÍNH LÀ affordance.

### 2. Display Headline Over Photography
Tạo một section với ảnh phong cảnh full-bleed làm nền. Chồng lên nó một headline: F37stout (dùng Bebas Neue làm substitute) ở 366px, weight 400, line-height 0.90, color #e2ffcc, letter-spacing normal. Text nên lấp đầy chiều rộng viewport trên một dòng, neo ở một phần ba dưới của ảnh.

### 3. Tilted Photo Cluster on Dark Band
Tạo một section tối: background #161b13, padding 67px trên/dưới. Bên trong, đặt ba card ảnh (rộng 280–360px) ở góc xoay -8°, +12°, và +4°, với chồng lấn nhẹ. Ảnh: outdoor landscape/fly-fishing photography. Không border, không radius, không shadow. Thêm một circular icon badge nhỏ (stroke 1.5px #e2ffcc, đường kính 48px) nổi ở góc phần tư phía trên bên trái.

## Photo Composition Rules

Cụm ảnh nghiêng tuân theo các quy tắc sau:
- Phạm vi xoay: -12° đến +12°, không bao giờ vượt quá
- Cards chồng lấn khoảng 15–25% chiều rộng của chúng
- Không có hai ảnh liền kề nào cùng góc
- Tất cả ảnh chia sẻ cùng xử lý màu ấm — không có break đen trắng
- Cụm luôn bất đối xứng — không bao giờ là stack cân bằng, căn giữa
- Nền tối (#161b13) hiện rõ trong khoảng trống giữa các ảnh, định nghĩa negative space

## Similar Brands

- **Topo Designs** — Cùng ảnh full-bleed outdoor brand, display type condensed, và chrome tối giản — cả hai xem website như lookbook hơn là cửa hàng
- **Patagonia** — Hero imagery landscape-first với kể chuyện môi trường, nhưng San Rita thiên về zine-scrapbook hơn và ít editorial hơn
- **Rumpl** — Cùng UI type mono thực dụng, section full-bleed ảnh, và ngôn ngữ thị giác topo/field-guide
- **Poler** — Thẩm mỹ photo collage nghiêng tay, section tối-và-ảnh xen kẽ, thái độ outdoor brand casual hơn e-commerce bóng bẩy
- **Snow Peak** — Nav chrome tối giản, ảnh phong cảnh chiếm ưu thế, và typography ưu tiên display moments hơn mật độ body text

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-highlighter-mint: #e2ffcc;
  --color-sage-stone: #84907f;
  --color-carbon-ink: #161b13;
  --color-forest-charcoal: #2d3329;
  --color-topo-gray: #dde2e4;
  --color-pure-black: #000000;

  /* Typography — Font Families */
  --font-f37stout: 'F37stout', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: -0.01px;
  --text-body: 16px;
  --leading-body: 1.2;
  --tracking-body: -0.01px;
  --text-subheading: 40px;
  --leading-subheading: 0.9;
  --text-heading: 48px;
  --leading-heading: 0.9;
  --text-display: 366px;
  --leading-display: 0.9;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-5: 5px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-67: 67px;
  --spacing-70: 70px;
  --spacing-190: 190px;

  /* Layout */
  --section-gap: 67px;
  --card-padding: 16px;
  --element-gap: 24px;

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

  /* Surfaces */
  --surface-topo-gray: #dde2e4;
  --surface-highlighter-mint: #e2ffcc;
  --surface-sage-stone: #84907f;
  --surface-forest-charcoal: #2d3329;
  --surface-carbon-ink: #161b13;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-highlighter-mint: #e2ffcc;
  --color-sage-stone: #84907f;
  --color-carbon-ink: #161b13;
  --color-forest-charcoal: #2d3329;
  --color-topo-gray: #dde2e4;
  --color-pure-black: #000000;

  /* Typography */
  --font-f37stout: 'F37stout', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: -0.01px;
  --text-body: 16px;
  --leading-body: 1.2;
  --tracking-body: -0.01px;
  --text-subheading: 40px;
  --leading-subheading: 0.9;
  --text-heading: 48px;
  --leading-heading: 0.9;
  --text-display: 366px;
  --leading-display: 0.9;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-67: 67px;
  --spacing-70: 70px;
  --spacing-190: 190px;
}
```