# basement.studio

> basement.studio — Style Reference

## Prompt Content

```
# basement.studio — Style Reference
> Một xưởng in ảo lúc 3 giờ sáng — chữ nén khổng lồ tràn ra khỏi canvas đen tuyền, một tia lửa cam trên nav, mọi thứ còn lại đều trắng hoặc xám ma quái.

**Theme:** dark

Thẩm mỹ void thuần khiết — trang mở ra như một hình chữ nhật đen với một mục nav màu cam duy nhất và dòng chữ thì thầm 'Scroll to Explore', sau đó bùng nổ thành display type khổng lồ 87px. Canvas #000000 là tuyệt đối, không phải 'xám đen' — không có surface gradients, không có depth layers, không có decorative noise. Geist 87px weight 600 với letter-spacing -0.04em là neo thị giác: nén, rộng, cơ khí. Điểm nhấn duy nhất, màu cam than hồng #ff4d00, chỉ xuất hiện trên mục nav đang active — không bao giờ trên CTA, không bao giờ trên button — khiến nó trông như đèn báo hiệu, không phải màu thương hiệu. Các ô logo client có viền grid màu #454545 tạo cảm giác tủ hồ sơ dày đặc, kiểu kiểm kê trên nền đen tuyền.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ember Signal | `#ff4d00` | `--color-ember-signal` | Chỉ dùng cho trạng thái active của nav — xuất hiện trên một phần tử tương tác duy nhất như một đèn báo nóng, không bao giờ dùng cho button hay CTA; sự hiếm hoi chính là điểm đặc trưng |
| Void | `#000000` | `--color-void` | Nền trang, button fill, SVG fills — đen tuyệt đối, không phải gần đen |
| Chalk | `#ffffff` | `--color-chalk` | Text chính, nhãn nav, text button, body copy |
| Fog | `#e5e7eb` | `--color-fog` | Màu viền trên nav, card, button, logo grid dividers — khung xương cấu trúc hiện rõ trên nền đen |
| Ash | `#c4c4c4` | `--color-ash` | Text phụ, subheading, body copy giảm nhấn, SVG fills |
| Graphite | `#757575` | `--color-graphite` | Text cấp ba, nhãn mờ, icon fills |
| Carbon | `#454545` | `--color-carbon` | Màu viền card/tile — dùng trên ô logo grid để xác định cấu trúc mà không gây sáng |
| Obsidian | `#2e2e2` | `--color-obsidian` | Nền phần tử phụ, hover states, SVG fills |
| Cinder | `#1a1a1a` | `--color-cinder` | Nền input, viền input — bề mặt duy nhất khác biệt so với đen tuyệt đối |
| Smudge | `#666666` | `--color-smudge` | SVG illustration fills, decorative icon tones |

## Tokens — Typography

### Geist — Họ font duy nhất cho mọi loại chữ — nav, body, display, heading, label. Headline 87px weight 600 với line-height 0.89 là chữ ký của hệ thống: text cao hơn khoảng cách cap-height của chính nó, các chữ cái va chạm nhau ở tỷ lệ lớn. Letter-spacing -0.04em ở kích thước display nén tracking đến mức gần như chạm nhau. Feature flag 'ss01' kích hoạt các dạng glyph thay thế đặc trưng của Geist. Dùng một font duy nhất cho mọi thứ từ caption 12px đến display 87px tạo ra giọng typographic nguyên khối — không pha trộn thể loại. · `--font-geist`
- **Thay thế:** Inter, Helvetica Neue
- **Weights:** 400, 500, 600
- **Kích thước:** 12px, 13px, 15px, 16px, 20px, 24px, 38px, 76px, 87px
- **Line height:** 0.89–1.50 (chặt nhất ở kích thước lớn nhất: 0.89 ở 87px, 0.90 ở 76px)
- **Letter spacing:** -0.04em ở 76-87px, -0.03em ở 38px, -0.02em ở 20-24px
- **OpenType features:** `"ss01" on`
- **Vai trò:** Họ font duy nhất cho mọi loại chữ — nav, body, display, heading, label. Headline 87px weight 600 với line-height 0.89 là chữ ký của hệ thống: text cao hơn khoảng cách cap-height của chính nó, các chữ cái va chạm nhau ở tỷ lệ lớn. Letter-spacing -0.04em ở kích thước display nén tracking đến mức gần như chạm nhau. Feature flag 'ss01' kích hoạt các dạng glyph thay thế đặc trưng của Geist. Dùng một font duy nhất cho mọi thứ từ caption 12px đến display 87px tạo ra giọng typographic nguyên khối — không pha trộn thể loại.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | — | `--text-caption` |
| heading-sm | 20px | 1.23 | -0.4px | `--text-heading-sm` |
| heading | 24px | 1.07 | -0.48px | `--text-heading` |
| heading-lg | 38px | 1 | -1.14px | `--text-heading-lg` |
| display | 87px | 0.89 | -3.48px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** compact

