---
title: "CHAIBOY design system"
variant: extended
source: https://wearechaiboy.com/
captured_at: 2026-10-12
theme: dark
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/wearechaiboy-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# CHAIBOY · Design System

> A monochrome fashion editorial for a new world of tea.

**Theme:** dark · **Industry:** food-beverage · **Source:** https://wearechaiboy.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

CHAIBOY pairs an almost-black canvas with restrained white navigation and monochrome lifestyle imagery. Its homepage treats tea as part of a fashion-led editorial world, with a scrolling announcement strip and a centered, full-bleed-feeling video.

## North star

Keep the interface nearly monochrome and let centered, editorial lifestyle media provide the page’s visual impact.

## Overview

The page is defined by a black canvas (#000000) that occupies nearly the entire viewport, giving the monochrome campaign video room to command attention. White (#ffffff) carries the main navigation, links, outlines and primary text; muted gray (#afafaf) is reserved for the thin announcement ticker and subdued supporting navigation. The dark charcoal surface (#131313) belongs to media rather than functioning as a broad section band. Typography uses NeueHaasGroteskTP55R throughout: regular-weight sans serif, uppercase labels and compact supporting copy contrast with a large, tightly led uppercase display heading elsewhere in the system. The header stays horizontal and spare, with brand, centered category links and cart aligned along a fine divider. Below it, a portrait-oriented monochrome lifestyle video sits centered with generous black space around it. Spacing is comfortable but composition remains deliberately sparse; outlined controls and hairlines provide structure without shadows or decorative color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | brand | Dominant page canvas and open space surrounding the centered campaign video. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary navigation, links, text and thin outlined CTA buttons against the black canvas. |
| Quiet Gray | `#afafaf` | `--color-quiet-gray` | neutral | Announcement ticker text and subdued promotional controls; also appears in measured hairlines. |
| Media Charcoal | `#131313` | `--color-media-charcoal` | surface | Dark media surface in measured content, not a defining full-width page section. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#131313` (Media Charcoal) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#afafaf` (Quiet Gray) · `--color-border` → `#afafaf` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#131313` | 18.58:1 | AAA |
| `#afafaf` | `#000000` | 9.57:1 | AAA |
| `#afafaf` | `#ffffff` | 2.19:1 | fail |
| `#afafaf` | `#131313` | 8.47:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NeueHaasGroteskTP55R | `--font-body` | webfont | 400 | Site-wide type for navigation, promotional strips, headings, body copy, buttons and links. | Inter |

- **NeueHaasGroteskTP55R:** Regular weight throughout; predominantly uppercase, with compact line-height and no measured letter spacing.

### Type scale — Custom (ratio ≈ 1.964, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 0.89 | 0 | uppercase | NeueHaasGroteskTP55R | Large uppercase campaign or page headline, used sparingly. |
| h2 | 18px | 400 | 1.11 | 0 | uppercase | NeueHaasGroteskTP55R | Compact uppercase section headings. |
| body | 14px | 400 | 1.29 | 0 | uppercase | NeueHaasGroteskTP55R | Uppercase supporting and descriptive copy. |
| caption | 11px | 400 | 1.27 | 0 | uppercase | NeueHaasGroteskTP55R | Small uppercase labels and secondary details. |
| button | 14px | 400 | 1.29 | 0 | uppercase | NeueHaasGroteskTP55R | Uppercase text within white outlined CTA controls. |
| nav | 14px | 400 | 1.29 | 0 | uppercase | NeueHaasGroteskTP55R | Uppercase category, cart and promotional navigation. |
| link | 14px | 400 | 1.29 | 0 | uppercase | NeueHaasGroteskTP55R | Uppercase inline actions and product links. |

OpenType features in use: `"case"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 6, 7, 9, 10, 15, 16, 42, 78, 90 px.
- Section rhythm 42px · element gap — · card padding — · max content width 1420px.

Use a full-width black canvas with a slim repeating announcement ticker above a single horizontal navigation row. Place the brand at the left, category links near the center and cart at the right, separated from content by a fine rule. The measured page max width is 1420px. In the first viewport, center portrait media beneath the header and preserve broad black margins on both sides. The composition is comfortable and intentionally sparse; avoid cards or dense multi-column content.

## Shape & elevation

- Radius: button `5px` · nav `4px` · xs `4px` · sm `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The design is flat, with no measured shadows or gradients. Separate the announcement strip, header and content through contrast and thin rules rather than raised panels. CTA buttons use a one-pixel white outline and a subtle measured radius; media rests directly against the black canvas without a card frame.

## Imagery

Use lifestyle photography or video with an editorial fashion sensibility. The visible campaign is portrait-oriented, centered, and treated in black and white; people and street details provide the narrative while surrounding black space keeps the frame distinct. Prefer cinematic, natural moments over isolated product renders. Keep image colors restrained so media supports, rather than disrupts, the monochrome identity.

## Components

### Announcement ticker

A repeating uppercase promotional strip in #afafaf, with small compact copy and subdued order or shop controls.

### Primary navigation

A single horizontal row: CHAIBOY at left, category links centered, and CART at right; separated from the page by a thin rule.

### Campaign media

Centered portrait-format monochrome lifestyle video, surrounded by generous #000000 negative space.

### Outlined CTA

Transparent button with white uppercase text and a 1px white border; measured button radius is 5px.

### Promotional nav control

Small uppercase ORDER NOW control using #afafaf fill and border with white text; measured radius is 4px.

### Product action link

Simple uppercase white ADD link without a filled background or card-like treatment.

### Measured component styles

- **Primary button** (“EXPLORE BLENDS”): transparent background · text #ffffff · border 1px solid #ffffff · radius 5px · padding 10px 16px 7px 16px · 400 14px NeueHaasGroteskTP55R · uppercase
- **Link** (“ADD”): transparent background · text #ffffff · radius 0px · padding 7px 0px 5px 0px · 400 14px NeueHaasGroteskTP55R · uppercase
- **Input**: transparent background · text #ffffff · radius 0px · padding 7px 0px 5px 0px · 400 14px NeueHaasGroteskTP55R · uppercase
- **Card** (“YOU MIGHT ALSO LIKE THESE STP-7AG5 THE S”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 0px · 400 14px NeueHaasGroteskTP55R · uppercase
- **Navigation item** (“ORDER NOW”): background #afafaf · text #ffffff · border 1px solid #afafaf · radius 4px · padding 1px 4px · 400 11px NeueHaasGroteskTP55R · uppercase

## Do

- Keep the main canvas black and uncluttered.
- Use white for primary navigation and outlined actions.
- Keep promotional ticker text muted gray.
- Center portrait campaign media within broad negative space.
- Use uppercase regular-weight sans-serif typography.
- Separate header and content with restrained hairlines.

## Don't

- Do not introduce bright accent colors.
- Do not add shadows or decorative gradients.
- Do not surround every item with a card.
- Do not crowd the centered media with extra content.
- Do not use heavy or lowercase display typography.
- Do not turn the announcement strip into a dominant hero.

## Agent prompt

Build a new CHAIBOY-style page with a black (#000000) canvas and a sparse fashion-editorial composition. Use NeueHaasGroteskTP55R or a close free sans-serif substitute, in regular weight and predominantly uppercase. Place a restrained promotional ticker in Quiet Gray (#afafaf) above a horizontal header with the brand left, category navigation centered, and cart right; use a fine divider below. Make Gallery White (#ffffff) the primary text and link color, and use it for transparent, thin-outlined CTAs. Center portrait lifestyle video or monochrome photography with generous black negative space. Treat Media Charcoal (#131313) as a subtle media surface, not a broad decorative band. Keep the layout flat, avoid shadows and gradients, and let imagery carry the visual emphasis. Preserve comfortable spacing and concise navigation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | video | Centered portrait video below a slim two-tier header, with broad black margins around the media. | Autoplay-style campaign viewing, Promotional ticker links | Monochrome video, Black negative space, Thin header divider |

## Source CSS custom properties (selected)

```css
--range-color: currentColor;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/wearechaiboy-com