Themes / 12
Voltage
A bold poster of a theme for launches, events and music. A yellow page, black ink, thick shapes and electric blue.
npx shadcn@latest add https://strictthemes.com/r/voltage.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.
Event page
The opening page of a two-day festival, with a large headline, a countdown to the start, the first names on the bill, three facts and a call to buy tickets.
34.7k characters · Run 3 times in Claude Code
Strict Check 100%
Line-up
The festival's programme, with a day switch, a stage filter, every set as a row with its time and stage, and a personal list of saved sets.
35.5k characters · Run 3 times in Claude Code
Strict Check 100%
Tickets
A ticket page with four ticket types and their prices, a quantity for each, an order summary that updates, and a form for name and email that ends in a confirmation, with no payment.
35.4k characters · Run 3 times in Claude Code
Strict Check 100%
Artist
The page of one act at the festival, with its name, where it is from, a picture, a short text, its sets and the other acts on the same day.
33.3k characters · Run 3 times in Claude Code
Strict Check 100%
Info
The festival's practical information, with how to get there, opening times in a table, what to bring and what to leave at home, access, and questions that open and close.
34.6k characters · Run 3 times in Claude Code
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#0A0A0A / #FFE500
on-primary
#FFE500 / #0A0A0A
secondary
#2B2BF0 / #5B5BFF
on-secondary
#FFFFFF
tertiary
#FF4F9A
on-tertiary
#0A0A0A
neutral
#4A4838 / #B5B29C
background
#FFE500 / #0A0A0A
surface
#FFFFFF / #171717
foreground
#0A0A0A / #F7F5E6
border
#0A0A0A / #F7F5E6
error
#B00020 / #FF7A7A
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
Unbounded · 64px · weight 900 · line 1
The quick brown fox
h1
Unbounded · 38px · weight 800 · line 1.1
The quick brown fox
h2
Unbounded · 22px · weight 700 · line 1.25
The quick brown fox
body
Familjen Grotesk · 17px · weight 400 · line 1.55
The quick brown fox
label
Space Mono · 12px · weight 700 · line 1.3
The quick brown fox
05 / Shape and space
Corners and spacing.
sm
6px
md
14px
lg
22px
xs
4px
sm
8px
md
12px
lg
20px
xl
32px
2xl
64px
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
Voltage is for things with a date on them: a product launch, a festival, a game, a drop, a conference. It is a street poster turned into an interface. The page itself is yellow, the ink is black, panels are white with black outlines, and the type is wide and heavy. It is meant to be noticed from across the room.
Colors
- Background (
#FFE500) is signal yellow. It is the brand: the page, not a button, carries the color. - Primary (
#0A0A0A) is black, for the main action, with yellow text on it. - Secondary (
#2B2BF0) is electric blue, a fill for the second action. It is not a text color: links are black and underlined. - Tertiary (
#FF4F9A) is hot pink, with black text on it, for one badge: "Sold out", "Tonight", "New". - Surface (
#FFFFFF) is white, for panels, forms and tickets. - Neutral (
#4A4838) sets small print. Border (#0A0A0A) is black: every panel and field is outlined. - Error (
#B00020) is a dark red that still reads on yellow. Pair it with a word.
Typography
Unbounded sets headings: very wide and very heavy, so a few words fill a line. Keep headlines to five words or fewer. Familjen Grotesk sets body text at 17px. Space Mono in bold sets labels, uppercase: dates, times, prices, seat numbers. Numbers are part of the look, so set dates and countdowns large.
Layout
A 12-column grid, 1200px at its widest, with 20px gutters. Sections are blocks stacked like posters on a wall: a full-width headline, then white panels on the yellow. Spacing comes from the scale (4, 8, 12, 20, 32, 64): 20px inside a panel, 64px between sections. Fill the width; this theme does not whisper from a narrow column.
Elevation & Depth
Flat, with outlines. A panel is white with a 1px black border. No shadows, no offset "sticker" shadows either. Menus and dialogs are outlined the same way and get one short shadow.
Shapes
Thick and round: 6px for badges and checkboxes, 14px for buttons and inputs, 22px for panels. Avatars and countdown dots are circles.
Components
- Buttons: black with yellow text for the one main action, electric blue for the second. Bold uppercase mono labels.
- Cards (panels): white, 22px corners, 20px padding, a 1px black border.
- Badges: hot pink with black text, uppercase, one or two words.
- Inputs: white with a black border, so they read on the yellow page.
- Icons: 2px stroke line icons. Never emoji.
Do's and Don'ts
- Do keep the page yellow and put content on white panels.
- Do set one short headline very large.
- Do outline every panel and field in black.
- Don't put small body text straight on yellow for long passages: use a panel.
- Don't add gradients, glows or hard offset shadows.
- Don't introduce a color, size or radius that is not a token above.