# SwimClub

> # SwimClub — Style Reference

## Prompt Content

```
# SwimClub — Style Reference
> Hồ sơ lâm sàng ẩn sau màn hình LCD pixel

**Theme:** mixed

SwimClub vận hành một hệ thống thị giác mang phong cách tạp chí lâm sàng: gần như hoàn toàn achromatic (trắng, đen, xám lạnh) với một màu cam rực duy nhất (#ff9e00) được dùng làm điểm nhấn full-bleed thay vì màu nút. Typography đảm nhiệm vai trò chính — một geometric grotesque (Px Grotesk) cho body và headline, một monospace (Apercu Mono) cho data labels và navigation micro-copy, và một custom pixelated display face (Swimclub) chỉ dành cho logo và các con số thống kê cỡ lớn trông giống như màn hình LCD. Các bề mặt xen kẽ giữa nền canvas trắng ngà lạnh, thẻ sản phẩm trắng tinh, hero block xanh navy đậm với ảnh sản phẩm, và các panel thống kê cam bão hòa. Giao diện mang cảm giác như một hồ sơ y tế được nhìn qua màn hình arcade retro: lâm sàng, biên tập, hơi vui tươi, với các góc 0px sắc cạnh và đường viền đứt nét mảnh (hairline dashed borders) giúp mọi thứ đọc giống như biểu đồ hơn là trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Tabloid Orange | `#ff9e00` | `--color-tabloid-orange` | Nền section full-bleed (announcement bar, statistic panels) — màu thương hiệu có sắc độ duy nhất, dùng ở độ bão hòa tối đa để phá vỡ dòng chảy đơn sắc |
| Deep Capsule Navy | `linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%)` | `--color-deep-capsule-navy` | Màu gradient cuối của hero và nền ảnh sản phẩm — gần như đen với tông xanh lam, không phải đen thuần |
| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền mảnh, navigation dividers, đường viền thẻ, chữ trên nút — màu cấu trúc chủ đạo trên toàn bộ giao diện |
| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt thẻ, overlay ảnh sản phẩm, nền nút và chữ trên panel tối hoặc cam |
| Cool Gray | `#d2dce1` | `--color-cool-gray` | Bề mặt UI mờ dành cho controls bị vô hiệu hóa, panel ít nhấn mạnh và placeholder blocks |
| Iron Gray | `#666666` | `--color-iron-gray` | Văn bản phụ và đường viền ít nhấn mạnh — tông trung của thang màu trung tính |
| Ash | `#b3b3b3` | `--color-ash` | Đường viền cấp ba, đường viền trạng thái vô hiệu hóa, nét icon mờ |
| Smoke | `#cccccc` | `--color-smoke` | Dividers, đường viền đứt nét trên feature cards, đường phân cách tinh tế |

## Tokens — Typography

### Px Grotesk — Kiểu chữ chính — body copy ở 15–17px/400, subheadings ở 21–31px/700, display headlines ở 52–74px/700. Geometric grotesque với đầu chữ vuông tạo cảm giác lâm sàng, giống biểu đồ. Trọng lượng hero 74px được đặt rất khít (1.05) để headline nhiều dòng xếp chồng thành một khối đặc. · `--font-px-grotesk`
- **Thay thế:** Inter, Space Grotesk, hoặc DM Sans
- **Trọng lượng:** 400, 700
- **Cỡ chữ:** 12, 15, 16, 17, 21, 31, 37, 52, 74
- **Chiều cao dòng:** 1.05, 1.10, 1.30, 1.70
- **Vai trò:** Kiểu chữ chính — body copy ở 15–17px/400, subheadings ở 21–31px/700, display headlines ở 52–74px/700. Geometric grotesque với đầu chữ vuông tạo cảm giác lâm sàng, giống biểu đồ. Trọng lượng hero 74px được đặt rất khít (1.05) để headline nhiều dòng xếp chồng thành một khối đặc.

### Apercu Mono Pro — Monospace micro-copy — navigation links, section labels, input placeholders, danh sách thành phần và chú thích dữ liệu nhỏ. Đặt ở cỡ nhỏ (15–17px) với letter-spacing dương 0.02em để chuỗi chữ in hoa đọc giống như tem in hoặc nhãn mẫu thay vì văn bản chạy. · `--font-apercu-mono-pro`
- **Thay thế:** IBM Plex Mono, JetBrains Mono, hoặc Space Mono
- **Trọng lượng:** 400
- **Cỡ chữ:** 15, 17
- **Chiều cao dòng:** 1.10, 1.20
- **Letter spacing:** 0.02em
- **Vai trò:** Monospace micro-copy — navigation links, section labels, input placeholders, danh sách thành phần và chú thích dữ liệu nhỏ. Đặt ở cỡ nhỏ (15–17px) với letter-spacing dương 0.02em để chuỗi chữ in hoa đọc giống như tem in hoặc nhãn mẫu thay vì văn bản chạy.

