# SuperHi Basic Income

> SuperHi Basic Income — Style Reference

## Prompt Content

```
# SuperHi Basic Income — Style Reference
> Cột tím đậm bên cạnh khung trắng rộng

**Theme:** light

SuperHi Basic Income là một hệ thống editorial hai màu: một cột tím điện cố định neo bên trái, và một khung trắng rộng với typography thoáng đãng cuộn bên phải. Bảng màu cực kỳ nhị phân — `#2727e6` và `#ffffff` — không có bóng đổ, gradient hay bề mặt phụ nào làm loãng thông điệp. Typography đảm nhận toàn bộ cá tính: Basis (một geometric sans) xử lý mọi vai trò chức năng, DDC (một display face nhân văn hơn) chỉ xuất hiện ở nơi cần chất riêng, và line height thoáng đãng (1.46–1.67 cho body text). Các component phẳng và được định hình bằng bo góc — pill tags với radius 50px, button bo tròn nhẹ 16px, một minh họa địa cầu chấm tròn là đồ họa duy nhất. Tinh thần là sự tự tin của poster chiến dịch: một màu nổi bật, không trang trí, và text làm tất cả công việc nặng nhọc.

## Tokens — Màu sắc

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Electric Iris | `#2727e6` | `--color-electric-iris` | Điểm nhấn tím cho viền action dạng outline, label có link, và nhấn mạnh tương tác nhẹ. Không nâng lên thành màu CTA chính |
| Paper White | `#ffffff` | `--color-paper-white` | Canvas nội dung bên phải, bề mặt card và elevated, text sidebar và minh họa trên panel tím |

## Tokens — Typography

### Basis Grotesque — Ngựa thồ — body, buttons, links, hầu hết heading, sidebar labels, và numbered list markers. Weight 500 dùng cho buttons và inline text được nhấn mạnh, 700 dành cho nhấn mạnh mạnh trong body copy. Tính trung lập hình học của nó để màu nhấn duy nhất lên tiếng. · `--font-basis-grotesque`
- **Thay thế:** Basis Grotesque (miễn phí, Indian Type Foundry) → Inter, Söhne, hoặc IBM Plex Sans
- **Weights:** 400, 500, 700
- **Cỡ chữ:** 13, 14, 16, 21, 24, 32, 48px
- **Line height:** 1.14–1.67
- **Letter spacing:** normal ở mọi cỡ
- **Vai trò:** Ngựa thồ — body, buttons, links, hầu hết heading, sidebar labels, và numbered list markers. Weight 500 dùng cho buttons và inline text được nhấn mạnh, 700 dành cho nhấn mạnh mạnh trong body copy. Tính trung lập hình học của nó để màu nhấn duy nhất lên tiếng.

### DDC — Một display face nhân văn hơn, dùng có chọn lọc cho một số heading cần giọng điệu mềm mại, bớt hình học. Line height chặt (1.00–1.14) là điểm nhận diện: DDC đảm nhận cả vai trò chữ và khối đồ họa. Thay thế bằng một humanist sans có cá tính mạnh hơn Basis — Söhne Breit, ABC Diatype Mono, hoặc Tiempos Headline ở weight thấp. · `--font-ddc`
- **Thay thế:** ABC Diatype, Söhne Breit, hoặc PP Neue Montreal
- **Weights:** 400
- **Cỡ chữ:** 21, 24px
- **Line height:** 1.00–1.14
- **Vai trò:** Một display face nhân văn hơn, dùng có chọn lọc cho một số heading cần giọng điệu mềm mại, bớt hình học. Line height chặt (1.00–1.14) là điểm nhận diện: DDC đảm nhận cả vai trò chữ và khối đồ họa. Thay thế bằng một humanist sans có cá tính mạnh hơn Basis — Söhne Breit, ABC Diatype Mono, hoặc Tiempos Headline ở weight thấp.

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|---------|-----|-------------|----------------|-------|
| caption | 13px | 1.46 | — | `--text-caption` |
| body | 16px | 1.67 | — | `--text-body` |
| subheading | 21px | 1.33 | — | `--text-subheading` |
| heading-sm | 24px | 1.25 | — | `--text-heading-sm` |
| heading | 32px | 1.17 | — | `--text-heading` |
| display | 48px | 1.14 | — | `--text-display` |

## Tokens — Spacing & Hình dạng

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

**Mật độ:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |

### Border Radius

| Element | Giá trị |
|---------|--------|
| tags | 50px |
| cards | 0px |
| buttons | 16px |

### Layout

- **Khoảng cách section:** 64px
- **Padding card:** 32px
- **Khoảng cách element:** 8-16px

