CURATED · OPEN · FREE

Wearechaiboy

A dark, premium editorial e-commerce experience for a contemporary tea brand.

01

Identity DNA

A high-fashion magazine editorial for a modern tea brand.

02

Color

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

03

Typography

grotesque-sans

• display54px · 400
• body14px · 400
• small11px · 400

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

04

Spacing

Tight and deliberate, using generous negative space to emphasize the editorial photography.

05

Surfaces

1px solid #AFAFAF or 1px solid rgba(255,255,255,0.2)

06

Layout

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

07

Motion & Interaction

Smooth opacity transitions for modal overlays and UI state changes. · Linear scrolling ticker tape for promotional messages.

Subtle color shifts or opacity changes to indicate interactivity. · Immediate visual feedback via opacity or background-color transitions.

08

Components

• button Ghost or outlined with a subtle border radius, using uppercase text and transparent background.
• card Image-focused with minimal UI, relying on edge-to-edge photography.
• chip Small outlined badges for categories with rounded corners.
• input Simple bottom-border-only text fields within a modal overlay.
• hero Full-screen immersive photography that acts as the primary visual element.

09

Voice & Don'ts

• Tone Refined, premium, and direct.
• Headlines Short, impactful, all-caps statements that command attention.
• CTAs Understated yet clear, often using ghost buttons or simple underlined text.

• 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.
• Avoid: Avoid using multiple colors; keep the palette strictly monochrome.
• Avoid: Avoid decorative or script fonts; maintain the clean, modern aesthetic.
• Avoid: Avoid heavy drop shadows or unnecessary gradients.
• Avoid: Avoid cluttered layouts; prioritize large imagery and negative space.
• Avoid: Avoid playful or casual tone of voice.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko