Blue Hour
The world, held in a drop.
50 of 50 left · retired when gonePalette
Canvas & version
- Canvas
- Light
- Version
- 1.0.0
A wet window at golden hour: drops of every size on the glass, each one holding a small upside-down country, two that ran, one smeared by a thumb. The interface is made of the same water. Raised is a bead on the glass with one highlight and a shadow ring under it; recessed is the wet ring a bead leaves. One gold hit per screen, the sun inside a drop.
The site's name sits on the picture the way a name sits on a record sleeve, in Hour Light, an extended light face drawn for the look where every dot is a drop. A plain body face does the reading. Twelve icons, solid silhouettes under one light. Headlines coalesce from beads, and what a lens holds slides against it.
It refuses: a second accent, a hard drop shadow, a square button, the pane behind body copy, an icon drawn with a stroke, a second photograph, and a tidy grid of drops.
What's inside
folderlooks/blue-hour/
├── CLAUDE.md ← read this first
├── theme.css all tokens as CSS variables
├── theme.json same tokens, machine-readable
├── fonts/ .woff2 + LICENSE.txt
├── sections/ hero, pricing, footer …
├── components/ buttons, forms …
├── motion.css easings, keyframes, reveals
├── assets/ icons, favicon
├── kit/ the kit sheet, everything on one page
├── demo/ one page wearing the look
└── README.md install + licenceSections · 2 variants each
Components · every state drawn
Motion · baked into this look
Font pack
Hour Light · Instrument Sans
Hour Light · open-licence companions · .woff2 self-hosted · LICENSE.txt included
Install
1 · Pull it in
Download the zip and unzip into your project as ./looks/blue-hour, or run the command below.
Terminalnpx bandana add blue-hour --key <your key>2 · Paste into Claude Code
PromptDress this site in the Blue Hour look at ./looks/blue-hour. Read ./looks/blue-hour/CLAUDE.md first and obey it. Put data-look="blue-hour" on <html>, link theme.css then motion.css, add the icon sprite and the reveal script from the kit, and build every screen from the fragments in sections/ and components/. Never invent a colour, shadow, radius, font, size or motion; if a token, section or component you need does not exist, stop and tell me instead.3 · Everything matches
Every screen Claude builds from now on comes out looking like the kit sheet.
