An academic journal that lives well online. Cream-paper surfaces, Source Serif 4 for body running text, IBM Plex Mono for footnote numerals and citations, a single deep cobalt accent reserved for the active citation link. Built for research publications, scientific journals, and long-form scholarly content.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Thesis Quarterly"3description: "An academic journal that lives well online. Cream-paper surfaces, Source Serif 4 for body running text, IBM Plex Mono for footnote numerals and citations, a single deep cobalt accent reserved for the active citation link. Built for research publications, scientific journals, and long-form scholarly content."4tags: [academic, editorial, minimal, premium, warm]5colors:6 primary: "#1a1814"7 secondary: "#6e6960"8 tertiary: "#1a1814"9 neutral: "#ebe5d4"10 surface: "#f4eedb"11typography:12 display: "Source Serif 4"13 body: "Source Serif 4"14 mono: "IBM Plex Mono"15 scale:16 hero: "4.5rem / 1.04 / 600 / -0.025em"17 h1: "2.75rem / 1.12 / 600 / -0.02em"18 h2: "1.625rem / 1.3 / 600 / -0.012em"19 body: "1.125rem / 1.7 / 400 / -0.005em"20radius:21 sm: 2px22 md: 3px23 lg: 5px24 pill: 9999px25shadows:26 card: "rgba(26,24,20,0.04) 0 1px 2px"27 button: none28borders:29 card: "1px solid rgba(26,24,20,0.10)"30 divider: rgba(26,24,20,0.14)31buttons:32 primary:33 background: #1a181434 color: #f4eedb35 border: none36 shape: rounded37 padding: 11px 22px38 font: 600 / 0.875rem39 secondary:40 background: #ebe5d441 color: #1a181442 border: 1px solid rgba(26,24,20,0.14)43 shape: rounded44 padding: 11px 22px45 font: 600 / 0.875rem46 outline:47 background: transparent48 color: #1a181449 border: 1px solid rgba(26,24,20,0.20)50 shape: rounded51 padding: 11px 22px52 font: 600 / 0.875rem53 ghost:54 background: transparent55 color: #6e696056 border: none57 shape: rounded58 padding: 11px 16px59 font: 600 / 0.875rem60charts:61 variant: "thin-bars"62 stroke_width: 1.2563 fill_opacity: 0.0664 gridlines: true65 bar_gap: 12px66 highlight: single67 dot_marker: false68fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap"69dependencies: ["lucide-react"]70---71 72# Thesis Quarterly73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Thesis Quarterly** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — rounded shape, bg `#1a1814`, text `#f4eedb`, padding `11px 22px`, weight `600`.110- **Secondary** — rounded shape, bg `#ebe5d4`, text `#1a1814`, border `1px solid rgba(26,24,20,0.14)`, padding `11px 22px`, weight `600`.111- **Outline** — rounded shape, text `#1a1814`, border `1px solid rgba(26,24,20,0.20)`, padding `11px 22px`, weight `600`.112- **Ghost** — rounded shape, text `#6e6960`, padding `11px 16px`, weight `600`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#f4eedb`121- Border: `1px solid rgba(26,24,20,0.10)`122- Shadow: `rgba(26,24,20,0.04) 0 1px 2px`123- Radius: `radius.lg` (`5px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- Highlight strategy: `single` — emphasize a single bar/point per chart.134 135#### Typography pairings136 137- **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks.138- **Body (`Source Serif 4`)** — paragraphs, labels, button text, form inputs.139- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.140 141### 4 · Hard constraints142 143Never do any of the following without explicit instruction from the user:144 145- Introduce a new color, font, radius, or shadow that isn't declared above.146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.150 151### 5 · Before you finish — verify152 153Run through this checklist for every screen you produce:154 155- [ ] Every color used appears in the Colors table above.156- [ ] Headlines use the display font; body copy uses the body font.157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.159- [ ] Cards and dividers use the declared border + shadow tokens.160- [ ] No values were invented; if you needed something missing, you stopped and asked.161 162---163 164## 1. Atmosphere165 166Thesis Quarterly is an academic journal that lives well on the web. The page surface is cream paper `#f4eedb` — closer to uncoated journal stock than to white. Body runs in Source Serif 4 at 18px on a 1.7 leading — large enough to be read for an hour, with optical sizing that opens the glyphs at body size and tightens them in display. Footnote numerals, DOIs, citation references, and figure numbers all switch to IBM Plex Mono. The single accent is deep cobalt `#1d3f8a` that appears only on active citation links — the rest of the document is ink on cream.167 168The discipline is in the reading rhythm: serif body at generous size and leading, mono-numbered footnotes in the margin, and one cobalt link colour that earns its meaning by being the only colour.169 170**Signature moves**171- Source Serif 4 at 18px / 1.7 leading for body — designed for hour-long reading172- IBM Plex Mono for every footnote numeral, DOI, citation reference173- Cobalt `#1d3f8a` only on active citation links — the only colour in the system174- Marginalia in mono at 11px uppercase — page numbers, footnote refs, dateline175- Soft 3-5px corners — the journal-card voice, never sharp, never pill176 177## 2. Palette178 179### Surfaces180- **Cream** `#f4eedb` — page background (warm uncoated journal stock)181- **Cream Lift** `#ebe5d4` — secondary surfaces, table headers, footnote bands182- **Hairline** `rgba(26,24,20,0.10)` — every divider183 184### Ink185- **Ink** `#1a1814` — text, headings, primary CTA fill186- **Ink 50** `#6e6960` — secondary text, mono marginalia187 188### Accent189- **Cobalt** `#1d3f8a` — active citation link, chart highlight190- **Cobalt Soft** `rgba(29,63,138,0.10)` — hovered citation background191 192## 3. Typography193 194| Role | Font | Size | Weight | Leading | Tracking |195|------|------|------|--------|---------|----------|196| Hero | Source Serif 4 | 72px | 600 | 1.04 | -0.025em |197| H1 | Source Serif 4 | 44px | 600 | 1.12 | -0.02em |198| H2 | Source Serif 4 | 26px | 600 | 1.3 | -0.012em |199| Body | Source Serif 4 | 18px | 400 | 1.7 | -0.005em |200| Pull Quote | Source Serif 4 (italic) | 22px | 400 | 1.4 | -0.01em |201| UI / Button | IBM Plex Mono | 13px | 600 | 1.4 | 0 |202| Footnote Numeral | IBM Plex Mono | 11px | 600 | 1.0 | 0 tabular-nums superscript |203| Marginalia | IBM Plex Mono | 11px | 500 | 1.0 | 0.08em uppercase |204| DOI / Citation | IBM Plex Mono | 12px | 500 | 1.0 | 0 tabular-nums |205 206Source Serif 4 uses optical sizing — at 72px the strokes gain weight, at 18px body they open up for legibility. IBM Plex Mono carries every numbered or technical string. Buttons run in mono — that's the academic-press voice carried into UI.207 208## 4. Buttons209 210### Primary (Ink with Mono Label)211```css212background: #1a1814;213color: #f4eedb;214padding: 11px 22px;215border-radius: 3px;216font-family: "IBM Plex Mono";217font-weight: 600;218```219 220Mono on the button label is the entire signature — buttons read as filing-card actions ("Read Full Paper", "Cite This Article").221 222### Secondary (Cream Lift)223- `#ebe5d4` background, 1px hairline at 14% ink, ink text in mono — same shape, same padding224 225### Outline & Ghost226- Outline: transparent, 1px hairline at 20% ink227- Ghost: no border, ink-50 mono, hover underlines228 229## 5. Cards230 231```css232background: #f4eedb;233border: 1px solid rgba(26,24,20,0.10);234border-radius: 5px;235box-shadow: rgba(26,24,20,0.04) 0 1px 2px;236```237 238The single 1px shadow is the maximum lift. Featured papers (the issue's lead article) lift to cream-lift surface with a 2px ink top border — the lead-article rule.239 240## 6. Charts241 242Thin precise bars (3px wide, 12px gap) with dashed gridlines at 8% ink. One bar in cobalt, others in 22% ink. Line charts at 1.25px ink with a 6% cobalt fill. Y-axis labels in IBM Plex Mono uppercase 11px set in the left margin. Figure captions in italic Source Serif 4 14px below.243 244## 7. Tabs245 246Underline 1.5px in cobalt for the active state. Inactive tabs are ink-50 in IBM Plex Mono 500. Hover = cobalt-soft background wash. Tabs sit on a 1px hairline baseline.247 248## 8. Spacing249 250- Base 4px (column-aware)251- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128`252- Section padding: 128px desktop, 64px mobile253- Body column max-width: 680px — the optimal reading measure for 18px serif254 255## 9. Do's & don'ts256 257✅ **Do**258- Use Source Serif 4 at 18px / 1.7 leading for body — that's the hour-long-reading measure259- Put every footnote numeral, DOI, figure number in IBM Plex Mono260- Reserve cobalt for active citation links + chart highlight only261- Hold body column to ~680px — wider columns break the reading rhythm262 263❌ **Don't**264- Use sans-serif body — the entire system is serif body, mono numerals265- Use a second accent — cobalt alone, on links and the chart266- Use card shadows beyond the 1px lift — paper, not cards267- Use sharp 0px corners — soft 3-5px is the journal-card voice268 269---270 271## Tokens272 273> Generated from the same source the live preview renders from.274> Treat the values below as the contract — never substitute approximations.275 276### Colors277 278| Role | Value |279|-----------|-------|280| primary | `#1a1814` |281| secondary | `#6e6960` |282| tertiary | `#1a1814` |283| neutral | `#ebe5d4` |284| surface | `#f4eedb` |285 286### Typography287 288- **Display:** Source Serif 4289- **Body:** Source Serif 4290- **Mono:** IBM Plex Mono291 292| Role | size / leading / weight / tracking |293|------|------------------------------------|294| Hero | 4.5rem / 1.04 / 600 / -0.025em |295| H1 | 2.75rem / 1.12 / 600 / -0.02em |296| H2 | 1.625rem / 1.3 / 600 / -0.012em |297| Body | 1.125rem / 1.7 / 400 / -0.005em |298 299### Radius300 301- sm: `2px`302- md: `3px`303- lg: `5px`304- pill: `9999px`305 306### Shadows307 308- **card:** `rgba(26,24,20,0.04) 0 1px 2px`309- **button:** `none`310 311### Borders312 313- **card:** `1px solid rgba(26,24,20,0.10)`314- **divider:** `rgba(26,24,20,0.14)`315 316### Buttons317 318Four variants, each fully tokenized. The preview renders from these exact values.319 320#### Primary321 322| Property | Value |323|----------|-------|324| shape | `rounded` |325| background | `#1a1814` |326| color | `#f4eedb` |327| border | `none` |328| padding | `11px 22px` |329| fontWeight | `600` |330| fontSize | `0.875rem` |331 332#### Secondary333 334| Property | Value |335|----------|-------|336| shape | `rounded` |337| background | `#ebe5d4` |338| color | `#1a1814` |339| border | `1px solid rgba(26,24,20,0.14)` |340| padding | `11px 22px` |341| fontWeight | `600` |342| fontSize | `0.875rem` |343 344#### Outline345 346| Property | Value |347|----------|-------|348| shape | `rounded` |349| background | `transparent` |350| color | `#1a1814` |351| border | `1px solid rgba(26,24,20,0.20)` |352| padding | `11px 22px` |353| fontWeight | `600` |354| fontSize | `0.875rem` |355 356#### Ghost357 358| Property | Value |359|----------|-------|360| shape | `rounded` |361| background | `transparent` |362| color | `#6e6960` |363| border | `none` |364| padding | `11px 16px` |365| fontWeight | `600` |366| fontSize | `0.875rem` |367 368### Charts369 370| Property | Value |371|----------|-------|372| variant | `thin-bars` |373| strokeWidth | `1.25` |374| fillOpacity | `0.06` |375| gridlines | `true` |376| barGap | `12px` |377| highlight | `single` |378| dotMarker | `false` |379 # 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.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Source Serif 4"', 'serif'], sans: ['"Source Serif 4"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#1a1814', secondary: '#6e6960', accent: '#1a1814', neutral: '#ebe5d4', surface: '#f4eedb', }, borderRadius: { sm: '2px', md: '3px', lg: '5px', }, }, },};A developer console as a brand. Warm off-white, JetBrains Mono everywhere, a single cyan caret as the only accent. Every divider, label, and CTA aligns to a 4px mono baseline grid. Built to look like a terminal that's been art-directed.
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.
A training platform with the discipline of a stopwatch. Near-black surfaces with a single chartreuse PB indicator, Archivo Black for split times at oversized scale, Inter for prose, JetBrains Mono with tabular-nums for every pace and heart-rate. Built for endurance training apps, gym programming, and athlete-facing dashboards where the only thing that matters is the next interval.
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.