# OpenWeb

> OpenWeb — Style Reference

## Prompt Content

```
# OpenWeb — Style Reference
> Editorial broadsheet trên nền giấy hồng ấm. Một canvas phớt hồng mang những headline serif khổng lồ và một điểm nhấn xanh điện duy nhất — toàn bộ trang đọc như một spread editorial in ấn được dựng lại trên màn hình, nơi trọng lượng chữ và khoảng trắng ấm áp thay thế cho panel, border và shadow.

**Theme:** light

OpenWeb mang phong cách một tờ broadsheet in trên giấy hồng ấm: một canvas phớt hồng duy nhất (#f1e9e7), chữ gần như đen tuyền trong một font serif chuyển tiếp sắc nét, và một màu xanh điện rực rỡ là điểm nhấn màu sắc duy nhất. Giao diện gần như hoàn toàn thuộc về typography — không có card shadow, không panel border, không divider trang trí — để những headline serif khổng lồ ở 70–90px với tracking âm cực mạnh làm toàn bộ công việc cấu trúc. Nút đen đặc và link xanh ghost là những dấu hiệu UI duy nhất; mọi thứ còn lại là khoảng trắng, ngắt dòng và tông màu giấy ấm. Tâm trạng mang tính văn chương và suy tư, không giống app; các trang gần với một spread tạp chí hơn là một SaaS dashboard.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Blush Paper | `#f1e9e7` | `--color-blush-paper` | Canvas trang, tất cả background section — nền tông hồng ấm tạo cảm giác in ấn, giấy cho toàn bộ site. Không bao giờ là trắng tinh, không bao giờ là xám lạnh |
| Carbon Ink | `#000000` | `--color-carbon-ink` | Text chính, nút đặc, tất cả iconography, form label, footer rules. Màu chủ đạo không phải canvas — điều khiển mọi yếu tố typographic và interactive |
| Bone White | `#ffffff` | `--color-bone-white` | Màu text bên trong nút đen đặc, bề mặt reverse-fill và contrast input form. Dùng tiết kiệm làm tông đối lập với Carbon Ink |
| Fossil Gray | `#7b7f83` | `--color-fossil-gray` | Muted helper text, secondary metadata, placeholder form nhẹ. Màu trung tính duy nhất làm mềm Carbon Ink cho copy không chính |
| Signal Blue | `#0058fe` | `--color-signal-blue` | Điểm nhấn xanh cho border action dạng outline, linked label và interactive emphasis nhẹ. |

## Tokens — Typography

### Copernicus — Copernicus mang toàn bộ giọng điệu — nó là một transitional serif tương phản cao với các terminal và serif sắc nhọn khiến kích thước display 70–90px mang cảm giác văn chương chứ không trang trí. Điểm nhấn đặc trưng là tracking âm mạnh: -0.092em ở 90px siết headline thành một khối chữ gần như đặc, trên nền hồng ấm đọc như một pull-quote editorial in ấn, không phải H1 SaaS. Body size (15–18px) ở tracking gần như bình thường, tạo sự căng thẳng giữa display chặt và running text thoáng — giống một spread tạp chí. · `--font-copernicus`
- **Thay thế:** Playfair Display (display), Lora (body), hoặc bất kỳ transitional serif tương phản cao nào — Source Serif Pro làm fallback miễn phí
- **Weights:** 400, 700
- **Kích thước:** 11, 14, 15, 16, 18, 25, 30, 40, 48, 60, 70, 80, 90
- **Line height:** 0.84, 1.00, 1.04, 1.05, 1.08, 1.10, 1.15, 1.17, 1.20, 1.21, 1.27, 1.28, 1.30
- **Letter spacing:** -0.092em ở 90px display, giảm dần xuống -0.047em ở 30px, -0.010em ở 16px body, 0em ở 14px trở xuống
- **OpenType features:** `"liga" on, "kern" on`
- **Vai trò:** Copernicus mang toàn bộ giọng điệu — nó là một transitional serif tương phản cao với các terminal và serif sắc nhọn khiến kích thước display 70–90px mang cảm giác văn chương chứ không trang trí. Điểm nhấn đặc trưng là tracking âm mạnh: -0.092em ở 90px siết headline thành một khối chữ gần như đặc, trên nền hồng ấm đọc như một pull-quote editorial in ấn, không phải H1 SaaS. Body size (15–18px) ở tracking gần như bình thường, tạo sự căng thẳng giữa display chặt và running text thoáng — giống một spread tạp chí.

