/
design.md
Back to directory
dark · editorial · serif · premium · magazine

Onyx Quarterly.

Premium dark editorial. Flat near-black canvas, oversized Fraunces variable serif at 6.5rem with opsz/SOFT axes, hairline rules between sections, one warm-cream accent for pull-words. The discipline of a printed quarterly, in the dark.

01 · Preview

The kitchen sink.

Onyx.app
ProductPricingDocsAbout
Sign inGet started→
dark · editorial · serif

Build with Onyx Quarterly.

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
#EEEAE0
secondary
#8C857A
tertiary
#E8C896
neutral
#0C0B09
surface
#15130F
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

Primary→SecondaryOutlineGhostText 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
0px
md
2px
lg
4px
pill
999px
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: "Onyx Quarterly"
3description: "Premium dark editorial. Flat near-black canvas, oversized Fraunces variable serif at 6.5rem with opsz/SOFT axes, hairline rules between sections, one warm-cream accent for pull-words. The discipline of a printed quarterly, in the dark."
4tags: [dark, editorial, serif, premium, magazine]
5colors:
6  primary:   "#EEEAE0"
7  secondary: "#8C857A"
8  tertiary:  "#E8C896"
9  neutral:   "#0C0B09"
10  surface:   "#15130F"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "6.5rem / 0.98 / 400 / -0.035em"
17    h1:   "3.5rem / 1.05 / 400 / -0.028em"
18    h2:   "1.625rem / 1.3 / 500 / -0.012em"
19    body: "1.0625rem / 1.75 / 400 / -0.003em"
20radius:
21  sm: 0px
22  md: 2px
23  lg: 4px
24shadows:
25  card:   "0 0 0 1px rgba(238, 234, 224, 0.10)"
26  button: none
27borders:
28  card:    "1px solid rgba(238, 234, 224, 0.10)"
29  divider: "rgba(238, 234, 224, 0.18)"
30buttons:
31  primary:
32    background: #E8C896
33    color: #0C0B09
34    border: 1px solid #E8C896
35    shape: sharp
36    padding: 14px 26px
37    font: mono / 500 / 0.75rem / 0.14em
38    uppercase: true
39    suffix: arrow
40  secondary:
41    background: transparent
42    color: #EEEAE0
43    border: 1px solid #EEEAE0
44    shape: sharp
45    padding: 14px 26px
46    font: mono / 500 / 0.75rem / 0.14em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #EEEAE0
51    border: 1px solid rgba(238, 234, 224, 0.30)
52    shape: sharp
53    padding: 13px 25px
54    font: mono / 500 / 0.75rem / 0.14em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #E8C896
59    border: none
60    shape: sharp
61    padding: 13px 4px
62    font: mono / 500 / 0.75rem / 0.14em
63    uppercase: true
64    hover: underline
65charts:
66  variant: "thin-bars"
67  stroke_width: 1
68  gridlines: false
69  bar_radius: 0px
70  bar_gap: 10px
71  highlight: last
72  axis_color: "#8C857A"
73  palette: ["#EEEAE0", "#EEEAE0", "#E8C896"]
74fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
75dependencies: ["lucide-react"]
76---
77 
78# Onyx Quarterly
79 
80## AI Build Instructions
81 
82> **Read this section before writing any code.** The rules below
83> are non-negotiable. Every value used in the UI must come from this
84> file's frontmatter — never substitute, approximate, or invent new
85> colors, fonts, radii, or shadows. If a value is missing, ask the
86> user before adding one.
87 
88### 1 · Your role
89 
90You are building UI for a project that has adopted **Onyx Quarterly** as its
91design system. Treat `DESIGN.md` as the single source of truth.
92Your job is to translate the user's product requirements into
93components and pages that look like they were designed by the same
94person who authored this file.
95 
96### 2 · Token compliance
97 
98- Pull every color, font family, radius, shadow, and spacing value
99  from the frontmatter at the top of this file.
100- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
101  hard-code hex values that bypass the system.
102- When a token can be expressed as a CSS variable, declare it once
103  in your global stylesheet and reference it everywhere downstream.
104- The Google Fonts `<link>` is provided in the Typography section.
105  Add it to `<head>` before any component renders.
106 
107### 3 · Component recipes
108 
109Use these recipes verbatim when building the corresponding component.
110 
111#### Buttons
112 
113Four variants are defined. Pick one — never blend variants or invent a fifth.
114 
115- **Primary** — sharp shape, bg `#E8C896`, text `#0C0B09`, border `1px solid #E8C896`, padding `14px 26px`, weight `500`, uppercased.
116- **Secondary** — sharp shape, text `#EEEAE0`, border `1px solid #EEEAE0`, padding `14px 26px`, weight `500`, uppercased.
117- **Outline** — sharp shape, text `#EEEAE0`, border `1px solid rgba(238, 234, 224, 0.30)`, padding `13px 25px`, weight `500`, uppercased.
118- **Ghost** — sharp shape, text `#E8C896`, padding `13px 4px`, weight `500`, uppercased.
119 
120Reach for **primary** as the single dominant CTA per screen.
121**Secondary** for the supporting action. **Outline** for tertiary
122actions in toolbars. **Ghost** for inline links and table actions.
123 
124#### Cards
125 
126- Background: `#15130F`
127- Border: `1px solid rgba(238, 234, 224, 0.10)`
128- Shadow: `0 0 0 1px rgba(238, 234, 224, 0.10)`
129- Radius: `radius.lg` (`4px`)
130- Internal padding: `20px` for compact cards, `24–28px` for content cards.
131 
132#### Charts
133 
134- Bar/line variant: `thin-bars`
135- Bar radius: `0px`
136- No gridlines — let the bars/lines carry the data.
137- Highlight strategy: `last` — emphasize a single bar/point per chart.
138- Use the declared palette in order: `#EEEAE0`, `#EEEAE0`, `#E8C896`.
139 
140#### Typography pairings
141 
142- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
143- **Body (`Inter`)** — 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## Overview
170Onyx Quarterly is the dark editorial counterpart to printed-magazine systems. Where Spotlight Noir uses a top-down beam to theater the page, Onyx removes the beam entirely: the canvas is **flat near-black**, uniform across the page. The serif at 6.5rem and the hairline rules between sections do all the work.
171 
172The system is the discipline of a printed quarterly, transposed into the dark. For premium magazines that ship a dark mode, fashion-week microsites, cinema/streaming brand pages, anything that should read as a monograph.
173 
174## Color
175- **Moonlight #EEEAE0** — primary text. Warm bias to sit on the warm-near-black.
176- **Warm grey #8C857A** — captions, secondary text, axis labels.
177- **Warm cream #E8C896** — the only chromatic accent. Pull-words, primary CTA, active links.
178- **Near-black #0C0B09** — page canvas. Uniform. No beam, no gradient.
179- **Surface #15130F** — barely lifted; cards are wireframes, not solid panes.
180 
181Color is rationed: mostly moonlight on near-black with two strokes of warm cream.
182 
183## Typography
184**Fraunces is the entire system.** Variable axes (opsz + SOFT) give it the optical warmth that makes the serif sing in the dark.
185 
186| Role | Font | Size | Weight | Tracking | opsz | SOFT |
187|------|------|------|--------|----------|------|------|
188| Hero | Fraunces | 6.5rem | 400 | -0.035em | 144 | 100 |
189| H1 | Fraunces | 3.5rem | 400 | -0.028em | 96 | 80 |
190| H2 | Fraunces | 1.625rem | 500 | -0.012em | 36 | 50 |
191| Body | Inter | 1.0625rem | 400 | -0.003em / 1.75 | — | — |
192| Caption | JetBrains Mono | 0.75rem | 500 | 0.14em uppercase | — | — |
193 
194```css
195.onyx-hero {
196  font-family: "Fraunces", serif;
197  font-size: 6.5rem;
198  font-weight: 400;
199  letter-spacing: -0.035em;
200  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
201  color: #EEEAE0;
202}
203```
204 
205Captions use mono uppercase at 12px / 14% tracking — the contrast against the serif is the texture.
206 
207## Geometry
208- **Radii: 0 / 2 / 4.** Editorial is rectangles and hairlines.
209- **Hairline rules** between every section at 18% moonlight.
210- **Asymmetric columns.** Hero usually sits in columns 2-9; pull-quotes break into the margin.
211- **Section gap: 160px** desktop, 96px mobile.
212 
213## Buttons
214All buttons share the editorial anatomy: sharp corners, mono caps label at 12px / 14% tracking, 14px vertical padding.
215 
216- **Primary** — solid warm cream, near-black label. Optional → arrow suffix.
217- **Secondary** — bare moonlight rectangle.
218- **Outline** — moonlight hairline at 30%.
219- **Ghost** — warm-cream label, hover underline.
220 
221## Cards
222Surface barely lifted (15-13-15 vs 12-11-9 canvas), 1px moonlight hairline at 10%, sharp 2-4px corners, **no shadow**. Cards are wireframes filled with content.
223 
224## Charts & Data
225Single-color thin bars in moonlight with the lead bar in warm cream, 1px stroke, no gridlines, no fill, 10px gap. Axis labels in warm grey at 11px mono caps.
226 
227## Do's and Don'ts
228- ✅ Flat uniform near-black canvas. No beam, no gradient.
229- ✅ Fraunces with variable axes (opsz + SOFT) at weight 400 only.
230- ✅ Hairline rules between every section. They are the page's spine.
231- ✅ One chromatic accent — warm cream. Used on lead, not everywhere.
232- ❌ No background gradient or beam. The canvas is uniform.
233- ❌ No bold display weight. Serif lives at 400.
234- ❌ No second chromatic accent.
235- ❌ No rounded corners beyond 4px. No pills, no soft.
236 
237---
238 
239## Tokens
240 
241> Generated from the same source the live preview renders from.
242> Treat the values below as the contract — never substitute approximations.
243 
244### Colors
245 
246| Role      | Value |
247|-----------|-------|
248| primary   | `#EEEAE0` |
249| secondary | `#8C857A` |
250| tertiary  | `#E8C896` |
251| neutral   | `#0C0B09` |
252| surface   | `#15130F` |
253 
254### Typography
255 
256- **Display:** Fraunces
257- **Body:** Inter
258- **Mono:** JetBrains Mono
259 
260| Role | size / leading / weight / tracking |
261|------|------------------------------------|
262| Hero | 6.5rem / 0.98 / 400 / -0.035em |
263| H1   | 3.5rem / 1.05 / 400 / -0.028em |
264| H2   | 1.625rem / 1.3 / 500 / -0.012em |
265| Body | 1.0625rem / 1.75 / 400 / -0.003em |
266 
267### Radius
268 
269- sm: `0px`
270- md: `2px`
271- lg: `4px`
272 
273### Shadows
274 
275- **card:** `0 0 0 1px rgba(238, 234, 224, 0.10)`
276- **button:** `none`
277 
278### Borders
279 
280- **card:** `1px solid rgba(238, 234, 224, 0.10)`
281- **divider:** `rgba(238, 234, 224, 0.18)`
282 
283### Buttons
284 
285Four variants, each fully tokenized. The preview renders from these exact values.
286 
287#### Primary
288 
289| Property | Value |
290|----------|-------|
291| shape | `sharp` |
292| background | `#E8C896` |
293| color | `#0C0B09` |
294| border | `1px solid #E8C896` |
295| padding | `14px 26px` |
296| fontFamily | `mono` |
297| fontWeight | `500` |
298| fontSize | `0.75rem` |
299| tracking | `0.14em` |
300| uppercase | `true` |
301| suffix | `arrow` |
302 
303#### Secondary
304 
305| Property | Value |
306|----------|-------|
307| shape | `sharp` |
308| background | `transparent` |
309| color | `#EEEAE0` |
310| border | `1px solid #EEEAE0` |
311| padding | `14px 26px` |
312| fontFamily | `mono` |
313| fontWeight | `500` |
314| fontSize | `0.75rem` |
315| tracking | `0.14em` |
316| uppercase | `true` |
317 
318#### Outline
319 
320| Property | Value |
321|----------|-------|
322| shape | `sharp` |
323| background | `transparent` |
324| color | `#EEEAE0` |
325| border | `1px solid rgba(238, 234, 224, 0.30)` |
326| padding | `13px 25px` |
327| fontFamily | `mono` |
328| fontWeight | `500` |
329| fontSize | `0.75rem` |
330| tracking | `0.14em` |
331| uppercase | `true` |
332 
333#### Ghost
334 
335| Property | Value |
336|----------|-------|
337| shape | `sharp` |
338| background | `transparent` |
339| color | `#E8C896` |
340| border | `none` |
341| padding | `13px 4px` |
342| fontFamily | `mono` |
343| fontWeight | `500` |
344| fontSize | `0.75rem` |
345| tracking | `0.14em` |
346| uppercase | `true` |
347| hoverHint | `underline` |
348 
349### Charts
350 
351| Property | Value |
352|----------|-------|
353| variant | `thin-bars` |
354| strokeWidth | `1` |
355| gridlines | `false` |
356| barRadius | `0px` |
357| barGap | `10px` |
358| highlight | `last` |
359| axisColor | `#8C857A` |
360| palette | `#EEEAE0`, `#EEEAE0`, `#E8C896` |
361
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=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#EEEAE0',
        secondary: '#8C857A',
        accent:    '#E8C896',
        neutral:   '#0C0B09',
        surface:   '#15130F',
      },
      borderRadius: {
        sm: '0px',
        md: '2px',
        lg: '4px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Pierre Dev

Dev-tool dark. Near-black canvas, hairline grid, mono-forward display type, one signal-cyan accent. The aesthetic of a precision instrument — built for developer platforms and infra consoles.

darkdeveloperminimalmodernpremium
Pierre.app
ProductPricingDocsAbout
Sign inGet started→
dark · developer · minimal

Build with Pierre Dev.

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

Quartz Monochrome

No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand.

minimalmonochromelightpremiummodern
Quartz.app
ProductPricingDocsAbout
Sign inGet started
minimal · monochrome · light

Build with Quartz Monochrome.

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