Golden
The drop that holds the sun. Low centre of the pane.
Look 06, the kit sheet
Blue Hour
The world, held in a drop. 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
Pale sky, navy ink, one gold hit, the pane, and three status colours.
Canvas and accent
--bg --surface --surface-2 --text --accent--bg
#E3ECF8--surface
#F5F8FD--surface-2
#FFFFFF--text
#14224A--accent
#E8A83A--accent-ink
#3A2203--accent-bg
radial-gradient(92% 86% at 50% 120%, rgba(255, 240, 184, 0.98), rgba(255, 240, 184, 0) 62%…--accent-gloss
linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.34) 58%, rgba(255…--accent-shadow
inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(255, 255, 255, 0.36), inset …--accent-shadow-up
inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 -…--ok
#2F8F62--warn
#C4861B--err
#D25454The pane
Decoration only. One photograph of a wet window at golden hour, the gradient behind it, and the grain. The hero film, the call to action, the six stills, the lenses and card media are all this one picture. Never behind body copy, and never a second photograph.
--sky
#3F7BD8--lavender
#A8B4D8--rose
#F2BFB0--peach
#F6D7C3--pane
linear-gradient(180deg, #DCE8F8 0%, #BFD3F0 45%, #F6D7C3 100%)--pattern
var(--pane)--drop
inlined--mist
radial-gradient(60% 50% at 70% 40%, rgba(246, 215, 195, 0.7), rgba(246, 215, 195, 0) 70%)--grain
inlinedType
Hour Light for display. Instrument Sans for everything else.
Hour Light 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
Blue Hour
.bl-h2
Everything is seen through a drop.
.bl-price
$125one of fifty
.bl-lede
A look for sites built with Claude Code. A wet window at golden hour, an interface made of water beads, and one gold hit per screen.
.bl-body
Raised is a bead of water on the glass, with one highlight and a shadow ring under it. Recessed is the wet ring a bead leaves. There is no third material, and state is depth, never a colour.
.bl-eyebrow
Look 06, an edition of fifty
.bl-meta
.bl-labelEmail
Materials
Two. Raised is a bead and can be pressed. Recessed is the ring it leaves.
.bl-raised
.bl-recessed
Icons
12 wet silhouettes. None is a variation of another.
24-unit grid, solid shapes in currentColor, no strokes, one small highlight knocked out of each at the same angle so one light falls on all twelve. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.
Motion
Coalesce, and the lens shift.
The pane is a film that loops under the title (.bl-hero__film). Headlines coalesce: each word arrives as a small blurred bead, swells and settles into letters (.bl-words). Blocks rise into place (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). What a lens holds slides against it (.bl-hover-lens). Cards lift (.bl-hover-lift). Beads swell on hover and sink into the ring 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-lensReplay
Blue Hour
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
Every button is a bead. Primary is the gold bead, one per screen. Hover swells the bead and slides its highlight; pressed is the ring. Small, icon-only and the scheme toggle are the same bead at other sizes.
components/buttons.htmlinputs
Every field is a ring: a well with a bright meniscus. Focus adds a gold ring outside it, invalid a red one. The checkbox is a small ring that fills with a gold drop.
components/inputs.htmlThat does not look like an email.
No mailing list. We only write back.
cards
A card is a raised bead with a still as its media. Hover lifts it; selected presses it into the ring. The media is one of the six stills, never another picture.
components/cards.htmlThe ridge (hover)
Lifted four pixels with the bead ease. Nothing else changes.
The run (selected)
Pressed into the glass. Selected is the ring, never a colour.
Chosen
badges
Small labels. Neutral by default; the three status colours appear here, on toasts and on field errors, and nowhere else.
components/badges.html
Chosen
Edition 07 of 50
Live
3 left
Retired
tabs
A raised bead holding its tabs; the active tab is the ring inside it.
components/tabs.htmlaccordion
Every question is a bead. The open one is pressed into the ring, and its plus turns to a cross.
components/accordion.htmlOpen
The open item is the ring. Only one needs to be open, but nothing stops two.
Closed
Closed items sit on the glass as beads.
Drawn open with .is-open
For inspection without a pointer. The browser will keep this one collapsed; the styling is what matters.
modal
A raised panel over a blurred scrim. The static variant renders inline on the pane so it can be inspected; it keeps the pane's colours.
components/modal.htmlRetire this edition?
Edition 07 of 50 will be released back to the rack. The licence key stops working on the next install.
toast
A small bead at the foot of the screen with a drop for its status. The static variant renders inline.
components/toast.htmltable
A table sits in a ring. Rows brighten on hover; the selected row is a pale bead lying across the well.
components/table.html| Edition | Site | Installed | Installs | Status |
|---|---|---|---|---|
| 01 | ba-nd.com | 18 Sep 2026 | 4 | Live |
| 02 | getdirtyhands.com | 18 Sep 2026 | 2 | Live |
| 03 | dreamclean.space | 19 Sep 2026 | 1 | Chosen |
| 04 | atcakes.com | 19 Sep 2026 | 0 | Pending |
| 05 | jessicaresler.com | 20 Sep 2026 | 0 | Retired |
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 film: the drops on the window at golden hour, rendered, looping under a centred sleeve title (the home page, once per site). The title is the name of the site, set in Hour Light caps and tracked, the way a name sits on a sleeve; the sentence goes in the lede. In a site, point the film at /looks/blue-hour/motion/blue-hour-hero.mp4 and its poster; ../motion/ is for the kit and the demo only. Reduced motion shows the poster. B is the split for inner pages: a mixed-case headline on the canvas and the pane beside it, with the two materials sitting on the glass.
sections/hero.htmlVariant A
Bandana · Look 06
Blue Hour
The world, held in a drop. A look for sites built with Claude Code, an edition of fifty.
Variant B
The parts
Everything is seen through a drop.
Every colour, radius, shadow and duration in Blue Hour is a custom property. Claude uses them or stops. Nothing is invented twice.
feature-grid
Three or six things the reader should know. A is the bead grid: an icon in a raised bead, a short title, two lines. B is the numbered list in two columns, for rules and steps, where order carries meaning.
sections/feature-grid.htmlVariant A
What is in it
A pane, a bead and a rulebook.
The pane
One photograph of a wet window at golden hour: drops of every size, two that ran, one smeared by a thumb. It is the hero film, the tile and the call to action, and it never sits behind body copy.
Two materials
Raised is a bead of water on the glass, with one highlight and a shadow ring under it. Recessed is the wet ring a bead leaves. There is no third.
Hour Light
An original display face drawn for this look. Extended, light, wide ovals, flat apexes, and every dot is a drop. Titles and big numbers only; the body face does the reading.
Twelve icons
Solid silhouettes on one grid, one light on all of them. Nothing is a variation of anything else.
Six stills
Six places to look on the same pane, for lenses, card media and bento art. Each one is a crop, so the picture stays one picture.
Motion, built in
Headlines coalesce from beads. What a lens holds slides against it. Beads swell under the pointer and sink when pressed. Reduced motion lands everything instantly.
Variant B
The rules
Six rules Claude cannot argue with.
01
Tokens only
Every value comes from theme.css. If the token you need is missing, the look is missing a part. Say so and stop.
02
Two materials
The bead and the ring. Buttons are beads. Fields are rings. There is no flat and no outlined.
03
Pressed is the ring
The current link, the chosen plan, the selected card, the open question. State is depth, never a colour.
04
One gold hit per screen
Gold marks the single most important element in a viewport. Status colours live only on badges, toasts and field errors.
05
Hour Light for display
It sets the title, section headlines, prices and big numbers. Everything else is Instrument Sans.
06
The pane is decoration
The render, the stills and the lenses appear in the hero, the call to action, bento art, gallery tiles and card media. Never behind body copy.
bento
The parts, unevenly. A is one wide tile that carries the pane with both materials sitting on it, plus two plain tiles. B is three even tiles, each with a still as its art, for listing what ships.
sections/bento.htmlVariant A
The parts
Everything is seen through a drop.
The materials
The whole look, drawn once. The pane is the picture, the bead is raised, the ring is what pressed looks like. Every colour, radius, shadow and duration on this page is a custom property.
Both schemes
Light is native, the pane before the sun is up. Dark is one attribute away, blue hour itself, and only the colour tokens change.
The rules
CLAUDE.md is the product. Claude reads it before it touches a file, and stops when a token it needs does not exist.
Variant B
What ships
Three folders and a rulebook.
sections/
Eleven sections, two variants each. Hero to footer. Real markup, no placeholders.
components/
Ten components with every state drawn, so hover, focus, pressed and disabled can be inspected without a pointer.
fonts/
Hour Light in two cuts, as woff2, with its licence. Drawn for this look and not sold on its own.
gallery
Work, products, presets, anything that comes in a set. A is six lenses: round windows onto the pane, three across, each holding one still, and what each holds slides against it on hover. B is the same stills as wide rounded panes, two per row, for landscape work.
sections/gallery.htmlVariant A
Stills
Six places to look on one pane.
Variant B
Stills, wide
The same pane, for landscape work.
pricing
Plans. A is three plans with the middle one chosen: the chosen plan is recessed, the ring, and carries the one gold bead. B is two plans for a simpler offer. Prices are set in Hour Light.
sections/pricing.htmlVariant A
Editions
One look, or a rack.
One look
$125Blue Hour
- One of fifty editions
- Theme, motion, sections, components
- Hour Light, woff2 and licence
- CLAUDE.md, the rules
Three looksChosen
$300any three
- Blue Hour and two more from the rack
- Three licence keys
- Three original faces
- One command each
Five looks
$425any five
- Blue Hour and four more from the rack
- Five licence keys
- Five original faces
- The whole studio, dressed
Variant B
Editions
One look, or three.
One lookChosen
$125Blue Hour
- One of fifty editions
- Theme, motion, sections, components
- Hour Light, woff2 and licence
- CLAUDE.md, the rules
Three looks
$300any three
- Blue Hour and two more from the rack
- Three licence keys
- Three original faces
- One command each
testimonial
One voice. A is a single quote held in one very large bead, centred, with a small lens beside the name. B is three quote cards in a row. On the demo the voice is the starter prompt, because that is the only thing the buyer types.
sections/testimonial.htmlVariant A
Dress this site in the look at ./looks/blue-hour. Read its CLAUDE.md first and obey it.
Variant B
Buttons are beads. Fields are rings. Pressed is the ring.
One gold hit per screen.
If the token does not exist, stop and say so.
faq
Questions. A is the split: the headline on the left, an accordion on the right where every question is a bead and the open one is the ring. B is a two-column grid with every answer visible, for pages where nothing should hide.
sections/faq.htmlVariant A
Questions
The ones we get asked.
Is it really mine?
Fifty sites get to wear Blue Hour. Yours is one of them, with its own edition number and licence key. When the fiftieth sells, the look is retired for good.
Does Claude obey it?
CLAUDE.md is a set of rules with teeth: tokens only, two materials, one gold hit per screen. If a token, section or component does not exist, Claude stops and says so instead of inventing one.
Can I use my own photograph?
The pane is the look. You can switch scheme, and you can ask us. What you cannot do is swap the picture or hand Claude a new hex and call it Blue Hour.
What about the font?
Hour Light ships as woff2 with its licence, for use on any site wearing the look. It is drawn for Blue Hour and is not sold on its own.
Variant B
Questions
The ones we get asked.
Is it really mine?
Fifty sites get to wear Blue Hour. Yours is one of them, with its own edition number and licence key. When the fiftieth sells, the look is retired for good.
Does Claude obey it?
CLAUDE.md is a set of rules with teeth: tokens only, two materials, one gold hit per screen. If a token, section or component does not exist, Claude stops and says so instead of inventing one.
Can I use my own photograph?
The pane is the look. You can switch scheme, and you can ask us. What you cannot do is swap the picture or hand Claude a new hex and call it Blue Hour.
What about the font?
Hour Light ships as woff2 with its licence, for use on any site wearing the look. It is drawn for Blue Hour and is not sold on its own.
cta
The ask. A is the pane again, full and rounded, with a sleeve lockup on it and one gold bead: it keeps the pane's colours in both schemes. B is a compact bar, one long raised bead with the line and the button, for pages that already showed the pane.
sections/cta.htmlVariant A
Look 06
Fifty sites get to wear this. Then it is retired.
One command. No redesign meetings.
Get the look, $125Variant B
Variant A
Variant B
contact-form
Write to us. A is the split: a short note on the left, the fields on the right, every field a ring and Send the one gold bead. B is the same form inside one raised card, with a select, for pages where the form stands alone.
sections/contact-form.htmlVariant A
Write to us
Ask us something.
We answer in a day or two. If it is about a licence key, write from the email you bought with.
Variant B
Write to us
Ask us something.
Tokens
76 custom properties. Nothing else exists.
Native values first; the dark scheme overrides only the colour tokens. The same list is in theme.json.
| Token | Group | Native | dark |
|---|---|---|---|
| --bg | canvas | #E3ECF8 | #0B1630 |
| --surface | canvas | #F5F8FD | #14224A |
| --surface-2 | canvas | #FFFFFF | #1B2C5C |
| --text | canvas | #14224A | #E9EEFB |
| --text-2 | canvas | rgba(20, 34, 74, 0.7) | rgba(233, 238, 251, 0.68) |
| --text-3 | canvas | rgba(20, 34, 74, 0.48) | rgba(233, 238, 251, 0.44) |
| --line | canvas | rgba(20, 34, 74, 0.10) | rgba(233, 238, 251, 0.10) |
| --accent | accent | #E8A83A | #F3B65C |
| --accent-ink | accent | #3A2203 | #3A2203 |
| --accent-bg | accent | radial-gradient(92% 86% at 50% 120%, rgba(255, 240, 184, 0.98), rgba(255, 240, 184, 0) 62%… | |
| --accent-gloss | accent | linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.34) 58%, rgba(255… | |
| --accent-shadow | accent | inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(255, 255, 255, 0.36), inset … | |
| --accent-shadow-up | accent | inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 -… | |
| --sky | aura | #3F7BD8 | |
| --lavender | aura | #A8B4D8 | |
| --rose | aura | #F2BFB0 | |
| --peach | aura | #F6D7C3 | |
| --pane | aura | linear-gradient(180deg, #DCE8F8 0%, #BFD3F0 45%, #F6D7C3 100%) | linear-gradient(180deg, #0B1630 0%, #1E3268 48%, #3A4E90 78%, #5E6FA6 100%) |
| --pattern | aura | var(--pane) | |
| --drop | aura | file assets/drop.webp | |
| --drop-ratio | aura | 4 / 3 | |
| --mist | aura | radial-gradient(60% 50% at 70% 40%, rgba(246, 215, 195, 0.7), rgba(246, 215, 195, 0) 70%) | radial-gradient(60% 50% at 70% 40%, rgba(214, 184, 168, 0.18), rgba(214, 184, 168, 0) 70%) |
| --grain | aura | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='2… | |
| --ok | status | #2F8F62 | #8FE0B8 |
| --warn | status | #C4861B | #F3D27F |
| --err | status | #D25454 | #F08A8A |
| --raised-bg | materials | radial-gradient(120% 100% at 28% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.45) 40%… | radial-gradient(120% 100% at 28% 0%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05) … |
| --raised-shadow | materials | inset 0 1px 0 #FFFFFF, inset 0 -8px 16px rgba(63, 123, 216, 0.14), inset 0 0 0 1px rgba(25… | inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -10px 20px rgba(3, 8, 26, 0.55), inset 0 … |
| --raised-shadow-up | materials | inset 0 1px 0 #FFFFFF, inset 0 -8px 16px rgba(63, 123, 216, 0.12), inset 0 0 0 1px rgba(25… | inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 20px rgba(3, 8, 26, 0.5), inset 0 0… |
| --specular | materials | radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5) 45%, rgba(2… | radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35) 45%, rgb… |
| --specular-blur | materials | 2px | |
| --recessed-bg | materials | rgba(20, 34, 74, 0.06) | rgba(2, 6, 20, 0.38) |
| --recessed-shadow | materials | inset 0 3px 10px rgba(20, 34, 74, 0.18), inset 0 -1px 0 #FFFFFF, 0 0 0 1px rgba(255, 255, … | inset 0 3px 12px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px r… |
| --blur | materials | 12px | |
| --scrim | materials | rgba(20, 34, 74, 0.42) | rgba(4, 9, 26, 0.64) |
| --chevron | materials | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><… | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><… |
| --lens-shadow | materials | inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 -14px 28px rgba(3, 8, 26, 0.42), inset 0… | inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -14px 28px rgba(3, 8, 26, 0.5), inset 0… |
| --fade | materials | #E3ECF8 | #0B1630 |
| --font-display | type | "Hour Light", "Jost", "Futura", "Helvetica Neue", Arial, sans-serif | |
| --font-body | type | "Instrument Sans", "Helvetica Neue", Arial, sans-serif | |
| --display-weight | type | 300 | |
| --text-xs | type | 0.75rem | |
| --text-sm | type | 0.875rem | |
| --text-md | type | 1.0625rem | |
| --text-lg | type | 1.25rem | |
| --text-xl | type | 1.75rem | |
| --text-2xl | type | clamp(2rem, 3.8vw, 3.25rem) | |
| --text-display | type | clamp(2rem, 6vw, 5.6rem) | |
| --track-caps | type | 0.18em | |
| --track-display | type | 0.18em | |
| --track-h2 | type | 0.02em | |
| --leading-tight | type | 1 | |
| --leading-body | type | 1.55 | |
| --radius | shape | 26px | |
| --radius-sm | shape | 16px | |
| --radius-pill | shape | 999px | |
| --rule | shape | 1px | |
| --space-1 | space | 0.25rem | |
| --space-2 | space | 0.5rem | |
| --space-3 | space | 0.75rem | |
| --space-4 | space | 1rem | |
| --space-5 | space | 1.5rem | |
| --space-6 | space | 2rem | |
| --space-7 | space | 3rem | |
| --space-8 | space | 5rem | |
| --space-9 | space | 6.5rem | |
| --wrap | space | 1240px | |
| --control | space | 48px | |
| --control-sm | space | 36px | |
| --icon | space | 22px | |
| --dur-fast | motion | 160ms | |
| --dur | motion | 440ms | |
| --dur-slow | motion | 1100ms | |
| --ease | motion | cubic-bezier(0.22, 0.8, 0.3, 1) | |
| --ease-bead | motion | cubic-bezier(0.34, 1.4, 0.64, 1) | |
| --reveal-y | motion | 16px |