### Swimclub (custom pixel/bitmap face) — Signature display face chỉ dùng cho wordmark và ba con số thống kê khổng lồ (60%, 50%, 1/4). Cấu trúc blocky, pixel làm cho các con số trông giống màn hình LCD hoặc 7-segment — một sự tương phản retro-digital có chủ đích với body grotesque sạch sẽ. Không bao giờ đặt dưới 90px; bản sắc của nó phụ thuộc vào tỷ lệ. · `--font-swimclub-custom-pixelbitmap-face`
- **Thay thế:** VT323, Press Start 2P, hoặc custom bitmap font
- **Trọng lượng:** 400
- **Cỡ chữ:** 96, 105
- **Chiều cao dòng:** 1.00
- **Vai trò:** Signature display face chỉ dùng cho wordmark và ba con số thống kê khổng lồ (60%, 50%, 1/4). Cấu trúc blocky, pixel làm cho các con số trông giống màn hình LCD hoặc 7-segment — một sự tương phản retro-digital có chủ đích với body grotesque sạch sẽ. Không bao giờ đặt dưới 90px; bản sắc của nó phụ thuộc vào tỷ lệ.

### Type Scale

| Vai trò | Cỡ chữ | Chiều cao dòng | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.3 | — | `--text-caption` |
| body-sm | 15px | 1.7 | — | `--text-body-sm` |
| subheading | 21px | 1.3 | — | `--text-subheading` |
| heading-sm | 31px | 1.1 | — | `--text-heading-sm` |
| heading | 37px | 1.1 | — | `--text-heading` |
| heading-lg | 52px | 1.05 | — | `--text-heading-lg` |
| display | 74px | 1.05 | — | `--text-display` |
| stat-numeral | 105px | 1 | — | `--text-stat-numeral` |

## Tokens — Spacing & Shapes

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

**Mật độ:** comfortable

### 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` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 120 | 120px | `--spacing-120` |
| 140 | 140px | `--spacing-140` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 0px |
| cards | 0px |
| images | 0px |
| buttons | 0px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 120px
- **Card padding:** 32px
- **Element gap:** 4px

## Components

### Announcement Bar
**Vai trò:** Dải trên cùng toàn trang

Thanh full-bleed #ff9e00, cao ~32px, chữ Apercu Mono Pro in hoa canh giữa ở 12px, màu đen. Liều cam duy nhất ở trên cùng — luôn hiện diện, luôn là thứ đầu tiên mắt chạm vào.

### Top Navigation
**Vai trò:** Navigation chính của trang

Bố cục ba vùng trên nền trắng: SHOP và ABOUT US bên trái, wordmark pixel Swimclub ở giữa, ACCOUNT và CART (0) bên phải. Tất cả link ở Apercu Mono Pro 12–15px in hoa, letter-spacing 0.02em, màu đen. Không nền, không viền — navigation chỉ là sự kiềm chế về typography nổi trên nền trắng.

### Hero Block
**Vai trò:** Giới thiệu phía trên fold

