---
name: Hypebeast
description: "This site is worth including as a benchmark for high-end digital editorial design, showcasing how to balance bold typography with extensive photographic content."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#111111"
  secondary: "#888888"
  tertiary: "#00469B"
  neutral: "#888888"
  bg-soft: "#F5F5F7"
  line: "rgba(238,238,238,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.5px"
  h3:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.25px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "0.5px"

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

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

---

## Overview

A bold, authoritative digital magazine for premium streetwear and lifestyle culture.

*A high-end fashion magazine's digital front door.*

## Colors

High-contrast monochrome with a single authoritative blue accent.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Secondary text (`#888888`)** — uses `ink-soft` token
- **Accent (`#00469B`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(238,238,238,1)`)** — uses `line` token

## Typography

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

- Headlines use tight letter-spacing and heavy weight for impact.
- Body text maintains a clean, readable humanist style.
- Navigation and category labels are consistently uppercase.

## Layout

Asymmetric multi-column grid for editorial hierarchy.

*Rhythm:* Standard 4px grid with generous padding for content separation.

## Elevation & Depth

- Borders: Thin, light gray lines used sparingly to separate content sections.

## Shapes

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

## Components

- **button:** Minimalist, often text-based or ghost buttons.
- **card:** Image-heavy cards with minimal decoration, relying on strong typography.
- **chip:** Simple uppercase text labels for categories like 'Gaming' or 'Footwear'.
- **input:** Clean search bar with a bottom border.
- **hero:** Large, dominant hero section featuring a single major editorial piece.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners on cards — screenshot shows sharp or 2px radius corners.
- Don't use drop shadows on UI elements — screenshot shows flat design.
- Don't use a multi-colored gradient background — screenshot shows solid white.
- Don't use decorative serif fonts — screenshot uses clean sans-serif categories.
- Don't center-align all text — screenshot uses strong left alignment for headlines.
- Don't use bright primary colors for buttons — screenshot uses a single deep blue accent.

---

## System Prompt (paste into AI agent)

```
Hypebeast is a premium digital editorial platform focusing on streetwear, fashion, and culture. Its design DNA is characterized by a bold, monochromatic palette (#FFFFFF background, #111111 ink) with a single authoritative blue accent (#00469B). Typography is dominated by heavy grotesque-sans for headlines and clean humanist-sans for body text, all consistently left-aligned. Critical design rules include: avoid excessive decoration or bright colors, maintain high contrast for readability, and use generous white space to let photography dominate. The layout is a clean, multi-column grid that prioritizes visual hierarchy through typography and image placement. Key interactions are subtle, relying on quick color transitions for hover states.
```