# OpenAI

> # OpenAI — Style Reference

## Prompt Content

```
# OpenAI — Style Reference
> Trang trắng trước chữ đầu tiên — một thiết kế xem khoảng trắng là yếu tố mạnh nhất, dành toàn bộ màu sắc cho nội dung người dùng và nội dung biên tập.

**Theme:** light

OpenAI.com mang phong cách một trang giấy trắng đang chờ được viết lên — trắng tinh, độ bão hòa màu gần như bằng 0 (1%), và typography đảm nhận mọi trọng lượng thị giác. Font OpenAI Sans custom gánh toàn bộ sức nặng hình ảnh: tracking chặt ở -0.03em cho display text cỡ lớn, nó nén khoảng cách để headline có cảm giác được khắc chứ không phải được sắp chữ. Đen (#000000) và xám viền (#e5e7eb) là hai công cụ duy nhất; không có màu nhấn, không gradient trên core UI, không illustration trang trí. Màu sắc chỉ xuất hiện qua ảnh biên tập — macro hoa mềm mịn, card thumbnail gradient pastel — khiến những ảnh này bùng nổ trên nền trắng. Điểm căng thẳng đặc trưng là pill 9999px cho interactive chips và input nằm trong layout nơi card dùng radius rất đặc thù 6.08px, tạo ra một hệ thống kết hợp một độ bo tròn cực đoan với một bán kính gần như phẳng chính xác.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Void | `#000000` | `--color-void` | Primary text, nav labels, nền CTA button dạng filled, icon fills — neo màu duy nhất của toàn bộ hệ thống |
| Fog Border | `#e5e7eb` | `--color-fog-border` | Mọi đường kẻ chia, card outlines, input borders, nav underlines — vết đánh dấu nhẹ nhất có thể nhưng vẫn đọc được là dấu phân cách trên nền trắng |
| Chalk | `#f1f1f1` | `--color-chalk` | Nền button ở trạng thái hover, surface fill nhẹ — một bước xa khỏi trắng tinh mà không thêm hơi ấm |
| Graphite | `#666666` | `--color-graphite` | Body text phụ, icon strokes, secondary labels — tắt tiếng nhưng vẫn dễ đọc |
| Ash | `#8f8f8f` | `--color-ash` | Tertiary labels, trạng thái disabled, icon strokes mảnh |
| Canvas | `#ffffff` | `--color-canvas` | Nền trang, bề mặt card, mọi surface chính — trắng tuyệt đối, không pha ấm hay lạnh |

## Tokens — Typography

### OpenAI Sans — Font duy nhất cho toàn bộ site ở mọi ngữ cảnh — nav, body, headlines, buttons, inputs. Ở cỡ display 48px, letter-spacing khoảng -0.03em, khiến text cỡ lớn có cảm giác nén chặt và chính xác thay vì thoáng. Weight 600 cho headlines, 500 cho UI labels, 400 cho body. Các biến thể custom cung cấp tính năng 'calt' và 'liga' cho text composition. · `--font-openai-sans`
- **Thay thế:** Inter, DM Sans
- **Weights:** 400, 500, 600
- **Cỡ chữ:** 13px, 14px, 16px, 17px, 18px, 22px, 28px, 48px
- **Line height:** 1.00–1.65 (chặt hơn ở cỡ lớn ~1.16, thoáng hơn ở body ~1.50–1.65)
- **Letter spacing:** -0.03em ở cỡ display (48px), -0.01em ở cỡ trung bình, +0.011em ở cỡ nhỏ nhất (13px caps/tags)
- **OpenType features:** `"calt", "liga"`
- **Vai trò:** Font duy nhất cho toàn bộ site ở mọi ngữ cảnh — nav, body, headlines, buttons, inputs. Ở cỡ display 48px, letter-spacing khoảng -0.03em, khiến text cỡ lớn có cảm giác nén chặt và chính xác thay vì thoáng. Weight 600 cho headlines, 500 cho UI labels, 400 cho body. Các biến thể custom cung cấp tính năng 'calt' và 'liga' cho text composition.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|------|
| caption | 13px | 1.64 | — | `--text-caption` |
| heading | 22px | 1.26 | — | `--text-heading` |
| heading-lg | 28px | 1.21 | — | `--text-heading-lg` |
| display | 48px | 1.16 | -1.44px | `--text-display` |