### Helvetica — Sự hiện diện system-font còn sót lại — chỉ xuất hiện ở các vị trí tiện ích nhỏ (small label, icon-in-text). Không phải giọng điệu typographic; thực chất là lưới an toàn fallback. · `--font-helvetica`
- **Thay thế:** system-ui, -apple-system, Helvetica, Arial, sans-serif
- **Weights:** 400
- **Kích thước:** 15
- **Line height:** 1.50
- **Letter spacing:** 0.0070em
- **Vai trò:** Sự hiện diện system-font còn sót lại — chỉ xuất hiện ở các vị trí tiện ích nhỏ (small label, icon-in-text). Không phải giọng điệu typographic; thực chất là lưới an toàn fallback.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| nano | 11px | 1.3 | — | `--text-nano` |
| caption | 14px | 1.3 | — | `--text-caption` |
| body | 16px | 1.27 | -0.16px | `--text-body` |
| body-lg | 18px | 1.21 | -0.216px | `--text-body-lg` |
| subheading | 25px | 1.15 | -0.875px | `--text-subheading` |
| heading | 40px | 1.08 | -2px | `--text-heading` |
| heading-lg | 48px | 1.05 | -2.69px | `--text-heading-lg` |
| heading-xl | 60px | 1.04 | -3.78px | `--text-heading-xl` |
| display | 70px | 1 | -4.83px | `--text-display` |
| display-lg | 90px | 0.84 | -8.28px | `--text-display-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 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` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |
| 140 | 140px | `--spacing-140` |
| 188 | 188px | `--spacing-188` |
| 220 | 220px | `--spacing-220` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 0px |
| inputs | 0px |
| buttons | 0px |
| largeSurface | 40px |

### Layout

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

## Components

### Filled Black CTA Button
**Vai trò:** Bề mặt action chính — dùng cho 'Contact us' trong nav, 'Let's talk', 'Get In Touch'

Nền #000000 đặc, text #ffffff, Copernicus 15px italic 400, padding dọc 10–12px và padding ngang ~20px, border-radius 0px (góc vuông — các cạnh sắc là chủ ý, vang vọng serif terminal). Không shadow, không border, không hover lift; khi hover nền vẫn đen với hiệu ứng opacity nhẹ. Xử lý italic trên label tạo trọng lượng handwritten-editorial.

### Ghost Tab Selector
**Vai trò:** Toggle section active/inactive — xuất hiện trên contact form (Publisher / Advertiser)

Không background, không border, không box. Tab active là Copernicus ~40px italic màu #0058fe; tab inactive cùng kích thước và weight màu #000000. Một hairline divider rule phía trên ngăn cách tab row với form. Màu xanh italic báo hiệu selection qua màu sắc và độ nghiêng — không underline, không pill, không fill.

### Inline Link
**Vai trò:** Hyperlink trong văn bản (ví dụ 'legal@openweb.com')

Gạch chân màu #0058fe, nằm inline với body copy xung quanh ở 15–18px Copernicus 400. Màu sắc là yếu tố duy nhất phân biệt với body text — không bold, không thay đổi weight, không background highlight. Signal Blue được dành riêng cho vai trò này; body copy không bao giờ có màu xanh.

### Bottom-Border Text Input
**Vai trò:** Form field — Work Email, Job Title, message

Không background, không box bao quanh. Một border dưới 1px #000000 duy nhất xác định field. Label nằm trên input ở Copernicus 14–15px 400 #000000 với dấu hoa thị cho trường bắt buộc. Placeholder text màu #7b7f83 cùng kích thước. Focus state làm đậm border dưới lên ~2px hoặc chuyển sang #0058fe — không outline glow, không floating label animation.

### Radio Option Row
**Vai trò:** Tùy chọn form single-select dưới 'What Are You Interested In?'

