---
name: Highsnobiety
description: "A quintessential example of a modern editorial site that blends streetwear aesthetics with premium design sensibilities."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#020202"
  tertiary: "#263D43"
  neutral: "#737373"
  bg-soft: "#F0F0F0"
  bg-quiet: "#E0E0E0"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.4px"
  body:
    fontFamily: grotesque-sans
    fontSize: 17px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A premium editorial platform for streetwear culture and fashion news.

*A premium streetwear magazine that blends fashion, culture, and commerce.*

## Colors

High-contrast monochrome with muted olive/khaki accents for editorial highlights.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#020202`)** — uses `ink-soft` token
- **Accent (`#263D43`)** — uses `accent` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Headlines and navigation use uppercase with tight tracking.
- Body text uses a comfortable line-height for reading.
- Primary font is a custom grotesque sans-serif (HS Sans).

## Layout

Classic editorial grid with a prominent hero section, followed by content blocks.

*Rhythm:* Multiples of 4px for consistent vertical rhythm and padding.

## Elevation & Depth

- 0px 1px 0px 0px rgba(0,0,0,1)
- 0px 0px 0px 0px rgba(0,0,0,0.12)
- 0px 0px 0px 0px rgba(0,0,0,0.08)
- Borders: Thin 1px borders (bottom-heavy) using #000000 or #737373.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Typically minimalist, often just text with a bottom border or a full-width 'OK' style block.
- **card:** Image-heavy cards for articles, often with a large hero image and text below.
- **chip:** Uppercase, boxed labels like 'SPRING '26 ISSUE' with a border.
- **input:** Standard form inputs for search or privacy toggles.
- **hero:** Full-width photographic backgrounds with overlaid large-scale typography.

## Do's and Don'ts

**Don't:**
- Don't use bright, neon colors — screenshot shows a palette of black, white, and muted earth tones.
- Don't use decorative or script fonts — screenshot shows a clean, bold grotesque sans-serif.
- Don't use heavy drop shadows — screenshot shows flat design with subtle or no shadows.
- Don't use small, dense text blocks — screenshot shows generous line-height and clear hierarchy.
- Don't use rounded corners everywhere — screenshot shows sharp or very slightly rounded edges.
- Don't use vibrant gradients — screenshot shows solid color blocks and photographic backgrounds.

---

## System Prompt (paste into AI agent)

```
Highsnobiety is a premium streetwear and culture editorial platform. Its design DNA is rooted in a high-contrast monochrome palette, using #000000 and #FFFFFF as the primary drivers, with occasional muted accents like #263D43 and #737373. The typography is a custom grotesque sans-serif (HS Sans) used in a bold, uppercase style for headlines and navigation, with a comfortable 1.6 line-height for body text. Critical design rules: avoid any whimsical or rounded elements, never use bright or neon colors, and maintain a strict, clean editorial grid. Always prioritize large, impactful imagery and clear typographic hierarchy over decorative flourishes.
```