---
name: Monocle
description: "Monocle is an excellent example of a premium editorial brand that leverages restraint and high-quality typography to convey a sense of global sophistication."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#141414"
  tertiary: "#FFC500"
  neutral: "#6E6E6E"
  bg-soft: "#F8F8F8"
  muted-soft: "#B3B3B3"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.25px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.1px"

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 refined editorial platform for global affairs, culture, and lifestyle.

*A high-end international magazine distilled into a digital format.*

## Colors

High-contrast black and white with a single vibrant yellow accent and muted grays for structure.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#141414`)** — uses `ink-soft` token
- **Accent (`#FFC500`)** — uses `accent` token
- **Muted (`#6E6E6E`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** grotesque-sans

- Use uppercase for all-caps navigation and secondary section links.
- Strictly maintain high contrast between black text and white backgrounds.
- Keep the masthead centered and prominent with a large serif font.

## Layout

A structured 12-column grid with a fixed, centered top navigation bar.

*Rhythm:* Consistent 4px grid with generous whitespace for editorial clarity.

## Elevation & Depth

- 0px 0px 0px 1px #D9D9D9
- 0px 30px 70px 0px rgba(0,0,0,0.3)
- Borders: Thin 1px black or gray borders used for structural separation and buttons.

## Shapes

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

## Components

- **button:** A bright yellow primary button with black uppercase text and a pill-like or rectangular shape with small border radius.
- **card:** Simple content blocks defined by white space and subtle border lines, featuring large imagery and bold headers.
- **chip:** Simple text labels separated by vertical pipes in the main navigation.
- **input:** Not visible in the main content area, but implied forms would likely use minimal borders and 4px radius.
- **hero:** A full-width area featuring either a large centered masthead or a horizontal row of bordered editorial illustrations.

## Do's and Don'ts

**Don't:**
- Don't use primary colors like red, blue, or green — screenshot shows yellow as the sole high-chroma accent.
- Don't use rounded, pill-shaped buttons everywhere — screenshot shows rectangular or slightly rounded buttons (4px radius).
- Don't use decorative script or handwriting fonts — screenshot shows structured transitional-serifs and clean sans-serifs.
- Don't leave the background dark or colored — screenshot shows a clean white background (#FFFFFF) for the main content area.
- Don't hide the primary navigation — screenshot shows persistent top-level links for MAGAZINE, RADIO, SHOP.
- Don't use complex gradients for backgrounds — screenshot shows solid white or simple transparent-to-white gradients.

---

## System Prompt (paste into AI agent)

```
Monocle is a refined editorial platform focusing on global affairs, culture, and lifestyle. It uses a high-contrast palette of pure black (#000000) on white (#FFFFFF) with a single vibrant yellow (#FFC500) as the primary accent. The typography relies heavily on transitional-serif fonts for headers and mastheads, paired with clean grotesque-sans for body text. Critical design rules include: never use low-contrast grays for primary text, always maintain generous whitespace to preserve the premium editorial feel, and strictly adhere to the two-color-plus-yellow palette. Avoid using overly decorative fonts, cluttered layouts, or any secondary accent colors that would distract from the curated content.
```