Custom radio tròn: vòng ngoài 18px, border 1px #000000, fill #0058fe cho chấm tròn bên trong khi được chọn. Label nằm bên phải ở Copernicus 15px 400 #000000. Không background highlight trên row, không card wrapper — radio là đơn vị thị giác duy nhất.

### Navigation Bar
**Vai trò:** Site navigation đầu trang

Full-width Blush Paper background, không border, không shadow. Logo (OpenWeb wordmark + sunburst icon) căn trái màu #000000, nav items căn giữa/trái dưới dạng text Copernicus 14–15px với chevron dropdown, và Filled Black CTA Button căn phải. Cao ~60–72px, khoảng thở rộng rãi. Một hairline #000000 rule nằm dưới bar.

### Hairline Divider Rule
**Vai trò:** Separator cấu trúc giữa các section và trong footer

1px solid #000000, full-width hoặc content-width. Đường kẻ cấu trúc duy nhất trong hệ thống — thay thế cho border, card edge và section transition mà các hệ thống khác dùng shadow hoặc background.

### Isometric Phone Mockup
**Vai trò:** Product showcase — xuất hiện ở middle scroll section hiển thị comment thread

Device render chân thực (smartphone và laptop) được trình bày ở góc isometric 15–20°, nổi trên Blush Paper canvas không có cast shadow. Bản thân device chứa UI screenshot thực tế của sản phẩm comment OpenWeb. Border-radius ~40px trên khung device làm mềm hệ thống góc cạnh.

### Footer Column Block
**Vai trò:** Nhóm link cuối trang — Publishers, Advertisers, Resources, About

Bốn cột link text đều nhau ở Copernicus 14–15px 400 #000000, ngăn cách với body bằng hairline rule phía trên. Không heading, không icon, không styling social-link ngoài circular outlined badges đơn giản ở hàng phía trên. Footer nằm trên cùng Blush Paper canvas với phần còn lại của site.

### Social Link Badge
**Vai trò:** Icon LinkedIn và Threads trong footer

