# HOUSEPLANT

> # HOUSEPLANT — Style Reference

## Prompt Content

```
# HOUSEPLANT — Style Reference
> hiệu sách gỗ óc chó trên giấy linen

**Theme:** light

Houseplant vận hành trong một bảng màu monochrome ấm áp, gần gũi với đất — nâu óc chó đậm trên nền kem cũ, với phần product photography đảm nhận toàn bộ công việc tạo màu sắc. Hệ thống mang phong cách catalog đồ gia dụng cổ điển: custom typography khít, khoảng thở rộng rãi, không có gradient trang trí, và hầu như không có màu nhấn. Màu nâu đậm #321e1 vừa là text vừa là bề mặt, đảo qua lại giữa background và foreground tùy theo ngữ cảnh, trong khi màu kem #f4f1e1 đóng vai trò canvas. Các component tối giản — solid filled buttons, hairline dividers, soft cards với một bóng đổ nhẹ duy nhất. Điểm nhấn đặc trưng là oversized custom wordmark neo ở footer trang, xử lý tên thương hiệu như một yếu tố đồ họa thay vì logo.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Walnut | `#321e1e` | `--color-walnut` | Màu text chính, filled action buttons, dark hero sections, footer wordmark. Màu nâu ấm đậm đọc gần như đen nhưng vẫn mang hơi ấm đất của thương hiệu — được dùng làm cả foreground lẫn background surface |
| Linen | `#f4f1e0` | `--color-linen` | Page canvas, card surfaces, light text trên nền tối. Màu kem cũ ấm áp mang lại chất giấy, chất cổ điển cho toàn bộ hệ thống |
| Graphite | `#464545` | `--color-graphite` | Secondary borders, muted helper text, subtle dividers. Màu xám trung tính nhẹ nhàng tạo sự phân cách tĩnh lặng mà không cạnh tranh với cặp Walnut/Linen |
| Espresso | `#463938` | `--color-espresso` | Button text trên nền sáng, alternate dark fill. Biến thể nâu nhạt hơn một chút để tạo tương phản typographic trong cùng họ màu tối |
| Onyx | `#000000` | `--color-onyx` | Icon strokes, true-black accents trên border. Dùng hạn chế khi cần độ tương phản tuyệt đối |
| Soft Sand | `#f4f4f4` | `--color-soft-sand` | Alternate light surface, hover-state wash. Màu trắng ngà trung tính cho các chuyển tông nhẹ so với canvas kem |

## Tokens — Typography

### Houseplant — Custom display và body typeface dùng cho mọi UI text — headlines ở 30-70px với negative tracking khít, body ở 16-20px, captions ở 14px. Custom font mang hơi ấm hình học mà các font có sẵn không thể sao chép · `--font-houseplant`
- **Thay thế:** Archivo, Inter Tight, hoặc DM Sans
- **Weights:** 400, 500, 600
- **Cỡ chữ:** 14px, 16px, 18px, 20px, 21px, 28px, 30px, 32px, 45px, 60px, 70px
- **Line height:** 1.00–2.79
- **Letter spacing:** -0.05em ở 60-70px, -0.047em ở 45px, -0.02em ở 14-32px
- **OpenType features:** `"ss01" on, "tnum" on`
- **Vai trò:** Custom display và body typeface dùng cho mọi UI text — headlines ở 30-70px với negative tracking khít, body ở 16-20px, captions ở 14px. Custom font mang hơi ấm hình học mà các font có sẵn không thể sao chép

### Roboto — Fallback body text — sử dụng tối thiểu, system-safe default · `--font-roboto`
- **Thay thế:** system-ui, sans-serif
- **Weights:** 400
- **Cỡ chữ:** 16px
- **Line height:** 2.00
- **Vai trò:** Fallback body text — sử dụng tối thiểu, system-safe default

