design.md
Back to directory
dark · event · bold · modern · premium

Nocturne Stage.

Live-event design at midnight. Deep ink-blue surfaces, oversized Bricolage Grotesque headlines with negative tracking, a single electric magenta that reads like a stage spotlight on a single name. Built for festivals, concert series, and event platforms that earn their drama from typography, not glow.

01 · Preview

The kitchen sink.

Nocturne.app
ProductPricingDocsAbout
Sign inGet started
dark · event · bold

Build with Nocturne Stage.

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
#F4F1EC
secondary
#8A8A9C
tertiary
#F4F1EC
neutral
#15151C
surface
#0C0C12
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
2px
md
4px
lg
6px
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 · Pro tokens

The states behind the resting style.

ArchetypeDark Luxury

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Nocturne Stage"
3description: "Live-event design at midnight. Deep ink-blue surfaces, oversized Bricolage Grotesque headlines with negative tracking, a single electric magenta that reads like a stage spotlight on a single name. Built for festivals, concert series, and event platforms that earn their drama from typography, not glow."
4tags: [dark, event, bold, modern, premium]
5colors:
6  primary:   "#f4f1ec"
7  secondary: "#8a8a9c"
8  tertiary:  "#f4f1ec"
9  neutral:   "#15151c"
10  surface:   "#0c0c12"
11typography:
12  display: "Bricolage Grotesque"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "6.5rem / 0.9 / 800 / -0.045em"
17    h1:   "3.75rem / 0.98 / 700 / -0.035em"
18    h2:   "1.875rem / 1.15 / 600 / -0.02em"
19    body: "1rem / 1.55 / 400 / -0.005em"
20radius:
21  sm: 2px
22  md: 4px
23  lg: 6px
24  pill: 9999px
25shadows:
26  card:   "rgba(0,0,0,0.45) 0 1px 0 inset, rgba(0,0,0,0.6) 0 8px 24px -12px"
27  button: "rgba(255,46,126,0.30) 0 8px 24px -12px"
28borders:
29  card:    "1px solid rgba(244,241,236,0.08)"
30  divider: rgba(244,241,236,0.10)
31buttons:
32  primary:
33    background: #ff2e7e
34    color: #0c0c12
35    border: none
36    shape: sharp
37    padding: 13px 26px
38    font: 700 / 0.8125rem / 0.06em
39    uppercase: true
40  secondary:
41    background: #1c1c26
42    color: #f4f1ec
43    border: 1px solid rgba(244,241,236,0.14)
44    shape: sharp
45    padding: 13px 26px
46    font: 600 / 0.8125rem / 0.06em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #f4f1ec
51    border: 1px solid rgba(244,241,236,0.22)
52    shape: sharp
53    padding: 13px 26px
54    font: 600 / 0.8125rem / 0.06em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #8a8a9c
59    border: none
60    shape: sharp
61    padding: 13px 18px
62    font: 600 / 0.8125rem / 0.06em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1.5
67  fill_opacity: 0.1
68  gridlines: false
69  bar_gap: 8px
70  highlight: single
71  dot_marker: true
72fonts_url: "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
73dependencies: ["lucide-react"]
74---
75 
76# Nocturne Stage
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 **Nocturne Stage** 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 `#ff2e7e`, text `#0c0c12`, padding `13px 26px`, weight `700`, uppercased.
114- **Secondary** — sharp shape, bg `#1c1c26`, text `#f4f1ec`, border `1px solid rgba(244,241,236,0.14)`, padding `13px 26px`, weight `600`, uppercased.
115- **Outline** — sharp shape, text `#f4f1ec`, border `1px solid rgba(244,241,236,0.22)`, padding `13px 26px`, weight `600`, uppercased.
116- **Ghost** — sharp shape, text `#8a8a9c`, padding `13px 18px`, weight `600`, 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: `#0c0c12`
125- Border: `1px solid rgba(244,241,236,0.08)`
126- Shadow: `rgba(0,0,0,0.45) 0 1px 0 inset, rgba(0,0,0,0.6) 0 8px 24px -12px`
127- Radius: `radius.lg` (`6px`)
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 (`Bricolage Grotesque`)** — 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## 1. Atmosphere
170 
171Nocturne Stage is what a festival lineup poster looks like at midnight. The page is deep ink-blue `#0c0c12` — colder than black, warmer than navy. Headlines run in Bricolage Grotesque at 104px, weight 800, with -0.045em tracking that compresses the letterforms into a single gestural mass. Body sits in Inter at 16px, ink-secondary so it never competes with the display. The single accent is electric magenta `#ff2e7e` — used only on the headline CTA and as a 1px underline beneath the headlining act. No glow halos, no neon outlines, no purple-pink gradients.
172 
173The discipline is in the contrast: massive display type doing all the work, magenta used like a spotlight cue on a single name.
174 
175**Signature moves**
176- Bricolage Grotesque 800 at 104px hero with optical sizing — the typography IS the poster
177- Magenta `#ff2e7e` reserved for the primary CTA and a 1px underline under one name per screen
178- Sharp 0-2px corners — clubs and venues, not soft saas
179- Buttons in uppercase 0.06em tracking — that's the ticket-stub voice
180- Deep ink-blue `#0c0c12` background — never pure black, never grey
181 
182## 2. Palette
183 
184### Surfaces
185- **Stage Black** `#0c0c12` — page background, deeper than navy
186- **Stage Lift** `#15151c` — section bands
187- **Card** `#1c1c26` — secondary surfaces, secondary button
188- **Hairline** `rgba(244,241,236,0.08)` — every divider
189 
190### Ink (light on dark)
191- **Bone** `#f4f1ec` — text, headings (warm, never pure white)
192- **Bone 50** `#8a8a9c` — secondary text, ghost buttons
193 
194### Accent
195- **Magenta** `#ff2e7e` — primary CTA, headlining-act underline
196- **Magenta Soft** `rgba(255,46,126,0.16)` — focus ring, hovered card border
197 
198## 3. Typography
199 
200| Role | Font | Size | Weight | Leading | Tracking |
201|------|------|------|--------|---------|----------|
202| Hero | Bricolage Grotesque | 104px | 800 | 0.9 | -0.045em |
203| H1 | Bricolage Grotesque | 60px | 700 | 0.98 | -0.035em |
204| H2 | Bricolage Grotesque | 30px | 600 | 1.15 | -0.02em |
205| Body | Inter | 16px | 400 | 1.55 | -0.005em |
206| UI / Button | Inter | 13px | 700 | 1.2 | 0.06em uppercase |
207| Mono / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |
208 
209Bricolage Grotesque does all display work — its variable weight + optical sizing earn the drama without color or glow.
210 
211## 4. Buttons
212 
213### Primary (Magenta Cue)
214```css
215background: #ff2e7e;
216color: #0c0c12;
217padding: 13px 26px;
218border-radius: 4px;
219font-weight: 700;
220text-transform: uppercase;
221letter-spacing: 0.06em;
222box-shadow: rgba(255,46,126,0.30) 0 8px 24px -12px;
223```
224 
225The shadow is magenta-tinted — that's the only "glow" in the entire system, and it's a soft drop shadow, not an outline halo.
226 
227### Secondary (Card Surface)
228- `#1c1c26` background, 1px hairline at 14% bone, bone text — same uppercase voice
229 
230### Outline & Ghost
231- Outline: transparent, 1px hairline at 22% bone
232- Ghost: no border, bone-50 text, hover lifts to bone
233 
234## 5. Cards
235 
236```css
237background: #15151c;
238border: 1px solid rgba(244,241,236,0.08);
239border-radius: 6px;
240box-shadow:
241  rgba(0,0,0,0.45) 0 1px 0 inset,
242  rgba(0,0,0,0.6) 0 8px 24px -12px;
243```
244 
245The 1px black inset highlight at the top edge is the dark-mode equivalent of the metallic catch-light — it sells depth without adding chrome.
246 
247Featured cards (the headlining act) get a 1px magenta underline at the bottom — that is the only second use of the accent.
248 
249## 6. Charts
250 
251Thin precise bars (3px wide, 8px gap). One bar in magenta, others in 22% bone. NO gridlines. Line charts at 1.5px bone with a 10% magenta fill, ending in a magenta dot marker. Y-axis labels in JetBrains Mono uppercase 11px.
252 
253## 7. Tabs
254 
255Underline 1.5px in magenta for the active state. Inactive tabs are bone-50 in uppercase 0.06em tracking. Hover = bone text, no underline.
256 
257## 8. Spacing
258 
259- Base 4px
260- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128`
261- Section padding: 128px desktop, 64px mobile — the negative space is part of the stage
262 
263## 9. Do's & don'ts
264 
265✅ **Do**
266- Hold Bricolage Grotesque at 800 / -0.045em for the hero — that compression IS the brand
267- Use deep ink-blue `#0c0c12` — pure black reads as terminal, navy reads as corporate
268- Reserve magenta for the primary CTA + one headline underline per screen
269- Keep all UI labels uppercase 0.06em — that's the ticket-stub typography
270 
271❌ **Don't**
272- Add neon glow outlines — magenta is a spotlight, not a tube light
273- Use a second accent (cyan, lime, etc.) — the page is deep blue + bone + magenta, full stop
274- Use pill buttons — sharp 4px is the venue voice
275- Use Bricolage at less than 600 in display — anything lighter loses the gestural mass
276 
277---
278 
279## Tokens
280 
281> Generated from the same source the live preview renders from.
282> Treat the values below as the contract — never substitute approximations.
283 
284### Colors
285 
286| Role      | Value |
287|-----------|-------|
288| primary   | `#f4f1ec` |
289| secondary | `#8a8a9c` |
290| tertiary  | `#f4f1ec` |
291| neutral   | `#15151c` |
292| surface   | `#0c0c12` |
293 
294### Typography
295 
296- **Display:** Bricolage Grotesque
297- **Body:** Inter
298- **Mono:** JetBrains Mono
299 
300| Role | size / leading / weight / tracking |
301|------|------------------------------------|
302| Hero | 6.5rem / 0.9 / 800 / -0.045em |
303| H1   | 3.75rem / 0.98 / 700 / -0.035em |
304| H2   | 1.875rem / 1.15 / 600 / -0.02em |
305| Body | 1rem / 1.55 / 400 / -0.005em |
306 
307### Radius
308 
309- sm: `2px`
310- md: `4px`
311- lg: `6px`
312- pill: `9999px`
313 
314### Shadows
315 
316- **card:** `rgba(0,0,0,0.45) 0 1px 0 inset, rgba(0,0,0,0.6) 0 8px 24px -12px`
317- **button:** `rgba(255,46,126,0.30) 0 8px 24px -12px`
318 
319### Borders
320 
321- **card:** `1px solid rgba(244,241,236,0.08)`
322- **divider:** `rgba(244,241,236,0.10)`
323 
324### Buttons
325 
326Four variants, each fully tokenized. The preview renders from these exact values.
327 
328#### Primary
329 
330| Property | Value |
331|----------|-------|
332| shape | `sharp` |
333| background | `#ff2e7e` |
334| color | `#0c0c12` |
335| border | `none` |
336| padding | `13px 26px` |
337| fontWeight | `700` |
338| fontSize | `0.8125rem` |
339| tracking | `0.06em` |
340| uppercase | `true` |
341 
342#### Secondary
343 
344| Property | Value |
345|----------|-------|
346| shape | `sharp` |
347| background | `#1c1c26` |
348| color | `#f4f1ec` |
349| border | `1px solid rgba(244,241,236,0.14)` |
350| padding | `13px 26px` |
351| fontWeight | `600` |
352| fontSize | `0.8125rem` |
353| tracking | `0.06em` |
354| uppercase | `true` |
355 
356#### Outline
357 
358| Property | Value |
359|----------|-------|
360| shape | `sharp` |
361| background | `transparent` |
362| color | `#f4f1ec` |
363| border | `1px solid rgba(244,241,236,0.22)` |
364| padding | `13px 26px` |
365| fontWeight | `600` |
366| fontSize | `0.8125rem` |
367| tracking | `0.06em` |
368| uppercase | `true` |
369 
370#### Ghost
371 
372| Property | Value |
373|----------|-------|
374| shape | `sharp` |
375| background | `transparent` |
376| color | `#8a8a9c` |
377| border | `none` |
378| padding | `13px 18px` |
379| fontWeight | `600` |
380| fontSize | `0.8125rem` |
381| tracking | `0.06em` |
382| uppercase | `true` |
383 
384### Charts
385 
386| Property | Value |
387|----------|-------|
388| variant | `thin-bars` |
389| strokeWidth | `1.5` |
390| fillOpacity | `0.1` |
391| gridlines | `false` |
392| barGap | `8px` |
393| highlight | `single` |
394| dotMarker | `true` |
395 
396---
397 
398## Pro tokens
399 
400> Production-fidelity tokens. States, density, motion, elevation,
401> content rules and a measured WCAG contract — derived from the
402> resting tokens unless explicitly authored.
403 
404### States
405 
406#### Button
407 
408- **hover** — shadow: `0 0 24px -4px rgba(244, 241, 236, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)`
409- **focus** — outline: `1.5px solid #f4f1ec`, outline-offset: `3px`
410- **active** — transform: `translateY(1px)`, filter: `brightness(0.92)`
411- **disabled** — opacity: `0.35`, filter: `saturate(0.4)`
412- **loading** — opacity: `0.6`
413- **selected** — bg: `#f4f1ec`, color: `#0A0A0A`
414 
415#### Input
416 
417- **hover** — border: `1px solid rgba(244, 241, 236, 0.5)`
418- **focus** — border: `1px solid #f4f1ec`, shadow: `0 0 0 3px rgba(244, 241, 236, 0.2)`
419- **disabled** — opacity: `0.35`
420- **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)`
421 
422#### Card
423 
424- **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(244, 241, 236, 0.18)`, transform: `translateY(-2px)`
425- **selected** — border: `1px solid #f4f1ec`, shadow: `0 0 0 1px #f4f1ec`
426- **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85`
427 
428#### Tab
429 
430- **hover** — color: `#f4f1ec`
431- **focus** — outline: `1.5px solid #f4f1ec`, outline-offset: `2px`
432- **selected** — color: `#f4f1ec`, border: `0 0 1.5px 0 solid #f4f1ec`
433 
434### Density
435 
436| Mode | padding × | row × | body | radius × | Use for |
437|------|-----------|-------|------|----------|---------|
438| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
439| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
440| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
441 
442### Motion
443 
444**Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele.
445 
446```css
447transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1);
448```
449 
450| Token | Value |
451|-------|-------|
452| duration.instant | `100ms` |
453| duration.fast | `180ms` |
454| duration.base | `280ms` |
455| duration.slow | `450ms` |
456| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
457| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
458| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
459| easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` |
460 
461### Elevation
462 
463Five-level scale, system-specific recipe.
464 
465| Level | Shadow | Recipe |
466|-------|--------|--------|
467| level0 | `none` | Flat — Hairline mit Accent-Hauch. |
468| level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. |
469| level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. |
470| level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(244, 241, 236, 0.25)` | Sheet — Accent-Halo. |
471| level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(244, 241, 236, 0.4)` | Modal — voller Accent-Rim, dramatisch. |
472 
473### Content
474 
475- **measure:** `66ch` (max line length for body prose)
476- **paragraph spacing:** `1.3em`
477- **list indent:** `1.5em`
478- **list gap:** `0.5em`
479- **link:** color `#f4f1ec`, underline `hover`
480- **blockquote:** border `2px solid #f4f1ec`, padding `0.8em 1.2em`
481- **code:** background `rgba(244, 241, 236, 0.12)`, color `#f4f1ec`
482 
483### Accessibility (WCAG 2.1)
484 
485**Overall:** AA
486 
487| Pair | Ratio | Required | Grade | Suggested fix |
488|------|-------|----------|-------|---------------|
489| Body text on surface | 17.31:1 | AA | AAA | — |
490| Body text on canvas | 16.13:1 | AA | AAA | — |
491| Muted text on surface | 5.75:1 | AA | AA | — |
492| Accent on surface | 17.31:1 | AA-Large | AAA | — |
493| Accent on canvas | 16.13:1 | AA-Large | AAA | — |
494
04 · 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.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&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: ['"Bricolage Grotesque"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#f4f1ec',
        secondary: '#8a8a9c',
        accent:    '#f4f1ec',
        neutral:   '#15151c',
        surface:   '#0c0c12',
      },
      borderRadius: {
        sm: '2px',
        md: '4px',
        lg: '6px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

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.

darkeditorialserifpremiummagazine
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

Solflare Bloom

A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché.

grainygradientwarmmodernlight
Solflare.app
ProductPricingDocsAbout
Sign inGet started
grainy · gradient · warm

Build with Solflare Bloom.

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