# Graf Lantz

> Graf Lantz — Style Reference

## Prompt Content

```
# Graf Lantz — Style Reference
> Scandinavian atelier trên nền vải linen thô — một nét violet cấp bách giữa căn phòng trắng xương.

**Theme:** light

Graf Lantz mang phong cách Scandinavian atelier trên vải linen thô: nền trắng xương, một màu violet thương hiệu dùng gần như dấu chấm câu, và ảnh sản phẩm được crop sát đến mức kết cấu vải nỉ trở thành bầu không khí. Trang web thiên về typography và whitespace, với 99% bề mặt achromatic và một bề mặt accent duy nhất dành cho các hành động. Type sử dụng grotesque chặt, hơi condensed (NeueHaasUnica) cho các chức năng tiện ích, trong khi một display face mềm mại hơn, gần như humanist (accessibly) dành cho wordmark và các CTA chính — sự tương phản nằm giữa utility text sắc sảo và display moments ấm áp. Các component mỏng như giấy: không shadow, không elevation stack, border dạng hairline trong khoảng #474747–#212121, và pill-shaped controls với ~50px radius. Mật độ thoải mái đến thoáng đãng; mỗi khung sản phẩm được thiết kế để cảm giác như một vật thể trên kệ trưng bày.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, text inverted trên nền tối. Nền trung tính để mọi thứ khác được gắn lên |
| Soft Ash | `#eeeeee` | `--color-soft-ash` | Fill action trung tính nhạt cho button trên nền tối. |
| Mist Sage | `#d5e4e8` | `--color-mist-sage` | Thanh thông báo và các vùng thông tin nhẹ nhàng — một teal desaturated mang tính utility, không bao giờ là trang trí |
| Graphite | `#474747` | `--color-graphite` | Body text chính, border mặc định, hairline tone chủ đạo. Màu trung tính cấu trúc của hệ thống |
| Charcoal | `#212121` | `--color-charcoal` | Heading, divider cho list item, border nhấn mạnh — bước tối màu khi hierarchy cần độ nặng |
| Onyx | `#000000` | `--color-onyx` | Body text khi cần độ tương phản tối đa, fill SVG icon, border nặng thỉnh thoảng |
| Slate | `#2b2b2b` | `--color-slate` | Navigation border accent và nav text — nằm giữa Graphite và Onyx, dành riêng cho chrome |
| Fog | `#7b7b7b` | `--color-fog` | Border tương phản trung bình, control outlines và structural separators. Không dùng làm màu CTA chính |
| Indigo Pulse | `#574cd5` | `--color-indigo-pulse` | Nền cho filled CTA button, khoảnh khắc chromatic duy nhất trong hệ thống. Dùng tiết kiệm để hành động trông nổi bật trên trang gần như đơn sắc |

## Tokens — Typography

### NeueHaasUnicaW1G — Grotesque chủ lực cho navigation, body copy, list item, footer, button và link. Weight 900 dành riêng cho logo wordmark và các display moment nặng nhất; 500 mang sub-emphasis; 400 là giọng body mặc định. · `--font-neuehaasunicaw1g`
- **Thay thế:** Inter, Neue Haas Grotesk, Söhne
- **Weights:** 400, 500, 900
- **Kích thước:** 12, 14, 16
- **Line height:** 1.0, 1.2, 1.4, 1.5
- **Letter spacing:** normal ở mọi kích thước
- **Vai trò:** Grotesque chủ lực cho navigation, body copy, list item, footer, button và link. Weight 900 dành riêng cho logo wordmark và các display moment nặng nhất; 500 mang sub-emphasis; 400 là giọng body mặc định.

### Instrument Sans — Sans thứ cấp cho nav, search input và section heading. Ấm hơn và humanist hơn một chút so với NeueHaas — dùng khi trang cần một register thông tin mềm mại hơn mà không rời khỏi bảng màu trung tính. · `--font-instrument-sans`
- **Thay thế:** Inter, Geist, Söhne
- **Weights:** 400, 500
- **Kích thước:** 14, 16, 32
- **Line height:** 1.2
- **Vai trò:** Sans thứ cấp cho nav, search input và section heading. Ấm hơn và humanist hơn một chút so với NeueHaas — dùng khi trang cần một register thông tin mềm mại hơn mà không rời khỏi bảng màu trung tính.