Gradient tối full-bleed (#6a90b0 → #020507, từ trên trái xuống dưới phải) với ảnh sản phẩm viên nang vàng ở bên phải và khối văn bản ở bên trái. Headline ở 74px Px Grotesk weight 700, màu trắng, line-height 1.05. Subtext ở 16–17px Px Grotesk weight 400, màu trắng. Padding trái 64px, khoảng không gian thoáng rộng rãi từ navigation.

### Outlined CTA Button (Hero)
**Vai trò:** Call-to-action chính trên nền tối

Viền trắng 1px, chữ trắng, không fill, radius 0px, cao ~32px, Apercu Mono Pro 15px in hoa với letter-spacing 0.02em. Nút 'GET STARTED' nằm trên hero tối — outlined trắng là hình dạng khả thi duy nhất ở đây. Nằm bên trong một hình chữ nhật viền đen, tạo cảm giác như tem in.

### Outlined CTA Button (Light surface)
**Vai trò:** Call-to-action chính trên nền sáng

Viền đen 1px, chữ đen, không fill, radius 0px, padding 32px (16px ngang, 8px dọc). Apercu Mono Pro 15px in hoa. Mẫu ghost/outlined nhất quán — nút không bao giờ được tô màu.

### Media Credibility Bar
**Vai trò:** Dải chứng minh xã hội

Hàng ngang gồm bốn logo báo chí/lâm sàng (GQ, Stanford clinician, Clinicians' Choice badge, số lượng bác sĩ lâm sàng) trên nền trắng, được phân cách bằng các đường kẻ dọc đen mảnh. Mỗi ô chứa một hình ảnh nhỏ hoặc icon kèm chú thích body text ngắn. Không có nền thẻ — chỉ có dividers và chữ.

### Centered Headline Band
**Vai trò:** Mở đầu section

Dải nền trắng hoặc #d2dce1, headline canh giữa ở 31–37px Px Grotesk weight 700, theo sau là subtext một dòng ở 15–17px weight 400. Canh giữa khít, padding dọc 120px trên và dưới. Đóng vai trò như một khoảng dừng thở giữa các khối dày đặc.

### Orange Statistic Panel
**Vai trò:** Trưng bày dữ liệu

Dải full-bleed #ff9e00, chia thành 2–4 cột bằng nhau bằng các đường dọc trắng mảnh. Mỗi cột mang một label Apercu Mono Pro in hoa nhỏ (ví dụ: 'THE STATE OF MEN'S REPRODUCTIVE HEALTH') và một chữ số pixel Swimclub khổng lồ ở 96–105px màu đen. Font pixel trên nền cam bão hòa là khoảnh khắc thị giác đặc biệt nhất của trang.

### Dashed-Border Feature Card
**Vai trò:** Liệt kê lợi ích sản phẩm

Thẻ trắng với viền đứt nét 1px #cccccc, radius 0px, padding 32px. Bên trái: icon nhỏ (tinh trùng, phân tử, glyph DNA) màu đen. Ở giữa: heading Px Grotesk 21px đậm với sub-label 15px weight 400 bên dưới. Bên phải: icon dấu trừ/nét gạch nhỏ màu đen đóng vai trò là chỉ báo thu gọn. Viền đứt nét báo hiệu 'mục nhập biểu đồ' thay vì 'thẻ sản phẩm'.

### Product Image Block
**Vai trò:** Ảnh sản phẩm full-bleed

Khối đen thuần (#020507), chiều rộng toàn container, chiều cao thay đổi, với chú thích Apercu Mono Pro in hoa màu trắng chồng lên (ví dụ: 'OPTIMAL COUNT'). Không văn bản, không UI — chỉ có canvas tối và sản phẩm, tạo ra một khoảng dừng điện ảnh.

### Ingredient Tag List
**Vai trò:** Danh sách thành phần bổ sung

Chuỗi inline các token Apercu Mono Pro in hoa (COQ10, LYCOPENE, VITAMIN D3, VITAMIN E, OMEGA-3S, NAC, L-CARNITINE) cách nhau bằng khoảng trắng, đặt ở 15px. Được giới thiệu bằng một label in hoa nhỏ 'TARGETED WITH'. Đọc giống như nhãn mẫu vật.

### Icon Set
**Vai trò:** Glyph chức năng

Icon một màu đen được vẽ với độ dày nét mảnh nhất quán. Phong cách là geometric/kỹ thuật (phân tử kim cương, dạng tinh trùng đơn giản hóa, chuỗi DNA) — không bao giờ mang tính trang trí. Luôn đi kèm với một label ngắn, không bao giờ đứng một mình.

## Do's and Don'ts

### Nên làm
- Chỉ dùng #ff9e00 làm nền panel full-bleed cho announcement bar và statistic sections — không bao giờ dùng làm fill nút, tô màu icon hoặc viền.
- Dành font pixel Swimclub cho wordmark và chữ số thống kê ở 90px hoặc lớn hơn; nó mất đi đặc tính nếu dưới tỷ lệ đó.
- Đặt Px Grotesk headlines khít — line-height 1.05 ở 52–74px để nhiều dòng xếp chồng đọc như một khối đặc, không phải chữ thoáng.
- Dùng Apercu Mono Pro cho mọi label in hoa, mục navigation và chuỗi dữ liệu nhỏ; dành Px Grotesk cho body và headings.
- Giữ tất cả góc ở 0px radius — các cạnh sắc là bản sắc của hệ thống. Dùng viền đứt nét 1px màu đen hoặc #cccccc để phân cách các section.
- Xen kẽ các mức bề mặt có chủ đích: trắng → #d2dce1 → #ff9e00 → #020507 để tạo nhịp điệu biên tập.
- Dùng padding dọc 120px giữa các section chính và 32px bên trong thẻ.

### Không nên làm
- Không bo tròn góc trên thẻ, nút, tag hoặc ảnh — radius là 0px trên toàn hệ thống.
- Không dùng màu cam cho nút, link hoặc icon — nó chỉ thuộc về nền section full-bleed.
- Không đặt font pixel Swimclub dưới 90px hoặc dùng cho body copy — nó sẽ trở nên khó đọc.
- Không dùng shadow hoặc hiệu ứng độ cao — hệ thống dựa vào bề mặt phẳng và đường viền mảnh, không phải chiều sâu.
- Không trộn lẫn monospace và pixel fonts trong cùng dải kích thước — Apercu Mono dành cho micro-labels (12–17px), Swimclub dành cho readouts khổng lồ (90px+).
- Không tô màu CTA buttons — giữ chúng ở dạng outlined (viền đen trên nền sáng, viền trắng trên nền tối) với nền trong suốt.
- Không thêm màu sắc mới — hệ thống có chủ đích là đơn sắc cộng với một màu cam.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Canvas Gray | `#d2dce1` | Nền trang ngoài cùng giữa các section chính, footer band — xám xanh lạnh tạo tâm trạng lâm sàng |
| 1 | Paper | `#ffffff` | Bề mặt nội dung chính — thẻ sản phẩm, media bar, feature blocks, body sections |
| 2 | Orange Panel | `#ff9e00` | Bề mặt nhấn full-bleed cho announcement bar và statistic panel — phá vỡ dòng chảy đơn sắc |
| 3 | Capsule Black | `#020507` | Nền hero và ảnh sản phẩm — sân khấu tương phản cao cho hình ảnh viên nang vàng |

## Elevation

Thiết kế cố tình không có shadow. Hệ thống phân cấp được tạo ra thông qua tương phản bề mặt (trắng → #d2dce1 → cam → đen), viền 1px mảnh và khoảng trắng, không bao giờ thông qua drop shadows hoặc blur. Điều này giữ cho giao diện đọc giống như một tài liệu in phẳng hoặc biểu đồ lâm sàng thay vì một ứng dụng skeuomorphic.

## Imagery

Nhiếp ảnh chỉ dành cho sản phẩm: viên nang màu hổ phách-vàng và softgel pills được chụp trên nền gradient xanh đậm đến đen với ánh sáng studio ấn tượng. Xử lý là tương phản cao, u ám và chỉ có sản phẩm — không có ảnh lối sống, không có người, không có bối cảnh. Viên thuốc là những anh hùng, luôn bị cô lập, luôn phát sáng. Hình ảnh chiếm khoảng 50% hero block và các dải ảnh sản phẩm chuyên dụng; phần còn lại của trang là văn bản và dữ liệu.

## Layout

Trang là một chồng dọc các dải full-bleed thay vì luồng container max-width. Hero là full-bleed tối; các section tiếp theo xen kẽ giữa nội dung canh giữa max-width-1200px (trắng hoặc #d2dce1) và các panel nhấn edge-to-edge (cam, đen). Navigation là một dải typography mỏng — không có thanh nền, không shadow, không viền. Hero là split 50/50: khối văn bản bên trái, ảnh sản phẩm bên phải trên gradient. Bên dưới fold, mẫu là: centered headline band → 4-column media bar → centered headline band → 4-column orange stat panel → 2-column feature list với ảnh sản phẩm tối ở giữa. Section gaps là 120px; card padding là 32px. Navigation tối thiểu chỉ ở trên cùng, không có hành vi sticky rõ ràng.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #000000
- background: #ffffff
- section wash: #d2dce1
- dark surface: #020507
- accent panel: #ff9e00
- primary action: không có màu CTA riêng biệt

Ví dụ Component Prompts:

Không quan sát thấy màu primary action riêng biệt; hãy sử dụng các xử lý nút trung tính đã trích xuất thay vì tự tạo màu CTA đã tô.

2. Tạo orange statistic panel: nền full-bleed #ff9e00, chia thành ba cột bằng nhau bằng các đường dọc trắng 1px. Mỗi cột: label Apercu Mono Pro in hoa 12px ở trên cùng màu đen, sau đó là chữ số pixel Swimclub ở 105px màu đen, sau đó là chú thích body ngắn ở Px Grotesk 15px weight 400 bên dưới.

3. Tạo dashed-border feature card: nền #ffffff, viền đứt nét 1px #cccccc, radius 0px, padding 32px. Bên trái: icon hình học nhỏ màu đen. Ở giữa: heading Px Grotesk 21px weight 700 với sub-label 15px weight 400 bên dưới. Bên phải: icon thu gọn dấu trừ/nét gạch nhỏ màu đen.

4. Tạo centered headline band: nền #d2dce1, padding 120px trên và dưới, heading Px Grotesk 37px weight 700 canh giữa màu #000000, theo sau là subtext 16px weight 400 màu #000000, max-width 720px.

5. Tạo top nav: nền #ffffff, padding dọc 32px, ba flex zones. Bên trái: SHOP và ABOUT US ở Apercu Mono Pro 12px in hoa, #000000, letter-spacing 0.02em. Ở giữa: wordmark pixel Swimclub ở 21px. Bên phải: ACCOUNT và CART (0) cùng phong cách monospace. Không viền, không thanh nền, không shadow.

## Similar Brands

- **Athletic Greens / AG1** — Cùng ngôn ngữ biên tập bổ sung lâm sàng: canvas đơn sắc, một màu nhấn full-bleed duy nhất, data labels monospace, chữ số thống kê cỡ lớn làm hero thị giác
- **Ritual Vitamins** — Cùng bảng màu đơn sắc tối giản với một điểm nhấn ấm, viền mảnh, danh sách thành phần monospace và ảnh sản phẩm chiếm ưu thế trên hero tối
- **Brilliant (brilliant.org)** — Cùng xử lý pixel/digital display cho thống kê và body grotesque sạch sẽ — sự tương phản giữa sans-serif lâm sàng và chữ số retro-bitmap là một signature chung
- **WHOOP** — Cùng hero tối full-bleed với headline trắng canh giữa, body achromatic và một điểm nhấn bão hòa duy nhất (cam cho SwimClub, đỏ cho WHOOP) được dùng làm dấu câu section thay vì màu nút

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-tabloid-orange: #ff9e00;
  --color-deep-capsule-navy: #020507;
  --gradient-deep-capsule-navy: linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%);
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-cool-gray: #d2dce1;
  --color-iron-gray: #666666;
  --color-ash: #b3b3b3;
  --color-smoke: #cccccc;

  /* Typography — Font Families */
  --font-px-grotesk: 'Px Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu-mono-pro: 'Apercu Mono Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-swimclub-custom-pixelbitmap-face: 'Swimclub (custom pixel/bitmap face)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --text-body-sm: 15px;
  --leading-body-sm: 1.7;
  --text-subheading: 21px;
  --leading-subheading: 1.3;
  --text-heading-sm: 31px;
  --leading-heading-sm: 1.1;
  --text-heading: 37px;
  --leading-heading: 1.1;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1.05;
  --text-display: 74px;
  --leading-display: 1.05;
  --text-stat-numeral: 105px;
  --leading-stat-numeral: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --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-40: 40px;
  --spacing-64: 64px;
  --spacing-120: 120px;
  --spacing-140: 140px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 120px;
  --card-padding: 32px;
  --element-gap: 4px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-images: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-canvas-gray: #d2dce1;
  --surface-paper: #ffffff;
  --surface-orange-panel: #ff9e00;
  --surface-capsule-black: #020507;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-tabloid-orange: #ff9e00;
  --color-deep-capsule-navy: #020507;
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-cool-gray: #d2dce1;
  --color-iron-gray: #666666;
  --color-ash: #b3b3b3;
  --color-smoke: #cccccc;

  /* Typography */
  --font-px-grotesk: 'Px Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu-mono-pro: 'Apercu Mono Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-swimclub-custom-pixelbitmap-face: 'Swimclub (custom pixel/bitmap face)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --text-body-sm: 15px;
  --leading-body-sm: 1.7;
  --text-subheading: 21px;
  --leading-subheading: 1.3;
  --text-heading-sm: 31px;
  --leading-heading-sm: 1.1;
  --text-heading: 37px;
  --leading-heading: 1.1;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1.05;
  --text-display: 74px;
  --leading-display: 1.05;
  --text-stat-numeral: 105px;
  --leading-stat-numeral: 1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-120: 120px;
  --spacing-140: 140px;
}
```