The pump
At rest. Warms up on hover.
Look 07, the kit sheet
Cold Open
The first lit thing. Everything the look is made of, on one page. Every block below is the real markup from sections/ and components/, so if a page built from the look disagrees with this sheet, this sheet wins.
Palette
The sky at blue hour, one red lamp, the forecourt, and three status lamps.
Canvas and accent
--bg --surface --surface-2 --text --accent--bg
#0C1530--surface
#16224A--surface-2
#101B3E--text
#ECEFFA--accent
#FF3B2E--accent-ink
#FFFFFF--accent-line
rgba(255, 59, 46, 0.45)--accent-glow
rgba(255, 59, 46, 0.38)--ok
#7FD9A6--warn
#FFB03A--err
#FF3B2EThe forecourt
Decoration only. The sodium haze and the grain over everything, the pool of tube light under a canopy, the sky as a pattern. The canopy is a film and appears in hero A alone. Never behind body copy.
--pool
radial-gradient(50% 42% at 50% 0%, rgba(236, 239, 250, 0.22), rgba(236, 239, 250, 0))--pattern
linear-gradient(180deg, #060A1E 0%, #0C1530 55%, #1A2758 100%)--grain
inlinedType
Forecourt for display. Archivo for everything else.
Forecourt is the original face drawn for this look and ships in fonts/. The scale is closed: eyebrow, display, h2, lede, body, meta, price.
.bl-display
The first lit thing.
.bl-h2
Nothing else on for miles.
.bl-price
$125one of fifty
.bl-lede
A look for sites built with Claude Code. A canopy at blue hour, lightboxes you can press and the channels they sit in, one red lamp per screen.
.bl-body
Raised is a lightbox: milk acrylic lit from inside, in an aluminium retainer. Recessed is the channel it sits in. There is no third material, and state is depth, never a colour.
.bl-eyebrow
Look 07, an edition of fifty
.bl-meta
.bl-labelEmail
Materials
Two. Raised is a lightbox and can be pressed. Recessed is the channel.
.bl-raised
.bl-recessed
Icons
12 pictograms. None is a variation of another.
24-unit grid, a single solid fill, hard corners, no curves and no strokes, currentColor: the symbols on a service sign. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.
Motion
Ignition.
Nothing slides in. Everything switches on the way a fluorescent tube starts: a flicker, a second flicker, then steady. Headlines ignite word by word (.bl-words). Blocks ignite (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes switch on behind the headline (.bl-rise). The film comes up with the page (.bl-hero__film). The red lamp blinks like a beacon (.bl-lamp-blink). Keys warm up on hover and go dark when pressed. Reduced motion lands everything instantly.
Word rise and reveal
.bl-reveal .bl-words .bl-rise .bl-rise--x .bl-rise--late .bl-hover-lift .bl-lamp-blinkReplay
The first lit thing.
Click to play it again.
Loading
.bl-skeleton .bl-spinner .bl-progressComponents
Every state, drawn.
Helper classes (.is-hover, .is-focus, .is-active, .is-selected, .is-disabled, .is-loading, .is-invalid, .is-open, .is-checked) draw each state without a pointer. theme.css styles the helper and the real pseudo-class identically.
buttons
Buttons are keys, and a key is a small lightbox: a lit face, a tube along the top, an aluminium retainer. The primary carries the red retainer and the red lamp and is the one hit per screen. Hover brings the tubes up a stop; pressed drops the key dark into its channel. Loading swaps the label for a spinner.
components/buttons.htmlinputs
Fields are channels. Focus lights the floor of the channel red; invalid draws a red line along it; disabled dims. The checkbox is a small channel that lights a short tube when checked.
components/inputs.htmlThat does not look like an email.
No mailing list. We only write back.
cards
Cards are lightboxes with a dark window in them. Media is the pool, the haze or a pictogram on the pattern, never a photograph. Hover brings the tubes up; selected drops the whole card dark into its channel.
components/cards.htmlThe visitor
Hover, drawn.
Live
The licence
Selected, gone dark.
Chosen
badges
Badges are small channels with a lamp. The plain badge is a dim lamp; ok, warn and err light it. They are the only place the status colours appear besides toasts and field errors.
components/badges.html
Chosen
Edition 07
Edition open
Twelve left
Archived
tabs
Tabs are keys in a lit strip. The active tab has gone dark in its channel. Hover darkens the ink, focus rings in the accent line, disabled dims.
components/tabs.htmlaccordion
The accordion is a stack of signs. The open item goes dark in its channel and its plus becomes a minus.
components/accordion.htmlIs it really mine?
Fifty sites get to wear Cold Open. Yours is one of them, with its own edition number and licence key.
Does Claude obey it?
CLAUDE.md is a set of rules with teeth. If a part does not exist, Claude stops and says so.
Why a gas station?
It is the first lit thing on the drive home.
modal
The modal is a lightbox over a scrim. The static modifier renders it inline on the sheet, in a channel with the haze behind it.
components/modal.htmlArchive this look?
When the fiftieth copy sells, Cold Open is archived for good and a new look takes its place on the rack. This cannot be undone.
toast
Toasts are small signs with a lamp. Plain, ok, warn and err. The static modifier renders them inline.
components/toast.htmltable
The table is the board, set in a channel. Numbers are in Forecourt Regular and ranged right. Hover brightens a row; selected lights it, a lit strip raised out of the channel.
components/table.html| Look | Status | Copies | Left |
|---|---|---|---|
| Aura Glow | Edition open | 50 | 43 |
| Radio | Edition open | 50 | 50 |
| Cold Open | Twelve left | 50 | 12 |
| Plinth | Archived | 50 | 0 |
Sections
Eleven sections, two variants each.
Variant A is what the demo uses. Variant B is the alternative for the same job. Page recipes are in CLAUDE.md.
Variant A
Variant B
hero
The opening screen. A is the forecourt: the film of the canopy at blue hour, full bleed under the fascia, the headline over it on a scrim, and the price sign on the right. Until the film ships in version 1.0.0 the video carries its poster alone, which is also what reduced motion shows; when it lands, a <source> for ../motion/cold-open-hero.mp4 goes inside the video. B is the split hero for inner pages: headline left, the sign right, no film. Headlines use .bl-words so they ignite word by word.
sections/hero.htmlVariant A
Look 07 from Bandana
The first lit thing.
On the drive home: a canopy at blue hour, its underside lit, nothing else on for miles. Cold Open is a locked look for sites built with Claude Code: one folder, one prompt, fifty copies.
Variant B
Look 07, inner page
Nothing else on.
The split hero. Headline on the left, the sign on the right, one lit key. For pricing, about and work pages.
feature-grid
Three or six things. A is the icon grid: island panels, a pictogram in a channel, a number, a title in Forecourt. B is the numbered two-column list, for rules and refusals.
sections/feature-grid.htmlVariant A
The parts
Nothing else on for miles.
A look is one folder. Everything in it obeys one file, and the file is not negotiable.
-
01
Two materials
The lightbox: milk acrylic lit from inside, in an aluminium retainer. And the channel it sits in. Buttons are lit, fields are channels, and anything selected goes dark. State is depth, never a colour.
-
02
One red lamp
The accent is the lamp on the fascia, and it lands once per screen, on the primary key. Nothing else on the page is red.
-
03
Forecourt
An original display face, a wide squared gothic with superellipse rounds and flat terminals, drawn from scratch and bundled only. Headlines, prices, big numbers. Never a paragraph.
-
04
Twelve pictograms
The symbols on a service sign: pump, phone, bed, cup, car, arrow, key, ice, air, tyre, map, headlights. Single solid fills, hard corners, one drawing each.
-
05
Ignition
Nothing slides in. Things switch on the way a tube starts: a flicker, a second flicker, then steady. Presets only. Nothing is animated in a page.
-
06
Both schemes
Native is blue hour. Daylight is the same station at four in the afternoon, the boxes unlit. Only the colour tokens change; nothing else does.
Variant B
The rules
Six things it will not do.
- 01
A second accent
One red lamp, one hit per screen. Status colours live on badges, toasts and field errors and nowhere else.
- 02
A third material
A lightbox that is raised, a channel that is recessed. No flat, no outlined, no glass.
- 03
A paragraph in Forecourt
The sign face is for headlines, prices and big numbers. Reading is Archivo.
- 04
The canopy behind body copy
The film sits behind the headline in hero A and nowhere else. A paragraph never sits on it.
- 05
Motion that eases in
Things switch on or off. Nothing slides, nothing floats, nothing bounces.
- 06
A curve in a pictogram
Twelve symbols, solid fills, hard corners. If none fits, use no icon.
bento
The parts, unevenly. A is a wide materials tile with the three key states, then the face, the sign, the haze and the status lamps. B is three even tiles.
sections/bento.htmlVariant A
The rules, made visible
Lit, unlit, and nothing else.
The lightbox and the channel
A key is a small lightbox: a lit face, a tube along the top, a retainer. Press it and it goes dark in its channel. Every field is a channel too, and the red comes up along its floor on focus.
AaForecourt, two cuts
The sign face
Regular for prices and stats, Bold for headlines and the mark.
The sign
A lightbox with channels in it, for the numbers a page has to show. One per page.
The haze
The one gradient: sodium light from a lamp out of frame. Hero and CTA backdrops, tile art, card media. Never behind a paragraph.
Edition open
Twelve left
Archived
Status, in three lamps
Ok, warn and err exist for badges, toasts and field errors, and nowhere else. They are never the accent.
Variant B
Three tiles
What the folder holds.
The file
CLAUDE.md. Nine sections, numbered rules, page recipes, a starter prompt.
07Cold Open
The law
theme.css and motion.css. Every token, every class, both schemes.
The proof
Eleven sections, ten components, the kit sheet and this demo.
gallery
Work, products, presets. A is six portrait tiles, the forecourt close up, all drawn in the theme. B is wide tiles, two per row, for landscape pieces. Never a photograph.
sections/gallery.htmlVariant A
The forecourt, close up
Six things on it.
07
Variant B
Wide
Two across.
CO
pricing
Plans. A is three signs with the middle one chosen: the chosen plan has gone dark in its channel and carries the one lit primary key. B is two plans.
sections/pricing.htmlVariant A
Editions
Fifty copies, then the lights go off.
Every look on the rack is sold fifty times and archived. No reprints, no free tier, no second run.
One look
$125Cold Open
- The whole folder, every part
- Forecourt, both cuts
- The film, the tile, twelve pictograms
- One of fifty
Three looks
$300any three
- Any three looks on the rack
- Seventy-five dollars off
- Each one of its fifty
- Switch a site between them in one line
Five looks
$425any five
- Any five looks on the rack
- Two hundred dollars off
- Each one of its fifty
- A studio's worth
Variant B
Editions
One, or three.
testimonial
One voice. A is one big line in Forecourt on an island panel. B is three quote cards.
sections/testimonial.htmlVariant A
It refuses a second accent. One lamp, and the rest is sky.
Variant B
Buttons are lit. Fields are channels. That is the whole material system.
Display face for display only. Never a paragraph in Forecourt.
If a part you need does not exist, stop and say so.
faq
Questions. A is a split: the head on the left, a stack of signs on the right, the open one gone dark. B is a two-column grid with every answer visible.
sections/faq.htmlVariant A
Questions
Before you pull in.
Short answers. The long ones are in the file.
What do I actually get?
One folder. A CLAUDE.md your Claude obeys, theme.css and motion.css, Forecourt in two cuts, eleven sections in two variants each, ten components with every state drawn, twelve pictograms, the tile, the film, and a kit sheet that shows all of it on one page.
Does it work on a site I already have?
Yes. Put the folder in the project, set data-look on the html element, link the two stylesheets, paste the starter prompt. Claude rebuilds every screen from the sections and components and stops when it needs a part that does not exist.
Can I change the red?
No. The accent is the lamp on the fascia and it is the one hit per screen. If you want another colour, you want another look.
What happens after fifty?
The look is archived and a new one takes its place on the rack. The fifty owners keep it forever. Nobody else ever gets it.
Is the typeface mine?
Forecourt is licensed for sites wearing Cold Open, as many as you build. It is never sold apart and never redistributed on its own.
Is there a daylight version?
Daylight is the same station at four in the afternoon, every box unlit. Set data-scheme to light, or to auto to follow the system. Only the colour tokens change.
Variant B
Questions
All of them, open.
What do I actually get?
One folder: the file, the two stylesheets, the face, the sections, the components, the pictograms, the tile, the film and the kit sheet.
Does it work on a site I already have?
Yes. Put the folder in, set data-look, link the stylesheets, paste the prompt.
Can I change the red?
No. If you want another colour, you want another look.
What happens after fifty?
The look is archived. The fifty owners keep it forever.
Is the typeface mine?
Licensed for sites wearing Cold Open, never sold apart.
Is there a daylight version?
Daylight. Set data-scheme to light, or auto to follow the system.
cta
The ask. A is the band on an island with the sodium haze through it and one lit key. B is the compact bar.
sections/cta.htmlVariant A
Look 07
Pull in while it is lit.
Fifty copies. When they are gone, Cold Open is archived and the rack moves on.
Variant B
Variant A
Variant B
contact-form
Write to us. A is the split, fields right. B is the form on an island panel. Every field is a channel, and the floor of a channel lights red on focus.
sections/contact-form.htmlVariant A
Write to us
Ask before you buy.
Tell us what you are building and which looks you have your eye on. We answer within a day.
Variant B
Write to us
Ask before you buy.
Tokens
88 custom properties. Nothing else exists.
Native values first; the light scheme overrides only the colour tokens. The same list is in theme.json.
| Token | Group | Native | light |
|---|---|---|---|
| --bg | canvas | #0C1530 | #E4E8F2 |
| --surface | canvas | #16224A | #EEF1F7 |
| --surface-2 | canvas | #101B3E | #D8DEEB |
| --text | canvas | #ECEFFA | #0E1430 |
| --text-2 | canvas | rgba(236, 239, 250, 0.64) | rgba(14, 20, 48, 0.66) |
| --text-3 | canvas | rgba(236, 239, 250, 0.40) | rgba(14, 20, 48, 0.42) |
| --line | canvas | rgba(236, 239, 250, 0.10) | rgba(14, 20, 48, 0.10) |
| --accent | accent | #FF3B2E | #D62B20 |
| --accent-ink | accent | #FFFFFF | #FFFFFF |
| --accent-line | accent | rgba(255, 59, 46, 0.45) | rgba(214, 43, 32, 0.45) |
| --accent-glow | accent | rgba(255, 59, 46, 0.38) | rgba(214, 43, 32, 0.22) |
| --tube | other | #F4F6FC | #AEB8CC |
| --tube-glow | other | rgba(236, 239, 250, 0.28) | rgba(255, 255, 255, 0) |
| --sodium | other | #FFB03A | |
| --haze | other | radial-gradient(52% 60% at 100% 62%, rgba(255, 176, 58, 0.16), rgba(255, 176, 58, 0)) | radial-gradient(52% 60% at 100% 62%, rgba(255, 176, 58, 0.10), rgba(255, 176, 58, 0)) |
| --grain-opacity | other | 0.06 | 0.04 |
| --hero-text | other | #ECEFFA | #ECEFFA |
| --hero-text-2 | other | rgba(236, 239, 250, 0.70) | rgba(236, 239, 250, 0.70) |
| --hero-scrim | other | linear-gradient(90deg, rgba(6, 10, 30, 0.82) 0%, rgba(6, 10, 30, 0.55) 42%, rgba(6, 10, 30… | |
| --retainer | other | #8A93A6 | #9AA3B8 |
| --retainer-dark | other | #3A4468 | #B8C0D2 |
| --fascia-bg | other | linear-gradient(180deg, #1C2550 0%, #131B40 55%, #0D1434 100%) | linear-gradient(180deg, #1C2550 0%, #131B40 55%, #0D1434 100%) |
| --fascia-shadow | other | inset 0 1px 0 rgba(236, 239, 250, 0.14), inset 0 -3px 0 rgba(244, 246, 252, 0.88), 0 8px 3… | inset 0 1px 0 rgba(236, 239, 250, 0.14), inset 0 -3px 0 #FFFFFF, 0 8px 24px -8px rgba(14, … |
| --fascia-text | other | #ECEFFA | #ECEFFA |
| --fascia-well-bg | other | linear-gradient(180deg, #04081A 0%, #0A1230 40%, #0F1938 100%) | linear-gradient(180deg, #04081A 0%, #0A1230 40%, #0F1938 100%) |
| --fascia-well-shadow | other | inset 0 3px 0 rgba(0, 0, 0, 0.9), inset 0 12px 22px -6px rgba(0, 0, 0, 0.95), inset 0 -1px… | inset 0 3px 0 rgba(0, 0, 0, 0.9), inset 0 12px 22px -6px rgba(0, 0, 0, 0.95), inset 0 -1px… |
| --module-bg | other | linear-gradient(180deg, #182450, #111B40) | linear-gradient(180deg, #F4F6FB, #E9EDF5) |
| --module-shadow | other | inset 0 1px 0 rgba(236, 239, 250, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 0 0 1px var(… | inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(14, 20, 48, 0.14), 0 0 0 1px rgba(14, 20, 48, 0… |
| --pool | aura | radial-gradient(50% 42% at 50% 0%, rgba(236, 239, 250, 0.22), rgba(236, 239, 250, 0)) | radial-gradient(50% 42% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)) |
| --pattern | aura | linear-gradient(180deg, #060A1E 0%, #0C1530 55%, #1A2758 100%) | linear-gradient(180deg, #C9D2E6 0%, #E4E8F2 60%, #EEF1F7 100%) |
| --grain | aura | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='1… | |
| --ok | status | #7FD9A6 | #2F8A5E |
| --warn | status | #FFB03A | #9A6A12 |
| --err | status | #FF3B2E | #D62B20 |
| --raised-bg | materials | radial-gradient(120% 95% at 50% 32%, #FFFFFF 0%, #EEF1F8 48%, #D3DAEA 100%) | linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 50%, #E8ECF5 100%) |
| --raised-bg-up | materials | radial-gradient(130% 100% at 50% 30%, #FFFFFF 0%, #F7F9FD 55%, #E1E6F2 100%) | linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 50%, #EEF1F8 100%) |
| --raised-flat | materials | #EEF1F8 | #FFFFFF |
| --raised-ink | materials | #101838 | #0E1430 |
| --raised-ink-2 | materials | rgba(16, 24, 56, 0.62) | rgba(14, 20, 48, 0.62) |
| --raised-shadow | materials | inset 0 0 0 1px rgba(16, 24, 56, 0.22), inset 0 -1px 0 rgba(16, 24, 56, 0.12), 0 0 0 2px #… | inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(14, 20, 48, 0.10), 0 0 0 2px #9AA3B8, 0 0 0 3p… |
| --raised-shadow-up | materials | inset 0 0 0 1px rgba(16, 24, 56, 0.18), 0 0 0 2px #A2ABBE, 0 0 0 3px #1A2244, 0 18px 30px … | inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(14, 20, 48, 0.10), 0 0 0 2px #9AA3B8, 0 0 0 3p… |
| --raised-hit | materials | inset 0 0 0 1px rgba(16, 24, 56, 0.22), 0 0 0 2px var(--accent), 0 0 0 3px #1A2244, 0 14px… | inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(14, 20, 48, 0.10), 0 0 0 2px var(--accent), 0 … |
| --recessed-bg | materials | linear-gradient(180deg, #04081A 0%, #0A1230 40%, #0F1938 100%) | linear-gradient(180deg, #C4CBDB 0%, #D2D8E5 40%, #DAE0EB 100%) |
| --recessed-shadow | materials | inset 0 3px 0 rgba(0, 0, 0, 0.9), inset 0 12px 22px -6px rgba(0, 0, 0, 0.95), inset 0 -1px… | inset 0 2px 0 rgba(14, 20, 48, 0.22), inset 0 10px 18px -6px rgba(14, 20, 48, 0.28), inset… |
| --recessed-shadow-deep | materials | inset 0 4px 0 rgba(0, 0, 0, 0.9), inset 0 18px 30px -8px rgba(0, 0, 0, 0.95), inset 0 -1px… | inset 0 3px 0 rgba(14, 20, 48, 0.24), inset 0 16px 28px -8px rgba(14, 20, 48, 0.32), inset… |
| --recessed-lit | materials | inset 0 3px 0 rgba(0, 0, 0, 0.9), inset 0 12px 22px -6px rgba(0, 0, 0, 0.95), inset 0 -1px… | inset 0 2px 0 rgba(14, 20, 48, 0.22), inset 0 10px 18px -6px rgba(14, 20, 48, 0.28), inset… |
| --recessed-rule | materials | linear-gradient(90deg, transparent, rgba(236, 239, 250, 0.16), transparent) | linear-gradient(90deg, transparent, rgba(14, 20, 48, 0.18), transparent) |
| --scrim | materials | rgba(4, 8, 26, 0.74) | rgba(228, 232, 242, 0.78) |
| --chevron | materials | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'… | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'… |
| --font-display | type | "Forecourt", "Arial Black", "Helvetica Neue", sans-serif | |
| --font-body | type | "Archivo", system-ui, sans-serif | |
| --display-weight | type | 700 | |
| --text-xs | type | .75rem | |
| --text-sm | type | .875rem | |
| --text-md | type | 1.0625rem | |
| --text-lg | type | 1.1875rem | |
| --text-xl | type | 1.5rem | |
| --text-h3 | type | 1.625rem | |
| --text-h2 | type | clamp(2.2rem, 4.2vw, 3.6rem) | |
| --text-display | type | clamp(2.9rem, 7.4vw, 6.6rem) | |
| --text-price | type | 2.75rem | |
| --track-caps | type | .18em | |
| --leading-tight | type | .98 | |
| --leading-body | type | 1.55 | |
| --radius | shape | 10px | |
| --radius-sm | shape | 6px | |
| --radius-pill | shape | 999px | |
| --rule | shape | 1px | |
| --space-1 | space | .25rem | |
| --space-2 | space | .5rem | |
| --space-3 | space | .75rem | |
| --space-4 | space | 1rem | |
| --space-5 | space | 1.5rem | |
| --space-6 | space | 2rem | |
| --space-7 | space | 3rem | |
| --space-8 | space | 4.5rem | |
| --space-9 | space | 7rem | |
| --wrap | space | 1200px | |
| --control | space | 50px | |
| --control-sm | space | 38px | |
| --icon | space | 22px | |
| --dur-fast | motion | 140ms | |
| --dur | motion | 400ms | |
| --dur-slow | motion | 900ms | |
| --dur-ignite | motion | 1100ms | |
| --ease | motion | cubic-bezier(.2, .7, .2, 1) | |
| --ease-switch | motion | steps(1, end) | |
| --reveal-y | motion | 0px |