Circular outline nhỏ (~32px đường kính, border 1px #000000), icon căn giữa bên trong màu #000000. Không fill, không background — hình tròn chỉ được gợi ý bằng stroke.

## Do's and Don'ts

### Nên làm
- Đặt tất cả body và heading type trong Copernicus (hoặc transitional serif tương phản cao thay thế) ở các kích thước trong type scale — không bao giờ thay thế sans-serif cho running text.
- Dùng #f1e9e7 (Blush Paper) làm canvas cho mọi section; không đưa vào trắng, xám lạnh hoặc bất kỳ tông background nào khác.
- Dành #0058fe (Signal Blue) riêng cho active state, in-prose link và active tab — không bao giờ dùng cho fill, bề mặt lớn hoặc accent trang trí.
- Áp dụng tracking âm mạnh cho tất cả display size (≥40px): tối thiểu -0.047em, tăng dần lên -0.092em ở 90px. Body size (15–18px) giữ tracking gần như bằng không.
- Dùng Filled Black CTA Button (góc sắc 0px, label Copernicus italic) làm biến thể nút duy nhất; kết hợp với Inline Link pattern cho secondary action.
- Ngăn cách section và cấu trúc trang bằng hairline rule 1px #000000 thay vì border, shadow hoặc background tint.
- Căn giữa các khối editorial chính (hero, section heading, body paragraph) ở max-width 1200px với section gap rộng 80–120px.

### Không nên làm
- Không thêm drop shadow, glow hoặc bất kỳ box-shadow nào vào card, button hoặc element nổi — hệ thống flat theo thiết kế.
- Không dùng border-radius trên button, input, badge hoặc tag — giữ chúng ở 0px. Element bo tròn duy nhất là isometric device mockup 40px.
- Không đưa vào accent color thứ hai hoặc shade xanh thứ hai — Signal Blue là nốt màu sắc duy nhất trong hệ thống.
- Không đặt display type lớn trong bất cứ thứ gì ngoài Copernicus 400 với tracking âm — bold weight phá vỡ cảm giác editorial.
- Không dùng sans-serif cho body copy, nav items hoặc button label — serif là giọng điệu; sans-serif phá hỏng ảo giác broadsheet.
- Không bọc nội dung trong card với background, border hoặc padding block — để type nằm trực tiếp trên Blush Paper canvas.
- Không dùng #ffffff làm page hoặc section background — nó sẽ làm phẳng tông editorial ấm áp định hình thương hiệu.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Blush Paper | `#f1e9e7` | Page canvas — bề mặt nền duy nhất cho toàn bộ site |
| 2 | Carbon Ink | `#000000` | Bề mặt nút đặc và background text đảo ngược |
| 3 | Bone White | `#ffffff` | Element reverse-fill (button label, form field text) trên Carbon Ink |

## Elevation

Hệ thống cố tình tránh tất cả box-shadow và z-axis elevation. Chiều sâu được truyền đạt độc quyền qua Blush Paper canvas ấm áp với Carbon Ink type và một hairline rule duy nhất. Một nút đen đặc đọc như 'đã nhấn' thông qua color contrast đơn thuần, không qua drop shadow — một lựa chọn editorial có chủ ý giữ mọi trang trên một mặt phẳng typographic duy nhất.

## Imagery

Hình ảnh thưa thớt và tập trung vào sản phẩm: các yếu tố thị giác duy nhất là device render chân thực (smartphone và laptop) ở góc isometric 15–20°, nổi trên Blush Paper canvas không có cast shadow. Màn hình device chứa UI screenshot thực tế của sản phẩm comment OpenWeb với nội dung thật (article text, user comment, profile image). Không photography, không illustration, không abstract graphic, không decorative shape — OpenWeb sunburst logo là brand mark duy nhất và xuất hiện phẳng trong Carbon Ink. Mật độ thị giác tổng thể là text-dominant; hình ảnh chiếm khoảng 15–20% bất kỳ màn hình nào và chỉ tồn tại để trình diễn sản phẩm.

## Layout

Mô hình trang được căn giữa và giới hạn max-width ở ~1200px, với Blush Paper canvas kéo dài full-bleed phía sau. Hero là một vertical stack duy nhất: sunburst logo căn giữa, headline display 70–90px trên hai dòng, body paragraph 3–4 dòng ở 15–18px và Filled Black CTA Button — tất cả căn giữa, với khoảng thở dọc 40–60px giữa các element. Nhịp section là editorial một cột: mỗi khối tiếp theo là headline căn giữa + đoạn ngắn, thường bị ngắt bởi isometric device mockup full-bleed. Không có card grid, không multi-column feature block, không sidebar. Navigation là top bar phẳng với logo, bốn text link có dropdown chevron và CTA button đen căn phải. Footer là grid link text 4 cột ngăn cách với body bằng một hairline rule duy nhất.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #000000 (Carbon Ink)
- background: #f1e9e7 (Blush Paper)
- border: #000000 (chỉ hairline rules)
- accent: #0058fe (Signal Blue — link, active tab, radio dot)
- muted text: #7b7f83 (Fossil Gray)
- primary action: #000000 (filled action)

**Ví dụ Component Prompts**

1. *Hero block*: Canvas Blush Paper (#f1e9e7), sunburst logo căn giữa màu #000000, sau đó headline 70px Copernicus weight 400 màu #000000 với letter-spacing -4.83px trên hai dòng, tiếp theo là body paragraph 18px (line-height 1.21, letter-spacing -0.216px) màu #000000, sau đó Filled Black CTA Button (padding 10px 20px, radius 0px, italic 15px Copernicus #ffffff). Tất cả element căn giữa, gap dọc 40px giữa chúng, max-width 1200px.

2. *Ghost tab selector*: Hai tab label (Publisher, Advertiser) ở 40px Copernicus italic 400, tab active màu #0058fe, tab inactive màu #000000, ngăn cách với form bên dưới bằng hairline rule 1px #000000. Không background, không underline, không border trên bản thân tab.

3. *Bottom-border text input*: Label phía trên ở 14px Copernicus 400 #000000 với dấu hoa thị bắt buộc, sau đó input trong suốt với border dưới 1px #000000 duy nhất, placeholder text 15px Copernicus màu #7b7f83. Không box, không background, không góc bo tròn.

4. *Inline link trong body paragraph*: Một câu body 15–18px Copernicus màu #000000 với một từ duy nhất được bọc trong #0058fe gạch chân — màu sắc và gạch chân là yếu tố duy nhất phân biệt với text xung quanh.

5. *Isometric device mockup section*: Canvas Blush Paper, một smartphone chân thực render ở góc isometric 15°, nổi không shadow, màn hình hiển thị UI comment-thread thực tế, max-width 800px, căn giữa, với 80–120px Blush Paper trống phía trên và dưới.

## Similar Brands

- **The New Yorker (newyorker.com)** — Cùng cảm giác editorial-trên-giấy-ấm: canvas off-white ấm, headline serif tương phản cao lớn, khoảng trắng rộng rãi, không card UI và một muted accent color duy nhất dành riêng cho link và active state
- **Substack (onboarding và brand pages)** — Chung identity publisher-magazine — display type serif khổng lồ, editorial block căn giữa, hairline rule thay vì border và bảng màu gần như đơn sắc với một accent rực rỡ
- **Are.na** — Cùng triết lý kiềm chế — thiết kế typographic-first, canvas trung tính ấm, không shadow hoặc bề mặt trang trí và type dẫn dắt bằng serif coi trang như bề mặt đọc thay vì app
- **Notion (marketing site)** — Cùng minimalism với display headline lớn và một tông canvas ấm duy nhất, dù OpenWeb nghiêng về editorial-serif trong khi Notion dùng sans-serif

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-blush-paper: #f1e9e7;
  --color-carbon-ink: #000000;
  --color-bone-white: #ffffff;
  --color-fossil-gray: #7b7f83;
  --color-signal-blue: #0058fe;

  /* Typography — Font Families */
  --font-copernicus: 'Copernicus', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-nano: 11px;
  --leading-nano: 1.3;
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body: 16px;
  --leading-body: 1.27;
  --tracking-body: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.21;
  --tracking-body-lg: -0.216px;
  --text-subheading: 25px;
  --leading-subheading: 1.15;
  --tracking-subheading: -0.875px;
  --text-heading: 40px;
  --leading-heading: 1.08;
  --tracking-heading: -2px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -2.69px;
  --text-heading-xl: 60px;
  --leading-heading-xl: 1.04;
  --tracking-heading-xl: -3.78px;
  --text-display: 70px;
  --leading-display: 1;
  --tracking-display: -4.83px;
  --text-display-lg: 90px;
  --leading-display-lg: 0.84;
  --tracking-display-lg: -8.28px;

  /* 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-36: 36px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-188: 188px;
  --spacing-220: 220px;

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

  /* Border Radius */
  --radius-3xl: 40px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-inputs: 0px;
  --radius-buttons: 0px;
  --radius-largesurface: 40px;

  /* Surfaces */
  --surface-blush-paper: #f1e9e7;
  --surface-carbon-ink: #000000;
  --surface-bone-white: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-blush-paper: #f1e9e7;
  --color-carbon-ink: #000000;
  --color-bone-white: #ffffff;
  --color-fossil-gray: #7b7f83;
  --color-signal-blue: #0058fe;

  /* Typography */
  --font-copernicus: 'Copernicus', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-nano: 11px;
  --leading-nano: 1.3;
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body: 16px;
  --leading-body: 1.27;
  --tracking-body: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.21;
  --tracking-body-lg: -0.216px;
  --text-subheading: 25px;
  --leading-subheading: 1.15;
  --tracking-subheading: -0.875px;
  --text-heading: 40px;
  --leading-heading: 1.08;
  --tracking-heading: -2px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -2.69px;
  --text-heading-xl: 60px;
  --leading-heading-xl: 1.04;
  --tracking-heading-xl: -3.78px;
  --text-display: 70px;
  --leading-display: 1;
  --tracking-display: -4.83px;
  --text-display-lg: 90px;
  --leading-display-lg: 0.84;
  --tracking-display-lg: -8.28px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-188: 188px;
  --spacing-220: 220px;

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