# Penpot

> Penpot — Style Reference

## Prompt Content

```
# Penpot — Style Reference
> studio thiết kế với tông màu midnight, điểm xuyết tia sáng teal — hero stage tím đậm, nơi một nút teal sáng và một từ teal thắp sáng toàn bộ canvas vốn đơn sắc.

**Theme:** mixed

Penpot vận hành như một hệ thống thị giác hai màn: hero stage tím đậm (midnight-violet) thu hút sự chú ý, sau đó chuyển sang vùng làm việc trắng sáng (off-white) để nội dung sản phẩm được thoáng đãng. Bảng màu có chủ đích tối giản — một tím đậm, một teal sống động, và các gam xám trung tính — để giao diện công cụ thiết kế đầy màu sắc (sản phẩm thực tế) trở thành nơi duy nhất có nhiều màu. Work Sans ở cỡ display lớn tạo headline tự tin, hơi siết chặt, trong khi cùng font ở 14–16px giữ cho interface chrome dễ đọc và không kiểu cách. Các component phẳng và hình học: border-radius 8px cho controls, 20px cho card, viền mảnh (hairline), không có đổ bóng trang trí. Điểm nhấn teal duy nhất được dùng rất tiết kiệm — nó kích hoạt CTA, từ nhấn mạnh trong headline, và một vài nét vẽ trang trí — khiến nó giống như một công tắc được bật lên chứ không phải đồ trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Deep Space Violet | `#151035` | `--color-deep-space-violet` | Bề mặt thương hiệu chính — hero background, navigation, dark panels, code/token sidebars, và product UI shell. Tạo nên bản sắc dark-mode và tạo canvas để điểm nhấn teal phát sáng |
| Bright Teal | `#1ccac7` | `--color-bright-teal` | Màu nền cho action chính, từ nhấn mạnh trong headline, active tab indicator, và tia sáng trang trí. Nốt màu duy nhất — được dùng tiết kiệm cho CTA, highlight, và một từ mỗi headline — khiến mỗi lần xuất hiện đều cảm giác như được bật lên |
| Rich Violet | `#2f226c` | `--color-rich-violet` | Tím phụ cho viền mờ, đường phân cách, và nét nhấn trong dark panels. Cầu nối giữa Deep Space Violet và Bright Teal trên canvas tối |
| Off-White | `#fafafa` | `--color-off-white` | Page canvas, bề mặt card sáng, body text trên nền tối, icon fills. Workhorse của chế độ sáng — không bao giờ trắng tinh, hơi ấm để làm mềm độ tương phản với Deep Space Violet |
| Light Gray | `#eeeeee` | `--color-light-gray` | Viền mảnh (hairline), đường phân cách tinh tế, và nav separators trên nền sáng. Neutral nhẹ nhàng nhất — có mặt nhưng không bao giờ đòi hỏi sự chú ý |
| Silver | `#d3d3d3` | `--color-silver` | Viền nút và đường viền cho control bị vô hiệu hóa/phụ. Nặng hơn Light Gray một chút — dùng khi viền cần xác định cạnh của control |
| Pure Black | `#000000` | `--color-pure-black` | Body text trên nền sáng và viền có độ tương phản tối đa khi tím quá mềm. Dùng rất tiết kiệm — tím đảm nhận hầu hết vai trò tối |

## Tokens — Typography

### Work Sans — Font duy nhất — dùng cho mọi thứ từ headline hero 72px xuống đến caption 12px. Geometric humanist sans với tỷ lệ thân thiện; weight 400 cho body, 500 cho nav/buttons, 700 cho heading và emphasis. Tracking -0.028em là lựa chọn đặc trưng: nó siết chặt các dạng hình học rộng của Work Sans ở cỡ lớn để headline mang cảm giác kiến trúc thay vì thoáng đãng. · `--font-work-sans`
- **Thay thế:** Inter, DM Sans, hoặc Plus Jakarta Sans
- **Weights:** 400, 500, 700
- **Cỡ:** 12, 14, 16, 18, 24, 48, 52, 72
- **Line height:** 1.10 (display), 1.20 (headings), 1.50 (body)
- **Letter spacing:** -0.0280em trên mọi cỡ — siết chặt dạng hình học ở cỡ display và giữ body text sắc nét
- **Vai trò:** Font duy nhất — dùng cho mọi thứ từ headline hero 72px xuống đến caption 12px. Geometric humanist sans với tỷ lệ thân thiện; weight 400 cho body, 500 cho nav/buttons, 700 cho heading và emphasis. Tracking -0.028em là lựa chọn đặc trưng: nó siết chặt các dạng hình học rộng của Work Sans ở cỡ lớn để headline mang cảm giác kiến trúc thay vì thoáng đãng.

### Times — Times — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-times`
- **Weights:** 400
- **Cỡ:** 16px
- **Line height:** 1.2
- **Vai trò:** Times — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|-------------|
| caption | 12px | 1.5 | -0.336px | `--text-caption` |
| body-sm | 14px | 1.5 | -0.392px | `--text-body-sm` |
| body | 16px | 1.5 | -0.448px | `--text-body` |
| body-lg | 18px | 1.5 | -0.504px | `--text-body-lg` |
| subheading | 24px | 1.2 | -0.672px | `--text-subheading` |
| heading | 48px | 1.2 | -1.344px | `--text-heading` |
| heading-lg | 52px | 1.2 | -1.456px | `--text-heading-lg` |
| display | 72px | 1.1 | -2.016px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** 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` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tabs | 8px |
| cards | 20px |
| pills | 9999px |
| inputs | 8px |
| buttons | 8px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80-120px
- **Card padding:** 20-24px
- **Element gap:** 8-12px

## Components

### Navigation Bar
**Vai trò:** Site navigation cấp cao nhất

Thanh tối full-width trên Deep Space Violet (#151035). Logo (Penpot mark + wordmark màu trắng) bên trái, dropdown nav items (Product, Community, Resources) ở giữa-trái, link Pricing, sau đó là text link Log In, nút ghost 'Contact Sales' (viền #fafafa, text #fafafa, radius 8px, padding 8px 20px), và nút 'Sign up' dạng filled teal (#1ccac7, text tối, radius 8px, padding 8px 20px). Cao 64-72px, không đổ bóng — màu nền tối tạo sự tách biệt với hero.

### Primary CTA Button (Filled Teal)
**Vai trò:** Nút action chính

Nền Bright Teal (#1ccac7) với text Deep Space Violet, border-radius 8px, padding 8px 20px. Work Sans weight 500 ở 14-16px. Nút filled chromatic duy nhất trong hệ thống — sự khan hiếm của nó khiến nó trở thành action quyết định. Dùng cho 'Sign up, it's free' và nút 'Sign up' trong nav.

### Ghost Button (Outlined Light)
**Vai trò:** Secondary action trên nền tối

Nền trong suốt với viền 1px Off-White (#fafafa), text #fafafa, border-radius 8px, padding 8px 20px. Work Sans weight 500 ở 14-16px. Dùng cho 'Contact Sales' trên nav tối và 'Self-host install' trên hero.

### New Badge Pill
**Vai trò:** Badge thông báo/chỉ thị

Pill nhỏ với nhãn 'New' bằng text Rich Violet (#2f226c) hoặc Deep Space Violet, bo tròn 9999px hoặc radius 50px, padding 4px 12px. Nằm cạnh text thông báo trong một hàng ngang. Nền có thể trong suốt trên hero tối với viền nhẹ. Work Sans weight 500 ở 12-14px.

### Hero Headline
**Vai trò:** Headline chính của trang

Work Sans weight 700 ở 48-72px, text #fafafa, line-height 1.10-1.20, letter-spacing -0.028em (~-2px ở 72px). Điểm nhấn đặc trưng: từ cuối cùng chuyển sang Bright Teal (#1ccac7) để nhấn mạnh — ví dụ 'Think and build digital products. Together.' — tạo headline hai tông màu, là bản sắc thị giác của thương hiệu cô đọng trong một dòng.

### Feature Tab Navigation
**Vai trò:** Bộ chọn tab cho section

Hàng ngang gồm 4 nhãn tab (UI Design, Code, Design System, AI Workflows) căn giữa phía trên nội dung. Work Sans weight 500 ở 14-16px với màu #fafafa. Tab active được phân biệt bằng gạch chân teal hoặc nền pill (#1ccac7). Không có container nhìn thấy được — các tab nổi trên canvas hero tối, cách nhau 24-32px.

### Product Screenshot Frame
**Vai trò:** Container showcase sản phẩm

Khung hình chữ nhật lớn chứa screenshot của giao diện công cụ thiết kế Penpot. Bo góc 8-20px. Trong hero, hiển thị trên canvas Deep Space Violet tối. Trong feature section, đặt trên nền kem/trắng ấm. Không đổ bóng — độ tương phản nội tại của screenshot tự tạo chiều sâu. Hơi cắt ở cạnh dưới viewport trong hero để tạo hiệu ứng kịch tính.

### Design System Token Panel
**Vai trò:** Sidebar product UI hiển thị tokens

Panel Deep Space Violet (#151035) tối với góc bo 8px, đại diện cho sidebar trái của sản phẩm. Chứa các section lồng nhau (LAYERS, ASSETS, TOKENS) với tab active được highlight bằng teal. Các token item dùng accent Rich Violet (#2f226c) cho trạng thái được chọn/active. Các token của chính design system được hiển thị như một meta-reference trong trang marketing.

### Color Swatch Token
**Vai trò:** Hiển thị màu trong design system

Swatch nhỏ hình tròn hoặc vuông bo tròn (20-50px) hiển thị giá trị màu. Được tô bằng màu thực tế (#1ccac7 teal, các sắc tím). Dùng trong product screenshot để minh họa tính năng color tokens. Nhãn text trắng hoặc tối bên dưới hiển thị giá trị hex.

### Emphasis Word in Headline
**Vai trò:** Từ được tô sáng trong headline

Một từ duy nhất trong headline được đặt màu Bright Teal (#1ccac7) trong khi phần còn lại của headline là Off-White (#fafafa). Work Sans weight 700, cùng cỡ và tracking với text xung quanh. Cử chỉ thương hiệu xác định — một từ teal mỗi headline cấp hero, luôn đặt ở cuối như một dấu chấm câu và một lời hứa.

### Stat Badge / Icon Counter
**Vai trò:** Chỉ báo định lượng

Badge bo tròn nhỏ với icon (tai nghe, v.v.) và một con số (35K). Bo tròn 9999px (pill) hoặc 50px. Nền trắng hoặc teal nhạt trên canvas sản phẩm tối. Work Sans weight 500 ở 14px. Dùng trong product UI screenshot để hiển thị analytics hoặc token usage.

### Card with 20px Radius
**Vai trò:** Card nội dung

Card nền trắng hoặc sáng với border-radius 20px, viền mảnh Light Gray (#eeeeee), padding 20-24px. Không đổ bóng — chỉ viền xác định cạnh. Dùng cho feature cards, content blocks, và các card component của chính product UI. Radius lớn hơn (20px so với 8px cho controls) báo hiệu một lớp chức năng khác.

## Do's and Don'ts

### Do
- Dùng nền #1ccac7 với text Deep Space Violet cho nút primary action duy nhất trên mỗi màn hình — sự khan hiếm của nó mới tạo nên sức mạnh
- Đặt hero headline ở 48-72px Work Sans weight 700 với tracking -0.028em, và tô màu từ cuối cùng là #1ccac7 để lặp lại cử chỉ thương hiệu
- Dùng border-radius 8px cho tất cả controls (nút, input, link) và 20px cho card — hệ thống hai-radius là quy tắc hình học
- Phân cách section tối (Deep Space Violet) với section sáng (Off-White) bằng khối màu, không phải bằng đổ bóng hay đường kẻ chia
- Áp dụng letter-spacing -0.028em đồng nhất trên mọi cỡ Work Sans — tracking siết chặt là thứ mang lại cảm giác kiến trúc cho các dạng hình học
- Dùng viền 1px #eeeeee cho cạnh card và section dividers trên nền sáng; dùng viền 1px #fafafa cho ghost controls trên nền tối
- Duy trì tỷ lệ màu: teal xuất hiện trên CTA, một từ trong headline, và active tab indicators — không bao giờ trên body text, icon, hay background

### Don't
- Không dùng drop shadow ở bất cứ đâu — Penpot tạo chiều sâu qua độ tương phản màu sắc và viền mảnh, không phải elevation
- Không dùng #1ccac7 cho body text, icon, hay background fill lớn — điểm nhấn phải được dùng tiết kiệm cho từ đơn và nền nút
- Không thêm màu chromatic khác vào UI chrome — hệ thống có chủ đích không màu với một điểm nhấn; để product screenshots mang màu sắc
- Không dùng trắng tinh (#ffffff) cho background hay text — #fafafa ấm hơn một chút và kết hợp tốt hơn với tím đậm
- Không trộn lẫn giá trị border-radius ngẫu nhiên — controls là 8px, cards là 20px, pills là 9999px. Không bao giờ dùng 4px hay 12px
- Không dùng weight 400 cho headline — weight 700 với tracking siết chặt là giọng nói của headline; weight 500 dành cho UI labels
- Không đặt teal và tím trong cùng một khu vực nhỏ (ngoại trừ trong product UI screenshot) — mối quan hệ tím và teal hoạt động vì chúng ở hai đầu thang giá trị và hiếm khi chia sẻ không gian

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Off-White Canvas | `#fafafa` | Page background cơ bản cho tất cả section sáng — bề mặt làm việc mặc định |
| 1 | Card Surface | `#fafafa` | Panel card lõm trên canvas sáng (cùng tông, được phân cách bằng viền thay vì đổ bóng) |
| 2 | Deep Space Stage | `#151035` | Hero section, navigation bar, và product UI shell — bản sắc dark mode |
| 3 | Teal Accent Surface | `#1ccac7` | Nút CTA chính, trạng thái active, và emphasis — nằm trên bất kỳ bề mặt nào như một điểm nhấn tương phản cao |

## Elevation

- **Product Screenshot Frame:** `không — độ tương phản nội tại của screenshot với hero tối tạo chiều sâu mà không cần đổ bóng`

## Imagery

Product screenshots là nội dung hình ảnh chính — khung hình lớn, full-width hiển thị giao diện công cụ thiết kế Penpot với các sidebar panel tối, nội dung canvas đầy màu sắc (card hồng, tím, vàng), và token management UI. Sản phẩm được hiển thị trong ngữ cảnh thực: một canvas thật với một thiết kế đang được xây dựng, không phải wireframe trừu tượng. Không có ảnh chụp, không minh họa, không 3D renders. Phong cách icon trong sản phẩm là outlined với nét mảnh, đơn sắc. Product screenshot trong hero hơi bị cắt ở cuối viewport để tạo hiệu ứng tiết lộ kịch tính. Feature sections hiển thị sản phẩm ở các trạng thái khác nhau (UI Design, Code, Design System, AI Workflows) để chứng minh bề rộng.

## Layout

Trang theo cấu trúc hai màn tối-sáng: hero tối full-viewport (Deep Space Violet, headline căn giữa, cặp CTA căn giữa, product screenshot lớn kéo dài xuống dưới fold) chuyển tiếp sang feature sections sáng hơn (canvas off-white/kem với product UI nhúng). Hero được căn giữa và đối xứng với padding dọc rộng rãi (80-120px). Dưới fold, nội dung xen kẽ giữa product showcases tối và section text+visual sáng. Feature tab section dùng tab navigation căn giữa phía trên product screenshot rộng. Grid chủ yếu là 2-column text+image trong feature sections và single-column centered stacks trong hero. Navigation là sticky top bar trên canvas tối. Max content width khoảng 1200px với column gaps 20-24px.

## Agent Prompt Guide

## Quick Color Reference
- Text trên nền tối: #fafafa
- Text trên nền sáng: #000000 hoặc #151035
- Page background (sáng): #fafafa
- Dark hero surface: #151035
- Viền (bề mặt sáng): #eeeeee
- Viền (bề mặt tối): #fafafa
- Accent / emphasis word / active state: #1ccac7
- primary action: #1ccac7 (filled action)

## Example Component Prompts

1. **Hero Headline**: Tạo hero headline ở 72px, Work Sans weight 700, #fafafa, letter-spacing -2px (tức -0.028em), line-height 1.10. Từ cuối cùng phải là #1ccac7 thay vì trắng. Căn giữa text trên nền #151035.

2. Tạo Primary Action Button: Nền #1ccac7, text #000000, radius 9999px, padding pill gọn. Dùng dạng filled này cho CTA chính.

3. **Ghost Button on Dark**: Tạo nút trong suốt với viền 1px #fafafa, text #fafafa, Work Sans weight 500 ở 16px, border-radius 8px, padding dọc 8px và ngang 20px. Đặt trên nền #151035.

4. **Feature Tab Bar**: Tạo hàng ngang gồm 4 nhãn tab (UI Design, Code, Design System, AI Workflows) căn giữa trên nền #151035. Work Sans weight 500 ở 16px, màu #fafafa, gap 32px giữa các tab. Tab active có gạch chân 2px #1ccac7.

5. **Content Card**: Tạo card với nền #fafafa, border-radius 20px, viền 1px #eeeeee, padding 24px. Không đổ bóng. Work Sans weight 700 ở 24px cho tiêu đề card và weight 400 ở 16px cho body text màu #000000.

## Similar Brands

- **Figma** — Cùng cấu trúc hero tối-sáng với headline căn giữa và product screenshot reveal; spacing rộng rãi tương tự và typography Work Sans / geometric sans đầy tự tin
- **Linear** — Cùng bảng màu đơn sắc kỷ luật với một màu nhấn sống động duy nhất, bề mặt phẳng không đổ bóng, và letter-spacing siết chặt trên display headline cỡ lớn
- **Vercel** — Cùng hero stage tối kịch tính chuyển tiếp sang nội dung sáng, viền mảnh, và controls radius 8px với một điểm nhấn chromatic xuất hiện tiết kiệm
- **Supabase** — Cùng hero tím đậm/gần đen với nút teal accent, phong cách trình bày nền tảng open-source, và typography hình học kiểu Work Sans

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-deep-space-violet: #151035;
  --color-bright-teal: #1ccac7;
  --color-rich-violet: #2f226c;
  --color-off-white: #fafafa;
  --color-light-gray: #eeeeee;
  --color-silver: #d3d3d3;
  --color-pure-black: #000000;

  /* Typography — Font Families */
  --font-work-sans: 'Work Sans', 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;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.336px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.392px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.448px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.504px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.672px;
  --text-heading: 48px;
  --leading-heading: 1.2;
  --tracking-heading: -1.344px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -1.456px;
  --text-display: 72px;
  --leading-display: 1.1;
  --tracking-display: -2.016px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --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-40: 40px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80-120px;
  --card-padding: 20-24px;
  --element-gap: 8-12px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-full: 50px;
  --radius-full-2: 100px;

  /* Named Radii */
  --radius-tabs: 8px;
  --radius-cards: 20px;
  --radius-pills: 9999px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;

  /* Surfaces */
  --surface-off-white-canvas: #fafafa;
  --surface-card-surface: #fafafa;
  --surface-deep-space-stage: #151035;
  --surface-teal-accent-surface: #1ccac7;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-deep-space-violet: #151035;
  --color-bright-teal: #1ccac7;
  --color-rich-violet: #2f226c;
  --color-off-white: #fafafa;
  --color-light-gray: #eeeeee;
  --color-silver: #d3d3d3;
  --color-pure-black: #000000;

  /* Typography */
  --font-work-sans: 'Work Sans', 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;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.336px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.392px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.448px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.504px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.672px;
  --text-heading: 48px;
  --leading-heading: 1.2;
  --tracking-heading: -1.344px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -1.456px;
  --text-display: 72px;
  --leading-display: 1.1;
  --tracking-display: -2.016px;

  /* 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;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-full: 50px;
  --radius-full-2: 100px;
}
```