Themes / 13
Nocturne
A dusky, cinematic theme for film, music and nightlife. Lilac-grey paper by day, aubergine and gold by night.
npx shadcn@latest add https://strictthemes.com/r/nocturne.json- DESIGN.md The spec
- tailwind.css Tailwind CSS v4
- shadcn.css shadcn variables
- nuxt-ui.css Nuxt UI
- app.config.ts Nuxt UI config
- tokens.json W3C design tokens
01 / Preview
Stock shadcn components, this theme.
Ship the page, keep the system.
Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.
96%88%100%02 / Page prompts
Paste one into your agent. Get that page.
Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page a coding agent built from the prompt, shown as it came out.
Programme
The programme of an independent cinema, with a featured film, a switch between the coming days and a listing of each day's films with posters, credits and showtimes.
33.9k characters · Run 3 times in Claude Code
Strict Check 100%
Film
The page of one film at an independent cinema, with its title, a still, its details, a synopsis, the credits, showtimes by day that can be chosen, and a quote from a review.
33.2k characters · Run 3 times in Claude Code
Strict Check 100%
Season
The page of a curated season of films at an independent cinema, with an introduction, the films in order with their dates and a note on each, and a season pass.
33.2k characters · Run 3 times in Claude Code
Strict Check 100%
Membership
The membership page of an independent cinema, with three plans, a monthly and yearly switch, and a sign-up form that checks its fields and confirms the sign-up without taking a payment.
34.1k characters · Run 3 times in Claude Code
Strict Check 100%
Visit
The visitor page of an independent cinema, with its address, opening times, its screens with seats and access notes, the bar, how to get there and a contact form.
34.7k characters · Run 3 times in Claude Code
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#6B4A00 / #F2C14E
on-primary
#FFF8E6 / #2A1E00
secondary
#17131F / #F0ECF7
on-secondary
#F2F0F5 / #17131F
tertiary
#C9B6FF
on-tertiary
#17131F
neutral
#625B6E / #A79FB5
background
#F2F0F5 / #100D16
surface
#FFFFFF / #1A1622
foreground
#17131F / #F0ECF7
border
#DAD5E2 / #2F2A3A
error
#B3261E / #FF8A80
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
Syne · 64px · weight 800 · line 1
The quick brown fox
h1
Syne · 40px · weight 700 · line 1.1
The quick brown fox
h2
Syne · 24px · weight 700 · line 1.25
The quick brown fox
body
Onest · 16px · weight 400 · line 1.6
The quick brown fox
label
Azeret Mono · 12px · weight 500 · line 1.3
The quick brown fox
05 / Shape and space
Corners and spacing.
sm
3px
md
8px
lg
16px
xs
4px
sm
8px
md
16px
lg
24px
xl
48px
2xl
96px
06 / Rules
What the strict block enforces.
- Contrast
- WCAG AA
- Colors
- Tokens only, within 0.02 of a token
- Spacing
- Scale only, plus 0, 1px, 2px
- Corners
- Scale only, full rounds up to 64px
- Type
- Scale only, declared fonts only
- purple gradient
- Not allowed
- emoji icons
- Not allowed
- nested cards
- Flagged
- glow shadows
- Not allowed
07 / Guidance
What your agent reads.
Overview
Nocturne is for things people do after dark: a cinema programme, a record label, a venue, a streaming library, a late-night radio show. It has the manners of a film poster and an opening-night programme. Its dark mode is the main one: aubergine black with a single warm gold. In light mode the same gold deepens to bronze on lilac-grey paper.
Colors
- Primary (
#6B4A00) is bronze in light mode and gold in dark mode, for the one main action. Links are the text color, underlined, and turn gold under the pointer. - Secondary (
#17131F) is aubergine black for secondary buttons and headings. - Tertiary (
#C9B6FF) is pale lavender, with dark text on it, for one badge: "Premiere", "Tonight", "Late show". - Neutral (
#625B6E) sets credits, running times and captions. - Background (
#F2F0F5) is lilac-grey paper. Surface (#FFFFFF) is the white of a card; in dark mode both turn aubergine. - Error (
#B3261E) is used only with a message.
Typography
Syne sets headings: wide, heavy and a little strange, which is the point. Set titles large and let long ones wrap. Onest sets body text at 16px. Azeret Mono sets labels, uppercase with wide tracking: dates, running times, ratings, seat rows. Showtimes use tabular figures.
Layout
A 12-column grid, 1280px at its widest, with 24px gutters. Posters and stills run large, in the proportions they were made in, with a title and a line of credits beneath. Spacing comes from the scale (4, 8, 16, 24, 48, 96): 24px inside a card, 96px between sections. Give each title its own space, the way a programme gives each film a page.
Elevation & Depth
Flat and dark-minded. A card is told from the page by its lighter fill and a 1px border. Nothing glows. Menus and dialogs float on one short, neutral shadow.
Shapes
Softly cut: 3px for badges, 8px for buttons and inputs, 16px for cards and posters. Avatars are circles.
Components
- Buttons: gold (bronze in light mode) for the one main action, aubergine for the rest. Uppercase mono labels.
- Cards: 16px corners, 24px padding, a 1px border.
- Badges: lavender with dark text, uppercase, one or two words.
- Listings: a mono time on the left, the title in the heading font, credits in the neutral color beneath.
- Icons: 1.5px stroke line icons. Never emoji.
Do's and Don'ts
- Do design the dark mode first: it is where this theme lives.
- Do keep gold to one action or one title per screen.
- Do let images be large and uncropped.
- Don't add glows, neon or blurred glass, however much the subject invites it.
- Don't mix gold with other warm accents: lavender is the only second color.
- Don't introduce a color, size or radius that is not a token above.