# Monte

> Monte — Style Reference

## Prompt Content

```
# Monte — Style Reference
> buổi sáng ven biển nhuốm màu gỉ sắt

**Theme:** light

Monte Café là ngôn ngữ của một quán cà phê ven biển ngập nắng: một mảng màu terracotta duy nhất tràn ngập hero như tấm thép corten rỉ sét dưới buổi sáng Newcastle, rồi tan dần vào nội thất kem ấm và ảnh chụp quán cà phê. Thiết kế chỉ xoay quanh hai bề mặt — terracotta và kem — và một font serif duy nhất (Riposte) đảm nhận mọi vai trò, từ eyebrow labels đến display headlines. Apercu Mono xuất hiện dưới dạng chữ in chức năng nhỏ cho metadata, giờ giấc và nhiệt độ. Tổng thể mang phong cách vẽ tay và gần gũi: line-art illustrations, headline text uốn cong theo đường tròn, pill-shaped ghost buttons, và khoảng thở rộng rãi. Không có shadow, không gradient, không chrome trang trí — chỉ có mực, hơi ấm, và khoảng trắng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Corten | `#b84b30` | `--color-corten` | Màu thương hiệu chính — hero field, headline text, icon strokes, pill button borders, link accents. Màu cam gỉ sắt đặc trưng khiến mọi trang đều mang chất Monte |
| Bordeaux | `#5f1d1a` | `--color-bordeaux` | Màu nhấn đậm cho SVG illustration fills và thỉnh thoảng link hover. Dùng tiết chế như một tông màu sâu hơn của Corten |
| Sandstone | `#f8f4e9` | `--color-sandstone` | Canvas chính — body section backgrounds, card surfaces, text trên terracotta fields. Màu kem ấm dẫn dắt mọi trang sau hero |
| Driftwood | `#e5e7eb` | `--color-driftwood` | Hairline borders, dividers, và card outlines. Màu trung tính nhẹ nhàng giúp phân cách mà không gây ồn |
| Charcoal | `#000000` | `--color-charcoal` | Line-art illustration strokes, icon fills, inline pictograms. Màu đen thuần cho các yếu tố vẽ tay trên nền kem |
| Bone | `#ffffff` | `--color-bone` | Màu trắng thuần cho text trên terracotta fields, button text, image overlays. Cũng xuất hiện dưới dạng border nhẹ |
| Smoke | `#666666` | `--color-smoke` | Muted helper text, secondary metadata, body copy nhẹ nhàng. Mang sắc xám mềm trên nền Sandstone |
| Ash | `#999999` | `--color-ash` | Neutral ưu tiên thấp nhất — image metadata, placeholder tones. Đứng sau Smoke trong hệ thống phân cấp |
| Espresso | `#3e3d3a` | `--color-espresso` | Bề mặt tối cho badge backgrounds, thỉnh thoảng khối tương phản sâu. Màu nâu ấm gần như đen |

## Tokens — Typography

### Riposte — Primary serif face — tất cả headlines, display text, navigation, buttons, body copy. Riposte mang toàn bộ giọng thương hiệu với nét serif hình học ấm áp. Weight 400 cho body và hầu hết text, weight 600 dành riêng cho display headlines. Tracking rộng 0.10em trên uppercase labels (HELLO & GOOD MORNING) là signature move — serif thở được trong all-caps, khác với hầu hết hệ thống sans-serif hiện đại thường thắt chặt. · `--font-riposte`
- **Font thay thế:** DM Serif Display hoặc Playfair Display
- **Weights:** 400, 600
- **Kích thước:** 10, 11, 12, 13, 14, 15, 16, 17, 20, 23, 24, 36
- **Line height:** 0.90, 1.00, 1.10, 1.20, 1.25, 1.35, 1.40
- **Letter spacing:** 0.025em ở 12px, 0.05em ở 16px, 0.10em ở 24px+
- **Vai trò:** Primary serif face — tất cả headlines, display text, navigation, buttons, body copy. Riposte mang toàn bộ giọng thương hiệu với nét serif hình học ấm áp. Weight 400 cho body và hầu hết text, weight 600 dành riêng cho display headlines. Tracking rộng 0.10em trên uppercase labels (HELLO & GOOD MORNING) là signature move — serif thở được trong all-caps, khác với hầu hết hệ thống sans-serif hiện đại thường thắt chặt.

