editorial · premium · warm · serif · bold

Gazette Broadside.

A maximalist editorial broadside that earns every inch with prose. Sage-grey paper surface, Old Standard TT at extreme display scale for headlines, drop-caps that span eight body lines, full-bleed pull-quote slabs in oversized serif italic, Inter for navigation, a single muted burgundy accent reserved for the editor's mark and the issue-number tag. Built for long-form magazines, opinion sections, and editorial publishers who lead with words at oversized scale.

01 · Preview

The kitchen sink.

Gazette.app

ProductPricingDocsAbout

Sign inGet started

editorial · premium · warm

Build with Gazette Broadside.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#1D1F1C

secondary

#6B6E64

tertiary

#1D1F1C

neutral

#DADBCD

surface

#E6E7D8

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

1px

md

2px

lg

3px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

1---
2name: "Gazette Broadside"
3description: "A maximalist editorial broadside that earns every inch with prose. Sage-grey paper surface, Old Standard TT at extreme display scale for headlines, drop-caps that span eight body lines, full-bleed pull-quote slabs in oversized serif italic, Inter for navigation, a single muted burgundy accent reserved for the editor's mark and the issue-number tag. Built for long-form magazines, opinion sections, and editorial publishers who lead with words at oversized scale."
4tags: [editorial, premium, warm, serif, bold]
5colors:
6  primary:   "#1d1f1c"
7  secondary: "#6b6e64"
8  tertiary:  "#1d1f1c"
9  neutral:   "#dadbcd"
10  surface:   "#e6e7d8"
11typography:
12  display: "Old Standard TT"
13  body:    "Old Standard TT"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "12rem / 0.86 / 700 / -0.04em"
17    h1:   "5.5rem / 0.96 / 700 / -0.025em"
18    h2:   "2.25rem / 1.18 / 400 / -0.012em"
19    body: "1.1875rem / 1.7 / 400 / -0.003em"
20radius:
21  sm: 1px
22  md: 2px
23  lg: 3px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(29,31,28,0.16)"
30  divider: rgba(29,31,28,0.20)
31buttons:
32  primary:
33    background: #1d1f1c
34    color: #e6e7d8
35    border: none
36    shape: sharp
37    padding: 12px 24px
38    font: 500 / 0.8125rem / 0.18em
39    uppercase: true
40  secondary:
41    background: transparent
42    color: #1d1f1c
43    border: 1px solid #1d1f1c
44    shape: sharp
45    padding: 12px 24px
46    font: 500 / 0.8125rem / 0.18em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #1d1f1c
51    border: 1px solid rgba(29,31,28,0.20)
52    shape: sharp
53    padding: 12px 24px
54    font: 500 / 0.8125rem / 0.18em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #6b6e64
59    border: none
60    shape: sharp
61    padding: 12px 18px
62    font: 500 / 0.8125rem / 0.18em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 14px
70  highlight: single
71  dot_marker: false
72fonts_url: "https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
73dependencies: ["lucide-react"]
74---
75 
76# Gazette Broadside
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Gazette Broadside** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  in your global stylesheet and reference it everywhere downstream.
102- The Google Fonts `<link>` is provided in the Typography section.
103  Add it to `<head>` before any component renders.
104 
105### 3 · Component recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
111Four variants are defined. Pick one — never blend variants or invent a fifth.
112 
113- **Primary** — sharp shape, bg `#1d1f1c`, text `#e6e7d8`, padding `12px 24px`, weight `500`, uppercased.
114- **Secondary** — sharp shape, text `#1d1f1c`, border `1px solid #1d1f1c`, padding `12px 24px`, weight `500`, uppercased.
115- **Outline** — sharp shape, text `#1d1f1c`, border `1px solid rgba(29,31,28,0.20)`, padding `12px 24px`, weight `500`, uppercased.
116- **Ghost** — sharp shape, text `#6b6e64`, padding `12px 18px`, weight `500`, uppercased.
117 
118Reach for **primary** as the single dominant CTA per screen.
119**Secondary** for the supporting action. **Outline** for tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
124- Background: `#e6e7d8`
125- Border: `1px solid rgba(29,31,28,0.16)`
126- Shadow: `none`
127- Radius: `radius.lg` (`3px`)
128- Internal padding: `20px` for compact cards, `24–28px` for content cards.
129 
130#### Tabs
131 
132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
133 
134#### Charts
135 
136- Bar/line variant: `thin-bars`
137- No gridlines — let the bars/lines carry the data.
138- Highlight strategy: `single` — emphasize a single bar/point per chart.
139 
140#### Typography pairings
141 
142- **Display (`Old Standard TT`)** — h1, h2, hero headlines, brand wordmarks.
143- **Body (`Old Standard TT`)** — paragraphs, labels, button text, form inputs.
144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
145 
146### 4 · Hard constraints
147 
148Never do any of the following without explicit instruction from the user:
149 
150- Introduce a new color, font, radius, or shadow that isn't declared above.
151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
155 
156### 5 · Before you finish — verify
157 
158Run through this checklist for every screen you produce:
159 
160- [ ] Every color used appears in the Colors table above.
161- [ ] Headlines use the display font; body copy uses the body font.
162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
164- [ ] Cards and dividers use the declared border + shadow tokens.
165- [ ] No values were invented; if you needed something missing, you stopped and asked.
166 
167---
168 
169## 1. Atmosphere
170 
171Gazette Broadside is a maximalist editorial broadside that earns every inch with prose. The page surface is sage-grey `#e6e7d8` — a cool olive-paper tone that reads as a printed weekly review, never bright. Headlines run in Old Standard TT 700 at 192px with a 0.86 leading — the classical bold serif at full-bleed scale, taking up the entire above-the-fold. The first paragraph of every article opens with a drop-cap that spans eight body lines: Old Standard TT 400 at 13rem, slight negative left margin so it visually overhangs the column. Pull quotes are full-bleed slabs: Old Standard TT italic 400 at 64px on a 1.18 leading, surrounded by 96px of vertical space, indented from a single 1px ink rule on the left. Body sits in Old Standard TT regular at 19px on a 1.7 leading. Navigation runs in Inter 500 with 0.18em uppercase tracking — the only sans in the entire system. The single accent is muted burgundy `#6e2530` reserved for the editor's mark and the issue-number tag.
172 
173The discipline is in the maximalism: every page is dense with type, but the type does the entire job. There are no images, no cards, no decoration — just headlines at 192px, drop-caps at 208px, pull-quote slabs at 64px italic, and 19px body that runs for full columns.
174 
175**Signature moves**
176- Old Standard TT 700 at 192px headlines — classical bold serif at full-bleed scale
177- Drop-caps spanning 8 body lines (208px), Old Standard TT 400, slight negative left margin
178- Full-bleed pull-quote slabs — italic 64px with 96px breathing room and a 1px left rule
179- 19px body in Old Standard TT regular on 1.7 leading — long-form serious reading
180- Sage-grey paper `#e6e7d8` — cool olive printed-weekly tone, never warm cream
181- Burgundy `#6e2530` exclusively on editor's mark + issue-number tag — two surfaces only
182- Inter (500, 0.18em uppercase) is the only sans — used for nav and page-number rails
183 
184## 2. Palette
185 
186### Surfaces
187- **Sage Paper** `#e6e7d8` — page background (cool olive printed-weekly)
188- **Sage Lift** `#dadbcd` — masthead, footer, table headers
189- **Hairline** `rgba(29,31,28,0.16)` — every divider, every rule
190 
191### Ink
192- **Ink** `#1d1f1c` — text, headings, primary CTA fill (warm near-black)
193- **Ink 50** `#6b6e64` — secondary text, mono captions, byline
194 
195### Accent
196- **Burgundy** `#6e2530` — editor's mark, issue-number tag
197- That is the only color in the system.
198 
199## 3. Typography
200 
201| Role | Font | Size | Weight | Leading | Tracking |
202|------|------|------|--------|---------|----------|
203| Hero Headline | Old Standard TT | 192px | 700 | 0.86 | -0.04em |
204| H1 | Old Standard TT | 88px | 700 | 0.96 | -0.025em |
205| H2 / Subhead | Old Standard TT | 36px | 400 | 1.18 | -0.012em |
206| Drop-Cap | Old Standard TT | 208px | 400 | 0.85 | -0.04em |
207| Pull Quote | Old Standard TT (italic) | 64px | 400 | 1.18 | -0.012em |
208| Body | Old Standard TT | 19px | 400 | 1.7 | -0.003em |
209| Lead Paragraph | Old Standard TT | 22px | 400 | 1.6 | -0.005em |
210| Byline / Caption | Inter | 12px | 500 | 1.4 | 0.10em uppercase |
211| Nav / Section Label | Inter | 13px | 500 | 1.4 | 0.18em uppercase |
212| Page Number | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |
213| Issue Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums |
214 
215Old Standard TT carries display, drop-caps, pull-quotes, and body — the entire editorial voice in one classical serif. Inter carries only the navigation rail and bylines. Mono carries only page numbers and the issue tag.
216 
217## 4. Buttons
218 
219### Primary (Ink Sharp)
220```css
221background: #1d1f1c;
222color: #e6e7d8;
223padding: 12px 24px;
224border-radius: 2px;
225text-transform: uppercase;
226letter-spacing: 0.18em;
227font-weight: 500;
228```
229 
230The 0.18em tracking is the engraved-masthead voice carried into the subscribe button.
231 
232### Secondary (Ink Outline)
233- Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking
234 
235### Outline & Ghost
236- Outline: transparent, 1px hairline at 20% ink
237- Ghost: no border, ink-50 uppercase
238 
239## 5. Cards (rare)
240 
241The system prefers full-bleed columns separated by 1px hairlines and generous vertical breathing room. When a card is needed (a back-issue tile, a contributor card), it is sharp 2px corners, 1px hairline at 16% ink — never lifted, never shadowed.
242 
243## 6. Charts
244 
245Thin precise bars (3px wide, 14px gap). One bar in burgundy, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for editorial data exhibits and read as broadside graphics.
246 
247## 7. Tabs
248 
249Underline 1.5px in burgundy for the active state. Inactive tabs are ink-50 in Inter 500 uppercase 0.18em. The active label often switches to Old Standard TT italic at the same size — the rhythm change.
250 
251## 8. Spacing
252 
253- Base 8px (text-baseline aware)
254- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280`
255- Section padding: 200px desktop, 96px mobile — full editorial breathing room
256- Pull-quote padding: 96px above and below
257- Drop-cap negative left margin: -16px
258 
259## 9. Do's & don'ts
260 
261✅ **Do**
262- Use Old Standard TT 700 at 192px for the hero headline — the classical bold at full-bleed
263- Open every article with a drop-cap spanning 8 body lines (208px) with a slight negative left margin
264- Use full-bleed pull-quote slabs — Old Standard TT italic 64px with 96px breathing room
265- Use 19px body — long-form serious reading is the entire premise
266- Reserve burgundy for editor's mark + issue-number tag exclusively
267 
268❌ **Don't**
269- Add images or photography to the broadside — the typography earns the entire page
270- Use Old Standard TT for nav or UI labels — Inter at 0.18em uppercase is the only sans
271- Use a second accent — burgundy alone, on two surfaces
272- Round any corner beyond 3px — letterpress precision throughout
273- Use 16px body — 19px on 1.7 leading is the editorial-broadside readability minimum
274 
275---
276 
277## Tokens
278 
279> Generated from the same source the live preview renders from.
280> Treat the values below as the contract — never substitute approximations.
281 
282### Colors
283 
284| Role      | Value |
285|-----------|-------|
286| primary   | `#1d1f1c` |
287| secondary | `#6b6e64` |
288| tertiary  | `#1d1f1c` |
289| neutral   | `#dadbcd` |
290| surface   | `#e6e7d8` |
291 
292### Typography
293 
294- **Display:** Old Standard TT
295- **Body:** Old Standard TT
296- **Mono:** JetBrains Mono
297 
298| Role | size / leading / weight / tracking |
299|------|------------------------------------|
300| Hero | 12rem / 0.86 / 700 / -0.04em |
301| H1   | 5.5rem / 0.96 / 700 / -0.025em |
302| H2   | 2.25rem / 1.18 / 400 / -0.012em |
303| Body | 1.1875rem / 1.7 / 400 / -0.003em |
304 
305### Radius
306 
307- sm: `1px`
308- md: `2px`
309- lg: `3px`
310- pill: `9999px`
311 
312### Shadows
313 
314- **card:** `none`
315- **button:** `none`
316 
317### Borders
318 
319- **card:** `1px solid rgba(29,31,28,0.16)`
320- **divider:** `rgba(29,31,28,0.20)`
321 
322### Buttons
323 
324Four variants, each fully tokenized. The preview renders from these exact values.
325 
326#### Primary
327 
328| Property | Value |
329|----------|-------|
330| shape | `sharp` |
331| background | `#1d1f1c` |
332| color | `#e6e7d8` |
333| border | `none` |
334| padding | `12px 24px` |
335| fontWeight | `500` |
336| fontSize | `0.8125rem` |
337| tracking | `0.18em` |
338| uppercase | `true` |
339 
340#### Secondary
341 
342| Property | Value |
343|----------|-------|
344| shape | `sharp` |
345| background | `transparent` |
346| color | `#1d1f1c` |
347| border | `1px solid #1d1f1c` |
348| padding | `12px 24px` |
349| fontWeight | `500` |
350| fontSize | `0.8125rem` |
351| tracking | `0.18em` |
352| uppercase | `true` |
353 
354#### Outline
355 
356| Property | Value |
357|----------|-------|
358| shape | `sharp` |
359| background | `transparent` |
360| color | `#1d1f1c` |
361| border | `1px solid rgba(29,31,28,0.20)` |
362| padding | `12px 24px` |
363| fontWeight | `500` |
364| fontSize | `0.8125rem` |
365| tracking | `0.18em` |
366| uppercase | `true` |
367 
368#### Ghost
369 
370| Property | Value |
371|----------|-------|
372| shape | `sharp` |
373| background | `transparent` |
374| color | `#6b6e64` |
375| border | `none` |
376| padding | `12px 18px` |
377| fontWeight | `500` |
378| fontSize | `0.8125rem` |
379| tracking | `0.18em` |
380| uppercase | `true` |
381 
382### Charts
383 
384| Property | Value |
385|----------|-------|
386| variant | `thin-bars` |
387| strokeWidth | `1` |
388| fillOpacity | `0` |
389| gridlines | `false` |
390| barGap | `14px` |
391| highlight | `single` |
392| dotMarker | `false` |
393