## Components

### Fixed Violet Sidebar
**Vai trò:** Brand panel

Cột trái cố định full-height (~33% viewport width), nền `#2727e6`, chứa minh họa địa cầu chấm tròn căn giữa theo chiều dọc, brand wordmark 'SUPERHI BASIC INCOME' ở trên cùng dạng chữ hoa trắng, và status label 'APPLICATIONS CLOSED' ở dưới cùng — tất cả chữ trắng trên nền tím. Không có padding bên trong, nhưng các element căn chỉnh theo trục dọc trung tâm.

### Sidebar Wordmark
**Vai trò:** Brand label

Chữ hoa trắng trên nền `#2727e6`, Basis 14px weight 500, căn giữa ngang trong sidebar, với một đường kẻ ngang trắng 1px bên dưới làm divider. Nằm ở đầu sidebar.

### Sidebar Status Label
**Vai trò:** Chỉ báo trạng thái

Chữ hoa trắng trên nền `#2727e6`, Basis 14px weight 500, căn giữa ngang ở cuối sidebar, có các đường kẻ ngang trắng ngắn ở trước và sau — hoạt động như một con dấu 'đã đóng'.

### Dotted Globe Illustration
**Vai trò:** Yếu tố đồ họa duy nhất

Hình cầu ma trận chấm trắng trên sidebar `#2727e6`, chiếm ~60% chiều cao sidebar, căn giữa. Một số chấm trắng đặc lớn hơn rải rác trên bề mặt hình cầu đóng vai trò điểm đánh dấu vị trí. Không animation, không label — thuần texture.

### Display Heading
**Vai trò:** Mở đầu section

Basis 48px weight 400, `#2727e6`, line-height 1.14, letter-spacing chặt. Dùng cho câu hero ở cấp độ trang. Có thể dài 2–4 dòng, căn trái trong cột nội dung bên phải.

### Section Heading
**Vai trò:** Label section nội dung

Basis 32px weight 400, `#2727e6`, line-height 1.17, nằm ở cột phụ bên trái của vùng nội dung bên phải. Đóng vai trò 'tiêu đề' cho mỗi khối nội dung, kết hợp với body dài hơn ở cột phụ bên phải.

### Subheading (DDC variant)
**Vai trò:** Heading có cá tính

DDC 21–24px weight 400, `#2727e6`, line-height 1.00–1.14. Dành riêng cho những khoảnh khắc cần hơi ấm typographic — dùng tối đa 1–2 lần mỗi trang. Leading chặt khiến nó đọc gần như một khối hình.

### Body Text
**Vai trò:** Copy dài

Basis 16px weight 400, `#2727e6`, line-height 1.67 (thoáng nhất trong hệ thống). Khuyến khích đoạn văn dài — leading thoáng báo hiệu sự tự tin editorial thay vì mật độ UI.

### Underlined Inline Link
**Vai trò:** Text link

Basis 14–16px weight 500, `#2727e6`, với underline `#2727e6` 1px ở baseline. Không cần thay đổi hover state — toàn bộ hệ thống là tĩnh. Underline luôn hiện diện, không bao giờ bỏ khi hover.

### Outlined Action Button
**Vai trò:** Element tương tác chính

Nền trắng, viền `#2727e6` solid 1.5px, border-radius 16px, padding 8px 16px (hoặc 16px 32px cho phiên bản lớn hơn), Basis 14–16px weight 500, text `#2727e6`. Đây là button variant duy nhất — hệ thống không bao giờ dùng filled buttons. ACTION_BORDER=176 xác nhận đây là xử lý tương tác chính.

### Pill Tag / Status Pill
**Vai trò:** Label nhỏ gọn

Nền `#2727e6`, border-radius 50px (bo tròn hoàn toàn), chữ trắng, Basis 13px weight 500, padding 4px 8px. Dùng có chọn lọc cho inline metadata hoặc status label nhỏ.

### Numbered List Item
**Vai trò:** Danh sách có thứ tự

Mỗi item mở đầu bằng số tròn (① ② ③) màu `#2727e6`, tiếp theo là Basis 16px weight 500 text heading `#2727e6`, sau đó là mô tả Basis 16px weight 400 bên dưới. Khoảng cách giữa các item: 24px.

### Arrow Bullet List (FAQ)
**Vai trò:** Danh sách tiết lộ / câu hỏi

Mỗi item có tiền tố là marker hình tam giác chỉ phải (▸) màu `#2727e6`, text là Basis 16px weight 500 `#2727e6`, cách nhau theo chiều dọc 8px. Dùng cho danh sách câu hỏi kiểu FAQ.

