# Resident

> Resident — Style Reference

## Prompt Content

```
# Resident — Style Reference
> Chuyên khảo kiến trúc trên giấy kem

**Theme:** light

Resident hoạt động như một phòng trưng bày biên tập tĩnh lặng dành cho các đối tượng thiết kế: canvas giấy trắng, chrome gần như bằng không, và nhiếp ảnh khổ lớn đảm nhận toàn bộ công việc thị giác. Giao diện gần như hoàn toàn đơn sắc — mực đen trên giấy trắng với các đường kẻ mảnh (hairline rules) và chữ ma (ghost text) nhỏ — để các căn phòng, đồ nội thất và đèn chiếu sáng tự đưa ra mọi quyết định về màu sắc. Typography là một sans-serif tùy chỉnh duy nhất (MessinaSans) ở weight vừa phải với tracking được thắt chặt, mang lại cho headline sự chính xác, uy quyền kiểu catalogue mà không bao giờ cảm thấy ồn ào. Các component được rút gọn về khung xương: một nav gạch chân nhỏ, nút chỉ có viền, một heading section mở rộng đến mép cột. Không có shadow, không gradient, không độ cao bề mặt — chiều sâu chỉ đến từ các bức ảnh và khoảng không gian dọc rộng rãi giữa các spread biên tập.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Ink Black | `#000000` | `--color-ink-black` | Body text, nav links, icon strokes, và tất cả hairline borders (1px rules dưới nav, quanh input, và giữa các khối biên tập). Xương sống cấu trúc — 724 lần xuất hiện borderColor và 336 body borders cho thấy nó mang các cạnh của layout |
| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, nav background, và ghost button fills. Mọi thứ nổi trên bề mặt này; toàn bộ giao diện là một tờ giấy phẳng duy nhất |
| Soft Graphite | `#979797` | `--color-soft-graphite` | Body text mờ và secondary borders. Tỷ lệ tương phản 2.9:1 so với nền trắng có nghĩa là nó cố tình nhạt — dùng cho helper copy và các divider ít quan trọng, không bao giờ dùng cho nội dung chính |
| Charcoal | `#333333` | `--color-charcoal` | Icon strokes, fills, và button borders cho secondary controls. Nằm giữa ink-black và mid-gray, tạo cho icon sự hiện diện nhẹ nhàng hơn body text mà không mất độ dễ đọc ở tỷ lệ 12.6:1 |

## Tokens — Typography

### MessinaSansWeb — Brand typeface — dùng cho tất cả heading, body copy, nav, và mô tả sản phẩm. Sans-serif hình học tùy chỉnh với tracking được thắt chặt (-0.0370em ở display, -0.0300em ở body) và weight vừa phải (400–500, không bao giờ bold). Lựa chọn chống lại quy ước: dùng một sans tùy chỉnh ở weight 400 cho section heading thay vì 600–700 — uy quyền đến từ độ chính xác của typeface và letter-spacing âm, không phải từ weight. · `--font-messinasansweb`
- **Thay thế:** Inter, Suisse Int'l, hoặc Söhne (gần nhất về tracking và tính chất hình học)
- **Weights:** 400, 500
- **Kích thước:** 14, 18, 19, 23, 27
- **Line height:** 1.00–1.40 (thay đổi theo kích thước: 1.00 ở 27px display, 1.20 ở 23px heading, 1.29–1.40 ở body sizes)
- **Letter spacing:** -0.0370em ở display sizes (27px), -0.0300em ở body sizes (14–19px)
- **Vai trò:** Brand typeface — dùng cho tất cả heading, body copy, nav, và mô tả sản phẩm. Sans-serif hình học tùy chỉnh với tracking được thắt chặt (-0.0370em ở display, -0.0300em ở body) và weight vừa phải (400–500, không bao giờ bold). Lựa chọn chống lại quy ước: dùng một sans tùy chỉnh ở weight 400 cho section heading thay vì 600–700 — uy quyền đến từ độ chính xác của typeface và letter-spacing âm, không phải từ weight.

### system-ui sans-serif — Utility text cho chrome nhỏ — nav secondary items, footer micro-copy, minor UI labels. Cố tình rút gọn xuống còn hai kích thước và một weight; system stack biến mất để MessinaSans vẫn là giọng nói của thương hiệu. · `--font-system-ui-sans-serif`
- **Weights:** 400
- **Kích thước:** 12, 14
- **Line height:** 1.20–1.30
- **Letter spacing:** normal
- **Vai trò:** Utility text cho chrome nhỏ — nav secondary items, footer micro-copy, minor UI labels. Cố tình rút gọn xuống còn hai kích thước và một weight; system stack biến mất để MessinaSans vẫn là giọng nói của thương hiệu.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.2 | — | `--text-caption` |
| body-sm | 14px | 1.3 | -0.42px | `--text-body-sm` |
| body-lg | 19px | 1.4 | -0.57px | `--text-body-lg` |
| heading-sm | 23px | 1.2 | -0.69px | `--text-heading-sm` |
| display | 27px | 1 | -1px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 18 | 18px | `--spacing-18` |
| 19 | 19px | `--spacing-19` |
| 21 | 21px | `--spacing-21` |
| 27 | 27px | `--spacing-27` |
| 28 | 28px | `--spacing-28` |
| 35 | 35px | `--spacing-35` |
| 42 | 42px | `--spacing-42` |
| 83 | 83px | `--spacing-83` |

### Border Radius

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

### Layout

- **Page max-width:** 1440px
- **Section gap:** 48-64px
- **Card padding:** 0px
- **Element gap:** 18-21px

## Components

### Top Navigation Bar
**Vai trò:** Primary site navigation

Thanh trên cùng sticky trên nền trắng. Cụm bên trái: primary nav items (Furniture, Lighting, Designers, Journal, Resources, About) ở 12–14px MessinaSans 400, màu đen, cách nhau ~18–21px. Cụm bên phải: secondary actions (Login, Search, Cart với số lượng) ở system sans 12–14px. 21px vertical padding. Không background, không border-bottom — nav nằm trần trên giấy trắng.

### Ghost Nav Link
**Vai trò:** Navigation item

Chỉ text, không background, không border, không underline ở trạng thái nghỉ. 12–14px MessinaSans 400, #000000. Khi hover hoặc active state, một underline đen 1px xuất hiện bên dưới text. 5–10px horizontal margin giữa các item.

### Section Display Heading
**Vai trò:** Tiêu đề section biên tập

27px MessinaSans 400 cỡ lớn, #000000, line-height 1.00, letter-spacing -1.00px. Có thể được đặt ở mép cột bên phải của layout hai cột (như trong wordmark 'Resident' ở hero). Zero margin — nó neo section thay vì căn giữa trong đó.

### Editorial Image Spread
**Vai trò:** Hero photography và product showcases

Ảnh full-bleed hoặc column-width với 0px border-radius, hiển thị ở tỷ lệ 1:1 hoặc 4:3. Ảnh nằm edge-to-edge không có frame, không caption overlay, và khoảng cách 24–48px giữa các cặp ảnh. Bản thân các bức ảnh là toàn bộ hệ thống thị giác — không có illustration, không có icon chồng lên.

### Two-Column Editorial Block
**Vai trò:** Bố cục nội dung body

Hai cột bằng nhau với khoảng cách ~24px. Cột trái: body text mô tả ở 18–19px MessinaSans 400, line-height 1.29–1.40, #000000. Cột phải: đoạn văn bổ sung cùng thông số. Không có vertical rule giữa các cột — khoảng cách chính là divider.

### Ghost Link / Text Button
**Vai trò:** Inline link và CTA tối thiểu

14px MessinaSans 400, #000000, 1px underline đen, 3–6px horizontal padding. Không background, không border, không fill. Kiểu interactive element duy nhất trên site — không có filled buttons ở bất kỳ đâu.

### Bordered Input
**Vai trò:** Form fields

1px solid #000000 border, 0px radius, nền trắng, 14px MessinaSans 400, text #000000. 10px vertical padding, không có sự thay đổi màu focus ring (border vẫn là màu đen). Placeholder text ở default body color.

### Footer
**Vai trò:** Site footer

21px vertical padding, system sans-serif 12–14px, #000000. Được tổ chức thành các cụm text nhỏ (links, locale switcher EN/DE, legal). Không divider, không background fill — tiếp tục tờ giấy trắng.

### Product/Collection Card
**Vai trò:** Product listing entry

Card zero-padding — chỉ một bức ảnh theo sau là tên sản phẩm ở 14–18px MessinaSans 400 và giá/thông số cùng kích thước. Không card background, không border, không shadow. Card là một khối typographic bên dưới bức ảnh, không phải là một container.

### Locale Switcher
**Vai trò:** Language toggle (EN/DE)

12px system sans, #000000, inline text với một thin space separator. Không dropdown, không cờ — chỉ các mã hai chữ cái viết hoa liền kề trong một dòng duy nhất.

## Do's and Don'ts

### Do
- Đặt tất cả borders thành 1px solid #000000 — không bao giờ dùng rules dày hơn hoặc borders có màu.
- Chỉ dùng MessinaSans ở weights 400 hoặc 500; không bao giờ bold (700) — hình học của typeface mang thứ bậc, không phải weight.
- Áp dụng letter-spacing -0.0370em cho display sizes (23px+) và -0.0300em cho body sizes (14–19px).
- Giữ tất cả border-radius ở 0px — thiết kế cố tình mang tính kiến trúc và sắc cạnh.
- Để ảnh full-bleed hoặc column-width là nguồn màu sắc và sự thú vị thị giác duy nhất trên trang.
- Dùng ghost/underline links (14px MessinaSans 400, 1px underline đen) cho mọi tương tác — không bao giờ dùng filled buttons.
- Duy trì khoảng cách dọc 48–64px giữa các section biên tập để giữ nhịp điệu magazine spread.

### Don't
- Không đưa vào bất kỳ màu sắc, gradient, hoặc colored fill nào — bảng màu là bốn màu trung tính và các bức ảnh cung cấp mọi thứ khác.
- Không thêm box-shadow, elevation, hoặc surface tinting — chiều sâu đến từ nhiếp ảnh, không phải từ chrome.
- Không dùng bold (700) weights trên MessinaSans — weight vừa phải với tracking chặt là chữ ký.
- Không dùng border-radius trên bất kỳ element nào — cards, buttons, images, và inputs đều có cạnh sắc.
- Không dùng filled hoặc colored buttons — mọi interactive element đều là text links với 1px underline đen.
- Không đặt icon overlays, badges, hoặc đồ họa trang trí lên trên product photography.
- Không căn giữa body text trong multi-column layouts — grid biên tập sử dụng các cột bất đối xứng căn trái.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Paper White | `#ffffff` | Canvas trang và bề mặt duy nhất trong hệ thống. Tất cả nội dung — nav, cards, images, text blocks — nằm trực tiếp trên mặt phẳng đơn lẻ này. |

## Elevation

Thiết kế cố tình tránh shadows, gradients, và bất kỳ sự nâng bề mặt nào. Chiều sâu chỉ đạt được thông qua ảnh full-bleed và khoảng trắng dọc rộng rãi. Không box-shadow, không colored fills, không modal scrims — trang là một tờ biên tập phẳng nơi hình ảnh tự tạo chiều sâu riêng trên nền trắng.

## Imagery

Nhiếp ảnh là toàn bộ ngôn ngữ thị giác — không illustration, không 3D renders, không iconography ngoài các glyph UI tối thiểu. Hình ảnh mang phong cách biên tập-kiến trúc: ảnh nội thất ấm áp của các căn phòng với đồ nội thất và đèn của Resident, chụp dưới ánh sáng tự nhiên với tông màu đất dịu (hồng bụi, gỗ ấm, xám bê tông, hổ phách ánh lửa). Bố cục rộng và mang tính môi trường — đồ nội thất được thể hiện trong không gian sống động, không phải trên nền trắng liền mạch. Ảnh luôn là full-bleed hoặc column-width với 0px corner radius, không bao giờ bị mask, không bao giờ có text overlays. Xử lý màu sắc tự nhiên với một chút ấm áp — không desaturated, không duotone. Nhiếp ảnh chiếm 60–70% diện tích bề mặt trang trên hầu hết các màn hình; phần giấy trắng còn lại là không gian âm có chủ đích.

## Layout

Grid tạp chí hai cột biên tập. Max-width ~1440px không có ràng buộc container căn giữa — grid chạy edge-to-edge với lề ngoài rộng rãi. Hero pattern: section heading cỡ lớn (ví dụ 'Resident') được đặt ở display weight, nằm ở cột phải, với một spread hai ảnh bên dưới lấp đầy toàn bộ chiều rộng. Các section nội dung xen kẽ giữa text blocks hai cột và image grids (2-up hoặc 3-up). Không có full-viewport hero, không video, không animated banners — trang bắt đầu ngay lập tức như một spread biên tập tĩnh lặng. Nhịp điệu section nhất quán: khoảng cách dọc 48–64px giữa các khối, không background bands, không visual dividers ngoài khoảng trắng. Navigation là một top bar tối giản với ghost links nhỏ. Không sidebar, không sticky elements ngoài nav, không mega-menu. Cảm giác tổng thể giống như lật một cuốn chuyên khảo thiết kế hơn là duyệt một catalogue sản phẩm.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Text: #000000 (Ink Black)
- Background: #ffffff (Paper White)
- Border: #000000 (1px hairline)
- Muted text: #979797 (Soft Graphite)
- Icon/secondary: #333333 (Charcoal)
- primary action: không có màu CTA riêng biệt