### 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` |
| 64 | 64px | `--spacing-64` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| cards | 0px |
| badges | 0px |
| global | 0px — zero radius everywhere, no exceptions |
| inputs | 0px |
| buttons | 0px |

### Layout

- **Page max-width:** 1280px
- **Section gap:** 128px
- **Card padding:** 16px
- **Element gap:** 8px

## Components

### Ghost Navigation Link
**Vai trò:** Mục nav chính

Nền trong suốt, text #ffffff ở 13px Geist weight 500, không padding, không border, không radius. Trạng thái active: chuyển sang màu #ff4d00 — vị trí duy nhất điểm nhấn này xuất hiện trong toàn bộ hệ thống.

### Contact Us Button
**Vai trò:** CTA chính trong nav

Nền #000000, text #ffffff ở 13px Geist weight 500, border-radius 0px, padding 4px tất cả các cạnh, border: 1px solid #e5e7eb. Hộp góc sắc trên thanh nav đen — chỉ phân biệt được nhờ hình chữ nhật viền.

### Scroll to Explore Label
**Vai trò:** Lời nhắc cuộn / CTA môi trường

Nền trong suốt, text #ffffff ở 15px Geist weight 400, kèm glyph mũi tên xuống. Không có button chrome. Nằm ở giữa dưới cùng của full-black hero viewport.

### Client Logo Tile
**Vai trò:** Ô grid bằng chứng xã hội

Nền trong suốt, border 1px solid #454545, radius 0px, không padding rõ ràng (nội dung căn giữa trong ô grid chiều rộng bằng nhau). Logo SVG màu trắng. Grid layout 8 cột, lát gạch dày đặc — không có khoảng cách giữa các ô, các border chồng lên các ô liền kề.

### Section Label
**Vai trò:** Header ngữ cảnh nhỏ (ví dụ: 'Trusted by Visionaries')

Text #757575 ở 13px Geist weight 400, không trang trí. Xuất hiện phía trên các khối nội dung như một bộ phân loại mờ — nhẹ hơn body text, nặng hơn caption.

### Display Headline
**Vai trò:** Heading chính của hero

Text #ffffff ở 87px Geist weight 600, line-height 0.89, letter-spacing -0.04em, font-feature-settings 'ss01'. Khối full-width, text wrap để lấp đầy chiều rộng viewport. Yếu tố thị giác chiếm ưu thế của trang — không trang trí, không gạch chân, không gradient — khối type nén thuần khiết.

### Body Paragraph
**Vai trò:** Body copy mô tả sub-headline

Text #c4c4c4 ở 15px Geist weight 400, line-height 1.5. Đặt trong cột giới hạn (~300-350px width) bên dưới display headline. Màu xám giảm từ trắng tạo sự phụ thuộc thị giác mà không cần thay đổi kích thước.

### Text Input
**Vai trò:** Trường nhập liệu form

Nền #1a1a1a, border #1a1a1a (bằng phẳng — border hòa với nền), text #ffffff ở 15px Geist weight 400, border-radius 0px, padding ngang 4px, padding dọc 0px. Bề mặt input là nền duy nhất không phải đen trong hệ thống.

### Nav Badge / Count
**Vai trò:** Nhãn số trên mục nav (ví dụ: số lượng mục showcase)

Badge superscript hoặc inline nhỏ màu #757575 ở 12px Geist weight 400. Không nền, không border, không radius. Chỉ báo đếm thuần typographic.

### Wordmark
**Vai trò:** Logo thương hiệu trong nav

'basement.' màu #ffffff Geist weight 600 ở ~16px. Dấu chấm là một phần của brand mark. Không icon, không logomark — chỉ logotype.

## Do's and Don'ts