### Two-Column Content Block
**Vai trò:** Layout primitive

Vùng nội dung bên phải được chia bên trong: cột phụ hẹp bên trái (~40%) chứa section heading bằng Basis 32px, cột phụ rộng bên phải (~60%) chứa body text và links. Khoảng cách cột là 32–48px. Mẫu hai cột lồng nhau này lặp lại dọc trang.

## Nên và Không nên

### Nên
- Chỉ dùng `#2727e6` và `#ffffff` — không bao giờ thêm màu thứ ba, gradient hay bóng đổ
- Đặt body line-height là 1.67 và display line-height là 1.14 — khoảng thở CHÍNH LÀ hệ thống typographic
- Làm sidebar trái thành panel `#2727e6` cố định full-height với địa cầu chấm tròn và sidebar text trắng; xem nó như bề mặt brand vĩnh viễn, không phải widget điều hướng
- Dùng outlined button (viền `#2727e6` 1.5px, radius 16px, fill trắng) làm action variant duy nhất — không bao giờ tạo filled button
- Dùng Basis cho mọi thứ chức năng và dành DDC cho 1–2 khoảnh khắc display mỗi trang nơi cần cá tính nhân văn
- Dùng radius 50px cho tags và 16px cho buttons — hệ thống radius hai giá trị là ngôn ngữ hình dạng hoàn chỉnh
- Gạch chân mọi link bằng đường kẻ `#2727e6` 1px ở baseline; không bao giờ bỏ underline khi hover vì hệ thống là tĩnh

### Không nên
- Không thêm màu thứ ba, xám trung tính nhạt cho secondary text, hay nền pha màu — mọi bề mặt không phải trắng phải là `#2727e6` hoặc trắng tinh
- Không thêm drop shadows, inner shadows, hay glow effects — hệ thống hoàn toàn phẳng và bất kỳ elevation nào cũng sẽ lạc lõng
- Không fill buttons với `#2727e6` — hệ thống chỉ dùng outline; một filled button sẽ phá vỡ sự kiềm chế editorial
- Không dùng DDC cho body text, buttons, hay UI chức năng — nó là display face cho tối đa 1–2 khoảnh khắc mỗi trang
- Không dùng border-radius ngoài 0, 16px và 50px — có đúng hai hình dạng bo tròn trong hệ thống và mọi thứ khác đều vuông
- Không phá vỡ layout split-screen bằng thanh điều hướng trên cùng, hamburger menu, hay sidebar collapse — cột tím là vĩnh viễn
- Không đặt body line-height dưới 1.46 hay display line-height trên 1.25 — nhịp display-chặt / body-lỏng định nghĩa giọng typographic

## Bề mặt

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Violet Column | `#2727e6` | Sidebar trái cố định full-height — bề mặt brand neo giữ layout |
| 1 | Paper Canvas | `#ffffff` | Vùng nội dung chính bên phải sidebar; nơi duy nhất body copy, links và headings tồn tại |

## Elevation

Không có bóng đổ. Hệ thống hoàn toàn phẳng — phân cấp thị giác đến từ tương phản hai màu, thang typographic và khoảng trắng rộng rãi, không bao giờ từ elevation. Bất kỳ bóng đổ nào cũng sẽ phá vỡ ẩn dụ broadsheet.

## Hình ảnh

Hầu như không có hình ảnh. Tài sản thị giác duy nhất là minh họa địa cầu chấm tròn vẽ tay bằng chấm trắng trên sidebar tím — một hình cầu ma trận chấm chiếm toàn bộ cột trái. Không photography, không product screenshots, không icon trang trí, không avatar. Nơi icon xuất hiện (checklist circles, arrow markers, circled numbers) chúng là ký tự Unicode typographic thuần túy màu `#2727e6`, không phải tài sản đồ họa. Trang áp đảo bởi text; địa cầu là dấu câu thị giác.

## Layout

Split-screen: sidebar trái cố định (~33% viewport width) luôn khóa trên màn hình với nền `#2727e6` đặc, trong khi ~67% bên phải cuộn độc lập như một canvas nội dung trắng. Trong canvas bên phải, nội dung được tổ chức thành lưới hai cột lồng nhau — cột phụ heading hẹp bên trái và cột phụ body rộng bên phải, cách nhau 32–48px. Các section chính (hero, 'Free money', 'Got a question?', 'Further reading') xếp chồng theo chiều dọc với khoảng cách 64px giữa chúng. Sidebar không bao giờ thay đổi — nó mang brand wordmark, minh họa địa cầu và status label từ trên xuống dưới. Điều hướng tối thiểu: không top bar, không hamburger, không breadcrumbs — sidebar CHÍNH LÀ điều hướng. Mật độ nội dung thoải mái: đoạn văn dài nhưng khoảng thở giữa các khối rộng rãi, tạo cho trang nhịp broadsheet editorial thay vì cảm giác UI sản phẩm dày đặc.

