---
name: Wgsn
description: "WGSN is a perfect reference for premium editorial SaaS design, demonstrating how a restrictive color palette and strong typography can convey high-end authority."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.6)"
  neutral: "#999999"
  bg-soft: "#F5F5F5"
  line: "rgba(0,0,0,0.6)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 16px
  lg: 40px
  pill: 999px

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

---

## Overview

The world's leading trend forecaster.

*A high-end fashion editorial meets enterprise SaaS dashboard.*

## Colors

Monochromatic base with high-contrast black and white, allowing imagery to provide the primary color.

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

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use DM Sans for all text layers.
- Keep body text legible with generous line-height.
- Use tight letter-spacing for large display text.

## Layout

Standard centered container with split-screen hero layout.

*Rhythm:* Generous whitespace to reflect premium positioning.

## Elevation & Depth

- rgb(0, 0, 0) 0px 0px 0px 1px inset
- Borders: Thin 1px borders in rgba(0,0,0,0.6).

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 40px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with 40px border-radius and high contrast (black on white or white on black).
- **card:** Rounded rectangles (16px radius) containing imagery and text overlays.
- **chip:** N/A
- **input:** N/A
- **hero:** Large split layout featuring a collage of trend imagery on one side and bold typography on the other.

## Do's and Don'ts

**Don't:**
- Don't use bright neon colors — screenshot shows a strictly monochromatic black/white base.
- Don't use sharp 0px corners — screenshot shows pill buttons (40px) and rounded cards (16px).
- Don't use wide letter-spacing in headlines — screenshot shows tight tracking (-1px).
- Don't use thin font weights for headlines — screenshot shows bold/semi-bold display text.
- Don't use busy backgrounds — screenshot uses solid black, white, or light gray for sections.
- Don't use small, cramped text — screenshot uses generous 18px body text with high line-height.

---

## System Prompt (paste into AI agent)

```
WGSN is a premium B2B trend forecasting platform that uses a refined, editorial design language. The color palette is strictly monochromatic, using pure black (#000000) and white (#FFFFFF) with semi-transparent blacks for hierarchy and gray (#999999) for muted elements. Typography is exclusively DM Sans, a humanist sans-serif, ranging from bold 56px headlines to 18px body text. Buttons are pill-shaped (40px radius) with high-contrast fills. The layout is spacious and centered, emphasizing large trend imagery. Critical constraints: never use accent colors, never use sharp corners on buttons, and never let text become cramped. Maintain an authoritative yet visionary tone throughout all copy.
```