---
name: Wearechaiboy
description: "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."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#AFAFAF"
  neutral: "#AFAFAF"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 54px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 11px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 5px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#AFAFAF`)** — uses `ink-soft` token
- **Muted (`#AFAFAF`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 5px
- `lg`: 0px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```