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 · 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

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=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

// 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Linnea Serif

Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system.

minimalserifpremiummoderneditorial

Linnea.app

ProductPricingDocsAbout

Sign inGet started