03 · How to use it

Wire it into your agent.

markdown

# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.

04 · Required setup

Three snippets.

Google Fonts link

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Old Standard TT"', 'serif'],
        sans:    ['"Old Standard TT"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1d1f1c',
        secondary: '#6b6e64',
        accent:    '#1d1f1c',
        neutral:   '#dadbcd',
        surface:   '#e6e7d8',
      },
      borderRadius: {
        sm: '1px',
        md: '2px',
        lg: '3px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Limepress Fintech

Lime-bright fintech with weight-900 display at 0.85 line-height — billboard-density typography, dark-green-on-lime pill CTAs, ring-shadow depth.

fintechboldwarmplayful

Limepress.app

ProductPricingDocsAbout

Sign inGet started

fintech · bold · warm

Build with Limepress Fintech.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Chambers Counsel

A law firm that earns trust through restraint. Deep oxford-navy ink on warm parchment, EB Garamond at oversized scale for partner names and case headings, Inter for body, a single muted gold-leaf accent reserved for case-number tags and verified-citation marks. Built for law firms, chambers, advisory practices, and policy institutes where gravitas is the brand.

legaleditorialpremiumwarmserif

Chambers.app

ProductPricingDocsAbout

Sign inGet started

legal · editorial · premium

Build with Chambers Counsel.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational