# 70Materia

> # 70Materia — Style Reference

## Prompt Content

```
# 70Materia — Style Reference
> Bảng mẫu kiến trúc trên giấy trắng — UI là khung đỡ, không bao giờ là tác phẩm.

**Theme:** light

70Materia là một khung trung tính được thiết kế để biến mất xung quanh nội dung — một thư viện vật liệu được tuyển chọn, nơi UI chrome được cố tình làm vô hình để các mẫu đá, terrazzo và bột màu chiếm ưu thế. Mọi thành phần kiểu chữ đều ở weight 400 trong một dòng sans-serif duy nhất (Matter), với một font monospace đồng hành (Matter Mono) dùng cho nhãn, navigation và các UI control nhỏ. Letter-spacing trên mono (0.02em–0.04em) cùng với chữ số dạng bảng (tabular numerals) mang lại cho giao diện chất bảng thông số kỹ thuật, bản vẽ kiến trúc — như thể trang web tự nó là một bảng mẫu kỹ thuật. Bảng màu hoàn toàn achromatic: chữ đen, bề mặt trắng, và một canvas xám ấm trung tính (#bababa) lùi về phía sau các bức ảnh. Button mỏng, vuông, và có viền; bề mặt được tô màu duy nhất là màu gần đen (#1e1e1e) dành cho một số hành động chọn lọc và footer. Không có màu nhấn nào trong hệ thống — toàn bộ năng lượng màu sắc được chuyển giao cho ảnh sản phẩm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Obsidian | `#000000` | `--color-obsidian` | Chữ chính, đường viền siêu mảnh, đường viền navigation — "mực" cấu trúc |
| Bone | `#ffffff` | `--color-bone` | Điểm nhấn trang, bề mặt card, chữ trên nền tối, viền button |
| Graphite | `#1e1e1e` | `--color-graphite` | Nền button được tô màu, bề mặt footer, khối UI tối — màu gần đen ấm thay thế đen tuyền cho các bề mặt không phải chữ |
| Ash | `#bababa` | `--color-ash` | Canvas trang chính, divider mờ, tông bề mặt phụ |

## Tokens — Typography

### Matter — Họ chữ chính cho heading, body, hero caption và link. Chỉ dùng ở weight 400 — không có biến thể bold trong hệ thống, buộc phân cấp thông qua kích thước và vị trí thay vì độ đậm. Font tùy chỉnh có tích hợp chữ số dạng bảng ("tnum"), giúp số trong body copy căn chỉnh như bảng giá. · `--font-matter`
- **Thay thế:** Inter, Söhne, hoặc Untitled Sans ở weight 400
- **Weights:** 400
- **Kích thước:** 15px, 19px, 20px
- **Line height:** 1.20
- **Tính năng OpenType:** `"tnum"`
- **Vai trò:** Họ chữ chính cho heading, body, hero caption và link. Chỉ dùng ở weight 400 — không có biến thể bold trong hệ thống, buộc phân cấp thông qua kích thước và vị trí thay vì độ đậm. Font tùy chỉnh có tích hợp chữ số dạng bảng ("tnum"), giúp số trong body copy căn chỉnh như bảng giá.

### Matter Mono — Họ micro-label và UI chrome — mục navigation, chữ button, nhãn section, mã sản phẩm (AT.OLO). Letter-spacing 0.02em–0.04em mở rộng mono thành dạng đọc kỹ thuật nghiêng về chữ hoa. Font này mang cá tính bản vẽ kiến trúc của thương hiệu; nếu thiếu nó, trang web sẽ đọc như một site tối giản chung chung. · `--font-matter-mono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Berkeley Mono
- **Weights:** 400
- **Kích thước:** 10px, 12px
- **Line height:** 1.20–1.30
- **Letter spacing:** 0.02em (12px) và 0.04em (10px)
- **Tính năng OpenType:** `"tnum"`
- **Vai trò:** Họ micro-label và UI chrome — mục navigation, chữ button, nhãn section, mã sản phẩm (AT.OLO). Letter-spacing 0.02em–0.04em mở rộng mono thành dạng đọc kỹ thuật nghiêng về chữ hoa. Font này mang cá tính bản vẽ kiến trúc của thương hiệu; nếu thiếu nó, trang web sẽ đọc như một site tối giản chung chung.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.3 | 0.4px | `--text-caption` |
| body | 15px | 1.2 | — | `--text-body` |
| subheading | 19px | 1.2 | — | `--text-subheading` |

## Tokens — Spacing & Shapes

**Đơn vị cơ sở:** 8px

**Mật độ:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 24 | 24px | `--spacing-24` |
| 100 | 100px | `--spacing-100` |
| 180 | 180px | `--spacing-180` |

### Border Radius

| Thành phần | Giá trị |
|---------|-------|
| tags | 0px |
| cards | 0px |
| inputs | 0px |
| buttons | 3px |

### Layout

- **Page max-width:** 960px
- **Section gap:** 100-180px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Primary Outlined Button
**Vai trò:** Kích hoạt hành động mặc định (DISCOVER MORE, DISCOVER THE SHOWROOM, SUBSCRIBE TO OUR NEWSLETTER)

Viền 1px solid #000000 trên nền trong suốt, góc bo 3px, padding dọc 8px × ngang 24px. Nhãn đặt ở Matter Mono 12px, weight 400, letter-spacing 0.02em, chữ hoa, #000000. Không có hover fill — button luôn giữ dạng outline, đọc giống như một nhãn được gắn thẻ hơn là một CTA.

### Filled Dark Button
**Vai trò:** Hành động nhấn mạnh thứ cấp, dùng có chọn lọc

Nền #1e1e1, nhãn Matter Mono 12px màu trắng, radius 3px, padding 8px × 24px. Dành riêng cho các hành động có ý định cao; phần còn lại của hệ thống là outlined.

### Top Navigation Bar
**Vai trò:** Navigation chính của site

Trong suốt trên hero image, một hàng duy nhất, logo '70Materia' bên trái ở Matter 20px, mục nav bên phải (MATERIALS, APPLICATIONS, PRODUCTS, PROJECTS, JOURNAL, COMPANY, NEWS, CONTACTS) ở Matter Mono 10px chữ hoa, letter-spacing 0.04em, #000000. Không có nền, không có shadow — nav nổi trên ảnh.

### Full-Bleed Hero Image
**Vai trò:** Tuyên bố hình ảnh mở đầu

Ảnh edge-to-edge, không overlay, không gradient, không chữ trong vùng ảnh. Màn hình đầu tiên của site là 100% ảnh — UI chỉ xuất hiện dưới dạng nav chrome ở trên.

### Two-Column Showcase Section
**Vai trò:** Khối nội dung biên tập (điểm nhấn dự án, CTA newsletter)

Hai cột có trọng số bằng nhau, mỗi cột chứa một ảnh full-bleed, một nhãn Matter Mono 10px (ví dụ VISIT OUR SHOWROOM), một đoạn mô tả Matter 15px #000000, và một button outlined bên dưới. Khoảng cách hàng 24px giữa các thành phần, các cột được phân cách bởi canvas trang, không phải divider.

### Product Caption Tag
**Vai trò:** Nhận dạng sản phẩm cố định dạng overlay

Góc dưới-bên trái của viewport, Matter Mono 10px, chữ hoa, letter-spacing 0.04em (ví dụ 'AT.OLO'). Hoạt động như một nhãn đối tượng kiểu bảo tàng — cùng một món đồ nội thất/vật liệu được nhận dạng bất kể bạn đang xem section nào.

### Footer
**Vai trò:** Kết thúc site

Dải tối, nền #1e1e1, chữ #ffffff ở Matter Mono 10–12px. Tối giản — link, địa chỉ và thông tin pháp lý. Là nơi duy nhất trang web rơi xuống dưới canvas xám thành một khối tối xác định.

### Image Card
**Vai trò:** Ảnh được chứa trong các section hỗn hợp

Radius bằng 0, không viền, không shadow. Ảnh nằm trực tiếp trên canvas #bababa hoặc trên panel trắng (#ffffff). Góc luôn sắc — bản thân vật liệu cung cấp sự thú vị về thị giác, không phải khung.

### Newsletter Input Row
**Vai trò:** Thu thập email

