CURATED · OPEN · FREE

Monocle

A refined editorial platform for global affairs, culture, and lifestyle.

01

Identity DNA

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

02

Color

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

03

Typography

transitional-serif · grotesque-sans

• display96px · 400
• h148px · 700
• h224px · 700
• body16px · 400
• caption13px · 400

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.

04

Spacing

Consistent 4px grid with generous whitespace for editorial clarity.

05

Surfaces

Thin 1px black or gray borders used for structural separation and buttons.

0px 0px 0px 1px #D9D9D9 · 0px 30px 70px 0px rgba(0,0,0,0.3)

06

Layout

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

07

Motion & Interaction

Subtle background-color and transform transitions on interactive elements. · Linear slide or fade transitions for UI state changes.

Subtle background-color changes or transform shifts on buttons and links. · Immediate visual response with cursor pointer states.

08

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.

09

Voice & Don'ts

• Tone Authoritative, sophisticated, and globally minded.
• Headlines Direct, informative, and often in all-caps for category navigation.
• CTAs Bold, clear, and functional, using high-contrast yellow for primary actions like 'SUBSCRIBE'.

• 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.
• Avoid: Avoid overly casual language or excessive exclamation points.
• Avoid: Avoid cluttering the interface with too many competing visual elements.
• Avoid: Avoid using low-contrast colors that compromise readability.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko