# Gumroad

> Gumroad — Style Reference

## Prompt Content

```
# Gumroad — Style Reference
> Đồng xu hồng trên sketchbook màu kem. Nền canvas ấm áp, type hình học mực đen, và một linh vật đồng xu hồng neon đóng dấu khắp mọi trang như một sticker trên quyển vở.

**Theme:** light

Gumroad là một canvas màu kem ấm được đóng dấu bằng một motif đồng xu hồng vẽ tay duy nhất và một sans-serif hình học mực đen. Nền #f4f4f0 trắng kem gợi cảm giác như trang sketchbook; chữ đen và button đen đặc nổi bật trên nền với độ nặng như một nét bút dạ. Các bề mặt phẳng — thẻ trắng nằm trên canvas ấm với viền xám mảnh thay vì đổ bóng. Màu bão hòa xuất hiện ở những điểm nhấn nhỏ, có chủ đích: linh vật đồng xu hồng, các mảng màu vàng và xanh lá dùng làm marker màu nội dòng, và đôi khi là highlight đỏ. Giọng điệu thân mật, ưu tiên người sáng tạo, chống doanh nghiệp — typography dày, tracking âm trên display sizes, và type scale kéo dài từ 14px body đến 192px hero type, tất cả từ một font family duy nhất. Các component có hình dạng tiện ích (4px radii trên input và button, 16–24px trên card lớn hơn) và không bao giờ được trang trí bằng gradient hay glow.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Canvas Cream | `#f4f4f0` | `--color-canvas-cream` | Nền trang, input fills, và lớp nền ấm mà mọi bề mặt khác đặt lên |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card và product-tile nâng lên trên canvas kem |
| Ink Black | `#000000` | `--color-ink-black` | Màu trung tính tối hỗ trợ cho chữ, icon, và độ tương phản mạnh. Không dùng làm màu CTA chính |
| Graphite | `#242423` | `--color-graphite` | Chữ phụ và input borders; đọc như màu đen đã làm mềm khi màu đen thật quá gắt trên nền kem |
| Hairline | `#d1d5dc` | `--color-hairline` | Card và button borders, divider, và ghost-button outlines |
| Coin Pink | `#ff90e8` | `--color-coin-pink` | Linh vật đồng xu, điểm nhấn trang trí, và dấu ấn màu sắc đặc trưng duy nhất của sản phẩm |
| Highlight Yellow | `#ffc900` | `--color-highlight-yellow` | Mảng màu nhấn và dấu câu nhỏ — không bao giờ làm nền cho toàn bộ component |
| Highlight Lime | `#f1f333` | `--color-highlight-lime` | Mảng màu nhấn dùng cùng vàng như một hệ thống marker màu ghép đôi |
| Highlight Vermillion | `#dc341e` | `--color-highlight-vermillion` | Mảng màu nhấn cho màu thứ ba trong bộ ba marker; chỉ dùng để nhấn mạnh |

## Tokens — Typography

### ABC Favorit — Font family duy nhất trong toàn bộ hệ thống — dùng cho heading, body, button, input, và cả icon. Các weight chia thành 400 (body/UI), 500 (nhấn mạnh, giá, nav), 700 (display và oversized marketing type). Letter-spacing âm ở mọi kích thước trên 24px, đạt -0.029em ở 192px, giúp thắt chặt các hình dạng hình học thành một giọng display tự tin, gần giống stencil. Các stylistic alternates ss04 và ss11 luôn được bật và định hình cá tính của mọi glyph. · `--font-abc-favorit`
- **Thay thế:** Inter (geometric grotesque miễn phí gần nhất với apertures tương tự) hoặc General Sans
- **Weights:** 400, 500, 700
- **Kích thước:** 14, 16, 18, 20, 24, 30, 36, 48, 72, 96, 192
- **Line height:** 1.20 (body), 0.90–1.00 (display)
- **Letter spacing:** Tracking âm ở mọi bước: -0.0020em ở 14px, -0.0040em ở 16px, -0.0060em ở 18px, -0.0080em ở 20px, -0.0110em ở 24px, -0.0130em ở 30px, -0.0170em ở 36px, -0.0200em ở 48px, -0.0220em ở 72px, -0.0250em ở 96px, -0.0290em ở 192px
- **OpenType features:** `"ss04" on, "ss11" on`
- **Vai trò:** Font family duy nhất trong toàn bộ hệ thống — dùng cho heading, body, button, input, và cả icon. Các weight chia thành 400 (body/UI), 500 (nhấn mạnh, giá, nav), 700 (display và oversized marketing type). Letter-spacing âm ở mọi kích thước trên 24px, đạt -0.029em ở 192px, giúp thắt chặt các hình dạng hình học thành một giọng display tự tin, gần giống stencil. Các stylistic alternates ss04 và ss11 luôn được bật và định hình cá tính của mọi glyph.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.43 | -0.028px | `--text-caption` |
| body-sm | 16px | 1.5 | -0.064px | `--text-body-sm` |
| body | 18px | 1.56 | -0.108px | `--text-body` |
| subheading | 24px | 1.33 | -0.264px | `--text-subheading` |
| heading-sm | 30px | 1.38 | -0.39px | `--text-heading-sm` |
| heading | 36px | 1.4 | -0.612px | `--text-heading` |
| heading-lg | 48px | 1.25 | -0.96px | `--text-heading-lg` |
| display | 96px | 1 | -2.4px | `--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` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |
| 160 | 160px | `--spacing-160` |
| 224 | 224px | `--spacing-224` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 16px |
| tiles | 24px |
| inputs | 4px |
| buttons | 4px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40-48px
- **Card padding:** 24-32px
- **Element gap:** 8-16px

## Components

### Filled Black Button
**Vai trò:** Primary action — button màu đặc duy nhất trong hệ thống

Nền #000000, chữ #ffffff bằng ABC Favorit 16px / 500, 4px radius, padding 12px 24px, không border. Dùng cho CTA chính trên mỗi trang (ví dụ: 'Start selling'). Chữ là element trắng duy nhất được phép đặt trên nền đen; không bao giờ đặt nền màu phía sau.

### Ghost Outline Button
**Vai trò:** Secondary action đặt cạnh filled black button

Nền trong suốt trên canvas kem, chữ #000000 ở 16px / 500, border 1px #d1d5dc, 4px radius, padding 12px 24px. Đọc như phiên bản mềm mại hơn của black filled button.

### Search Input
**Vai trò:** Trường tìm kiếm marketplace nhúng inline trong hero

Nền #ffffff, border 1px #d1d5dc, 4px radius, padding 12px 16px. Placeholder màu #242423 ở 16px / 400. Button icon tìm kiếm ở cuối là hình vuông 40×40 nằm trong cùng màu border.

### Nav Pill (Active)
**Vai trò:** Mục top-nav đang được chọn

Pill #000000 với chữ #ffffff ở 14px / 500, full-radius (9999px), padding 6px 12px. Nằm inline với các link nav text thường để đánh dấu trang đang hoạt động.

### Stat Badge
**Vai trò:** Chip chứng minh xã hội inline — marker '8.9K ★' bên cạnh wordmark

Nền #ffffff, border 1px #000000, full-radius (9999px), padding 4px 8px. Chữ ABC Favorit 14px / 500 màu #000000. Icon sao inline.

### Product Tile Card
**Vai trò:** Thẻ trắng hiển thị preview sản phẩm của creator trong marketplace

Nền #ffffff, border 1px #d1d5dc, 16px radius, không shadow. Bố cục bên trong: row gap 12px giữa ảnh thumbnail, tiêu đề (ABC Favorit 18px / 500), và giá (ABC Favorit 16px / 500 màu #000000). Tile nằm trên canvas kem với gap 32px giữa các phần tử trong grid.

### Feature Card
**Vai trò:** Khối nội dung lớn hơn dùng trong các section feature như 'Sell anything' và 'Make your own road'

Nền #ffffff, border 1px #d1d5dc, 24px radius, padding trong 32–40px. Heading ABC Favorit 30–36px / 500 màu #000000, copy hỗ trợ tùy chọn ở 16px / 400 màu #242423. Khoảng trống rộng rãi — không shadow, chỉ có hairline border để xác định cạnh.

### Phone Mockup Frame
**Vai trò:** Khung thiết bị trang trí chứa screenshot sản phẩm bên trong feature card

Hình minh họa điện thoại viền nét #242423, màn hình trắng, 16px radius trên thiết bị, nội dung (một product card nhỏ) nằm trong với padding 8px. Luôn được render dưới dạng hình minh họa phẳng, không phải ảnh chụp.

### Pink Coin Mascot
**Vai trò:** Element trang trí đặc trưng rải rác khắp hero và feature sections

Ellipse màu hồng neon phẳng #ff90e8 với stroke 1px #000000, nghiêng 45°, chữ 'G' đen ở giữa đặt trong ABC Favorit 700. Dùng ở kích thước 60–160px; luôn nổi, không bao giờ là element có thể click.

### Color Marker Swatch
**Vai trò:** Chip màu nhỏ inline dùng làm dấu chấm hoặc bullet trang trí

Hình vuông hoặc tròn nhỏ 8–12px màu #ffc900, #f1f333, #dc341e, hoặc #ff90e8. Đặt inline với chữ như một sự thay thế vui tươi cho dấu chấm hoặc dấu phẩy. Không bao giờ mang thông tin riêng lẻ.

### Footer Link
**Vai trò:** Secondary navigation trọng lượng nhẹ

ABC Favorit 14px / 400 màu #242423, không gạch chân, gap dọc 8px giữa các phần tử. Hover state chuyển lên #000000.

## Do's and Don'ts

### Nên làm
- Luôn dùng ABC Favorit với feature settings 'ss04' và 'ss11' được bật — các alternates này là một phần của giọng thương hiệu.
- Đặt nền trang là #f4f4f0 và mọi bề mặt card là #ffffff với border 1px #d1d5dc; không bao giờ dùng shadow để phân tách các lớp.
- Làm primary action là button solid #000000 với chữ trắng, 4px radius — button filled duy nhất trong hệ thống.
- Giữ mọi display type từ 30px trở lên với letter-spacing âm đạt -2.4px ở 96px; tracking là một phần của thẩm mỹ.
- Chỉ dùng pink coin (#ff90e8) làm linh vật và là một mục trong bảng màu marker vàng / xanh lá / đỏ cam / hồng; không bao giờ làm nền button.
- Đệm các khối section với nhịp dọc 40–48px và 12–16px giữa các UI element; dùng padding ngang 58px trên các khu vực hero.
- Bo tròn card ở 16px (product tiles) hoặc 24px (feature cards) và bo tròn button, input, nav pill ở 4px hoặc 9999px — không bao giờ dùng giá trị trung gian.

### Không nên làm
- Không thêm box-shadow vào card, button, hoặc navigation; hệ thống thể hiện chiều sâu chỉ bằng hairline border #d1d5dc.
- Không dùng gradient — bảng màu hoàn toàn phẳng; màu chỉ xuất hiện dưới dạng fill đặc.
- Không dùng xanh dương, tím, hoặc bất kỳ màu nào ngoài bộ kem / đen / hồng / vàng / xanh lá / đỏ cam.
- Không tạo CTA màu — đen là màu button filled duy nhất; secondary action là ghost-outline trong #d1d5dc.
- Không đặt body text dưới 14px hoặc dùng bất kỳ font nào khác ngoài ABC Favorit (hoặc substitute của nó) cho toàn bộ giao diện.
- Không đặt canvas thành #ffffff thuần; màu kem ấm #f4f4f0 là thứ làm cho hệ thống có cảm giác như sketchbook thay vì một app shell trống trơn.
- Không dùng các accent color (#ffc900, #f1f333, #dc341e) làm nền toàn bộ component — chúng chỉ tồn tại dưới dạng swatch nhỏ và dấu câu inline.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#f4f4f0` | Nền trắng kem ấm cấp trang mà mọi section đặt lên |
| 1 | Card | `#ffffff` | Product tiles, feature cards, và khối nội dung nâng lên khỏi canvas |
| 2 | Filled Action | `#000000` | Bề mặt đen đặc duy nhất — primary CTA buttons và active nav pill |

## Imagery

Dựa trên minh họa, không phải nhiếp ảnh. Mô típ hình ảnh chủ đạo là một đồng xu hồng neon phẳng (#ff90e8) với chữ 'G' đen và viền đen mảnh, rải rác ở nhiều kích thước và nghiêng 45° như một linh vật. Hình ảnh phụ là các product mockup phẳng được render bên trong khung điện thoại viền đen đặt trên màn hình trắng. Phong cách minh họa là vẽ tay và hơi lắc lư — nét vẽ là stroke đen 1–2px, fill phẳng, không gradient hay shading. Icon là glyph đường nét đen 1px inline được vẽ bằng cùng ngôn ngữ stroke. Nhiếp ảnh vắng mặt; hệ thống dựa vào screenshot sản phẩm của creator và hình minh họa vector đồng xu/điện thoại để mang lại sự thú vị thị giác.

## Layout

Nội dung căn giữa max-width 1200px với nền cream full-bleed #f4f4f0. Hero là một cột đơn căn giữa — headline oversized 72–96px, subhead 1–2 dòng, sau đó là một hàng ngang chứa black filled CTA cộng với search input viền trắng cạnh nhau, tiếp theo là dòng helper nhỏ 'Contribute on GitHub'. Các đồng xu linh vật nổi dưới dạng element trang trí absolute-positioned ở các góc hero với độ nghiêng 45°, phá vỡ sự căn giữa. Bên dưới hero, trang chảy vào grid card 2 cột hoặc 3 cột cho product tiles và feature blocks, với các bề mặt card trắng xen kẽ trên canvas kem được phân tách bằng gap dọc 40–48px. Navigation trên cùng là một thanh ngang duy nhất với wordmark bên trái, text links ở giữa, và 'Log in' cộng với black 'Start selling' CTA bên phải; một nav link đang hoạt động được đánh dấu bằng black filled pill phía sau chữ trắng. Các section không bao giờ xen kẽ tối/sáng — toàn bộ trang nằm trên nền kem với card trắng.

## Agent Prompt Guide

Tham khảo màu nhanh
- text: #000000 (primary), #242423 (secondary)
- background: #f4f4f0 (canvas), #ffffff (cards)
- border: #d1d5dc (hairline)
- accent: #ff90e8 (pink coin mascot)
- primary action: không có màu CTA riêng biệt
- secondary marker: #ffc900 / #f1f333 / #dc341e (inline swatches only)

3 Component Prompts mẫu
Không quan sát thấy màu primary action riêng biệt; sử dụng các button neutral đã trích xuất thay vì phát minh ra màu CTA filled.

2. Product tile card: nền #ffffff, border 1px #d1d5dc, 16px radius, padding 24px, không shadow. Ảnh thumbnail 16:9 chiếm đầy chiều rộng với 8px radius, gap 12px, sau đó tiêu đề ABC Favorit 18px / 500 #000000, sau đó giá 16px / 500 #000000. Nằm trên canvas kem trong grid 3 cột với gap 32px giữa các tile.

3. Feature card: nền #ffffff, border 1px #d1d5dc, 24px radius, padding 40px. Heading 'Sell anything' ABC Favorit 36px / 500, #000000, letter-spacing -0.612px, tiếp theo là copy hỗ trợ 16px / 400 #242423 với gap trên 12px. Tùy chọn phone-mockup illustration bên phải: stroke outline 1px #242423, màn hình trắng, 16px device radius, flat product preview bên trong.

## Similar Brands

- **Substack** — Cùng nền off-white, oversized single-family geometric sans cho headline, và một CTA màu cam nhấn duy nhất — phong cách creator-platform chống doanh nghiệp.
- **Buy Me a Coffee** — Cùng nền kem ấm, linh vật minh họa phẳng, giọng điệu thân mật, và black filled CTA tương phản cao neo giữ hero.
- **Kofi / Gumroad competitor set** — Ngôn ngữ thị giác creator-economy chung: card viền hairline, control 4px-radius, và độ sâu zero box-shadow.
- **Carrd** — Cùng hệ thống single-typeface, negative tracking chặt trên display, và bề mặt card siêu phẳng với hairline borders.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-cream: #f4f4f0;
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-graphite: #242423;
  --color-hairline: #d1d5dc;
  --color-coin-pink: #ff90e8;
  --color-highlight-yellow: #ffc900;
  --color-highlight-lime: #f1f333;
  --color-highlight-vermillion: #dc341e;

  /* Typography — Font Families */
  --font-abc-favorit: 'ABC Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --tracking-caption: -0.028px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.064px;
  --text-body: 18px;
  --leading-body: 1.56;
  --tracking-body: -0.108px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.264px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.38;
  --tracking-heading-sm: -0.39px;
  --text-heading: 36px;
  --leading-heading: 1.4;
  --tracking-heading: -0.612px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.25;
  --tracking-heading-lg: -0.96px;
  --text-display: 96px;
  --leading-display: 1;
  --tracking-display: -2.4px;

  /* 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-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-224: 224px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40-48px;
  --card-padding: 24-32px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-tiles: 24px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;

  /* Surfaces */
  --surface-canvas: #f4f4f0;
  --surface-card: #ffffff;
  --surface-filled-action: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-cream: #f4f4f0;
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-graphite: #242423;
  --color-hairline: #d1d5dc;
  --color-coin-pink: #ff90e8;
  --color-highlight-yellow: #ffc900;
  --color-highlight-lime: #f1f333;
  --color-highlight-vermillion: #dc341e;

  /* Typography */
  --font-abc-favorit: 'ABC Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --tracking-caption: -0.028px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.064px;
  --text-body: 18px;
  --leading-body: 1.56;
  --tracking-body: -0.108px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.264px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.38;
  --tracking-heading-sm: -0.39px;
  --text-heading: 36px;
  --leading-heading: 1.4;
  --tracking-heading: -0.612px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.25;
  --tracking-heading-lg: -0.96px;
  --text-display: 96px;
  --leading-display: 1;
  --tracking-display: -2.4px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-224: 224px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
}
```