/
design.md
Back to directory
dark · gradient · premium · cinematic · minimal

Spotlight Noir.

A single soft spotlight beam falls from the top-center across a near-black canvas, fading to ink at the edges. Cards float as solid surfaces in the beam. One warm-amber accent. Theatrical without being maximalist.

01 · Preview

The kitchen sink.

Spotlight.app
ProductPricingDocsAbout
Sign inGet started
dark · gradient · premium

Build with Spotlight Noir.

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
#F0EDE6
secondary
#8E8A82
tertiary
#E5A95A
neutral
#0B0A08
surface
#16140F
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
4px
md
8px
lg
12px
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: "Spotlight Noir"
3description: "A single soft spotlight beam falls from the top-center across a near-black canvas, fading to ink at the edges. Cards float as solid surfaces in the beam. One warm-amber accent. Theatrical without being maximalist."
4tags: [dark, gradient, premium, cinematic, minimal]
5colors:
6  primary:   "#F0EDE6"
7  secondary: "#8E8A82"
8  tertiary:  "#E5A95A"
9  neutral:   "#0B0A08"
10  surface:   "#16140F"
11typography:
12  display: "Cormorant Garamond"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 1 / 400 / -0.025em"
17    h1:   "3.25rem / 1.05 / 400 / -0.02em"
18    h2:   "1.625rem / 1.3 / 500 / -0.012em"
19    body: "1rem / 1.7 / 400 / -0.003em"
20radius:
21  sm: 4px
22  md: 8px
23  lg: 12px
24shadows:
25  card:   "0 32px 80px -32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 169, 90, 0.06)"
26  button: "0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.20)"
27borders:
28  card:    "1px solid rgba(229, 169, 90, 0.06)"
29  divider: "rgba(240, 237, 230, 0.08)"
30glass:
31  surface: "#16140F"
32  blur:    0px
33  border:  "1px solid rgba(229, 169, 90, 0.06)"
34  shadow:  "0 32px 80px -32px rgba(0, 0, 0, 0.65)"
35  backdrop: "radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 230, 190, 0.18) 0%, rgba(255, 230, 190, 0.08) 25%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255, 215, 160, 0.14) 0%, transparent 70%)"
36buttons:
37  primary:
38    background: linear-gradient(180deg, #F0BC74 0%, #E5A95A 50%, #C8893E 100%)
39    color: #1A1408
40    border: 1px solid rgba(255, 220, 170, 0.25)
41    shape: rounded
42    padding: 12px 24px
43    font: 600 / 0.9375rem / -0.005em
44    shadow: 0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.35)
45  secondary:
46    background: #16140F
47    color: #F0EDE6
48    border: 1px solid rgba(229, 169, 90, 0.20)
49    shape: rounded
50    padding: 12px 24px
51    font: 500 / 0.9375rem / -0.005em
52  outline:
53    background: transparent
54    color: #F0EDE6
55    border: 1px solid rgba(240, 237, 230, 0.18)
56    shape: rounded
57    padding: 11px 23px
58    font: 500 / 0.9375rem / -0.005em
59  ghost:
60    background: transparent
61    color: #E5A95A
62    border: none
63    shape: rounded
64    padding: 11px 6px
65    font: 500 / 0.9375rem / -0.005em
66    hover: underline
67charts:
68  variant: area
69  stroke_width: 2
70  fill_opacity: 0.18
71  gridlines: false
72  highlight: last
73  dot_marker: true
74  axis_color: "#8E8A82"
75  palette: ["#E5A95A", "#C8893E", "#9A6A2C"]
76fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
77dependencies: ["lucide-react"]
78---
79 
80# Spotlight Noir
81 
82## AI Build Instructions
83 
84> **Read this section before writing any code.** The rules below
85> are non-negotiable. Every value used in the UI must come from this
86> file's frontmatter — never substitute, approximate, or invent new
87> colors, fonts, radii, or shadows. If a value is missing, ask the
88> user before adding one.
89 
90### 1 · Your role
91 
92You are building UI for a project that has adopted **Spotlight Noir** as its
93design system. Treat `DESIGN.md` as the single source of truth.
94Your job is to translate the user's product requirements into
95components and pages that look like they were designed by the same
96person who authored this file.
97 
98### 2 · Token compliance
99 
100- Pull every color, font family, radius, shadow, and spacing value
101  from the frontmatter at the top of this file.
102- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
103  hard-code hex values that bypass the system.
104- When a token can be expressed as a CSS variable, declare it once
105  in your global stylesheet and reference it everywhere downstream.
106- The Google Fonts `<link>` is provided in the Typography section.
107  Add it to `<head>` before any component renders.
108 
109### 3 · Component recipes
110 
111Use these recipes verbatim when building the corresponding component.
112 
113#### Buttons
114 
115Four variants are defined. Pick one — never blend variants or invent a fifth.
116 
117- **Primary** — rounded shape, bg `linear-gradient(180deg, #F0BC74 0%, #E5A95A 50%, #C8893E 100%)`, text `#1A1408`, border `1px solid rgba(255, 220, 170, 0.25)`, padding `12px 24px`, weight `600`, shadow `0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.35)`.
118- **Secondary** — rounded shape, bg `#16140F`, text `#F0EDE6`, border `1px solid rgba(229, 169, 90, 0.20)`, padding `12px 24px`, weight `500`.
119- **Outline** — rounded shape, text `#F0EDE6`, border `1px solid rgba(240, 237, 230, 0.18)`, padding `11px 23px`, weight `500`.
120- **Ghost** — rounded shape, text `#E5A95A`, padding `11px 6px`, weight `500`.
121 
122Reach for **primary** as the single dominant CTA per screen.
123**Secondary** for the supporting action. **Outline** for tertiary
124actions in toolbars. **Ghost** for inline links and table actions.
125 
126#### Cards
127 
128- Background: `#16140F`
129- Border: `1px solid rgba(229, 169, 90, 0.06)`
130- Shadow: `0 32px 80px -32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 169, 90, 0.06)`
131- Radius: `radius.lg` (`12px`)
132- Internal padding: `20px` for compact cards, `24–28px` for content cards.
133 
134> This system ships a **glass treatment** — see the Glass token table.
135> Apply `backdrop-filter: blur(0px)` to translucent panes.
136> The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract.
137 
138#### Charts
139 
140- Bar/line variant: `area`
141- No gridlines — let the bars/lines carry the data.
142- Highlight strategy: `last` — emphasize a single bar/point per chart.
143- Use the declared palette in order: `#E5A95A`, `#C8893E`, `#9A6A2C`.
144 
145#### Typography pairings
146 
147- **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks.
148- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
149- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
150 
151### 4 · Hard constraints
152 
153Never do any of the following without explicit instruction from the user:
154 
155- Introduce a new color, font, radius, or shadow that isn't declared above.
156- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
157- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
158- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
159- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
160 
161### 5 · Before you finish — verify
162 
163Run through this checklist for every screen you produce:
164 
165- [ ] Every color used appears in the Colors table above.
166- [ ] Headlines use the display font; body copy uses the body font.
167- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
168- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
169- [ ] Cards and dividers use the declared border + shadow tokens.
170- [ ] No values were invented; if you needed something missing, you stopped and asked.
171 
172---
173 
174## Overview
175Spotlight Noir is built on one decision: a single soft spotlight beam falls from the top-center of the page across a near-black canvas, fading to ink at the edges. Cards float in the beam as solid graphite surfaces (not glass — solid). Type is high-contrast serif at theatrical scale. One warm-amber accent does the chromatic work.
176 
177The system is theatrical without being maximalist — restraint plus one piece of stagecraft. For premium product launches, fashion, automotive, fragrance, anything cinematic.
178 
179## The Spotlight Recipe
180The beam is two stacked radial gradients — a wide soft outer halo and a tighter brighter core — both anchored at the top-center, fading to transparent before they reach the edges:
181 
182```css
183body {
184  background:
185    radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255,215,160,0.14) 0%, transparent 70%),
186    radial-gradient(ellipse 90% 70% at 50% 0%,  rgba(255,230,190,0.18) 0%, rgba(255,230,190,0.08) 25%, transparent 60%),
187    #0B0A08;
188}
189```
190 
191The beam is **warm** (cream/amber), the canvas is **near-black**. The contrast is the system. Without the beam the page is just dark; without the dark the beam dies.
192 
193## Color
194- **Moonlight #F0EDE6** — primary text in the beam.
195- **Warm grey #8E8A82** — secondary text, axis labels.
196- **Amber #E5A95A** — the only chromatic accent. Primary CTA, ghost link, chart line.
197- **Ink #0B0A08** — page canvas (near-black, faint warm bias).
198- **Graphite #16140F** — card surface, lifted just above the canvas.
199 
200The amber sits inside the beam's color family — warm cream → warm amber. They are the same world.
201 
202## Typography
203- **Display: Cormorant Garamond 400** at 5.5rem with -2.5% tracking. High-contrast serif, theatrical at scale, never bold.
204- **Body: Inter 400** at 1rem with 1.7 leading.
205 
206| Role | Font | Size | Weight | Tracking |
207|------|------|------|--------|----------|
208| Hero | Cormorant Garamond | 5.5rem | 400 | -0.025em |
209| H1 | Cormorant Garamond | 3.25rem | 400 | -0.02em |
210| H2 | Cormorant Garamond | 1.625rem | 500 | -0.012em |
211| Body | Inter | 1rem | 400 | -0.003em / 1.7 |
212 
213Display lives at weight 400. The serif's optical contrast does the work — bold would kill it.
214 
215## Geometry
216- **Radii: 4 / 8 / 12.** Refined and composed. Never pill, never sharp.
217- **Section gap: 144px** desktop, 80px mobile. The beam needs room.
218- **Hero is centered** under the beam — this is the one system where centered hero is mandatory, because the beam is the focal point.
219 
220## Buttons
221- **Primary** — vertical warm-amber gradient with a soft underglow + inner top gloss. The CTA reads as a polished metal handle catching the beam.
222- **Secondary** — solid graphite with a faint amber hairline.
223- **Outline** — bare hairline at 18% white.
224- **Ghost** — bare amber label, hover underline.
225 
226## Cards
227**Solid graphite surfaces**, 1px amber hairline at 6% opacity, 8-12px corners, deep dark shadow tinted slightly warm. Padding 32px. Cards are NOT glass — that's a different system. Solid surfaces in the beam.
228 
229## Charts & Data
230Amber area chart at 2px stroke and 18% fill opacity, no gridlines, end-of-line dot. The chart sits inside a graphite card so the page beam stays in the background.
231 
232## Do's and Don'ts
233- ✅ The spotlight beam is mandatory and lives at top-center. The whole identity rests on it.
234- ✅ Cards are solid graphite, never glass.
235- ✅ Hero is centered under the beam. The composition is the system.
236- ✅ One chromatic accent — warm amber. It sits inside the beam's color family.
237- ❌ No glass cards. That's a different system.
238- ❌ No second chromatic accent. The amber stands alone.
239- ❌ No bold display. Cormorant Garamond at weight 400 only.
240- ❌ No second light source — no rim glow at the bottom, no side light. One beam, top-center, period.
241 
242---
243 
244## Tokens
245 
246> Generated from the same source the live preview renders from.
247> Treat the values below as the contract — never substitute approximations.
248 
249### Colors
250 
251| Role      | Value |
252|-----------|-------|
253| primary   | `#F0EDE6` |
254| secondary | `#8E8A82` |
255| tertiary  | `#E5A95A` |
256| neutral   | `#0B0A08` |
257| surface   | `#16140F` |
258 
259### Typography
260 
261- **Display:** Cormorant Garamond
262- **Body:** Inter
263- **Mono:** JetBrains Mono
264 
265| Role | size / leading / weight / tracking |
266|------|------------------------------------|
267| Hero | 5.5rem / 1 / 400 / -0.025em |
268| H1   | 3.25rem / 1.05 / 400 / -0.02em |
269| H2   | 1.625rem / 1.3 / 500 / -0.012em |
270| Body | 1rem / 1.7 / 400 / -0.003em |
271 
272### Radius
273 
274- sm: `4px`
275- md: `8px`
276- lg: `12px`
277 
278### Shadows
279 
280- **card:** `0 32px 80px -32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 169, 90, 0.06)`
281- **button:** `0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.20)`
282 
283### Borders
284 
285- **card:** `1px solid rgba(229, 169, 90, 0.06)`
286- **divider:** `rgba(240, 237, 230, 0.08)`
287 
288### Glass
289 
290Translucent panes with backdrop-filter — the preview renders cards from these exact values.
291 
292| Property | Value |
293|----------|-------|
294| surface | `#16140F` |
295| blur | `0px` |
296| border | `1px solid rgba(229, 169, 90, 0.06)` |
297| shadow | `0 32px 80px -32px rgba(0, 0, 0, 0.65)` |
298| backdrop | `radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 230, 190, 0.18) 0%, rgba(255, 230, 190, 0.08) 25%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255, 215, 160, 0.14) 0%, transparent 70%)` |
299 
300### Buttons
301 
302Four variants, each fully tokenized. The preview renders from these exact values.
303 
304#### Primary
305 
306| Property | Value |
307|----------|-------|
308| shape | `rounded` |
309| background | `linear-gradient(180deg, #F0BC74 0%, #E5A95A 50%, #C8893E 100%)` |
310| color | `#1A1408` |
311| border | `1px solid rgba(255, 220, 170, 0.25)` |
312| padding | `12px 24px` |
313| fontWeight | `600` |
314| fontSize | `0.9375rem` |
315| tracking | `-0.005em` |
316| shadow | `0 8px 24px -10px rgba(229, 169, 90, 0.45), inset 0 1px 0 rgba(255, 220, 170, 0.35)` |
317 
318#### Secondary
319 
320| Property | Value |
321|----------|-------|
322| shape | `rounded` |
323| background | `#16140F` |
324| color | `#F0EDE6` |
325| border | `1px solid rgba(229, 169, 90, 0.20)` |
326| padding | `12px 24px` |
327| fontWeight | `500` |
328| fontSize | `0.9375rem` |
329| tracking | `-0.005em` |
330 
331#### Outline
332 
333| Property | Value |
334|----------|-------|
335| shape | `rounded` |
336| background | `transparent` |
337| color | `#F0EDE6` |
338| border | `1px solid rgba(240, 237, 230, 0.18)` |
339| padding | `11px 23px` |
340| fontWeight | `500` |
341| fontSize | `0.9375rem` |
342| tracking | `-0.005em` |
343 
344#### Ghost
345 
346| Property | Value |
347|----------|-------|
348| shape | `rounded` |
349| background | `transparent` |
350| color | `#E5A95A` |
351| border | `none` |
352| padding | `11px 6px` |
353| fontWeight | `500` |
354| fontSize | `0.9375rem` |
355| tracking | `-0.005em` |
356| hoverHint | `underline` |
357 
358### Charts
359 
360| Property | Value |
361|----------|-------|
362| variant | `area` |
363| strokeWidth | `2` |
364| fillOpacity | `0.18` |
365| gridlines | `false` |
366| highlight | `last` |
367| dotMarker | `true` |
368| axisColor | `#8E8A82` |
369| palette | `#E5A95A`, `#C8893E`, `#9A6A2C` |
370
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=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Cormorant Garamond"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#F0EDE6',
        secondary: '#8E8A82',
        accent:    '#E5A95A',
        neutral:   '#0B0A08',
        surface:   '#16140F',
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '12px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Vinyl Noir

A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon.

musicdarkeditorialpremiummodern
Vinyl.app
ProductPricingDocsAbout
Sign inGet started
music · dark · editorial

Build with Vinyl Noir.

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

Twilight Mail

Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent.

consumerpremiumminimaleditorial
Twilight.app
ProductPricingDocsAbout
Sign inGet started
consumer · premium · minimal

Build with Twilight Mail.

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