# bella Kitchen Appliances

> bella Kitchen Appliances — Style Reference

## Prompt Content

```
# bella Kitchen Appliances — Style Reference
> Quầy bếp ngập nắng giờ golden hour — bề mặt kem ấm với một điểm nhấn san hô duy nhất.

**Theme:** light

bella là một thẩm mỹ bếp ấm cúng, mang cảm giác quầy bếp gia đình, xây dựng trên bảng màu kem-và-san hô, tạo cảm giác ngập nắng chứ không lạnh lẽo như phòng khám. Toàn bộ giao diện nằm trên nền canvas trắng kem ấm (#ebeadf) với các card beige ấm hơn một chút (#d5cec0) và các bề mặt trắng nổi lên phía trên — các lớp được phân biệt bằng nhiệt độ màu sắc, không phải độ tương phản mạnh. Một điểm nhấn san hô bão hòa duy nhất (#f04923) cung cấp toàn bộ năng lượng: tag bán chạy nhất, card khuyến mãi, điểm nhấn giá và trạng thái active. Typography sử dụng sans-serif hình học (Supreme LL TT) với tracking -0.05em đồng nhất ở mọi kích thước, mang lại cho heading dáng vẻ nhỏ gọn, hiện đại. Thiết kế tránh đổ bóng, thay vào đó là phân lớp nhiệt độ màu sắc và bo góc 12px; button và badge là full pill (999px). Tổng thể cảm giác dễ gần, kích thích sự thèm ăn và tập trung vào sản phẩm — nhiếp ảnh đảm nhận phần lớn công việc tạo bầu không khí trong khi UI vẫn tối giản và ấm áp.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Warm Canvas | `#ebeadf` | `--color-warm-canvas` | Nền trang — lớp nền trắng kem ấm mang lại cho toàn bộ giao diện cảm giác ngập nắng, gần gũi |
| Pristine Surface | `#ffffff` | `--color-pristine-surface` | Bề mặt card nổi, thanh navigation, nền card sản phẩm, nền pill button |
| Sand Beige | `#d5cec0` | `--color-sand-beige` | Bề mặt card phụ và các panel nền tông ấm để nhóm sản phẩm và các phần nổi bật |
| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, nét icon, đường viền mảnh và wordmark thương hiệu — định nghĩa toàn bộ hệ thống typography |
| Coral Pulse | `#f04923` | `--color-coral-pulse` | Badge bán chạy nhất, nền card khuyến mãi, điểm nhấn giá và accent active — nguồn năng lượng ấm duy nhất phá vỡ tông đơn sắc kem |

## Tokens — Typography

### Supreme LL TT — Font thương hiệu chính dùng cho tất cả văn bản UI, heading, navigation, button và nhãn sản phẩm — sans-serif hình học với tracking -0.05em đồng nhất mang lại nhịp điệu nhỏ gọn, hiện đại; weight 400 xử lý body và hầu hết label, weight 700 dành cho heading và tên sản phẩm · `--font-supreme-ll-tt`
- **Thay thế:** Inter, DM Sans, hoặc General Sans
- **Weights:** 400, 700
- **Kích thước:** 13, 14, 16, 18, 22, 24, 40
- **Line height:** 1.0–1.83
- **Letter spacing:** -0.05em đồng nhất ở mọi kích thước
- **OpenType features:** `"ss01" on, "cv11" on`
- **Vai trò:** Font thương hiệu chính dùng cho tất cả văn bản UI, heading, navigation, button và nhãn sản phẩm — sans-serif hình học với tracking -0.05em đồng nhất mang lại nhịp điệu nhỏ gọn, hiện đại; weight 400 xử lý body và hầu hết label, weight 700 dành cho heading và tên sản phẩm

### Times — Font dự phòng hoặc văn bản render hệ thống khi Supreme LL TT không khả dụng · `--font-times`
- **Thay thế:** Times New Roman, Liberation Serif
- **Weights:** 400, 700
- **Kích thước:** 16, 32
- **Line height:** 1.0
- **Vai trò:** Font dự phòng hoặc văn bản render hệ thống khi Supreme LL TT không khả dụng

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.5 | -0.65px | `--text-caption` |
| body | 16px | 1.5 | -0.8px | `--text-body` |
| subheading | 18px | 1.4 | -0.9px | `--text-subheading` |
| heading-sm | 22px | 1.4 | -1.1px | `--text-heading-sm` |
| heading | 24px | 1.4 | -1.2px | `--text-heading` |
| display | 40px | 1.1 | -2px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Density:** comfortable