### Nên làm
- Dùng #000000 làm nền trang duy nhất — không bao giờ thay thế bằng màu gần đen như #0a0a0a hay #111111; void tuyệt đối là có chủ đích.
- Áp dụng border-radius 0px cho mọi phần tử — button, card, input, badge, tất cả component. Bất kỳ góc bo tròn nào cũng phá vỡ hệ thống.
- Chỉ dành #ff4d00 riêng cho trạng thái active của nav. Không bao giờ dùng trên button, CTA, icon hay phần tử trang trí.
- Đặt display type (38px+) với font-feature-settings: 'ss01' và letter-spacing tối thiểu -0.02em, mở rộng lên -0.04em ở 76-87px.
- Dùng border 1px solid #454545 trên grid tile và border 1px solid #e5e7eb trên phần tử tương tác (button, mục nav) — hai sắc độ viền này tạo hệ thống phân cấp hai tầng.
- Duy trì Geist làm typeface duy nhất trên mọi kích thước từ caption 12px đến display 87px — không có font phụ hay font trang trí.
- Dùng #c4c4c4 cho body copy dưới headline thay vì trắng hoàn toàn, tạo hệ thống phân cấp độ sáng thông qua độ sáng chứ không chỉ kích thước.

### Không nên làm
- Không bao giờ thêm box-shadow, drop-shadow hay glow — thiết kế không có elevation; chiều sâu được tạo bằng type scale và màu sắc, không phải shadow.
- Không bao giờ dùng góc bo tròn — không 2px, không 4px. Radius 0px là bất khả thương lượng trên mọi component.
- Không bao giờ giới thiệu typeface thứ hai — không cho decorative headline, không cho code block, không cho quote.
- Không bao giờ đặt #ff4d00 trên nền, fill hay hình dạng trang trí — nó chỉ tồn tại như tín hiệu màu text trên một phần tử.
- Không bao giờ dùng trắng (#ffffff) cho text mô tả cấp body — dùng #c4c4c4 hoặc #757575 để giữ display headline là đỉnh độ sáng.
- Không bao giờ thêm gradient vào nền hay text — hệ thống flat, matte và nhị phân trong cách áp dụng màu.
- Không bao giờ áp dụng padding lớn hơn 16px cho inline hoặc small component — hệ thống spacing compact (đơn vị cơ sở 4px) và các bố trí grid dày đặc không nên thở quá nhiều.

## Elevation

Zero elevation — không shadow, không bề mặt nổi, không blur. Toàn bộ giao diện tồn tại trên một mặt phẳng Z. Chiều sâu được xây dựng hoàn toàn thông qua tương phản type scale (12px vs 87px) và tương phản độ sáng (trắng vs #757575 vs đen). Sự phẳng này có tính cấu trúc: thêm bất kỳ shadow nào sẽ gợi ý một bề mặt không tồn tại trong void này.

## Imagery

Logo client là SVG đơn sắc trắng trên nền trong suốt, đặt trong grid có viền cứng — không có khoảng thở, không có ảnh hover state. Không nhiếp ảnh, không minh họa, không 3D. Ngôn ngữ thị giác hoàn toàn là typographic và iconographic. Logo tile hoạt động như mục nhập danh mục kiểm kê hơn là khoảnh khắc showcase. Trang có tính text-dominant ở mức cực đoan: hero là 100% type trên nền đen, không có imagery. Icon style khi có mặt là mono-white SVG tối giản có outline/fill ở kích thước nhỏ. Thiết kế cố tình kháng cự atmospheric imagery — void CHÍNH LÀ art direction.

## Layout

Canvas #000000 full-bleed không có max-width constraint trên hero. Navigation là thanh trên cố định với wordmark bên trái, link ở giữa, CTA contact bên phải. Viewport đầu tiên hoàn toàn đen chỉ có nav hiển thị cộng với 'Scroll to Explore' ở giữa dưới cùng — một sự tiết lộ sân khấu trước khi nội dung xuất hiện. Bên dưới fold: display headline full-width trải dài viewport, sau đó là cột body paragraph có chiều rộng giới hạn (~350px) căn trái. Phần client logo sử dụng grid 8 cột chiều rộng bằng nhau với border 1px đã thu gọn (#454545) — các ô chia sẻ border, không có khoảng cách, tạo lưới dày đặc. Nhịp section hào phóng giữa các section chính (gap 128px) nhưng nội bộ compact. Không có dải sáng/tối xen kẽ — toàn bộ trang duy trì nền void xuyên suốt.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Text (chính): #ffffff
- Text (phụ): #c4c4c4
- Text (cấp ba/mờ): #757575
- Nền: #000000
- Viền (cấu trúc): #454545
- Viền (tương tác): #e5e7eb
- Điểm nhấn active: #ff4d00 (chỉ nav)
- Bề mặt input: #1a1a1a

**Ví dụ Component Prompts**

1. Hero Section: Nền #000000 full-viewport. Headline 87px Geist weight 600, #ffffff, line-height 0.89, letter-spacing -3.5px, font-feature-settings 'ss01'. Body paragraph phụ 15px Geist weight 400, #c4c4c4, line-height 1.5, max-width 350px, đặt bên dưới headline. Nhãn 'Scroll to Explore' 15px #ffffff căn giữa dưới cùng viewport.

2. Navigation Bar: Nền #000000, full-width. Wordmark 'basement.' màu #ffffff Geist weight 600 16px căn trái. Nav link 13px Geist weight 500 #ffffff căn giữa, mục active màu #ff4d00. Button 'Contact Us' căn phải: fill #000000, border 1px solid #e5e7eb, radius 0px, padding 4px, text #ffffff 13px weight 500.

3. Client Logo Grid: Grid 8 cột, các ô chia sẻ border 1px solid #454545 đã thu gọn, radius 0px, nền #000000. Mỗi ô chứa logo SVG trắng căn giữa. Không có khoảng cách — border thu gọn. Grid trải dài toàn bộ chiều rộng nội dung.

4. Text Input Field: Nền và border-color #1a1a1a, border-radius 0px, padding ngang 4px, padding dọc 0px, text #ffffff 15px Geist weight 400. Bề mặt input là nền duy nhất không phải void trong hệ thống.

5. Section Label + Content Block: Section label 13px Geist weight 400 #757575, phía trên heading. Heading 38px Geist weight 600 #ffffff letter-spacing -1.14px line-height 1.0. Margin-top 128px giữa các section chính.

## Similar Brands

- **Linear** — Typeface Geist, nền tối tuyệt đối, màu nhấn đơn dành cho trạng thái active, hình dạng component zero-radius
- **Vercel** — Canvas đen thuần, hệ thống phân cấp type chỉ trắng, bảng màu trung tính đơn sắc với một điểm nhấn sống động, triết lý bề mặt phẳng
- **Rauno / Personal studios** — Một typeface duy nhất dùng trên mọi kích thước, bản sắc typographic là thiết kế thị giác chính, không có imagery trang trí
- **MSCHF** — Display type nén ở kích thước mạnh mẽ, component zero-radius brutalist, copy bất kính kết hợp với hệ thống thị giác kiềm chế
- **Resend** — Font Geist, nền đen thuần, hệ thống border #e5e7eb cho phần tử grid cấu trúc, bảng màu tối thiểu

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ember-signal: #ff4d00;
  --color-void: #000000;
  --color-chalk: #ffffff;
  --color-fog: #e5e7eb;
  --color-ash: #c4c4c4;
  --color-graphite: #757575;
  --color-carbon: #454545;
  --color-obsidian: #2e2e2;
  --color-cinder: #1a1a1a;
  --color-smudge: #666666;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.23;
  --tracking-heading-sm: -0.4px;
  --text-heading: 24px;
  --leading-heading: 1.07;
  --tracking-heading: -0.48px;
  --text-heading-lg: 38px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.14px;
  --text-display: 87px;
  --leading-display: 0.89;
  --tracking-display: -3.48px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-64: 64px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 128px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-badges: 0px;
  --radius-global: 0px — zero radius everywhere, no exceptions;
  --radius-inputs: 0px;
  --radius-buttons: 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ember-signal: #ff4d00;
  --color-void: #000000;
  --color-chalk: #ffffff;
  --color-fog: #e5e7eb;
  --color-ash: #c4c4c4;
  --color-graphite: #757575;
  --color-carbon: #454545;
  --color-obsidian: #2e2e2;
  --color-cinder: #1a1a1a;
  --color-smudge: #666666;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.23;
  --tracking-heading-sm: -0.4px;
  --text-heading: 24px;
  --leading-heading: 1.07;
  --tracking-heading: -0.48px;
  --text-heading-lg: 38px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.14px;
  --text-display: 87px;
  --leading-display: 0.89;
  --tracking-display: -3.48px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-64: 64px;
  --spacing-128: 128px;
}
```