## Tokens — Spacing & Shapes

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

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

### 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` |
| 52 | 52px | `--spacing-52` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 112 | 112px | `--spacing-112` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 6.08px |
| chips | 9999px |
| input | 9999px |
| links | 4px |
| buttons | 9999px |
| softButton | 40px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|------|
| sm | `rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) ...` | `--shadow-sm` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64-80px
- **Card padding:** 32px
- **Element gap:** 8-16px

## Components

### Primary Navigation Bar
**Vai trò:** Điều hướng cấp cao nhất của site

Nền trắng, cao 64px. Logo OpenAI căn trái. Nav links dùng OpenAI Sans 14px weight 500, #000000, không gạch chân, border-radius bằng 0. Button 'Log in' dạng ghost với viền rgba(0,0,0,0.12), radius 9999px, padding ngang 12px. Button 'Try ChatGPT' dạng filled pill: nền #000000, text #ffffff, radius 9999px, padding ngang 12px. Icon search bên phải nav links. Không có sticky shadow — chỉ có viền dưới #e5e7eb khi cuộn.

### Filled Pill CTA Button
**Vai trò:** Call-to-action chính

Nền #000000, text #ffffff, OpenAI Sans 14px weight 500, border-radius 9999px, padding dọc 10px, padding ngang 16px. Chỉ báo external link (icon mũi tên) nằm cùng dòng với label. Box-shadow: rgba(0,0,0,0.02) 0px 4px 6px, rgba(0,0,0,0.05) 0px 0px 2px — độ nâng gần như vô hình.

### Ghost Pill Button
**Vai trò:** Secondary actions, navigation chips

Nền trong suốt, text #000000, viền rgba(0,0,0,0.12), radius 9999px, padding dọc 10px, padding ngang 12px. Trạng thái hover chuyển nền sang #f1f1f1.

### Soft Rounded Button
**Vai trò:** Feature category chips (Search with ChatGPT, Talk with ChatGPT, Sora)

Nền rgba(0,0,0,0.04), text #000000, OpenAI Sans 14px weight 500, border-radius 40px, padding dọc 8px, padding ngang 16px. Các item trong nhóm được phân cách bằng viền #e5e7eb.

### Conversational Input
**Vai trò:** Trường nhập prompt kiểu ChatGPT

Nền trong suốt, text #000000, viền #e5e7eb, border-radius 9999px, padding dọc 10px, padding phải 24px, padding trái 52px (bù icon). Placeholder text màu #666666. Button submit mũi tên ở góc dưới bên phải. Full-width trong container căn giữa max ~640px.

### Editorial News Card
**Vai trò:** Thumbnail bài viết trong lưới tin tức/câu chuyện

Nền trong suốt, border-radius 6.08px, không box-shadow, padding 0px. Ảnh thumbnail full-bleed phía trên với radius 6.08px clipping. Bên dưới: category label dùng OpenAI Sans 13px weight 500 #666666 với letter-spacing +0.011em, headline cỡ 18-22px weight 600 #000000, read-time cỡ 13px weight 400 #666666. Không có card border — ảnh và type nổi trên nền trắng.

### Image Overlay Badge
**Vai trò:** Tên model hoặc sản phẩm hiển thị trên hero images

Nền #ffffff, border-radius 9999px (rất lớn ~24px cho badge dễ đọc). Text dùng OpenAI Sans weight 600 — phần đậm màu #000000, phần biến đổi màu #666666. Xuất hiện căn giữa trên hero image biên tập với shadow nhẹ: rgba(0,0,0,0.05) 0px 2px 4px.