### NeueHelvetica55Roman — NeueHelvetica55Roman — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-neuehelvetica55roman`
- **Weights:** 400
- **Cỡ chữ:** 16px
- **Line height:** 1.15, 1.63
- **Vai trò:** NeueHelvetica55Roman — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### GTStandard-M — GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-gtstandard-m`
- **Weights:** 400
- **Cỡ chữ:** 16px
- **Line height:** 1.5
- **Vai trò:** GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.71 | -0.02px | `--text-caption` |
| body-sm | 16px | 1.5 | -0.02px | `--text-body-sm` |
| body | 18px | 1.44 | -0.02px | `--text-body` |
| subheading | 21px | 1.33 | -0.02px | `--text-subheading` |
| heading-sm | 28px | 1.3 | -0.02px | `--text-heading-sm` |
| heading | 32px | 1.3 | -0.021px | `--text-heading` |
| heading-lg | 45px | 1.15 | -0.047px | `--text-heading-lg` |
| display | 70px | 1 | -0.05px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 56 | 56px | `--spacing-56` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 4px |
| cards | 8px |
| inputs | 4px |
| buttons | 4px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `rgba(0, 0, 0, 0.1) 0px 2px 8px 0px` | `--shadow-sm` |
| sm-2 | `rgba(0, 0, 0, 0.15) 0px 2px 8px 0px` | `--shadow-sm-2` |

### Layout

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

## Components

### Primary Filled Button
**Vai trò:** Main action button — Shop Now, Explore Now, Submit