## Agent Prompt Guide

## Quick Color Reference
- text: #2727e6
- background: #ffffff
- sidebar / brand surface: #2727e6
- border (outlined actions, link underlines): #2727e6
- primary action: #2727e6 (outlined action border)

## Example Component Prompts
1. **Tạo một hero section**: Sidebar `#2727e6` cố định (~33% width) bên trái với minh họa địa cầu chấm tròn trắng căn giữa theo chiều dọc và wordmark 'SUPERHI BASIC INCOME' chữ hoa trắng ở trên cùng. Canvas trắng bên phải với display heading: Basis 48px weight 400, `#2727e6`, line-height 1.14. Subhead: Basis 21px weight 500, `#2727e6`, line-height 1.33.

2. **Tạo một outlined action button**: Fill trắng, viền `#2727e6` solid 1.5px, border-radius 16px, padding 8px 16px, Basis 14px weight 500, text `#2727e6`. Không hover state, không shadow. Đây là button variant duy nhất trong hệ thống.

3. **Tạo một pill tag**: Nền `#2727e6`, border-radius 50px, chữ trắng, Basis 13px weight 500, padding 4px 8px. Chỉ dùng cho inline label nhỏ gọn.

4. **Tạo một two-column content block**: Cột phụ trái (~40% width) với Basis 32px weight 400 heading `#2727e6`, line-height 1.17. Cột phụ phải (~60% width) với Basis 16px weight 400 body `#2727e6`, line-height 1.67. Khoảng cách 48px giữa các cột. Khoảng cách 64px giữa block này và block tiếp theo.

5. **Tạo một numbered list**: Mỗi item bắt đầu bằng số Unicode tròn (① ② ③) màu `#2727e6`, sau đó là dòng heading Basis 16px weight 500, sau đó là dòng mô tả Basis 16px weight 400. Khoảng cách dọc 24px giữa các item.

## Similar Brands

- **Stripe Press** — Cùng cách tiếp cận editorial broadsheet — canvas trắng, một màu nhấn, typography thoáng đãng, trang trí tối thiểu, text gánh toàn bộ trọng lượng thị giác
- **Substack** — Layout newsletter hai cột tương tự với cột brand trái cố định và vùng đọc nội dung trắng, cộng với sự kiềm chế bảng màu hai màu
- **Kickstarter campaign pages** — Cùng năng lượng poster chiến dịch một màu nhấn với layout phẳng, display text lớn, và nhấn mạnh vào đề xuất thay vì UI chrome
- **Mubi** — Kỷ luật một màu nhấn editorial với giọng typographic mạnh và không có hình ảnh trang trí ngoài một vài yếu tố đồ họa đặc trưng
- **Notion** — Sự đơn giản hai màu triệt để và bề mặt phẳng không bóng đổ; cả hai hệ thống chứng minh rằng một màu sắc cộng với trắng là đủ để mang một brand

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Màu sắc */
  --color-electric-iris: #2727e6;
  --color-paper-white: #ffffff;

  /* Typography — Font Families */
  --font-basis-grotesque: 'Basis Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ddc: 'DDC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.46;
  --text-body: 16px;
  --leading-body: 1.67;
  --text-subheading: 21px;
  --leading-subheading: 1.33;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --text-heading: 32px;
  --leading-heading: 1.17;
  --text-display: 48px;
  --leading-display: 1.14;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;

  /* Layout */
  --section-gap: 64px;
  --card-padding: 32px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-full: 50px;

  /* Named Radii */
  --radius-tags: 50px;
  --radius-cards: 0px;
  --radius-buttons: 16px;

  /* Bề mặt */
  --surface-violet-column: #2727e6;
  --surface-paper-canvas: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Màu sắc */
  --color-electric-iris: #2727e6;
  --color-paper-white: #ffffff;

  /* Typography */
  --font-basis-grotesque: 'Basis Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ddc: 'DDC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.46;
  --text-body: 16px;
  --leading-body: 1.67;
  --text-subheading: 21px;
  --leading-subheading: 1.33;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --text-heading: 32px;
  --leading-heading: 1.17;
  --text-display: 48px;
  --leading-display: 1.14;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-full: 50px;
}
```