### Nav Text Link
**Vai trò:** Mục điều hướng cấp cao nhất

Nền trong suốt, text #000000, OpenAI Sans 14px weight 500, borderRadius 0px, không padding. Trạng thái hover thêm gạch chân. Không border. Trạng thái active không được chỉ định — có thể thay đổi độ dày gạch chân.

### Inline Text Link
**Vai trò:** Hyperlink trong body copy và hành động 'View more'

Text #000000, OpenAI Sans 16px weight 400, border-radius 4px trên focus ring. Gạch chân khi hover. Không có màu nền. 'View more' không gạch chân ở trạng thái nghỉ, gạch chân khi hover.

### Category Label Badge
**Vai trò:** Tag phân loại nội dung (Product, Company, Research)

Không nền, không border. OpenAI Sans 13px weight 500, letter-spacing +0.011em, màu #666666. Dạng uppercase hoặc title-case. Đặt inline trước read-time, phân cách bằng middot hoặc khoảng trắng.

### Footer Column Block
**Vai trò:** Điều hướng footer site

Nền trắng, full-width. Column headers dùng OpenAI Sans 13px weight 600 #000000, letter-spacing +0.011em. Links dùng 13px weight 400 #666666. Row gap 8px giữa các link. Column gap 64px giữa các nhóm. Top border #e5e7eb 1px.

## Do's and Don'ts

### Do
- Chỉ dùng #000000 làm màu nền cho filled button — không có CTA màu
- Áp dụng border-radius 9999px cho mọi pill buttons, ghost buttons và conversational input field
- Dùng border-radius 6.08px cho mọi card element chứa ảnh và thumbnail clips
- Đặt display headlines (48px) với letter-spacing -0.03em; bỏ qua tracking overrides dưới 22px trừ khi dùng caps labels
- Dùng #e5e7eb làm màu border/divider duy nhất — không bao giờ làm tối hay pha màu
- Chỉ đưa màu sắc vào qua photography hoặc editorial imagery — không bao giờ qua UI backgrounds hoặc button fills
- Duy trì vertical gap tối thiểu 64px giữa các page section

### Don't
- Không dùng bất kỳ màu nhấn nào (xanh dương, xanh lá, cam) trên interactive elements hoặc backgrounds
- Không áp dụng box-shadows cho cards — sự phân cách đến từ whitespace, không phải từ độ sâu
- Không trộn lẫn giá trị border-radius giữa ngữ cảnh pill (9999px) và card (6.08px) — sự tương phản là có chủ đích và các giá trị phải chính xác
- Không dùng weight dưới 400 hoặc trên 600 trong OpenAI Sans — bộ ba 400/500/600 định nghĩa toàn bộ hệ thống phân cấp typographic
- Không dùng màu nền trên section blocks — trang luôn trắng #ffffff từ đầu đến cuối
- Không thêm letter-spacing ở cỡ body (16-18px) — tracking chỉ dùng cho display (âm) và caps labels (dương +0.011em)
- Không dùng quá hai màu typographic: #000000 cho primary và #666666 cho secondary — #8f8f88 chỉ dành cho disabled/tertiary

## Elevation

Elevation gần như không tồn tại. Shadow duy nhất trong hệ thống — rgba(0,0,0,0.02) 0px 4px 6px, rgba(0,0,0,0.05) 0px 0px 2px — xuất hiện trên CTA button và mờ đến mức đọc như một artifact in ấn hơn là chiều sâu. Cards không có shadow; sự phân cách đến từ whitespace và bán kính clip ảnh 6.08px, không phải từ shadow stacking. Đây là triết lý bề mặt phẳng nơi trục z được truyền đạt qua độ mờ và khoảng cách không gian, không phải shadow.

## Imagery