Solid Walnut (#321e1e) background, Linen (#f4f1e0) text ở 16px weight 500, 4px radius, 12px vertical × 30px horizontal padding, uppercase tracking. Shadow rgba(0,0,0,0.15) 0px 2px 8px. Letter-spacing -0.02em tạo cảm giác khít và tự tin

### Outlined / Ghost Button
**Vai trò:** Secondary action trên nền tối — Explore Now trên dark hero

Transparent background, 1px Linen (#f4f1e0) border, Linen text, 4px radius, 12px vertical × 20-30px horizontal padding. Dùng khi primary filled button bị lạc lõng trên nền tối

### Product Card
**Vai trò:** E-commerce product tile trong grid layouts

Linen (#f4f1e0) background, 8px radius, 20px padding, shadow rgba(0,0,0,0.1) 0px 2px 8px. Product image ở nửa trên, tên sản phẩm ở 16px Walnut, giá ở 14px, filled Shop Now button bên dưới. Card không có border — shadow đảm nhận việc phân cách

### Navigation Bar
**Vai trò:** Top-level site navigation

Solid Walnut (#321e1e) background, full-width, cao ~60px. Brand wordmark căn giữa màu Linen kèm house icon, nav links ở 16px Linen uppercase với -0.02em tracking, dàn đều theo chiều ngang. Account/cart icons ở góc phải. Underline xuất hiện ở trạng thái active/hover

### Hero Banner
**Vai trò:** Full-bleed promotional section — Italian Collection, New Arrivals

Edge-to-edge image với text overlay, không gradient. Bold display headline (30-45px) màu ấm. Diagonal geometric shapes dạng solid blocks (terracotta, green) tạo khung cho bố cục, mang phong cách poster cổ điển

### Dark Feature Section
**Vai trò:** Promotional block trên nền Walnut — Houseplant + Carbone

Full-width Walnut background, hai cột: product image trái, headline + body + ghost button phải. Headline ở 32-45px Linen weight 500, body ở 16-18px Linen. Vertical padding rộng rãi (~80-100px) để có khoảng thở

### Section Header
**Vai trò:** Category section title — New & Featured

Canh trái, 21-28px Walnut weight 500, margin-bottom 8-10px. Uppercase tracking, hairline border hoặc không trang trí. Nằm sát mép trái của vùng nội dung

### Footer Wordmark
**Vai trò:** Brand identity anchor ở cuối trang

Full-bleed Walnut (#321e1e) text 'HOUSEPLANT' ở 60-70px weight 600, -0.05em letter-spacing, lấp đầy chiều rộng viewport. Đóng vai trò vừa là branding vừa là kết thúc thị giác — text CHÍNH LÀ yếu tố đồ họa, không có logo hay icon đi kèm

### Footer Link List
**Vai trò:** Site utility links — Contact, FAQ, Privacy, Terms

Stacked text links ở 16-18px Walnut trên nền Linen, không bullet markers, line-height rộng (~2.5). Phân cách bằng hairline Graphite (#464545) horizontal rules

### Social Icon Link
**Vai trò:** Footer social media icons — Instagram, Twitter, Facebook

Walnut line icons, ~24px, không fill, stroke weight 1.5px. Cách nhau 20-30px trong một hàng ngang. Tối giản — icons dễ nhận biết ở kích thước nhỏ mà không cần mã màu

### Price Label
**Vai trò:** Product pricing display dưới tên sản phẩm

14-16px Walnut weight 400, định dạng $XX.XX, canh trái. Không phát hiện xử lý sale/strike-through — pricing giữ đơn giản

### Product Image Container
**Vai trò:** Image holder trong product card

Image full chiều rộng card, không border hay radius ở phía trên (chỉ thừa hưởng 8px radius của card ở các góc), object-fit cover. Photography được chiếu sáng ấm, có bối cảnh lifestyle, thường trên bề mặt gỗ hoặc đá cẩm thạch

## Do's and Don'ts

### Nên làm
- Dùng #321e1 làm màu action chính duy nhất — solid fill cho buttons, không gradient, không hover color shifts
- Đặt page canvas là #f4f1e0 (Linen) — không bao giờ dùng pure white. Màu kem ấm là bản sắc của hệ thống
- Áp dụng -0.05em letter-spacing ở 45px+ và -0.02em ở body sizes. Tracking là yếu tố bắt buộc để giữ đặc tính của custom typeface
- Dùng 4px radius cho mọi button và 8px cho mọi card. Không đưa vào radius lớn hơn — hệ thống giữ nét sắc sảo
- Để product photography cung cấp toàn bộ màu sắc. UI giữ monochrome nâu/kem; hình ảnh mang tông terracotta, xanh lá và vân gỗ ấm
- Duy trì vertical rhythm rộng rãi: 80-120px giữa các section chính, 20px giữa các element, 20px card padding
- Neo mọi trang bằng oversized footer wordmark ở 60-70px — tên thương hiệu như một kết thúc đồ họa

### Không nên làm
- Không bao giờ dùng pure white (#FFFFFF) cho backgrounds — Linen #f4f1e0 là canvas chính thống
- Không đưa vào accent colors (xanh dương, xanh lá, đỏ) cho buttons hay interactive states — hệ thống nâu/kem cố tình hẹp
- Không dùng sans-serif system fonts cho headlines — custom Houseplant typeface ở 30px+ là chữ ký của thương hiệu
- Tránh drop shadows ngoài rgba(0,0,0,0.1) 0px 2px 8px duy nhất trên cards. Không glow effects, không colored shadows
- Không căn giữa body text hay product descriptions — canh trái mọi thứ trừ nav wordmark và hero headlines
- Không bao giờ dùng border-radius trên 8px. Pills, circles và large rounded shapes phá vỡ hình học catalog cổ điển
- Không thêm gradients, glassmorphism hay decorative overlays. Hệ thống chỉ gồm flat surfaces, hairline rules và soft shadows

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Canvas | `#f4f1e0` | Primary page background — cảm giác giấy kem cũ |
| 2 | Card | `#f4f4f4` | Product card surface, hơi nhấc tông so với canvas |
| 3 | Dark Feature | `#321e1` | Promotional sections, filled button backgrounds |
| 4 | Footer Mark | `#321e1` | Full-bleed footer wordmark surface |

## Elevation

- **Product Card:** `rgba(0, 0, 0, 0.1) 0px 2px 8px 0px`
- **Primary Button:** `rgba(0, 0, 0, 0.15) 0px 2px 8px 0px`

## Imagery

Warm, editorial product photography trên các bề mặt tự nhiên — bàn gỗ, mặt bàn đá cẩm thạch, gạch terracotta. Lifestyle-adjacent nhưng tập trung vào sản phẩm, với đồ bàn Ý, pasta và đồ gia dụng được chụp trong ánh sáng tự nhiên. Full-bleed hero images không gradient overlays. Bảng màu trong photography: terracotta, olive green, hoa văn gốm xanh đậm, vân gỗ ấm. Icons dạng line-style, stroke 1.5px, monochrome Walnut.

## Layout

Full-width sections xếp chồng theo chiều dọc. Navigation là fixed top bar trên nền Walnut, full viewport width. Hero là full-bleed image với graphic blocks chồng lên (terracotta và green geometric shapes) tạo hiệu ứng poster cổ điển. Product grid bên dưới dùng 5 cột bằng nhau với gap ~20px. Dark feature sections dùng hai cột (image trái, text phải) ở full viewport width. Footer là utility links phía trên full-bleed oversized wordmark lấp đầy viewport width. Max content width ~1200px cho grids và text blocks, nhưng hero/footer kéo dài edge-to-edge.

## Agent Prompt Guide

Quick Color Reference:
- text: #321e1e (Walnut)
- background: #f4f1e0 (Linen)
- border: #464545 (Graphite)
- accent: không có — hệ thống monochromatic
- primary action: #321e1e (filled action)

Ví dụ Component Prompts:

1. Tạo một product card: Linen (#f4f1e0) background, 8px radius, 20px padding, shadow rgba(0,0,0,0.1) 0px 2px 8px. Product image lấp đầy nửa trên. Bên dưới: tên sản phẩm ở 16px Houseplant weight 500 màu Walnut, giá ở 14px weight 400. Filled Shop Now button: #321e1e background, #f4f1e0 text, 4px radius, 12px×30px padding, weight 500.

2. Tạo một navigation bar: Full-width #321e1e background, cao 60px. Brand wordmark căn giữa ở 18px Houseplant weight 600 màu #f4f1e0. Nav links (SHOP ALL, NEW ARRIVALS, ITALIAN COLLECTION, SCENT, COLLABORATIONS, EXPLORE) ở 14px uppercase #f4f1e0 với -0.02em tracking, dàn đều theo chiều ngang.

3. Tạo một dark feature section: Full-width #321e1e background, hai cột 50/50. Trái: product image không border. Phải: headline ở 32px Houseplant weight 500 màu #f4f1e0, body text ở 16px weight 400 màu #f4f1e0, ghost button với 1px #f4f1e0 border, #f4f1e0 text, 4px radius.

4. Tạo một section header: 'NEW & FEATURED' canh trái ở 21px Houseplant weight 500 màu #321e1e, uppercase, -0.02em letter-spacing, margin-bottom 8px. Không trang trí, không border.

5. Tạo một footer wordmark: Full-width #321e1e block, text 'HOUSEPLANT' lấp đầy viewport ở 60-70px Houseplant weight 600, -0.05em letter-spacing, màu #321e1e, line-height 1.0. Đóng vai trò là yếu tố kết thúc thị giác của trang.

## Similar Brands

- **Soho House** — Cùng bảng màu kem ấm và óc chó, editorial product photography, custom display type gần serif, và full-bleed dark hero sections
- **Aesop** — Bảng màu đất monochromatic, warm off-white canvas, không accent colors, product photography mang toàn bộ hơi ấm, custom typography khít
- **Toast** — Vintage-catalog aesthetic, warm cream backgrounds, dark brown text, editorial food và home product photography, UI chrome hạn chế
- **Goop** — Dark brown feature sections trên nền kem, editorial product grid, oversized brand wordmark làm footer element, warm lifestyle photography
- **Food52** — Bảng màu đất ấm, product-forward grid layouts, lifestyle food và home photography, spacing rhythm thoải mái

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-walnut: #321e1e;
  --color-linen: #f4f1e0;
  --color-graphite: #464545;
  --color-espresso: #463938;
  --color-onyx: #000000;
  --color-soft-sand: #f4f4f4;

  /* Typography — Font Families */
  --font-houseplant: 'Houseplant', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neuehelvetica55roman: 'NeueHelvetica55Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.71;
  --tracking-caption: -0.02px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.02px;
  --text-body: 18px;
  --leading-body: 1.44;
  --tracking-body: -0.02px;
  --text-subheading: 21px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.02px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.02px;
  --text-heading: 32px;
  --leading-heading: 1.3;
  --tracking-heading: -0.021px;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.047px;
  --text-display: 70px;
  --leading-display: 1;
  --tracking-display: -0.05px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-56: 56px;
  --spacing-80: 80px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Named Radii */
  --radius-tags: 4px;
  --radius-cards: 8px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;

  /* Surfaces */
  --surface-canvas: #f4f1e0;
  --surface-card: #f4f4f4;
  --surface-dark-feature: #321e1;
  --surface-footer-mark: #321e1;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-walnut: #321e1e;
  --color-linen: #f4f1e0;
  --color-graphite: #464545;
  --color-espresso: #463938;
  --color-onyx: #000000;
  --color-soft-sand: #f4f4f4;

  /* Typography */
  --font-houseplant: 'Houseplant', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neuehelvetica55roman: 'NeueHelvetica55Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.71;
  --tracking-caption: -0.02px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.02px;
  --text-body: 18px;
  --leading-body: 1.44;
  --tracking-body: -0.02px;
  --text-subheading: 21px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.02px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.02px;
  --text-heading: 32px;
  --leading-heading: 1.3;
  --tracking-heading: -0.021px;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.047px;
  --text-display: 70px;
  --leading-display: 1;
  --tracking-display: -0.05px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-56: 56px;
  --spacing-80: 80px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
}
```