### accessibly — Giọng display/thương hiệu. Dùng cho wordmark 'graf lantz', pill CTA 'SHOP COASTERS' và hero heading. Line-height 1.0 và hình học hơi humanist khiến nó nằm phía trên hệ thống thay vì bên trong. · `--font-accessibly`
- **Thay thế:** Söhne Schmal, Neue Haas Grotesk Display, ABC Diatype Mono (display cuts)
- **Weights:** 400
- **Kích thước:** 16, 35
- **Line height:** 1.0
- **Vai trò:** Giọng display/thương hiệu. Dùng cho wordmark 'graf lantz', pill CTA 'SHOP COASTERS' và hero heading. Line-height 1.0 và hình học hơi humanist khiến nó nằm phía trên hệ thống thay vì bên trong.

### Source Sans Pro — Fallback phụ — xuất hiện một lần, xem như legacy/utility và không đưa vào màn hình mới. · `--font-source-sans-pro`
- **Thay thế:** Source Sans 3
- **Weights:** 400
- **Kích thước:** 16
- **Line height:** 1.2
- **Vai trò:** Fallback phụ — xuất hiện một lần, xem như legacy/utility và không đưa vào màn hình mới.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | — | `--text-caption` |
| body-sm | 14px | 1.5 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| heading | 32px | 1.2 | — | `--text-heading` |
| display | 35px | 1 | — | `--text-display` |

## 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` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 64 | 64px | `--spacing-64` |
| 144 | 144px | `--spacing-144` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 0px |
| badges | 50px (pill) |
| images | 0px |
| inputs | 0px |
| buttons | 50px (pill) |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 50-80px
- **Card padding:** 24-28px
- **Element gap:** 15-24px

## Components

### Announcement Bar
**Vai trò:** Thanh tiện ích toàn trang

Dải full-bleed, nền Mist Sage (#d5e4e8), thông điệp một dòng căn giữa. 14px NeueHaasUnicaW1G weight 500, text Charcoal (#212121). Không border, không shadow. Chỉ dùng cho thông tin vận chuyển/khuyến mãi — không bao giờ trang trí.

### Primary Navigation Header
**Vai trò:** Chrome đầu trang

Nền trắng, border dưới 1px Slate (#2b2b2b). Logo (accessibly 35px, weight 400) căn trái; nav link (NeueHaasUnicaW1G 14px, weight 500, Charcoal #212121) cụm giữa; search input + account + cart icons căn phải. 28px vertical padding trên hàng link.

### Nav Link
**Vai trò:** Mục tương tác trong top-nav

NeueHaasUnicaW1G 14px weight 500, màu Charcoal (#212121), letter-spacing normal. Không underline mặc định; hover hiện underline 1px Charcoal (#212121) ở baseline. Padding 28px vertical, 10px horizontal để có vùng click rộng rãi.

### Search Input
**Vai trò:** Trường tìm kiếm trong header

Fill Soft Ash (#eeeeee), không border khi nghỉ, placeholder text Instrument Sans 16px weight 400 màu Fog (#7b7b7b). Search icon căn phải. Bo góc 0px — đây là input UI phẳng, không phải pill.

### Pill Display CTA
**Vai trò:** Nút hành động hero / nổi bật

Fill trắng, border 1px Charcoal (#212121), border-radius 50px (full pill). Text: accessibly 16px weight 400, tracked normal, màu Charcoal. 16px vertical / 32px horizontal padding. Nằm trên ảnh sản phẩm, không shadow — chính bức ảnh LÀ elevation.

### Filled Brand CTA
**Vai trò:** Hành động thương mại chính

Fill Indigo Pulse (#574cd5), text trắng. NeueHaasUnicaW1G 16px weight 500, tracked normal. border-radius 50px (pill). 15px vertical / 24px horizontal padding. Bề mặt chromatic duy nhất trong hệ thống — xem như một accent duy nhất, không phải bảng màu.

### Text Link
**Vai trò:** Link editorial nội dòng

Text Fog (#7b7b7b) khi nghỉ, underline 1px Fog; hover chuyển thành text Charcoal (#212121) và underline Charcoal. 4–5px vertical padding để underline có khoảng cách với dòng chữ.

### Body Paragraph
**Vai trò:** Khối copy dài

NeueHaasUnicaW1G 16px weight 400, line-height 1.5, màu Graphite (#474747). 7–8px margin giữa các đoạn. Không thụt lề dòng đầu, không drop cap — nhịp đọc hoàn toàn dựa vào vertical spacing.

### Empty / Error State
**Vai trò:** Màn hình 404 và không có kết quả

Cụm dọc căn giữa trên nền trắng. 'Oops!' eyebrow bằng accessibly 16px, headline Instrument Sans 32px weight 500, helper line NeueHaasUnicaW1G 16px Graphite. Theo sau là một pill CTA duy nhất trên ảnh sản phẩm full-bleed. Top margin rộng ~80px để sự vắng mặt có chủ đích.

### Product Image Block
**Vai trò:** Visual hero / khung editorial

Ảnh vuông hoặc gần vuông, 0px radius, full-bleed trong cột của nó. Không border, không caption overlay, không badge. Được xử lý như một vật thể trưng bày — khung hình, không phải chrome, định nghĩa cạnh.

### Icon Button (Account / Cart)
**Vai trò:** Control nhỏ gọn trong header

Stroke icon 16–20px màu Onyx (#000000), không nền, không border. 10px horizontal padding. Touch target được cung cấp bởi padding, không phải vùng hiển thị.

### List Divider
**Vai trò:** Dòng phân cách trong list, menu, footer

Horizontal rule 1px Charcoal (#212121) ở độ rộng đầy đủ của hàng. Không padding tricks, không double rules — divider là sự kiện thị giác, không phải các hàng.

### Footer Link Group
**Vai trò:** Danh sách cột trong footer

Các link xếp chồng NeueHaasUnicaW1G 14px weight 400 màu Graphite, cách nhau bằng divider 1px Charcoal. 15–24px row padding. Không có column header in đậm — nhóm tạo hierarchy thông qua spacing, không phải weight.

## Do's and Don'ts

### Nên làm
- Chỉ dùng #574cd5 làm nền button filled và không bao giờ dùng làm bề mặt card, border hoặc accent stroke.
- Dùng border-radius 50px (pill) cho mọi button và tag; giữ input và image ở 0px radius.
- Đặt body text ở NeueHaasUnicaW1G 16px / line-height 1.5, màu #474747, và để white space làm công việc hierarchy.
- Để ảnh sản phẩm lấp đầy khung hình ở 0px radius, không overlay, badge hoặc caption chrome.
- Chỉ dùng Mist Sage #d5e4e8 trên thanh thông báo — không đưa thêm bề mặt trang trí thứ hai.
- Dùng Instrument Sans cho nav và informational heading; dành accessibly cho wordmark và một display moment duy nhất trên mỗi màn hình.
- Đặt section gap trong khoảng 50–80px và card padding ở 24–28px; chống lại sự thúc ép thu hẹp.

### Không nên làm
- Không đưa thêm accent hue — hệ thống chỉ có một màu violet trên trang đơn sắc.
- Không thêm drop shadow cho card, button hoặc image; thiết kế cố tình không có shadow.
- Không dùng Source Sans Pro trong màn hình mới; nó là legacy và phá vỡ bộ ba NeueHaas/Instrument/accessibly.
- Không áp dụng radius từ 1px đến 49px; hệ thống là nhị phân — pill hoặc vuông.
- Không đặt violet lên bề mặt có màu; nền duy nhất nó nên nằm trên là #ffffff hoặc ảnh sản phẩm.
- Không underline nav link khi nghỉ; underline chỉ xuất hiện khi hover và nằm ở baseline, không phải toàn bộ box.
- Không dùng #000000 cho body text khi #212121 hoặc #474747 đã đủ tương phản — dành Onyx cho iconography và các khoảnh khắc nhấn mạnh tối đa.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Canvas | `#ffffff` | Nền trang, xung quanh trang sản phẩm, mặt sàn mặc định. |
| 2 | Soft Ash Surface | `#eeeeee` | Input fill, ghost button resting state, bề mặt phụ khi trắng trên trắng sẽ biến mất. |
| 3 | Sage Wash | `#d5e4e8` | Thanh thông báo và các dải thông tin nhẹ nhàng — bề mặt không phải hành động chromatic duy nhất. |
| 4 | Indigo Action | `#574cd5` | Bề mặt hành động thương hiệu — chỉ filled CTA, không bao giờ dùng làm nền cho card hoặc panel. |

## Elevation

Elevation cố tình không có. Hệ thống dựa vào flatness, hairline border (1px trong họ #474747–#212121) và white space để tạo hierarchy thay vì shadow. Dấu hiệu depth duy nhất là pill button 50px nằm trên ảnh sản phẩm bên dưới — shadow của pill chính là ảnh sản phẩm, không phải drop shadow.

## Imagery

Nhiếp ảnh chính là thương hiệu. Tất cả imagery là ảnh sản phẩm high-key trên bề mặt trung tính — crop sát biến kết cấu vải nỉ và sợi thành chủ thể. Khung hình vuông hoặc gần vuông, full-bleed trong cột, không bo góc, không overlay, không context lối sống. Ánh sáng mềm và tự nhiên; bảng màu là các tông trắng desaturated, xám ấm và đôi khi là chút ửng hồng của chính chất liệu (ví dụ: coaster marble pha hồng). Không có illustration, không 3D, không đồ họa trừu tượng. Icons là line icon stroke 1.5–2px tối thiểu màu #000000, monoline, chỉ dùng cho account, cart và search.

## Layout

Thanh thông báo full-bleed → dải header trắng (max-width 1200px, căn giữa) → top whitespace rộng (~80px) → cột hẹp căn giữa cho editorial/empty state → hàng ảnh sản phẩm full-bleed. Mô hình trang là max-width contained với các section dẫn dắt bằng whitespace thay vì các dải xen kẽ. Navigation là top bar phẳng với hairline border dưới; không sticky behavior, không sidebar, không mega-menu. Template 404/empty là một cụm dọc: eyebrow, headline, helper, sau đó là một ảnh sản phẩm duy nhất mang pill CTA — ảnh làm công việc mà feature grid thường làm.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text primary: #212121 (heading, nhấn mạnh) / #474747 (body)
- text muted: #7b7b7b (link khi nghỉ, helper)
- background: #ffffff (canvas) / #eeeeee (input, soft surface)
- border: #474747 (hairline mặc định) / #212121 (emphasis divider)
- brand accent: #574cd5 (filled CTA only)
- primary action: #574cd5 (filled action)

**Ví dụ Component Prompts**

1. Tạo Primary Action Button: nền #574cd5, text #7b7b7b, radius 9999px, compact pill padding. Dùng filled treatment này cho CTA chính.

3. **Filled Brand CTA** — Fill Indigo Pulse #574cd5, text trắng. NeueHaasUnicaW1G 16px weight 500, tracked normal. 50px radius, 15px vertical / 24px horizontal padding. Không border, không shadow. Dùng làm hành động chromatic duy nhất trên bất kỳ màn hình nào.

4. **Empty / 404 State** — Canvas trắng, top margin ~80px. Cụm dọc căn giữa: 'Oops!' eyebrow bằng accessibly 16px #474747, headline 'We couldn't find…' Instrument Sans 32px weight 500 #212121, helper line NeueHaasUnicaW1G 16px #474747 line-height 1.5. Theo sau là hàng ảnh sản phẩm full-bleed mang Pill Display CTA.

5. **Text Link in Body Copy** — Link nội dòng trong body paragraph. Nghỉ: text #7b7b7b với underline 1px #7b7b7b. Hover: text #212121 với underline 1px #212121. 4px vertical padding để underline không chạm vào descender.

## Similar Brands

- **MUJI** — Cùng nền trắng xương, hairline chrome, zero elevation, và kỷ luật để một bức ảnh sản phẩm duy nhất gánh vác cả màn hình.
- **Mansur Gavriel** — Cùng grid đơn sắc kiềm chế, một bề mặt chromatic duy nhất dành cho thương mại, và crop sản phẩm xử lý vật thể như tác phẩm trưng bày.
- **Greats** — Cùng header phẳng với hairline border dưới, nav grotesk chặt 14–16px, và ảnh sản phẩm full-bleed không chrome trang trí.
- **Aesop** — Cùng register typographic ấm-trung tính, vertical rhythm rộng rãi, và quy tắc màu sắc chỉ xuất hiện khi có công việc.
- **Toast (toa.st)** — Cùng ảnh sản phẩm thiên hướng Scandinavian trên nền linen-tone và một accent một màu dùng gần như dấu chấm câu.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-soft-ash: #eeeeee;
  --color-mist-sage: #d5e4e8;
  --color-graphite: #474747;
  --color-charcoal: #212121;
  --color-onyx: #000000;
  --color-slate: #2b2b2b;
  --color-fog: #7b7b7b;
  --color-indigo-pulse: #574cd5;

  /* Typography — Font Families */
  --font-neuehaasunicaw1g: 'NeueHaasUnicaW1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-accessibly: 'accessibly', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --text-display: 35px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-64: 64px;
  --spacing-144: 144px;

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

  /* Border Radius */
  --radius-full: 50px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-badges: 50px (pill);
  --radius-images: 0px;
  --radius-inputs: 0px;
  --radius-buttons: 50px (pill);

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-soft-ash-surface: #eeeeee;
  --surface-sage-wash: #d5e4e8;
  --surface-indigo-action: #574cd5;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-soft-ash: #eeeeee;
  --color-mist-sage: #d5e4e8;
  --color-graphite: #474747;
  --color-charcoal: #212121;
  --color-onyx: #000000;
  --color-slate: #2b2b2b;
  --color-fog: #7b7b7b;
  --color-indigo-pulse: #574cd5;

  /* Typography */
  --font-neuehaasunicaw1g: 'NeueHaasUnicaW1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-accessibly: 'accessibly', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --text-display: 35px;
  --leading-display: 1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-64: 64px;
  --spacing-144: 144px;

  /* Border Radius */
  --radius-full: 50px;
}
```