Editorial photography là nguồn màu sắc duy nhất trên trang — ảnh macro hoa mềm mịn với tông cam/hồng ấm, tile gradient trừu tượng pastel cho sidebar cards với tông xanh dương/tím/teal. Những ảnh này nằm trong tile bo góc 6.08px, không bao giờ full-bleed trên trang. Không có lifestyle photography, không người, không UI screenshots trong news cards. Màu sắc trong ảnh có cảm giác có chủ đích và được tuyển chọn — luôn mềm mại, luôn gần với gradient, không bao giờ gắt hay literal. Icons là đơn sắc: outlined/filled với #000000 hoặc #666666, stroke weight rõ ràng 1.5px. Mật độ ảnh thấp — ảnh chỉ xuất hiện trong editorial card grids, để lại khoảng trắng rộng lớn trên trang.

## Layout

Layout căn giữa max-width (~1200px) trên nền canvas trắng tinh. Hero section là minimal-centered: headline 48px căn giữa ngang, input box căn giữa bên dưới, chip buttons căn giữa bên dưới nữa — không có hero image, không background treatment. Bên dưới hero: editorial grid hai cột bất đối xứng (card featured lớn bên trái ~60% chiều rộng, chồng card nhỏ hơn theo chiều dọc bên phải ~35%). Các section tiếp theo dùng stacking từ trên xuống dưới nhất quán với section gaps 64-80px. Navigation là fixed top bar cao 64px, logo bên trái, links giữa-trái, CTAs bên phải. Footer là lưới link nhiều cột. Không có band tối/sáng xen kẽ — toàn bộ trang trắng với nội dung là điểm khác biệt thị giác duy nhất.

## Agent Prompt Guide

**Quick Color Reference**
- Text primary: #000000
- Text secondary: #666666
- Page background: #ffffff
- Mọi borders/dividers: #e5e7eb
- Button hover surface: #f1f1f1
- CTA button fill: #000000 (text: #ffffff)

**Example Component Prompts**

1. **Hero Section**: Nền trắng tinh. Headline căn giữa: OpenAI Sans 48px weight 600, #000000, letter-spacing -1.44px. Conversational input bên dưới với max-width 640px: nền trong suốt, viền #e5e7eb 1px, radius 9999px, padding 10px/52px/10px/24px (trên/trái/dưới/phải), placeholder text #666666. Bên dưới input: hàng chip buttons với radius 40px, nền rgba(0,0,0,0.04), text #000000, padding 8px/16px, OpenAI Sans 14px weight 500.

2. **News Card Grid**: Layout hai cột bất đối xứng. Card trái (60% chiều rộng): ảnh full-width với radius 6.08px, bên dưới: category label OpenAI Sans 13px weight 500 #666666 letter-spacing +0.143px, headline 28px weight 600 #000000, read-time 13px weight 400 #666666. Cột phải: hai card xếp chồng, ảnh full-width radius 6.08px, cùng pattern label/headline/readtime với headline 18px. Không borders, không shadows trên cards.

3. **Navigation Bar**: Cao 64px, nền trắng, bottom border #e5e7eb 1px. Trái: OpenAI wordmark. Giữa-trái: nav links OpenAI Sans 14px weight 500 #000000, horizontal gap 24px. Phải: button 'Log in' (nền trong suốt, viền rgba(0,0,0,0.12), radius 9999px, padding ngang 12px) + button 'Try ChatGPT' (nền #000000, text trắng, radius 9999px, padding dọc 10px / ngang 16px, icon mũi tên bên phải).

4. **Category Label + Read Time Inline**: OpenAI Sans 13px weight 500, #666666, letter-spacing +0.143px. Định dạng: 'Product · 16 min read' — category nối vào dấu chấm giữa rồi đến read time, tất cả cùng màu và cỡ chữ, không nền.

5. **Footer**: Nền trắng, top border #e5e7eb 1px. Column headers OpenAI Sans 13px weight 600 #000000 letter-spacing +0.143px. Links 13px weight 400 #666666, row-gap 8px. Các cột cách nhau 64px gap.