**3-5 Ví dụ Component Prompts**

1. *Editorial section heading*: Render từ 'Resident' ở 27px MessinaSans weight 400, #000000, line-height 1.00, letter-spacing -1.00px. Đặt căn phải trong grid hai cột. Không margin.

2. *Two-column body block*: Tạo layout hai cột với khoảng cách 24px. Cột trái: đoạn văn ở 18px MessinaSans 400, #000000, line-height 1.29, letter-spacing -0.54px. Cột phải: cùng thông số, đoạn văn khác. Không có vertical divider giữa các cột.

3. *Product photograph card*: Đặt một bức ảnh full-bleed (tỷ lệ 4:3, 0px radius) phía trên một text block: tên sản phẩm ở 18px MessinaSans 400, #000000. Không card background, không border, không shadow. Khoảng cách 24px giữa ảnh và text.

4. *Ghost navigation link*: Render một text link ở 14px MessinaSans 400, #000000 với 1px solid #000000 underline, 3px horizontal padding. Không background, không border-radius. 18px margin-right giữa các link liền kề.

5. *Bordered input field*: Tạo một input với 1px solid #000000 border, 0px radius, #ffffff background, 10px vertical padding, 14px MessinaSans 400, text #000000. Placeholder text ở #979797.

## Editorial Spacing System

Thang đo spacing cố tình hẹp và hướng đến nội dung:
- 3–6px: inline element padding (buttons, links)
- 10–14px: small component padding (inputs, micro elements)
- 18–21px: standard element gap (giữa các nav items, giữa các text blocks)
- 48–64px: editorial section gap (giữa các major spreads)

Không có card padding vì không có card containers — nội dung chảy trực tiếp trên bề mặt giấy trắng. Base unit là 4px nhưng hầu hết các giá trị đều lẻ (5, 13, 19, 21) vì spacing tuân theo nhịp điệu typographic hơn là một grid nghiêm ngặt.

## Similar Brands

- **Menu (menu.world)** — Cùng cách tiếp cận chuyên khảo biên tập: custom geometric sans ở weight vừa phải, chrome gần như bằng không, ảnh nội thất full-bleed là nguồn màu sắc duy nhất, và hairline 1px rules thay thế mọi decorative borders.
- **Aesop (aesop.com)** — Cùng triết lý kiềm chế: canvas trắng, single custom typeface, không filled buttons (tất cả đều là ghost links), hơi ấm của nhiếp ảnh cung cấp nội dung màu sắc duy nhất, và khoảng trắng biên tập rộng rãi giữa các section.
- **Hem (hem.com)** — Cùng cảm quan đối tượng thiết kế Scandinavian với UI đơn sắc, geometric sans tracking chặt, image-led grids không viền, và ghost-text navigation biến mất để product photography dẫn dắt.
- **Vitra (vitra.com)** — Cùng ngôn ngữ thiết kế biên tập: catalog-style two-column layouts, section heading cỡ lớn, nhiếp ảnh kiến trúc của đồ nội thất trong phòng, và bảng màu bốn trung tính không có màu trang trí.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-soft-graphite: #979797;
  --color-charcoal: #333333;

  /* Typography — Font Families */
  --font-messinasansweb: 'MessinaSansWeb', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: -0.42px;
  --text-body-lg: 19px;
  --leading-body-lg: 1.4;
  --tracking-body-lg: -0.57px;
  --text-heading-sm: 23px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.69px;
  --text-display: 27px;
  --leading-display: 1;
  --tracking-display: -1px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-18: 18px;
  --spacing-19: 19px;
  --spacing-21: 21px;
  --spacing-27: 27px;
  --spacing-28: 28px;
  --spacing-35: 35px;
  --spacing-42: 42px;
  --spacing-83: 83px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 48-64px;
  --card-padding: 0px;
  --element-gap: 18-21px;

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

  /* Surfaces */
  --surface-paper-white: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-soft-graphite: #979797;
  --color-charcoal: #333333;

  /* Typography */
  --font-messinasansweb: 'MessinaSansWeb', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: -0.42px;
  --text-body-lg: 19px;
  --leading-body-lg: 1.4;
  --tracking-body-lg: -0.57px;
  --text-heading-sm: 23px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.69px;
  --text-display: 27px;
  --leading-display: 1;
  --tracking-display: -1px;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-18: 18px;
  --spacing-19: 19px;
  --spacing-21: 21px;
  --spacing-27: 27px;
  --spacing-28: 28px;
  --spacing-35: 35px;
  --spacing-42: 42px;
  --spacing-83: 83px;
}
```