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

# heytea · Design System

> Hand-drawn tea culture in a field of white

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.heytea.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._

heytea’s homepage pairs a bright white canvas with black handwritten illustrations and carefully spaced brand stories. Product and store photography brings color into an otherwise restrained, editorial presentation.

## North star

Let expressive hand-drawn storytelling breathe on white, and keep every interface element quieter than the artwork.

## Overview

The page is defined by a pure white canvas and a deliberately limited measured palette: black carries the navigation, hand-drawn artwork, and prominent lettering, while muted gray supports footer copy. Most of the brand expression comes from typography and imagery rather than colored UI. HeyteaSans provides the widely tracked navigation, body copy, and controls; JaaamForHeytea gives section headings and the hero slogan a loose, handwritten character. The layout is spacious and editorial, with a compact navigation above large, open content areas and long vertical intervals between stories. Full-bleed hero illustrations establish the brand voice, while product cups and store photographs supply the principal color and texture. Keep interface furniture quiet: links read as plain text, sections remain flat, and images sit directly in the page rather than inside decorative cards. The result feels personal and playful without sacrificing clarity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and the continuous background behind the hero, stories, product imagery, store gallery, and footer. |
| Sketch Ink | `#000000` | `--color-sketch-ink` | brand | Navigation and primary text, plus the bold strokes and handwritten lettering that anchor the illustrations. |
| Soft Graphite | `#444444` | `--color-soft-graphite` | neutral | Muted footer text and secondary copy; a supporting text tone, not a prominent section background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Sketch Ink) · `--color-text-muted` → `#444444` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#444444` | `#ffffff` | 9.74:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HeyteaSans | `--font-body` | webfont | 400 | Navigation, body copy, and button labels | Jost |
| JaaamForHeytea | `--font-jaaamforheytea` | webfont | 400 | Handwritten display lettering, including section headings and hero slogan | Caveat |
| HeyteaSans-Light | `--font-heyteasans-light` | webfont | 400 | Occasional light supporting copy | Jost |

- **HeyteaSans:** Measured at regular weight; navigation and controls use notably open tracking. Keep casing natural and restrained.
- **JaaamForHeytea:** Use as an expressive display face for short phrases; preserve the irregular, casual handwritten character.
- **HeyteaSans-Light:** A sparsely used light sans-serif face; reserve for secondary text and avoid competing with the display lettering.

### Type scale — Major Third (ratio ≈ 1.25, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 19px | 400 | 1.5 | 0.132em | — | HeyteaSans | Supporting descriptions and brand-story copy |
| button | 19px | 400 | 1.5 | 0.132em | — | HeyteaSans | Plain text controls and calls to explore |
| nav | 19px | 400 | 1.5 | 0.132em | — | HeyteaSans | Top-level site navigation and language selector |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 6, 12, 16, 36, 43, 45, 47, 58, 96, 160 px.
- Section rhythm 160px · element gap 6px · card padding — · max content width 1247px.

Use a spacious, single-column editorial page with a measured maximum content width of 1247px. The header aligns a small brand mark left and navigation right; content sections alternate between open text-and-illustration compositions and image-led galleries. Maintain the measured 160px section rhythm and 6px element gap as references, while keeping alignment calm and uncluttered. The measured density is spacious. Product imagery can form a three-column presentation, and store photography can run as a horizontal multi-item gallery.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page reads as flat: measured data reports no shadows, gradients, or radius scale, and the screenshot shows no prominent card surfaces. Keep sections on the same white canvas and avoid decorative layering. Let image content provide depth; use simple, unobtrusive separation rather than invented borders or raised panels.

## Imagery

Use loose black line-art illustrations as the signature visual language, especially in the hero and introductory storytelling. Pair them with real brand-history and store photography, plus isolated product images that show drinks and packaging clearly. Keep imagery on the white canvas with minimal framing; color should come mainly from the photographed products and spaces rather than added interface decoration.

## Components

### Header navigation

Small brand mark at left; widely tracked text links and an English language control aligned across the right side on white.

### Hand-drawn hero

Open hero composition pairing black line-art characters with a short handwritten slogan; keep the artwork visually dominant.

### Story introduction

Brief handwritten heading and supporting copy arranged with a small accompanying line illustration.

### Brand story feature

Editorial brand-history section combining a heading, archival-style shop photograph, concise copy, and a text-link prompt.

### Product showcase

Three-column drink presentation with product imagery, short handwritten heading, and compact feature notes.

### Store gallery

Horizontal row of store photographs with concise location labels and supporting descriptions.

### Footer

Restrained brand sign-off with muted information text and small utility links on the same white canvas.

### Measured component styles

- **Primary button** (“English”): transparent background · text #000000 · radius 0px · padding 0px · 400 18.75px HeyteaSans
- **Link**: transparent background · text #171717 · radius 0px · padding 0px · 400 16px system-ui
- **Navigation item** (“brand story products stores partner recr”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px system-ui

## Do

- Keep the page canvas white and the interface palette restrained.
- Use hand-drawn lettering for short, expressive display moments.
- Give illustrations and section transitions generous breathing room.
- Use plain text for navigation and understated calls to explore.
- Let real drink and store photography supply most non-neutral color.
- Keep story copy compact and subordinate to its imagery.

## Don't

- Do not introduce bright UI accent colors absent from the measured palette.
- Do not place every image inside a card or framed panel.
- Do not use heavy shadows, gradients, or rounded-card styling.
- Do not make handwritten display type carry long paragraphs.
- Do not compress the large intervals between editorial sections.
- Do not let navigation or supporting copy overpower the illustrations.

## Agent prompt

Build a new heytea page as a spacious, white editorial experience. Use Gallery White (#ffffff) for the continuous canvas, Sketch Ink (#000000) for navigation, headlines, and line-art, and Soft Graphite (#444444) only for subdued supporting or footer copy. Set navigation and body text in a clean sans-serif close to Jost, with open tracking; use a Caveat-like handwritten display face sparingly for short headings and slogans. Compose sections with generous whitespace, compact copy, and clear image-to-text relationships. Favor loose black illustrations and real product or store photography over decorative UI. Keep components flat, avoid invented shadows, gradients, and colored panels, and make links feel like understated text rather than prominent buttons. Preserve a calm, playful, hand-drawn brand voice.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide, open illustration-led composition beneath the header, with slogan centered between drawings. | brand introduction, visual-first | black line art, handwritten slogan, white canvas |
| 2 | feature-split | Short text blocks on the left balanced by a loose line illustration on the right. | mission statement, brand introduction | handwritten headings, supporting copy, line illustration |
| 3 | feature-split | Heading followed by an archival shop photo and concise editorial copy. | brand history, explore link | documentary photo, handwritten heading, plain text link |
| 4 | product-showcase | Three-column product presentation with concise feature notes above the drink images. | product discovery, feature highlights | isolated drink images, handwritten heading, compact notes |
| 5 | other | A quiet transition into the store section with a short heading and introductory copy. | section introduction | open whitespace, plain text |
| 6 | gallery | Horizontal multi-column gallery of store photographs with labels and concise location details. | browse locations, store discovery | store photography, image captions, text links |
| 7 | footer | Minimal closing band with a brand mark and small, muted information links. | secondary navigation, brand sign-off | muted text, small brand mark, white background |

## Source CSS custom properties (selected)

```css
--background: #fff;
--foreground: #171717;
--swiper-theme-color: #007aff;
```

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