## Color Through Content

UI của OpenAI.com cố tình không màu (achromatic) — 1% độ đậm màu trên toàn bộ token set. Màu sắc hoàn toàn thuộc về editorial: macro photography mềm mịn (cam, hồng, san hô), và gradient thumbnail tiles (xanh dương-tím, teal-oải hương) chỉ xuất hiện bên trong image containers với radius 6.08px. Điều này có nghĩa bất kỳ page section mới nào cần sự khác biệt thị giác phải làm điều đó qua thay đổi kích thước/weight typography, biến thể whitespace, hoặc lựa chọn ảnh — không bao giờ qua background color blocks hoặc UI accent colors. Thêm dù chỉ một CTA xanh dương nhạt cũng sẽ phá vỡ ràng buộc định hình của hệ thống.

## Radius Philosophy

Hai bán kính định nghĩa toàn bộ hệ thống hình dạng: 9999px (pill) và 6.08px (gần vuông). Không có giá trị trung gian. Pills xuất hiện trên mọi interactive affordances: buttons, chips, input fields. Radius 6.08px xuất hiện trên mọi image containers và card clips — nó đủ chính xác để gợi ý sự có chủ đích (không phải 8px chung chung) nhưng đủ phẳng để đọc như gần như hình chữ nhật. Biến thể 40px trên soft-chip buttons là dạng chuyển tiếp — bo tròn hơn cards nhưng không phải full pill — chỉ dùng cho feature-mode selector chips. Không đưa radius 12px, 16px, hoặc 24px vào các component mới.

## Similar Brands

- **Anthropic** — Cùng bảng màu UI không màu với toàn bộ màu sắc dồn cho editorial imagery, cách tiếp cận pill-button giống hệt trên CTAs
- **Linear** — Hệ thống một typeface nơi biến thể weight đảm nhận toàn bộ hệ thống phân cấp, gần như không dùng màu nền
- **Notion** — Canvas trắng chủ đạo với đen là điểm nhấn duy nhất, conversational input là hero element, cách tiếp cận card phẳng chỉ với radius để phân biệt
- **Arc Browser (The Browser Company)** — Custom typeface làm toàn bộ công việc thương hiệu trên nền trắng, imagery là biểu hiện màu sắc duy nhất trong UI không màu
- **Perplexity AI** — Conversational prompt căn giữa làm hero layout, chip buttons dạng pill-border để chuyển chế độ, hệ thống nav đơn sắc

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void: #000000;
  --color-fog-border: #e5e7eb;
  --color-chalk: #f1f1f1;
  --color-graphite: #666666;
  --color-ash: #8f8f8f;
  --color-canvas: #ffffff;

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

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.64;
  --text-heading: 22px;
  --leading-heading: 1.26;
  --text-heading-lg: 28px;
  --leading-heading-lg: 1.21;
  --text-display: 48px;
  --leading-display: 1.16;
  --tracking-display: -1.44px;

  /* 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-32: 32px;
  --spacing-40: 40px;
  --spacing-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64-80px;
  --card-padding: 32px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-md-2: 6.08px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 6.08px;
  --radius-chips: 9999px;
  --radius-input: 9999px;
  --radius-links: 4px;
  --radius-buttons: 9999px;
  --radius-softbutton: 40px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #000000;
  --color-fog-border: #e5e7eb;
  --color-chalk: #f1f1f1;
  --color-graphite: #666666;
  --color-ash: #8f8f8f;
  --color-canvas: #ffffff;

  /* Typography */
  --font-openai-sans: 'OpenAI Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.64;
  --text-heading: 22px;
  --leading-heading: 1.26;
  --text-heading-lg: 28px;
  --leading-heading-lg: 1.21;
  --text-display: 48px;
  --leading-display: 1.16;
  --tracking-display: -1.44px;

  /* 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-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-md-2: 6.08px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px;
}
```