# Promova

> Promova — Style Reference

## Prompt Content

```
# Promova — Style Reference
> tạp chí nửa đêm với một cây bút dạ quang vàng — trang đen, chữ trắng, và một mảng màu chanh tươi sáng nói 'ấn vào đây'.

**Theme:** tối

Promova là một bề mặt học ngôn ngữ mang phong cách tạp chí nửa đêm: canvas gần như đen, chữ trắng, một màu vàng điện duy nhất (#fff050) được dùng như dấu câu chức năng cho hành động chính và điểm nhấn icon. Headlines được đặt bằng Nekst, một display face tùy chỉnh chỉ dùng ở tỷ lệ cực lớn (40–140px) — không bao giờ dùng làm UI text — mang lại cho mọi màn hình một trọng lượng editorial đầy tự tin. Body và interface type chạy trên Manrope từ 200 đến 700, với weight 200 đảm nhận công việc mà hầu hết các site giao cho weight 300. Hệ thống hoàn toàn đơn sắc (1% colorfulness) và nhịp điệu thị giác đến từ type cỡ lớn, bán kính góc 30px rộng rãi, và accent màu vàng chỉ xuất hiện ở nơi cần hành động hoặc sự chú ý. Các component có cảm giác như những trang tạp chí chứ không phải widget dashboard: phẳng, bo tròn, elevation thấp, với các card đọc như những miếng giấy chèn vào trang đen.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Jet Black | `#000000` | `--color-jet-black` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên làm màu CTA chính |
| Paper White | `#ffffff` | `--color-paper-white` | Text chính trên nền tối, bề mặt nút đảo ngược, logo, nav foreground |
| Ash | `#595959` | `--color-ash` | Helper text mờ, caption phụ, metadata nhẹ |
| Fog | `#dddddd` | `--color-fog` | Đường viền mảnh (hairline), divider ít nhấn mạnh, đường viền card trên nền tối |
| Smoke | `#f5f5f5` | `--color-smoke` | Biến thể bề mặt sáng cho các phần đảo ngược, nền card sáng trên nền tối |
| Highlighter Yellow | `#fff050` | `--color-highlighter-yellow` | Accent màu vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính |
| Periwinkle Wash | `#dfe3ff` | `--color-periwinkle-wash` | Bề mặt accent mềm, nền card pha màu, lớp wash trang trí phía sau mockup điện thoại |
| Iris Veil | `#bec8ff` | `--color-iris-veil` | Màu pha trang trí minh họa, accent bề mặt phụ, bóng mát cho hero imagery |

## Tokens — Typography

### Nekst — Display và headline face — chỉ dùng từ 40px trở lên cho hero text, section header và các tuyên bố editorial cỡ lớn. Một weight duy nhất (400) không có biến thể bold, buộc kích thước tự mang trọng lượng nhấn mạnh. Geometric grotesque tùy chỉnh với aperture hẹp tạo cho headline chất poster in ấn sắc nét trên nền đen. · `--font-nekst`
- **Thay thế:** Bricolage Grotesque, Space Grotesk, hoặc General Sans ở cùng weight
- **Weights:** 400
- **Kích thước:** 14px, 15px, 16px, 18px, 19px, 24px, 40px, 50px, 60px, 70px, 100px, 120px
- **Line height:** 1.00–1.20
- **Vai trò:** Display và headline face — chỉ dùng từ 40px trở lên cho hero text, section header và các tuyên bố editorial cỡ lớn. Một weight duy nhất (400) không có biến thể bold, buộc kích thước tự mang trọng lượng nhấn mạnh. Geometric grotesque tùy chỉnh với aperture hẹp tạo cho headline chất poster in ấn sắc nét trên nền đen.

### Manrope — Interface và body workhorse — navigation, body copy, button, caption, form label và footer. Weight 200 xử lý text nhẹ/phụ, 400–500 cho body, 700 cho UI label được nhấn mạnh. Đảm nhận mọi yếu tố chức năng không phải editorial display. · `--font-manrope`
- **Thay thế:** Inter, Plus Jakarta Sans, hoặc DM Sans
- **Weights:** 200, 400, 500, 700
- **Kích thước:** 10px, 14px, 15px, 16px, 18px, 20px, 24px, 25px, 140px
- **Line height:** 1.40–1.67
- **Vai trò:** Interface và body workhorse — navigation, body copy, button, caption, form label và footer. Weight 200 xử lý text nhẹ/phụ, 400–500 cho body, 700 cho UI label được nhấn mạnh. Đảm nhận mọi yếu tố chức năng không phải editorial display.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|
| caption | 10px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.5 | — | `--text-body-sm` |
| body-lg | 16px | 1.67 | — | `--text-body-lg` |
| subheading | 18px | 1.5 | — | `--text-subheading` |
| subheading-lg | 20px | 1.44 | — | `--text-subheading-lg` |
| heading-sm | 24px | 1.42 | — | `--text-heading-sm` |
| heading | 40px | 1.2 | — | `--text-heading` |
| heading-lg | 60px | 1.2 | — | `--text-heading-lg` |
| display | 100px | 1 | — | `--text-display` |
| display-xl | 140px | 1 | — | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Density:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 10 | 10px | `--spacing-10` |
| 15 | 15px | `--spacing-15` |
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 40 | 40px | `--spacing-40` |
| 45 | 45px | `--spacing-45` |
| 50 | 50px | `--spacing-50` |
| 60 | 60px | `--spacing-60` |
| 70 | 70px | `--spacing-70` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |
| 113 | 113px | `--spacing-113` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 4px |
| cards | 30px |
| buttons | 20px |
| buttons-sm | 10px |

### Layout

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

## Components

### Promova Logo Lockup
**Vai trò:** Nhận diện thương hiệu

Wordmark chữ thường 'promova' đặt bằng Manrope weight 700, màu trắng trên header đen. Wordmark nằm sát lề trái trong nav bar, không có icon glyph hay padding đệm — bản thân từ đó chính là mark.

### Header Navigation Bar
**Vai trò:** Điều hướng chính của site

Thanh đen full-width với nav items Manrope 15px / weight 500 (Languages, Courses, For business, Why Promova, Resources), mỗi mục có caret hình chevron xuống. Chữ trắng, không có background fill trên item, border-radius 30px cho toàn bộ container. Đi kèm với hai CTA căn phải.

### Ghost Button (Sign Up)
**Vai trò:** Hành động phụ trong nav

Nền trong suốt, viền trắng 1px (hoặc Fog #dddddd), chữ Manrope 14px / 700 uppercase màu trắng, border-radius 10px, padding 10px 15px. Khi hover đảo ngược thành nền trắng đầy.

### Filled Dark Button (Get Started)
**Vai trò:** Hành động chính trong nav

Nền đen (#000000), chữ Manrope 14px / 700 uppercase màu trắng, border-radius 10px, padding 10px 15px. Trên nền tối, nút này đọc như một ghost button có viền nhẹ hơn là một khối đầy — thương hiệu dựa vào màu vàng để tạo điểm nhấn hành động thực sự.

### Yellow CTA Button (Try Promova)
**Vai trò:** Hành động chuyển đổi chính

Nền Highlighter Yellow (#fff050), chữ Manrope 14–16px / 700 uppercase màu đen, border-radius 20px, padding 20px 30px. Yếu tố màu sắc duy nhất trên trang — đây là nơi Promova dùng toàn bộ ngân sách màu sắc. Cảm giác như một vệt bút dạ quang trên trang giấy in.

### Hero Headline Block
**Vai trò:** Tuyên bố editorial phía trên fold

Nekst weight 400 ở 100–140px, chữ trắng, line-height 1.0. Căn trái trên nền đen, chiếm nửa trái của hero. Kích thước và độ sắc nét geometric của custom face khiến nó đọc như bìa tạp chí, không phải headline SaaS.

### Content Card
**Vai trò:** Container cho tính năng, phương pháp và bài viết

Nền trắng hoặc Smoke (#f5f5f5), border-radius 30px (bán kính đặc trưng của toàn bộ hệ thống), padding 30px tất cả các cạnh, không có shadow hay border. Trên nền tối, card trắng đọc như những miếng giấy đặt trên bàn đen.

### Method/Feature Card
**Vai trò:** Khối giải thích hai cột

Card trắng với border-radius 30px, chứa heading Nekst 40–60px (màu đen), body text Manrope 16px màu Ash #595959, và icon nhỏ tùy chọn. Sắp xếp trong grid 2 cột với gap 40px giữa các card.

### FAQ Accordion Row
**Vai trò:** Mục hỏi đáp có thể mở rộng

Nền trong suốt hoặc tối, không có background, viền dưới 1px Fog (#dddddd). Text câu hỏi bằng Manrope 18–20px / 500, màu trắng. Icon chevron căn phải. Không có card container — danh sách có cảm giác như editorial copy, không phải widget.

### Promo Modal (Usyk Campaign)
**Vai trò:** Card marketing dạng overlay

Nền Periwinkle (#dfe3ff), border-radius 30px, căn giữa trang với backdrop tối. Chứa heading Nekst 50–60px, body Manrope 16px, nút CTA màu vàng và mockup điện thoại minh họa bên phải. Hoạt động như một insert editorial một màu.

### Phone Mockup Frame
**Vai trò:** Container ảnh chụp màn hình sản phẩm

Nền bo tròn Iris Veil (#bec8ff) hoặc Periwinkle (#dfe3ff), khung thiết bị điện thoại hiển thị ở góc nghiêng nhẹ, giao diện app hiện rõ bên trong. Màu xanh tím mát phân biệt hình ảnh sản phẩm với UI đơn sắc mà không phá vỡ quy tắc monochrome.

### Language Pill
**Vai trò:** Tag chọn ngôn ngữ

Nền trắng hoặc Smoke, border-radius 4–10px, text Manrope 14px / 500, padding tối thiểu (5–10px). Nhỏ, chức năng, không trang trí.

### Icon Set
**Vai trò:** Biểu tượng giao diện

Icon filled màu vàng (#fff050) cho glyph được tô sáng hoặc tương tác, icon outline trắng cho UI phụ. Stroke weight nhất quán, hình học và phẳng — không skeuomorphism. Icon vàng là brand mark dễ thấy nhất sau wordmark.

## Do's and Don'ts

### Nên làm
- Chỉ dùng #fff050 cho CTA chính duy nhất trên mỗi trang — không bao giờ dùng cho decorative fill, nút phụ hay chỉ báo trạng thái
- Đặt tất cả display heading bằng Nekst ở 40px hoặc lớn hơn; không bao giờ dùng Nekst cho body, nav hay button text
- Áp dụng border-radius 30px cho tất cả card, modal và container nội dung chính — bán kính này CHÍNH LÀ thương hiệu
- Giữ canvas trang là #000000 trên tất cả section; chỉ dùng card trắng hoặc Smoke (#f5f5f5) làm cách duy nhất để tạo phân cách bề mặt
- Dùng Manrope weight 200 cho text nhẹ/phụ và weight 700 cho UI label được nhấn mạnh; weight 500 là mặc định cho body và nav
- Để headline ở line-height 1.0 không có tracking adjustment thêm — Nekst hình học ở tỷ lệ lớn tự mang mật độ riêng
- Đặt icon chỉ như yếu tố chức năng nhỏ hoặc glyph accent màu vàng — không bao giờ dùng làm minh họa trang trí lớn

### Không nên làm
- Không thêm màu accent phụ — xanh dương, xanh lá, đỏ hay tím làm UI token. Hệ thống là một màu trên nền đen
- Không dùng Nekst dưới 40px hoặc cho button label, nav item hay form field — nó mất sức mạnh editorial ở kích thước nhỏ
- Không áp box-shadow cho card hay button — thẩm mỹ giấy phẳng trên bàn là có chủ đích
- Không dùng viền dày hơn 1px trên bề mặt tối — dùng Fog (#dddddd) cho hairline, không bao giờ dùng viền màu sắc
- Không xen kẽ nền section giữa đen và xám nhạt — giữ canvas đen xuyên suốt, dùng card trắng chèn cho khối nội dung
- Không dùng pill button bo tròn hoàn toàn (9999px) — bán kính button của hệ thống là 10–20px, không bao giờ hình tròn
- Không đặt body text dưới 14px hoặc trên 20px — type scale nhảy từ body lên display qua Nekst ở 40px+

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Void | `#000000` | Canvas trang — nền chủ đạo trên tất cả section |
| 1 | Ash Layer | `#f5f5f5` | Bề mặt sáng nâng cao cho card đảo ngược, feature block, FAQ item |
| 2 | Periwinkle Mist | `#dfe3ff` | Bề mặt accent pha màu cho khu vực trang trí và trưng bày sản phẩm |
| 3 | Iris Glow | `#bec8ff` | Lớp wash accent elevation cao nhất cho container hình ảnh hero và nền mockup điện thoại |

## Elevation

- **Modal/Overlay:** `0 0 0 100vmax rgba(0,0,0,0.7)`
- **Card trên nền tối:** `none — bề mặt phẳng, không có shadow`

## Imagery

Imagery tối giản và dẫn dắt bởi sản phẩm: mockup điện thoại hiển thị giao diện app nằm trên nền xanh tím nhạt (Periwinkle #dfe3ff, Iris Veil #bec8ff), không bao giờ trên nền ảnh chụp. Ảnh chân dung người (Oleksandr Usyk trong modal chiến dịch) được trình bày dưới dạng crop tròn, nhỏ và phụ thuộc vào type — typography dẫn dắt, imagery hỗ trợ. Không có ảnh hero full-bleed. Icon phẳng, filled màu vàng hoặc outline trắng, hình học. Hiệu ứng tổng thể là một trang in với minh họa thưa thớt, không phải sản phẩm ưu tiên màn hình.

## Layout

Promova sử dụng cột căn giữa max-width 1200px với padding hai bên rộng rãi. Hero là split bất đối xứng: headline Nekst cỡ lớn bên trái, hình ảnh sản phẩm bên phải. Bên dưới hero, nội dung chảy trong grid card 2 cột cho khối method/feature, sau đó là danh sách FAQ accordion full-width, rồi grid bài viết 3 cột. Section gap lớn (80px+) để canvas đen có không gian thở. Header là thanh ngang đơn giản, không phải mega-menu. Hành vi sticky không được chỉ báo trực quan — nav giữ yên lặng. Tất cả section chia sẻ cùng nền đen; sự phân cách thị giác đến từ card trắng chèn, không phải từ việc xen kẽ màu nền.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- background: #000000
- text: #ffffff
- muted text: #595959
- border: #dddddd
- accent / icon highlight: #fff050
- primary action: không có màu CTA riêng biệt

**3-5 Ví dụ Component Prompt**
Không quan sát thấy màu hành động chính riêng biệt; sử dụng các cách xử lý nút trung tính đã trích xuất thay vì phát minh ra màu CTA đầy.

2. **Method/Feature card**: Nền trắng #ffffff, border-radius 30px, padding 30px. Heading Nekst 50px weight 400 màu đen, body text Manrope 16px weight 400 màu #595959 bên dưới, icon màu vàng #fff050 tùy chọn (24px) ở góc trên bên trái card.

3. **FAQ accordion row**: Nền trong suốt (nằm trên #000000), viền dưới 1px màu #dddddd. Text câu hỏi bằng Manrope 20px weight 500, màu #ffffff. Icon chevron căn phải, outline trắng. Không có card container, không có background fill.

5. **Navigation bar**: Nền đen #000000, border-radius 30px trên container bar. Wordmark 'promova' bằng Manrope 700 trắng, 15px, căn trái. Nav items (Languages, Courses, For business, Why Promova, Resources) bằng Manrope 15px weight 500, màu trắng, với khoảng cách ngang 20px. Bên phải: ghost button outline (Sign Up, viền trắng 1px, border-radius 10px) và filled dark button (Get Started, nền #000000, border-radius 10px, chữ trắng).

## Color Discipline

Promova là hệ thống 1% colorfulness. Màu vàng #fff050 được phân bổ như một tài nguyên khan hiếm — nó chỉ xuất hiện ở nơi người dùng phải hành động, và không nơi nào khác. Không có link xanh dương, không có trạng thái thành công xanh lá, không có trạng thái lỗi đỏ trong ngôn ngữ thị giác; hệ thống dựa vào text label và hình dạng icon để truyền đạt trạng thái. Màu periwinkle và iris (#dfe3ff, #bec8ff) chỉ tồn tại làm nền cho mockup sản phẩm, không bao giờ là UI accent. Nếu một màn hình mới cần màu thứ ba, đó là lỗi thiết kế — hãy cấu trúc lại component để dùng bảng màu hiện có.

## Similar Brands

- **Duolingo** — Cùng danh mục học ngôn ngữ và cách dùng một màu accent đậm duy nhất (xanh lá cho Duolingo, vàng cho Promova) trên nền canvas thương hiệu chủ đạo
- **Linear** — Giao diện dark-mode với display type cỡ lớn, border-radius rộng rãi và một màu accent duy nhất cho yếu tố tương tác
- **Notion** — Giao diện đơn sắc trên nền đen với card phẳng, shadow tối thiểu và hệ thống phân cấp do typography dẫn dắt
- **Babbel** — Đối thủ học ngôn ngữ với bố cục editorial canvas tối tương tự và display headline cỡ lớn
- **Vercel** — Canvas gần như đen với một accent màu sắc, display type sans-serif hình học và thẩm mỹ card giấy phẳng tương tự

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-jet-black: #000000;
  --color-paper-white: #ffffff;
  --color-ash: #595959;
  --color-fog: #dddddd;
  --color-smoke: #f5f5f5;
  --color-highlighter-yellow: #fff050;
  --color-periwinkle-wash: #dfe3ff;
  --color-iris-veil: #bec8ff;

  /* Typography — Font Families */
  --font-nekst: 'Nekst', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-manrope: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.67;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-subheading-lg: 20px;
  --leading-subheading-lg: 1.44;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.42;
  --text-heading: 40px;
  --leading-heading: 1.2;
  --text-heading-lg: 60px;
  --leading-heading-lg: 1.2;
  --text-display: 100px;
  --leading-display: 1;
  --text-display-xl: 140px;
  --leading-display-xl: 1;

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

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-45: 45px;
  --spacing-50: 50px;
  --spacing-60: 60px;
  --spacing-70: 70px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-113: 113px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;

  /* Named Radii */
  --radius-tags: 4px;
  --radius-cards: 30px;
  --radius-buttons: 20px;
  --radius-buttons-sm: 10px;

  /* Surfaces */
  --surface-void: #000000;
  --surface-ash-layer: #f5f5f5;
  --surface-periwinkle-mist: #dfe3ff;
  --surface-iris-glow: #bec8ff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-jet-black: #000000;
  --color-paper-white: #ffffff;
  --color-ash: #595959;
  --color-fog: #dddddd;
  --color-smoke: #f5f5f5;
  --color-highlighter-yellow: #fff050;
  --color-periwinkle-wash: #dfe3ff;
  --color-iris-veil: #bec8ff;

  /* Typography */
  --font-nekst: 'Nekst', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-manrope: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.67;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-subheading-lg: 20px;
  --leading-subheading-lg: 1.44;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.42;
  --text-heading: 40px;
  --leading-heading: 1.2;
  --text-heading-lg: 60px;
  --leading-heading-lg: 1.2;
  --text-display: 100px;
  --leading-display: 1;
  --text-display-xl: 140px;
  --leading-display-xl: 1;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-45: 45px;
  --spacing-50: 50px;
  --spacing-60: 60px;
  --spacing-70: 70px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-113: 113px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
}
```