### 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` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 96 | 96px | `--spacing-96` |
| 116 | 116px | `--spacing-116` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 999px |
| cards | 12px |
| badges | 999px |
| buttons | 999px |

### Layout

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

## Components

### Top Navigation Bar
**Vai trò:** Header chính của trang với brand mark, link danh mục và tìm kiếm

Nền trắng (#ffffff), full-width, bo góc 12px trên container, chiều cao ~64px. Wordmark 'bella' màu đen Supreme LL TT 700 ở ~16px bên trái. Các link nav ở giữa (Shop, bella, bella PRO, Recipes, News, Made Better) bằng 16px Supreme LL TT 400 màu đen. Icon tìm kiếm ở ngoài cùng bên phải. Nằm bên trong một card trắng bo góc nổi trên nền warm canvas với khoảng cách ~16px từ mép viewport.

### Product Card
**Vai trò:** Item dạng grid cho danh sách sản phẩm với hình ảnh, nhãn và giá

Nền trắng (#ffffff), bo góc 12px, padding trong 24px. Hình ảnh sản phẩm căn giữa ở trên (PNG trong suốt trên nền trắng, không khung). Tên sản phẩm bằng 16px Supreme LL TT 700 màu đen bên dưới hình ảnh. Nhãn 'Bestseller' màu san hô phía trên tên khi có. Giá bằng 14px Supreme LL TT 400 màu đen bên dưới tên. Nhịp dọc thoáng — ~32px giữa hình ảnh và văn bản.

### Bestseller Badge
**Vai trò:** Nhãn khuyến mãi chỉ sản phẩm bán chạy nhất

Hình pill (radius 999px), nền san hô (#f04923), chữ trắng, padding dọc 12px / ngang 20px. Văn bản bằng 12–13px Supreme LL TT 700, viết hoa hoặc mixed-case tracking. Nằm ở góc trên bên trái của hình ảnh hoặc card sản phẩm.

### Pill Button
**Vai trò:** Button hành động chính cho shop, learn more và CTA navigation

Full pill (radius 999px), padding dọc 12px / ngang 24px. Biến thể filled white: nền #ffffff, viền đen 1px, chữ đen 14px Supreme LL TT 700. Biến thể outlined ghost: nền trong suốt, viền đen 1px. Văn bản căn giữa theo chiều dọc. Chiều rộng tự động theo nội dung với min-height ~16px.

### Featured Product Card
**Vai trò:** Card sidebar khuyến mãi trong hero làm nổi bật sản phẩm bán chạy nhất

Nền san hô (#f04923) toàn bộ, bo góc 12px, padding 24px. Badge bán chạy nhất (pill trắng) ở góc trên bên trái. Headline bằng 22–24px Supreme LL TT 700 màu trắng, tối đa 2 dòng. Hình ảnh sản phẩm căn giữa bên dưới headline. Button CTA pill trắng ở cạnh dưới — tạo độ tương phản màu-mạnh-với-trắng làm hành động cuối cùng.

### Hero Banner
**Vai trò:** Hero full-bleed giới thiệu chiến dịch thương hiệu

Layout chia đôi full-width: bên trái ~65% là nền xanh da trời nhiếp ảnh với hình ảnh mây (nội dung, không phải màu UI), bên phải ~35% là Featured Product Card. Headline 'Fits-anywhere™ kitchenware' bằng ~40px Supreme LL TT 700 màu trắng trên nền ảnh bầu trời. Một sản phẩm (máy nướng bánh mì) nổi trong hero với bóng bay đỏ tạo nét vui tươi. Hero card có bo góc 12px và nằm lùi vào trong từ mép viewport.

### Lifestyle Scene Section
**Vai trò:** Section editorial full-bleed với text overlay trên ảnh bếp ấm áp

Hình ảnh nhiếp ảnh full-width (cảnh bếp ấm áp) với một card văn bản trong suốt một phần hoặc trắng đè lên ở giữa. Text card: nền trắng hoặc kem ấm, radius 12px, padding 24px. Heading bằng 24px Supreme LL TT 700 màu đen. Subtitle bằng 16px Supreme LL TT 400 màu đen. Căn giữa theo chiều ngang, đặt ở vị trí giữa-trên của hình ảnh.

### Product Grid Section
**Vai trò:** Grid bốn cột trưng bày sản phẩm cho các vật dụng tiết kiệm không gian

Nền warm canvas (#ebeadf). Section heading ở ~24–40px Supreme LL TT 700 màu đen, căn giữa. Grid 4 cột với khoảng cách 24px, mỗi cột chứa một Product Card. Grid căn giữa trong container max-width ~1200px.

### Inspiration Feature Card
**Vai trò:** Card khuyến mãi với nền xanh nhạt và CTA cho nội dung công thức/cảm hứng

Nền xanh oải hương nhạt (accent phụ mềm mại, ~#b8c5e8), bo góc 12px, padding 24px. Văn bản eyebrow nhỏ bằng 12px Supreme LL TT 400. Headline 'Get inspired' bằng 24px Supreme LL TT 700. Hình ảnh sản phẩm (nồi chiên không dầu) ở bên phải. Button pill trắng 'Learn more' ở dưới cùng với chữ đen.

### Category Link
**Vai trò:** Link navigation nội tuyến dùng trong top nav và footer

Văn bản đen 16px Supreme LL TT 400. Không gạch chân theo mặc định. Một chevron xuống nhỏ (‹) có thể đi kèm với link danh mục có sub-menu. Trạng thái active hoặc hover có thể chuyển weight sang 700 hoặc thêm gạch chân màu san hô.

### Price Display
**Vai trò:** Nhãn giá sản phẩm bên dưới mỗi tên sản phẩm

Văn bản đen 14px Supreme LL TT 400, có tiền tố '$' (ví dụ '$59.99'). Căn giữa hoặc căn trái tùy theo layout card. Biến thể gạch ngang tùy chọn cho giá khuyến mãi với weight nhẹ hơn và accent san hô trên giá bán.

## Do's and Don'ts

### Nên làm
- Sử dụng #ebeadf làm nền trang cho tất cả khu vực không phải card — lớp nền kem ấm là canvas làm cho card trắng và accent san hô trở nên có chủ đích
- Sử dụng #f04923 độc quyền như một accent chức năng: badge bán chạy nhất, nền card khuyến mãi và điểm nhấn giá active — không bao giờ dùng làm nền lớn cho nội dung chính
- Sử dụng Supreme LL TT với letter-spacing -0.05em ở mọi kích thước — tracking chặt là yếu tố bắt buộc để duy trì tính nhất quán thương hiệu
- Sử dụng border-radius 999px cho tất cả button, badge và tag — hình pill là ngôn ngữ button
- Sử dụng border-radius 12px cho tất cả card và container hình ảnh — đây là radius bề mặt phổ quát
- Sử dụng padding trong 24px cho tất cả nội dung card — giữ cho product card, feature card và promotional card nhất quán
- Xếp chồng ba cấp độ bề mặt để tạo chiều sâu: warm canvas (#ebeadf) → sand beige (#d5cec0) → pristine white (#ffffff) — định nghĩa độ cao bằng nhiệt độ màu sắc, không bao giờ dùng drop shadow

### Không nên làm
- Không sử dụng trắng tinh (#ffffff) làm nền trang — lớp nền kem ấm là thứ mang lại cho bella đặc tính gia đình, ngập nắng
- Không thêm drop shadow vào card — bella sử dụng phân lớp nhiệt độ màu sắc (canvas → beige → white) thay vì độ cao bằng bóng đổ
- Không sử dụng nhiều màu accent — san hô (#f04923) là accent màu sắc duy nhất; thêm màu thương hiệu thứ hai làm loãng bản sắc ấm áp gia đình
- Không sử dụng xanh lam làm màu UI — xanh da trời trong hero là nội dung nhiếp ảnh, không phải design token
- Không sử dụng font serif cho UI — Supreme LL TT (hoặc font sans-serif hình học thay thế) là kiểu chữ duy nhất được chấp nhận cho tất cả văn bản giao diện
- Không sử dụng góc nhọn (radius 0px) trên card hoặc container — mọi bề mặt nên có ít nhất 12px radius để tạo sự mềm mại
- Không căn giữa body text hoặc sử dụng độ dài dòng quá lớn — giữ mô tả sản phẩm và body copy căn trái với max-width 60ch

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Warm Canvas | `#ebeadf` | Nền trang cơ bản — nền tảng trắng kem ấm |
| 1 | Sand Beige | `#d5cec0` | Panel nhóm sản phẩm phụ và nền card tông ấm |
| 2 | Pristine Surface | `#ffffff` | Product card nổi, navigation và pill button trắng |

## Imagery

Nhiếp ảnh là ngôn ngữ hình ảnh chủ đạo và mang toàn bộ trọng lượng bầu không khí. Ảnh sản phẩm là cut-out sạch sẽ trên nền trắng hoặc kem — vật thể là hero, không có bối cảnh lifestyle. Hero image là một cảnh bầu trời siêu thực, đầy khát vọng (bầu trời xanh với mây, bóng bay đỏ nâng một chiếc máy nướng bánh mì) truyền tải sự tự do và nhẹ nhàng. Lifestyle scene sử dụng ảnh bếp ấm áp, gần gũi với gỗ tự nhiên, gạch, cây xanh và đồ gốm để gợi lên một không gian gia đình thực sự. Hình ảnh lấp đầy các section full-bleed với văn bản đè lên trong card trắng hoặc kem. Không có minh họa, không có icon ngoài UI chức năng — sản phẩm nhiếp ảnh CHÍNH LÀ bản sắc hình ảnh. Xử lý màu sắc tự nhiên và ấm áp, không bão hòa hay filter. Nặng về hình ảnh ở cấp độ section nhưng tập trung vào văn bản trong card và navigation.

## Layout

Trang có max-width 1200px căn giữa với padding ngoài ~16px tạo cảm giác card nổi trên nền warm canvas. Navigation là một thanh pill trắng full-width ở trên cùng. Hero là layout chia đôi: ~65% nền ảnh bầu trời với headline đè lên và sản phẩm nổi, ~35% card khuyến mãi san hô. Các section xen kẽ giữa khối nhiếp ảnh full-bleed và grid sản phẩm nền kem. Product grid là 4 cột trên desktop với khoảng cách 24px. Sắp xếp nội dung xen kẽ giữa các chồng văn bản căn giữa (cho section header) và hero chia đôi bất đối xứng. Nhịp điệu tổng thể là: hero ảnh full-bleed → section lifestyle căn giữa với text overlay → grid sản phẩm 4 cột → section cảm hứng chia đôi ảnh+card. Khoảng cách dọc thoáng (~80px) giữa các section tạo nhịp độ thoải mái, dễ thở. Navigation là một top bar tối giản với các link căn giữa.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #000000
- background: #ebeadf (kem ấm)
- surface/card: #ffffff
- secondary surface: #d5cec0 (sand beige)
- border: #000000 (hairline 1px)
- accent: #f04923 (san hô)
- primary action: không có màu CTA riêng biệt

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

1. *Tạo một product card cho grid thương mại điện tử:* Nền trắng (#ffffff), bo góc 12px, padding trong 24px. Hình ảnh sản phẩm căn giữa ở trên trên nền trong suốt/trắng. Tên sản phẩm bằng 16px Supreme LL TT weight 700, #000000, letter-spacing -0.8px. Giá bên dưới bằng 14px Supreme LL TT weight 400, #000000, letter-spacing -0.7px. Badge pill 'Bestseller' màu san hô (#f04923) tùy chọn (radius 999px, padding 12px 20px, chữ trắng 12px) phía trên tên sản phẩm. Khoảng cách ~32px giữa hình ảnh và văn bản.

2. *Tạo một featured product card (hero sidebar):* Nền san hô (#f04923) toàn bộ, bo góc 12px, padding 24px. Badge bán chạy nhất (pill trắng) ở góc trên bên trái. Headline bằng 24px Supreme LL TT weight 700, #ffffff, letter-spacing -1.2px. Hình ảnh sản phẩm căn giữa bên dưới. Button pill trắng ở dưới cùng: nền #ffffff, viền 1px #000000, radius 999px, padding 12px 24px, chữ đen 14px Supreme LL TT weight 700.

3. *Tạo một lifestyle section với text overlay:* Ảnh bếp ấm áp full-bleed. Text card căn giữa đè lên: nền trắng, bo góc 12px, padding 24px. Heading bằng 24px Supreme LL TT weight 700, #000000, letter-spacing -1.2px. Subtitle bằng 16px Supreme LL TT weight 400, #000000. Căn giữa theo chiều ngang, đặt ở vị trí giữa-trên của hình ảnh.

4. *Tạo một product grid section 4 cột:* Nền warm canvas (#ebeadf). Section heading ở 40px Supreme LL TT weight 700, #000000, căn giữa. Grid 4 cột với khoảng cách cột 24px, max-width 1200px căn giữa. Mỗi ô grid là một Product Card (xem prompt 1).

5. *Tạo một top navigation bar:* Nền trắng (#ffffff), container bo góc 12px, full-width với lề ngoài 16px từ mép viewport, chiều cao ~64px. Wordmark 'bella' bằng 16px Supreme LL TT weight 700, #000000, ở bên trái. Link nav căn giữa: 16px Supreme LL TT weight 400, #000000. Icon tìm kiếm ở ngoài cùng bên phải. Padding ngang ~24px bên trong thanh nav.

## Elevation Philosophy

bella tránh hoàn toàn drop shadow. Độ cao được truyền đạt thông qua hệ thống nhiệt độ bề mặt ba cấp: warm canvas (#ebeadf) làm nền, sand beige (#d5cec0) làm panel trung gian và pristine white (#ffffff) làm bề mặt nổi. Cách tiếp cận này giữ cho giao diện cảm giác phẳng, ấm áp và gia đình — giống như các vật thể nằm trên quầy bếp ngập nắng chứ không trôi nổi trong không gian kỹ thuật số. Khi một bề mặt cần cảm giác 'ở trên', hãy làm nó trắng hơn; khi nó cần lùi lại, hãy làm nó be hơn. Không bao giờ sử dụng box-shadow cho card, modal hay popover.

## Similar Brands

- **Our Place** — Cùng thẩm mỹ canvas kem ấm với một màu accent ấm duy nhất (terracotta/san hô), button hình pill và ảnh sản phẩm tập trung trên nền trung tính
- **Caraway** — Thương hiệu bếp gia đình sử dụng bề mặt trắng kem ấm, typography sans-serif tối giản và ảnh lifestyle với kết cấu gỗ tự nhiên và gốm sứ
- **Muji** — Bảng màu trung tính ấm dè dặt với một accent duy nhất, khoảng trắng rộng rãi và ảnh sản phẩm để vật thể làm hero trên nền kem
- **Great Jones** — Thương hiệu bếp vui tươi với nền be ấm, display type đậm và một màu accent sống động duy nhất dùng cho các khoảnh khắc khuyến mãi và badge

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-warm-canvas: #ebeadf;
  --color-pristine-surface: #ffffff;
  --color-sand-beige: #d5cec0;
  --color-ink-black: #000000;
  --color-coral-pulse: #f04923;

  /* Typography — Font Families */
  --font-supreme-ll-tt: 'Supreme LL TT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.5;
  --tracking-caption: -0.65px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.8px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.9px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -1.1px;
  --text-heading: 24px;
  --leading-heading: 1.4;
  --tracking-heading: -1.2px;
  --text-display: 40px;
  --leading-display: 1.1;
  --tracking-display: -2px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-116: 116px;

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

  /* Border Radius */
  --radius-xl: 12px;
  --radius-full: 999px;

  /* Named Radii */
  --radius-tags: 999px;
  --radius-cards: 12px;
  --radius-badges: 999px;
  --radius-buttons: 999px;

  /* Surfaces */
  --surface-warm-canvas: #ebeadf;
  --surface-sand-beige: #d5cec0;
  --surface-pristine-surface: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-warm-canvas: #ebeadf;
  --color-pristine-surface: #ffffff;
  --color-sand-beige: #d5cec0;
  --color-ink-black: #000000;
  --color-coral-pulse: #f04923;

  /* Typography */
  --font-supreme-ll-tt: 'Supreme LL TT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.5;
  --tracking-caption: -0.65px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.8px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.9px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -1.1px;
  --text-heading: 24px;
  --leading-heading: 1.4;
  --tracking-heading: -1.2px;
  --text-display: 40px;
  --leading-display: 1.1;
  --tracking-display: -2px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-116: 116px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-full: 999px;
}
```