### Apercu Mono — Monospace secondary face — timestamps (TOMORROW FROM 6:30AM), temperature readouts (NEWCASTLE 22°C), input fields, và quiet data labels. Negative tracking nhẹ giúp thắt chặt mono cho hiển thị dữ liệu chức năng. Tạo điểm đối trọng kiểu chữ với serif — serif nói, mono đo. · `--font-apercu-mono`
- **Font thay thế:** JetBrains Mono hoặc IBM Plex Mono
- **Weights:** 400
- **Kích thước:** 12, 15, 16
- **Line height:** 1.33, 1.35
- **Letter spacing:** -0.025em
- **Vai trò:** Monospace secondary face — timestamps (TOMORROW FROM 6:30AM), temperature readouts (NEWCASTLE 22°C), input fields, và quiet data labels. Negative tracking nhẹ giúp thắt chặt mono cho hiển thị dữ liệu chức năng. Tạo điểm đối trọng kiểu chữ với serif — serif nói, mono đo.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.2 | 0.25px | `--text-caption` |
| body | 16px | 1.35 | 0.8px | `--text-body` |
| subheading | 20px | 1.25 | — | `--text-subheading` |
| heading-sm | 24px | 1.2 | 2.4px | `--text-heading-sm` |
| heading | 36px | 1.1 | 3.6px | `--text-heading` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 88 | 88px | `--spacing-88` |
| 128 | 128px | `--spacing-128` |
| 144 | 144px | `--spacing-144` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 14px |
| inputs | 9999px |
| buttons | 9999px |

### Layout

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

## Components

### Pill Outlined Button
**Vai trò:** Primary action — 'Book a Table', navigation CTAs

Nền trong suốt, border 1.5px solid #b84b30, border-radius 9999px, Riposte weight 400 ở 15px với 0.75px tracking, text #b84b30, padding 16px dọc / 32px ngang. Bản thân border chính là hành động — không fill, không shadow. Text và border cùng một sắc Corten.

### Ghost Nav Link
**Vai trò:** Header navigation — MENU, BOOK A TABLE

Không nền, không border, Riposte weight 400 ở 12px, text #f8f4e9 (Bone) trên nền terracotta, tracking 0.6px uppercase. Nằm sát mép trái và phải của wordmark căn giữa. Tối giản, gần như vô hình cho đến khi hover.

### Centered Wordmark
**Vai trò:** Brand mark trong navigation

'monte' bằng Riposte, lowercase, weight 400, ~24px, #f8f4e9 trên terracotta / #b84b30 trên kem. Xử lý logo duy nhất — không icon, không tagline. Serif và weight của nó mang toàn bộ bản sắc thương hiệu.

### Curved Headline Text
**Vai trò:** Hero text uốn quanh illustration

Display text ở ~36px Riposte weight 600, #f8f4e9, chạy theo đường tròn (SVG textPath). Tagline 'WHERE COFFEE MEETS THE COAST' bao quanh hình line-art. Đường cong là signature — type như illustration, không chỉ là copy.

### Line-Art Illustration
**Vai trò:** Hero graphic trang trí, inline content visuals

Phong cách nét vẽ tay liên tục, stroke weight ~3px, #5f1d1a (Bordeaux) trên terracotta / #000000 trên kem. Hình ảnh là người uống từ cốc, tay cầm cốc. Không fill, không shading — chỉ có contour thuần túy. Vừa là trang trí vừa là brand mark.

### Eyebrow Label
**Vai trò:** Section openers — 'HELLO & GOOD MORNING'

Riposte weight 400, 24px, #b84b30, uppercase, tracking 2.4px. Căn giữa phía trên section headlines. Tracking rộng trên serif là cử chỉ typographic đặc trưng nhất trong hệ thống — nó khiến label trông như một con dấu hoặc tấm thiệp in.