Input text có gạch chân (chỉ viền dưới 1px #000000) với nút SUBSCRIBE ở bên phải. Không có input field được tô màu, không có góc bo tròn — gạch chân là toàn bộ tín hiệu affordance.

## Do's and Don'ts

### Do
- Đặt mọi heading và body run ở Matter weight 400 — không bao giờ đưa weight bold vào để tạo phân cấp; dùng kích thước và khoảng cách thay thế.
- Dùng Matter Mono 10–12px với letter-spacing 0.02em–0.04em cho tất cả nhãn, mục nav, chữ button và mã sản phẩm.
- Để ảnh sản phẩm lấp đầy viewport edge-to-edge; không bao giờ crop, đóng khung hoặc đặt overlay UI lên hero image.
- Xây dựng button dưới dạng hình chữ nhật có viền 1px, radius 3px và padding 8px × 24px — kiểu hành động mặc định.
- Dùng #bababa làm canvas trang và để màu trắng (#ffffff) chỉ xuất hiện dưới dạng giấy inset hoặc chữ tối trên nền tối.
- Giữ corner radius ở 3px cho button và 0px cho mọi thứ khác; hệ thống về cơ bản là sắc cạnh.
- Áp dụng chữ số dạng bảng ("tnum") trên tất cả văn bản có chứa số để chúng căn chỉnh theo chiều dọc trên trang.

### Don't
- Không đưa bất kỳ màu nhấn chromatic nào — cam, xanh dương, xanh lá, đỏ. Bảng màu là achromatic vĩnh viễn; màu sắc là nhiệm vụ của ảnh.
- Không dùng drop shadow, gradient hoặc hiệu ứng glow — mô hình chiều sâu chỉ là bề mặt sáng → canvas xám trung → footer tối, không hơn.
- Không bo tròn góc card, góc ảnh hoặc container section — chỉ button mới có radius 3px; mọi thứ khác đều sắc cạnh.
- Không dùng weight bold hoặc semibold từ Matter; weight 400 là weight duy nhất trong hệ thống.
- Không đặt chữ màu, icon màu hoặc viền màu lên UI chức năng — giữ tất cả chrome ở màu đen, trắng hoặc xám.
- Không căn giữa body copy trong các section biên tập; căn trái mô tả và nhãn trong bố cục hai cột showcase.
- Không dùng input field trắng được tô màu với viền hiển thị — form field chỉ được xác định bằng một gạch dưới duy nhất.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Canvas | `#bababa` | Nền trang chính — trường xám ấm nơi mọi nội dung nằm trên đó |
| 2 | Paper | `#ffffff` | Card inset, panel chữ và vùng bao quanh ảnh có độ tương phản cao |
| 3 | Lacquer | `#1e1e1` | Bề mặt footer và button được tô màu — lớp UI sâu nhất |

## Elevation

Thiết kế cố tình tránh mọi elevation dựa trên shadow. Chiều sâu được truyền đạt hoàn toàn thông qua tông bề mặt: canvas #bababa lùi lại phía sau panel giấy #ffffff, và footer #1e1e1 nằm ở lớp sâu nhất. Component không bao giờ đổ shadow, không bao giờ nổi, không bao giờ cảm thấy tách rời khỏi bề mặt — chúng được vẽ ra, không được nâng lên.

## Imagery

Ảnh là toàn bộ nhận diện thị giác. Ảnh là những crop chặt, tập trung vào vật liệu của các bề mặt hoàn thiện — bàn terrazzo, phiến đá, mẫu bột màu, nội thất được trang bị — được trình bày dưới dạng đối tượng full-bleed không có bối cảnh lối sống. Chủ thể luôn là bản thân vật liệu, được cô lập trên nền bê tông trung tính hoặc tường trắng, được chiếu sáng bằng ánh sáng tự nhiên dịu. Không có illustration, không có đồ họa trừu tượng, không có icon ngoại trừ các nhãn UI mono nhỏ. Xử lý màu sắc trung thực với thực tế — hệ thống tin tưởng vật liệu sẽ mang tính chromatic. Mật độ thị giác cực kỳ nặng về ảnh: một bức ảnh thường chiếm 60–100% viewport, với chữ và UI chrome được nén vào các nhãn nhỏ 10–12px đọc như tài liệu hơn là thiết kế.

## Layout

Trang web là một chuỗi dọc các khoảnh khắc biên tập full-bleed, mỗi khoảnh khắc bao gồm một ảnh full-width duy nhất hoặc một khối ảnh+chữ hai cột. Hero mở đầu bằng một bức ảnh edge-to-edge và nav nổi bên trên; không có headline căn giữa, không có gradient overlay. Sau hero, các section xuất hiện dưới dạng lưới hai cột căn giữa với max content width ~960px, trong đó mỗi cột chứa một ảnh xếp chồng lên một nhãn mono, một đoạn body ngắn và một button outlined. Khoảng cách section rộng rãi (padding dọc 100–180px), tạo nhịp điệu chậm rãi như đi bảo tàng giữa các khối nội dung. Không có sidebar, không có card grid, không có bảng giá — bố cục luôn là ảnh-rồi-chữ, không bao giờ ngược lại. Navigation là một thanh trên cùng trong suốt duy nhất; footer là một dải tối kết thúc trang.

## Agent Prompt Guide

## Quick Color Reference
- background: #bababa (page canvas)
- surface: #ffffff (inset paper, text panels)
- text: #000000 (primary), #ffffff (on dark)
- border: #000000 (1px hairlines)
- primary action: #1e1e1e (filled action)
- dark surface: #1e1e1e (filled button, footer)

## Example Component Prompts

1. **Outlined Action Button** — "Tạo một nút DISCOVER THE SHOWROOM. Viền 1px solid #000000, nền trong suốt, góc bo 3px, padding dọc 8px × ngang 24px. Nhãn ở Matter Mono 12px weight 400, letter-spacing 0.02em, chữ hoa, màu #000000. Không có hover fill, không shadow."

2. **Two-Column Editorial Section** — "Xây dựng một khối hai cột căn giữa ở max-width 960px trên canvas #bababa. Cột trái: ảnh full-bleed không viền, không radius. Bên dưới ảnh, một nhãn Matter Mono 10px chữ hoa 'VISIT OUR SHOWROOM' màu #000000, sau đó một đoạn Matter 15px màu #000000, rồi một button outlined (xem prompt 1). Cột phải phản chiếu cùng cấu trúc với nhãn 'ENTER THE WORLD OF 70MATERIA'."

3. **Full-Bleed Hero with Floating Nav** — "Render một bức ảnh full-viewport edge-to-edge không overlay. Thanh nav trên cùng nổi trên ảnh: logo '70Materia' ở Matter 20px #000000 bên trái; mục nav (MATERIALS, APPLICATIONS, PRODUCTS, PROJECTS, JOURNAL, COMPANY, NEWS, CONTACTS) ở Matter Mono 10px chữ hoa, letter-spacing 0.04em, #000000, căn phải. Không có nền trên nav."

4. **Persistent Product Caption** — "Đặt một nhãn cố định ở góc dưới-bên trái của viewport: Matter Mono 10px chữ hoa, letter-spacing 0.04em, #000000, ví dụ 'AT.OLO'. Không nền, không viền — nhãn nằm trực tiếp trên ảnh như thể nó là một thẻ đối tượng bảo tàng."

5. **Newsletter Underline Input** — "Tạo một hàng thu thập email: một input text một dòng không nền và không viền ngoại trừ viền dưới 1px #000000, placeholder 'Your email' ở Matter 15px #000000, theo sau là một nút SUBSCRIBE outlined (xem prompt 1). Input có radius 0px."

## Similar Brands

- **Dzek (dzekdzek.com)** — Cùng cách tiếp cận biên tập thư viện vật liệu — UI achromatic, ảnh đá và bề mặt full-bleed, nhãn nhỏ kiểu mono, và ghost button outlined luôn nhường chỗ cho vật liệu
- **Studio Zhu Pei** — Các website kiến trúc dùng cùng mẫu neutral canvas + ảnh khổ lớn + nhãn mono nhỏ, với button là hình chữ nhật viền mảnh
- **Salvatori** — Thương hiệu đá Ý kết hợp canvas trang xám trung hoặc trắng với ảnh hero lớn và UI chrome outlined tối giản
- **Mutina (mutina.it)** — Thương hiệu bề mặt/gạch dùng cùng cảm giác bảng thông số kỹ thuật — nhãn mono có letter-spacing, body type khách quan ở weight 400, và bảng màu achromatic để ảnh gạch mang màu sắc

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-bone: #ffffff;
  --color-graphite: #1e1e1e;
  --color-ash: #bababa;

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

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.3;
  --tracking-caption: 0.4px;
  --text-body: 15px;
  --leading-body: 1.2;
  --text-subheading: 19px;
  --leading-subheading: 1.2;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-100: 100px;
  --spacing-180: 180px;

  /* Layout */
  --page-max-width: 960px;
  --section-gap: 100-180px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-sm: 3px;

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

  /* Surfaces */
  --surface-canvas: #bababa;
  --surface-paper: #ffffff;
  --surface-lacquer: #1e1e1;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-bone: #ffffff;
  --color-graphite: #1e1e1e;
  --color-ash: #bababa;

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

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.3;
  --tracking-caption: 0.4px;
  --text-body: 15px;
  --leading-body: 1.2;
  --text-subheading: 19px;
  --leading-subheading: 1.2;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-100: 100px;
  --spacing-180: 180px;

  /* Border Radius */
  --radius-sm: 3px;
}
```