# Wearechaiboy · Design system migration spec

> Source: https://wearechaiboy.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of how a restricted color palette and clean typography can create a premium, high-fashion aesthetic for a modern consumer brand.

## 1. Identity DNA

This design system is built like a high-fashion editorial spread for a modern tea brand—where the black canvas functions as the studio backdrop, and every element serves the photography. The result is a dark, premium e-commerce experience that prioritizes visual weight and curated negative space over decorative flourish.

**One-liner:** A dark, premium editorial e-commerce experience for a contemporary tea brand.
**Keywords:** modern · editorial · luxury · tea · minimalist
**Analogy:** A high-fashion magazine editorial for a modern tea brand.

## 2. Color

The color system is ruthlessly monochrome: a solid black ground, pure white typography, and muted gray for secondary elements. This strict palette ensures that the photography carries all the emotional and visual weight of the composition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#AFAFAF` | secondary text |
| `--muted` | `#AFAFAF` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** Extreme high-contrast monochrome with a black canvas and white typography, relying on photography for visual weight.

Color is not decorative here—it is structural, providing the high-contrast foundation upon which the editorial imagery rests.

## 3. Typography

Typography is exclusively grotesque sans-serif, with uppercase set for all navigation and utility text to establish a clear editorial hierarchy. Tight tracking on large display sizes creates a condensed, impactful voice that commands attention without competing with the imagery.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.0 | 400 | -1px | Hero or large branding titles |
| body | 14px | 1.3 | 400 | 0px | Primary body and navigation text |
| small | 11px | 1.3 | 400 | 0px | Ticker tape and utility labels |

**Type rules:**
- Use uppercase for all navigation and utility text.
- Apply tight tracking (-1px) to large display sizes.

## 4. Spacing

Spacing follows a tight, deliberate rhythm, using generous negative space as a compositional tool to isolate and emphasize the photographic content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Tight and deliberate, using generous negative space to emphasize the editorial photography.

## 5. Surfaces

Surfaces are flat and unadorned, with no shadows to create depth; separation is achieved through thin, muted borders or the stark edge of an image. The system relies on the photography itself to define spatial relationships and visual layers.

- **Radius:** sm 4px · md 5px · lg 0px · pill 999px
- **Borders:** 1px solid #AFAFAF or 1px solid rgba(255,255,255,0.2)

## 6. Layout

The layout skeleton is a full-bleed vertical canvas, framed by a strict header and a persistent scrolling ticker tape. This structure creates a continuous, immersive scroll where each image commands the full width of the viewport.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed vertical canvas with a strict header/footer boundary and a scrolling ticker tape.

## 7. Motion & Interaction

Motion is understated and functional, using smooth opacity transitions for modal overlays and UI state changes. The scrolling ticker tape employs a linear, continuous motion to deliver promotional content without disrupting the editorial flow.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions for modal overlays and UI state changes.
  - Linear scrolling ticker tape for promotional messages.

- **Hover:** Subtle color shifts or opacity changes to indicate interactivity.
- **Click:** Immediate visual feedback via opacity or background-color transitions.
- **Transition:** Standard 0.2s to 0.3s duration for most interactive elements.
- **Keyboard:** Standard focus management for the newsletter modal.

## 8. Voice & Don'ts

The editorial voice is refined, premium, and direct—short, impactful statements in all-caps that command attention. Ghost buttons and simple underlined text serve as understated yet clear calls to action.

- **Tone:** Refined, premium, and direct.
- **Headline style:** Short, impactful, all-caps statements that command attention.
- **CTA style:** Understated yet clear, often using ghost buttons or simple underlined text.
- **Avoid:** Avoid using multiple colors; keep the palette strictly monochrome. / Avoid decorative or script fonts; maintain the clean, modern aesthetic. / Avoid heavy drop shadows or unnecessary gradients. / Avoid cluttered layouts; prioritize large imagery and negative space. / Avoid playful or casual tone of voice.

### Don'ts
- ❌ don't use multiple brand colors — screenshot shows a strict monochrome palette of black, white, and gray.
- ❌ don't use decorative or script fonts — screenshot shows a clean grotesque sans-serif exclusively.
- ❌ don't use heavy drop shadows — screenshot shows flat, edge-to-edge photography without elevation.
- ❌ don't use complex, multi-colored gradients — screenshot shows solid black backgrounds.
- ❌ don't use lowercase text for navigation — screenshot shows all text in the header and footer is uppercase.
- ❌ don't use rounded card borders — screenshot shows sharp, rectangular containers or full-bleed images.

The system deliberately forgoes multiple colors, decorative typography, heavy shadows, and casual tone to maintain its strict, high-fashion editorial integrity.

## System Prompt (paste into AI tool)

```
Design a premium, editorial e-commerce experience for a modern tea brand. Use a strict monochrome palette with a solid black (#000000) background, white (#FFFFFF) text, and muted gray (#AFAFAF) for secondary elements. Typography must be entirely grotesque-sans (NeueHaasGroteskTP55R), with all navigation and utility text in uppercase. The layout is high-contrast and image-focused, relying on large photography and generous negative space. Key interaction patterns include smooth opacity transitions (0.3s) and a persistent scrolling ticker tape. Critical constraints: Never use multiple colors, avoid decorative fonts, never use heavy shadows, and always prioritize uppercase text for UI elements.
```