# OFF WHITE > OFF WHITE — Style Reference ## Prompt Content ``` # OFF WHITE — Style Reference > Khối typography glitch trên nền đen nửa đêm — một bức tường chữ xanh pixel, nơi ảnh chân dung một khuôn mặt người được ép vào khoảng trống giữa các chữ cái hoành tráng, trên nền đen tuyệt đối. **Theme:** dark Đây là một trải nghiệm editorial mang tính khái niệm, không phải product UI — hệ thống thị giác vũ khí hóa các thái cực nhị phân (canvas đen thuần, chữ trắng thuần) và ba điểm nhấn màu sắc rực rỡ (xanh điện, đỏ báo động, vàng hi-vis) để hiện thực hóa chủ đề 'vùng xám giữa đen và trắng' của trang web. Typography được phân cực có chủ đích: một custom display face blocky được scale lên 180–500px đóng vai trò kiến trúc, trong khi serif Times 16px thông thường thì thầm bên cạnh như một chú thích editorial. Layout theo hướng collage thay vì grid cứng nhắc — ảnh chân dung chồng lên display type, tràn ra ngoài khung, và xếp chồng rải rác bất quy tắc, tạo cảm giác zine/protest-poster, từ chối các pattern product UI thông thường. Khoảng cách dọc rộng rãi (60–120px) nhưng ngang thì dày đặc và hỗn loạn, không có max-width container nào giới hạn canvas. Custom display face 'Offwhite' là tài sản quan trọng nhất trong hệ thống: hình học blocky lấy cảm hứng từ pixel biến mỗi chữ cái thành một vật thể điêu khắc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Voltage Green | `#00fb34` | `--color-voltage-green` | Màu hành động xanh cho filled buttons, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi có focus | | Alarm Red | `#ff0000` | `--color-alarm-red` | Viền khung, stroke trang trí, divider section — màu border được dùng nhiều nhất trong hệ thống. Borders tổng cộng 44 lần so với chỉ 12 lần background, nghĩa là đỏ được đọc như một khung hình chữ nhật cứng hoặc đường viền cảnh báo, không phải surface fill | | Caution Yellow | `#fff500` | `--color-caution-yellow` | Điểm nhấn outline vàng cho tags, divider, và cạnh UI có focus | | Absolute Black | `#000000` | `--color-absolute-black` | Page canvas, viền photo tile (104 image borders), tất cả màu chữ. Màu xuất hiện nhiều nhất trong hệ thống (3357 lần) — mọi thứ khác nổi trên nó | | Pure White | `#ffffff` | `--color-pure-white` | Hairline borders, divider, input outlines, và cạnh card trên surface sáng | | Ashen Gray | `#aba4a4` | `--color-ashen-gray` | Border tương phản trung bình, control outlines, và separator cấu trúc | ## Tokens — Typography ### Offwhite — Display face và heading duy nhất, cũng dùng cho buttons và links. Hình học blocky lấy cảm hứng từ pixel của custom face này là tài sản quan trọng nhất của thương hiệu — ở 180–500px mỗi chữ cái trở thành một vật thể điêu khắc mà ảnh có thể lồng vào. Weights 600/700 dành riêng cho display-scale; 400 dùng cho inline link và button. · `--font-offwhite` - **Thay thế:** Druk Wide Bold, VT323 (cho pixel-mood ở kích thước nhỏ), hoặc một display sans blocky custom - **Weights:** 400, 600, 700 - **Kích thước:** 11, 18, 20, 36, 38, 42, 48, 56, 72, 96, 180, 500 - **Line height:** 1.00–1.56 (tight 1.00–1.10 cho display, 1.25–1.56 cho inline) - **Vai trò:** Display face và heading duy nhất, cũng dùng cho buttons và links. Hình học blocky lấy cảm hứng từ pixel của custom face này là tài sản quan trọng nhất của thương hiệu — ở 180–500px mỗi chữ cái trở thành một vật thể điêu khắc mà ảnh có thể lồng vào. Weights 600/700 dành riêng cho display-scale; 400 dùng cho inline link và button. ### Times — Body face duy nhất. Sự va chạm có chủ đích giữa một serif thông thường và display face blocky cấp tiến là một cử chỉ editorial cốt lõi — Times đọc như chú thích nhẹ nhàng, đối lập với tiếng hét của Offwhite. Body text luôn là 16px, luôn là Times, luôn là 1.20 leading. · `--font-times` - **Thay thế:** Source Serif Pro, PT Serif, hoặc system 'Times New Roman' - **Weights:** 400 - **Kích thước:** 16 - **Line height:** 1.20 - **Vai trò:** Body face duy nhất. Sự va chạm có chủ đích giữa một serif thông thường và display face blocky cấp tiến là một cử chỉ editorial cốt lõi — Times đọc như chú thích nhẹ nhàng, đối lập với tiếng hét của Offwhite. Body text luôn là 16px, luôn là Times, luôn là 1.20 leading. ### Arial — Dùng utility hiếm cho nhãn button nhỏ và meta text nơi Times có vẻ quá 'editorial.' Dùng tiết kiệm (freq=6) — chỉ khi functional UI cần một giọng nói trung tính. · `--font-arial` - **Thay thế:** Helvetica, Inter, system-ui - **Weights:** 400 - **Kích thước:** 13 - **Line height:** 1.20 - **Vai trò:** Dùng utility hiếm cho nhãn button nhỏ và meta text nơi Times có vẻ quá 'editorial.' Dùng tiết kiệm (freq=6) — chỉ khi functional UI cần một giọng nói trung tính. ### Type Scale | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |---------|------------|-------------|----------------|-------| | caption | 11px | 1.2 | — | `--text-caption` | | body | 16px | 1.2 | — | `--text-body` | | subheading | 18px | 1.3 | — | `--text-subheading` | | body-lg | 20px | 1.31 | — | `--text-body-lg` | | heading-sm | 36px | 1.25 | — | `--text-heading-sm` | | heading-lg | 48px | 1.15 | — | `--text-heading-lg` | | display | 72px | 1.1 | — | `--text-display` | | display-lg | 96px | 1 | — | `--text-display-lg` | | hero | 180px | 1 | — | `--text-hero` | | monumental | 500px | 1 | — | `--text-monumental` | ## Tokens — Spacing & Shapes **Base unit:** 6px **Density:** spacious ### Spacing Scale | Tên | Giá trị | Token | |-----|---------|-------| | 40 | 40px | `--spacing-40` | | 60 | 60px | `--spacing-60` | | 90 | 90px | `--spacing-90` | | 120 | 120px | `--spacing-120` | ### Border Radius | Element | Giá trị | |---------|---------| | links | 30px | | images | 0px | | buttons | 30px | | surfaces | 0px | | display-type | 0px | ### Layout - **Section gap:** 60-120px - **Card padding:** 40px - **Element gap:** 40px ## Components ### Monumental Display Letterform **Vai trò:** Hero scale typography Custom Offwhite face ở 180–500px, line-height 1.00, weight 600 hoặc 700, màu #00fb34 trên #000000. Mỗi chữ cái là một vật thể điêu khắc gần bằng kích thước cửa sổ với hình học blocky lấy cảm hứng từ pixel. Các chữ cái đan xen và chồng lên nhau theo chiều ngang để tạo thành một từ ghép duy nhất, với ảnh chân dung được ép vào khoảng trống giữa các nét chữ. ### Portrait Photo Tile **Vai trò:** Hình ảnh editorial rải rác Ảnh chữ nhật sắc cạnh (0px radius) của một chủ thể người duy nhất trong ánh sáng cinematic dark-moody. Ở nhiều tỷ lệ khác nhau (khoảng 120–280px rộng), xoay nhẹ trong một số trường hợp, không có padding hoặc khung bên trong. Luôn được xếp lớp trên #000000 không có drop shadow — chiều sâu đến từ z-stacking, không phải blur. ### Photo Collage Field **Vai trò:** Bố cục nền hero Sự rải rác bất quy tắc của 12–20 Portrait Photo Tiles lấp đầy khoảng trống giữa các Monumental Display Letterforms. Không có cột grid cố định — tiles được đặt để làm nổi bật hình học chữ cái, với mắt và khuôn mặt được đặt có chủ đích tại các giao điểm chữ. ### Editorial Body Passage **Vai trò:** Chú thích tường thuật Times 16px / 1.20 line-height, màu #fff500 (Caution Yellow) trên #000000. Body text luôn là 16px, không bao giờ lớn hơn hoặc nhỏ hơn, và sự tương phản serif/grotesk với Offwhite display face là toàn bộ ý đồ. Có thể chạy ngang hoặc xoay 90° dọc qua collage. ### Caution Yellow Hamburger Icon **Vai trò:** Trigger navigation Ba thanh ngang ngắn màu #fff500 (Caution Yellow), stroke weight 2px, đặt ở góc trên bên phải. Navigation UI duy nhất hiển thị — một sự xâm nhập tối thiểu vào bố cục editorial. ### Red Frame Border **Vai trò:** Delimiter section / khung cảnh báo Đường viền chữ nhật cứng màu #ff0000 (Alarm Red), stroke 1–4px, góc nhọn 0px. Bao quanh một section, một ảnh đơn lẻ, hoặc một đoạn body passage để báo hiệu 'đây là cảnh báo / đây là tuyên bố được đóng khung.' Background vẫn là #000000 bên trong khung. ### Filled Action Button **Vai trò:** Primary CTA Offwhite face, 13px Arial hoặc 18px Offwhite, weight 400, màu #000000 trên nền #00fb34 (Voltage Green) fill, border-radius 30px, padding 12px 24px. Radius 30px là cạnh mềm duy nhất trong hệ thống — mọi element khác đều sắc cạnh. ### Yellow Inline Link **Vai trò:** Navigation trong văn bản Offwhite 18px / 1.30, màu #fff500, không gạch chân mặc định, gạch chân khi hover. Border-radius 30px nếu nó trở thành tag hình pill. Nằm bên trong Editorial Body Passages như một điểm nhấn vàng nhẹ nhàng. ### Inverted White Text Block **Vai trò:** Đoạn văn bản đối cực Times 16px / 1.20, màu #000000 trên #ffffff, không có padding border. Dùng cho các đoạn văn cần được đọc như 'thái cực kia' của nhị phân đen/trắng — một panel trắng theo nghĩa đen phá vỡ canvas đen. ### Vertical Text Column **Vai trò:** Xương sống bố cục Cùng Times 16px body type, xoay 90° (đọc từ dưới lên trên), xuyên dọc qua photo collage. Hoạt động như một sợi dây thị giác kết nối phần trên và dưới của bố cục trang. ## Do's and Don'ts ### Do - Scale Offwhite display face lên 180–500px cho hero letterforms và giữ line-height 1.00 — tính hoành tráng là toàn bộ ý đồ - Dùng border-radius 30px độc quyền cho buttons và links; mọi thứ khác (display type, images, frames, surfaces) giữ cạnh sắc 0px - Xếp lớp Portrait Photo Tiles phía sau và giữa display type, không bao giờ trong grid module sạch sẽ — sự hỗn loạn là bố cục - Giữ body copy ở Times 16px / 1.20 line-height màu #fff500 — sự va chạm serif/grotesk với Offwhite blocky là cử chỉ editorial đặc trưng - Duy trì #000000 làm màu canvas duy nhất trên mọi section, bao gồm cả chuyển tiếp giữa các section — không có dải sáng - Dùng #00fb34 làm màu hành động filled duy nhất, và để ánh neon của nó mang tầm nhìn CTA trên canvas đen ### Don't - Không áp dụng box-shadows, drop-shadows, hoặc gradients ở bất cứ đâu — chiều sâu phải đến từ z-stacking và tương phản màu sắc - Không bo tròn góc ảnh hoặc cạnh display type; hình học blocky 0px là thứ mang lại cho hệ thống bản sắc protest-poster - Không giới thiệu màu nhấn mới ngoài bốn màu neo (#000000, #ffffff, #00fb34, #ff0000, #fff500) — vốn từ vựng màu sắc được thu hẹp có chủ đích - Không giới hạn layout bằng max-width container; để display type và ảnh tràn ra mép viewport - Không đặt Offwhite display face dưới 36px — ở kích thước nhỏ, nó mất đi tính hoành tráng blocky và đọc như một bold sans chung chung - Không xếp body copy trong các cột centered thông thường — thả nổi nó qua collage, bao gồm cả các đoạn chạy dọc xoay 90° - Không dùng background sáng, ngay cả cho cards hoặc panels, trừ khi cố tình tạo một đoạn 'cực trắng' nhị phân với chữ #000000 ## Surfaces | Level | Tên | Giá trị | Mục đích | |-------|-----|---------|----------| | 0 | Midnight Canvas | `#000000` | Full-bleed page background, tất cả sections | | 1 | Inverse Panel | `#ffffff` | Khối đảo ngược trắng-trên-đen hiếm, cạnh photo card | | 2 | Alert Frame | `#ff0000` | Khung border chữ nhật, alert outlines | | 3 | Neon Type Field | `#00fb34` | Display type fills, action backgrounds | | 4 | Caution Highlight | `#fff500` | Editorial body text, link color, icon color | ## Elevation Phẳng theo quy tắc tuyệt đối. Chiều sâu được tạo ra độc quyền thông qua xếp lớp z-index, tương phản màu sắc và chồng ảnh — không bao giờ qua box-shadow, blur, hoặc gradient. Hình học blocky của Offwhite display face và các photo tile rải rác là những tín hiệu chiều sâu duy nhất; bất kỳ soft shadow nào cũng sẽ làm tan biến sự căng thẳng protest-poster mà hệ thống được xây dựng trên đó. ## Imagery Ngôn ngữ thị giác là chân dung cinematic một chủ thể: cắt sát vào khuôn mặt của một người đàn ông Da đen (mắt, hàm, góc nghiêng ba phần tư, toàn mặt), được chiếu sáng với key light tương phản cao dark-moody, khử bão hòa ngoại trừ tông màu da, đặt trên nền tối mờ sâu. Xử lý là sắc cạnh, không bao giờ bo tròn hoặc mask; ảnh được xoay nhẹ và xếp lớp với các cạnh chữ nhật cứng thay vì feathered. Không có bối cảnh lifestyle, không có product photography, không có illustration — khuôn mặt người LÀ nội dung hero. Mật độ cao: 12–20 portrait tiles lấp đầy viewport ở bất kỳ vị trí scroll nào, cố tình làm choáng mắt. Vai trò là bầu không khí tường thuật, không phải trang trí hoặc giải thích — những bức chân dung thể hiện chủ đề 'vùng xám giữa đen và trắng' của trang web thông qua sự hiện diện của con người. ## Layout Full-bleed, không có max-width container, không có modular grid system. Trang được xây dựng như một bố cục dọc cao duy nhất: Section 1 dùng các chữ 'OFF' màu xanh khổng lồ (180–500px) với ảnh chân dung lấp đầy bên trong chữ và khoảng trống âm, chạy edge-to-edge. Section 2 tiếp tục pattern với các chữ 'WHITE', cùng tỷ lệ, cùng photo scatter, cùng canvas đen. Body text (Times 16px màu #fff500) trôi nổi qua cả hai section, bao gồm cả các đoạn dọc xoay 90°. Một hamburger icon vàng duy nhất ở góc trên bên phải là element navigation cố định duy nhất. Không có header bar, không có footer, không có sidebar, không có card grid — bố cục gần với một poster dọc hoặc zine spread hơn là một product page. Section gaps là 60–120px không gian thở đen thuần, nhưng trong các section, bố cục ngang dày đặc và hỗn loạn. ## Agent Prompt Guide THAM CHIẾU MÀU NHANH • text trên canvas: #fff500 (Caution Yellow) trên #000000, hoặc #ffffff (Pure White) trên #000000 • canvas: #000000 (Absolute Black) — màu canvas duy nhất, full-bleed • border: #ff0000 (Alarm Red) cho section frames, #000000 cho cạnh photo tile • accent (display type fill): #00fb34 (Voltage Green) trên #000000 • primary action: #00fb34 (filled action) 3–5 VÍ DỤ PROMPT COMPONENT 1. HERO LETTERFORM BLOCK: Xây dựng một section full-bleed trên canvas #000000. Đặt 2–4 ký tự Offwhite display ở 180–500px, line-height 1.00, weight 700, màu #00fb34. Xếp lớp 8–14 portrait photo tiles (cạnh sắc 0px, kích thước đa dạng 120–280px) vào khoảng trống âm giữa các nét chữ, cho phép một số kéo dài ra phía sau letterforms. Thêm một dòng Times 16px màu #fff500 trôi nổi giữa các chữ, có thể xoay 90°. 2. EDITORIAL BODY PASSAGE: Render một đoạn văn bằng Times 16px, line-height 1.20, màu #fff500 trên #000000. Không max-width, không border, không background panel. Tùy chọn xoay toàn bộ khối 90° để xuyên dọc qua một bố cục ảnh. 3. RED ALERT FRAME: Vẽ một border chữ nhật #ff0000 1–4px ở radius 0px xung quanh một đoạn Times 16px. Canvas bên trong khung vẫn là #000000. Khung nằm ở cạnh section, không centered, với padding 40px xung quanh body text. 4. NAVIGATION TRIGGER: Đặt ba thanh ngang 2px màu #fff500, rộng 24px với khoảng cách 6px, đặt fixed ở góc trên bên phải với margin 30px. Không background, không border — các thanh vàng nổi trên canvas đen. 5. FILLED ACTION BUTTON: Offwhite face 18px / 1.30, weight 400, chữ #000000 trên background #00fb34, border-radius 30px, padding 12px 24px, không border. Nằm ở cuối một Editorial Body Passage, inline thay vì centered. ## Composition Rules Hệ thống hoạt động trên một quy tắc bố cục duy nhất: display type hoành tráng và ảnh chân dung thân mật phải cùng tồn tại trong cùng một viewport, và khoảng trống âm của cái này phải được lấp đầy bởi cái kia. Không bao giờ đặt Offwhite display face trên một section mà không có portrait tiles, và không bao giờ hiển thị portrait tiles mà không có display type neo chúng. Body text là giọng nói thứ ba và luôn phụ thuộc vào cả hai — nó đọc như chú thích, không bao giờ là headline. Bảng màu bốn màu neo (#000000, #ffffff, #00fb34, #ff0000, #fff500) là toàn bộ vốn từ vựng màu sắc; giới thiệu bất kỳ màu nào khác sẽ phá vỡ logic nhị phân-tam phân mà trang web được xây dựng trên đó. ## Similar Brands - **Virgil Abloh / Off-White™** — Chung thái độ typographic dấu ngoặc kép và industrial-stencil, canvas đen mặc định, và sự pha trộn có chủ đích giữa 'off-white' vừa là màu sắc theo nghĩa đen vừa là vùng trung gian khái niệm - **Bloomberg Businessweek covers** — Cùng cách dùng typography full-bleed cấp tiến ở tỷ lệ cực đại trên chủ thể ảnh, với một custom display face làm công việc mà layout grid thường làm - **David Carson's Ray Gun era** — Bố cục collage chống grid, type đặt ở góc và chồng lên hình ảnh, và sự từ chối các quy ước product-UI sạch sẽ để ủng hộ sự hỗn loạn editorial - **Saul Bass title sequences** — Các dạng typographic một màu hoành tráng được khắc từ màu đen, với hình ảnh ép vào khoảng trống âm hình chữ cái - **It's Nice That / feature editorial spreads** — Cùng nhịp điệu dọc rộng rãi (section gaps 60–120px) và sự luân phiên giữa giọng nói body serif và giọng nói headline display sans ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-voltage-green: #00fb34; --color-alarm-red: #ff0000; --color-caution-yellow: #fff500; --color-absolute-black: #000000; --color-pure-white: #ffffff; --color-ashen-gray: #aba4a4; /* Typography — Font Families */ --font-offwhite: 'Offwhite', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 11px; --leading-caption: 1.2; --text-body: 16px; --leading-body: 1.2; --text-subheading: 18px; --leading-subheading: 1.3; --text-body-lg: 20px; --leading-body-lg: 1.31; --text-heading-sm: 36px; --leading-heading-sm: 1.25; --text-heading-lg: 48px; --leading-heading-lg: 1.15; --text-display: 72px; --leading-display: 1.1; --text-display-lg: 96px; --leading-display-lg: 1; --text-hero: 180px; --leading-hero: 1; --text-monumental: 500px; --leading-monumental: 1; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 6px; --spacing-40: 40px; --spacing-60: 60px; --spacing-90: 90px; --spacing-120: 120px; /* Layout */ --section-gap: 60-120px; --card-padding: 40px; --element-gap: 40px; /* Border Radius */ --radius-3xl: 30px; /* Named Radii */ --radius-links: 30px; --radius-images: 0px; --radius-buttons: 30px; --radius-surfaces: 0px; --radius-display-type: 0px; /* Surfaces */ --surface-midnight-canvas: #000000; --surface-inverse-panel: #ffffff; --surface-alert-frame: #ff0000; --surface-neon-type-field: #00fb34; --surface-caution-highlight: #fff500; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-voltage-green: #00fb34; --color-alarm-red: #ff0000; --color-caution-yellow: #fff500; --color-absolute-black: #000000; --color-pure-white: #ffffff; --color-ashen-gray: #aba4a4; /* Typography */ --font-offwhite: 'Offwhite', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 11px; --leading-caption: 1.2; --text-body: 16px; --leading-body: 1.2; --text-subheading: 18px; --leading-subheading: 1.3; --text-body-lg: 20px; --leading-body-lg: 1.31; --text-heading-sm: 36px; --leading-heading-sm: 1.25; --text-heading-lg: 48px; --leading-heading-lg: 1.15; --text-display: 72px; --leading-display: 1.1; --text-display-lg: 96px; --leading-display-lg: 1; --text-hero: 180px; --leading-hero: 1; --text-monumental: 500px; --leading-monumental: 1; /* Spacing */ --spacing-40: 40px; --spacing-60: 60px; --spacing-90: 90px; --spacing-120: 120px; /* Border Radius */ --radius-3xl: 30px; } ```