### Display Headline
**Vai trò:** Section titles — 'MONTE IS FOR LAIDBACK BREKKIES...'

Riposte weight 600, 36px, #b84b30, căn giữa, line-height 1.10, tracking 3.6px uppercase. Nằm dưới eyebrow label với khoảng cách rộng. Riposte weight 600 ở kích thước này là âm thanh lớn nhất hệ thống từng tạo ra.

### Full-Bleed Hero Section
**Vai trò:** Opening viewport

Rộng 100%, cao 100vh, nền #b84b30, illustration căn giữa với curved text. Không card, không frame — toàn bộ màn hình LÀ hero. Padding 0. Navigation nổi phía trên với margin 24px.

### Content Image Block
**Vai trò:** Interior photography, ảnh món ăn, ảnh phong cách sống

Full-width trong max-width container, tỷ lệ khung hình tự nhiên, không border-radius trên ảnh chính. Kết hợp với illustration cards border-radius 14px bên cạnh hoặc bên dưới. Ảnh tràn cạnh (edge-to-edge) trong gallery carousel.

### Gallery Carousel
**Vai trò:** Interior photography slider

Một ảnh lớn với nút mũi tên prev/next hình tròn (border-radius 9999px, border 1.5px #b84b30, mũi tên căn giữa). Ảnh nằm trong max-width, không border-radius trên chính ảnh.

### Card with Illustration
**Vai trò:** Content blocks ghép ảnh với line-art

Bố cục hai cột: ảnh bên trái (không radius, cạnh tự nhiên), line-art illustration bên phải rộng ~300px. Cả hai căn giữa theo chiều dọc. Border-radius 14px chỉ xuất hiện trên các card nhỏ có viền, không phải trên ảnh full-bleed.

### Data Badge / Meta Pill
**Vai trò:** Status indicators, small metadata

Hình pill (border-radius 9999px), Riposte 12px weight 400, uppercase, tracking 0.6px. Background thay đổi: #3e3d3a cho badge tối, trong suốt cho inline text. Dùng tiết chế cho các nhãn chức năng.

### Circular Nav Button
**Vai trò:** Carousel controls — nút trái/phải

Hình tròn đường kính 40px, border 1.5px #b84b30, fill trong suốt, glyph mũi tên Riposte weight 400 căn giữa bên trong màu #b84b30. Cùng ngôn ngữ với pill button nhưng nén thành hình tròn.

### Form Input
**Vai trò:** Text inputs, booking fields

Apercu Mono 16px, weight 400, tracking -0.4px, text #000000 trên nền #f8f4e9. Border-radius 9999px (hình pill), border 1px #e5e7eb. Placeholder màu #999999. Không đổi màu focus ring — kiềm chế hơn phản hồi thị giác.

## Do's and Don'ts

### Do
- Dùng #b84b30 cho mọi primary actions dưới dạng outlined pill — border-radius 9999px, border 1.5px, text #b84b30 khớp với border. Không bao giờ fill pill.
- Đặt display headlines bằng Riposte weight 600 ở 36px với tracking 3.6px uppercase — serif caps tracking rộng là cử chỉ typographic signature của hệ thống.
- Ghép mỗi section với eyebrow label uppercase căn giữa bằng Riposte 24px, #b84b30, tracking 2.4px, cách headline 20-24px phía trên.
- Chỉ dùng Apercu Mono cho dữ liệu: giờ, nhiệt độ, tọa độ, input fields. Không bao giờ dùng cho headlines hoặc copy dài.
- Để hero tràn full-viewport màu #b84b30 với wordmark căn giữa và nav sát mép. Không container, không card — màn hình LÀ hero.
- Dùng border-radius 14px cho content cards và 9999px cho buttons, inputs, và badges. Hệ thống hai-radius này là toàn bộ ngôn ngữ hình dạng.
- Dùng line-art illustrations với stroke liên tục 3px màu #5f1d1a trên terracotta fields và #000000 trên kem. Không fill, không shading.

### Don't
- Không dùng shadow hoặc hiệu ứng elevation. Hệ thống phẳng — chiều sâu đến từ sự chuyển tiếp bề mặt terracotta sang kem, không phải từ drop shadows.
- Không đưa vào màu bề mặt thứ ba. Bảng màu chính xác là hai: #b84b30 và #f8f4e9. Mọi thứ khác là màu trung tính cho text và border.
- Không fill buttons với màu đặc. Mọi actions đều là ghost/outlined — border mang trọng lượng.
- Không dùng Riposte cho body paragraphs dài hơn 2 dòng. Tracking rộng đẹp trong caps sẽ trở nên mệt mỏi trong running text — chuyển sang system serif cho văn bản dài.
- Không thêm gradient, pattern, hoặc background textures. Bề mặt luôn là flat color fields.
- Không dùng #5f1d1a (Bordeaux) cho text hoặc UI elements — nó chỉ dành riêng cho SVG illustration fills.
- Không bo tròn góc ảnh. Photography nằm với cạnh tự nhiên trong max-width container. Border-radius 14px áp dụng cho cards, không phải ảnh.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Corten Field | `#b84b30` | Full-bleed hero background, section accents, bề mặt thương hiệu chủ đạo |
| 2 | Sandstone | `#f8f4e9` | Canvas nội dung chính cho mọi section sau hero |
| 3 | Bone | `#ffffff` | Image overlays, button text trên terracotta, border accents nhẹ |

## Elevation

Hệ thống này không dùng shadow hoặc drop-shadow elevation. Chiều sâu đạt được hoàn toàn qua tương phản màu bề mặt — bước nhảy từ #b84b30 sang #f8f4e9 là elevation duy nhất thiết kế cần. Cards và ảnh nằm sát trên canvas, chỉ được phân biệt bởi nội dung và border-radius 14px trên các element có viền. Sự phẳng này là anti-pattern có chủ đích so với quy ước card-with-shadow của SaaS hiện đại; hệ thống tin tưởng typography và màu sắc tạo ra hệ thống phân cấp mà không cần nâng đỡ nhân tạo.

## Imagery

Photography theo phong cách documentary nội thất quán cà phê: ánh sáng tự nhiên ấm áp, gạch terracotta, cây xanh, bề mặt gỗ, barista đang chuyển động (motion blur có chủ đích trên một nhân vật). Ảnh không filter, hơi giảm bão hòa, và luôn ở hướng ngang landscape. Không có close-up món ăn chiếm ưu thế — không gian LÀ chủ thể. Illustrations là hình vẽ tay nét liên tục (người uống từ cốc) với stroke weight ~3px, Bordeaux trên terracotta fields và đen trên kem. Không có icon theo nghĩa truyền thống — illustrations và type làm mọi công việc biểu tượng. Imagery chiếm khoảng 40% bề mặt trang, xen kẽ với các khối text rộng rãi.

## Layout

Full-bleed hero (100vw × 100vh) màu #b84b30, sau đó nội dung giới hạn trong max-width 1200px căn giữa trên nền #f8f4e9. Navigation là thanh ba element tối giản (MENU / wordmark / BOOK A TABLE) nổi phía trên hero không có nền. Sections xen kẽ giữa full-width image carousels và centered text blocks với khoảng cách dọc 80px. Nội dung body theo mẫu: full-bleed image → centered text intro → hai cột image+illustration pairs → thêm centered text. Grid mang tính ẩn hơn là hiện — hầu hết nội dung là centered single-column, với split hai cột chỉ dành cho image+illustration pairings. Không sidebar, không multi-column text flow. Nhịp điệu là: một ảnh, một ý, khoảng trống rộng rãi.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #b84b30 (primary), #000000 (illustration), #666666 (muted), #f8f4e9 (trên terracotta)
- background: #f8f4e9 (canvas), #b84b30 (hero/brand field)
- border: #b84b30 (action), #e5e7eb (hairline), #ffffff (trên terracotta)
- accent: #5f1d1a (illustration fills only)
- primary action: #b84b30 (outlined action border)

**Ví dụ Component Prompts**

1. **Hero Section**: Background full-viewport (#b84b30). Line-art illustration căn giữa của người uống cà phê, stroke 3px màu #5f1d1a. Display text uốn cong theo đường tròn: 'WHERE COFFEE MEETS THE COAST' bằng Riposte weight 600, 36px, #f8f4e9. Navigation bar: 'MENU' sát trái, wordmark 'monte' căn giữa, 'BOOK A TABLE' sát phải — tất cả Riposte 12px uppercase, #f8f4e9, tracking 0.6px.

2. **Outlined Pill Button**: Nền trong suốt. Border 1.5px solid #b84b30, border-radius 9999px. Text: Riposte 400, 15px, #b84b30, tracking 0.75px, uppercase. Padding: 16px dọc, 32px ngang. Không shadow, không fill khi hover.

3. **Section Opener**: Bố cục căn giữa trên nền #f8f4e9. Eyebrow label: 'HELLO & GOOD MORNING' bằng Riposte 400, 24px, #b84b30, tracking 2.4px, uppercase. Khoảng cách 24px bên dưới. Display headline: Riposte 600, 36px, #b84b30, tracking 3.6px, căn giữa, line-height 1.10.

4. **Content Card Pair**: Hai cột trong max-width 1200px. Bên trái: ảnh full chiều cao, cạnh tự nhiên, không border-radius. Bên phải: line-art illustration rộng ~300px, stroke 3px màu #000000, căn giữa theo chiều dọc. Khoảng cách cột 20px.

5. **Data Label**: Apercu Mono 16px, weight 400, tracking -0.4px. Text: 'NEWCASTLE 22°C' màu #f8f4e9 trên terracotta. Không nền, nằm inline với các meta labels khác.

## Similar Brands

- **St. Frank Coffee** — Cùng ngôn ngữ thương hiệu rỉ sét/terracotta chủ đạo với serif headlines và documentary café photography
- **Devoción** — Hero full-bleed một màu đậm với serif wordmark và khoảng trắng kem rộng rãi bên dưới
- **Ona Coffee** — Bảng màu đất ấm, serif display type, và hand-drawn illustrative accents
- **Pact Coffee** — Outlined pill buttons, một màu thương hiệu chủ đạo, serif display headlines với tracking rộng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-corten: #b84b30;
  --color-bordeaux: #5f1d1a;
  --color-sandstone: #f8f4e9;
  --color-driftwood: #e5e7eb;
  --color-charcoal: #000000;
  --color-bone: #ffffff;
  --color-smoke: #666666;
  --color-ash: #999999;
  --color-espresso: #3e3d3a;

  /* Typography — Font Families */
  --font-riposte: 'Riposte', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu-mono: 'Apercu Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 0.25px;
  --text-body: 16px;
  --leading-body: 1.35;
  --tracking-body: 0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 2.4px;
  --text-heading: 36px;
  --leading-heading: 1.1;
  --tracking-heading: 3.6px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-88: 88px;
  --spacing-128: 128px;
  --spacing-144: 144px;

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

  /* Border Radius */
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 14px;
  --radius-inputs: 9999px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-corten-field: #b84b30;
  --surface-sandstone: #f8f4e9;
  --surface-bone: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-corten: #b84b30;
  --color-bordeaux: #5f1d1a;
  --color-sandstone: #f8f4e9;
  --color-driftwood: #e5e7eb;
  --color-charcoal: #000000;
  --color-bone: #ffffff;
  --color-smoke: #666666;
  --color-ash: #999999;
  --color-espresso: #3e3d3a;

  /* Typography */
  --font-riposte: 'Riposte', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu-mono: 'Apercu Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 0.25px;
  --text-body: 16px;
  --leading-body: 1.35;
  --tracking-body: 0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 2.4px;
  --text-heading: 36px;
  --leading-heading: 1.1;
  --tracking-heading: 3.6px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-88: 88px;
  --spacing-128: 128px;
  --spacing-144: 144px;

  /* Border Radius */
  --radius-xl: 14px;
  --radius-full: 9999px;
}
```