Default
A raised card sitting on the floor, lit from the top left like everything else.
Aural Rain
Look 14 · the kit sheet · looks edible, isn't
Sugar, cut like gems
The picture the look is made of, and six crops of it. Every colour on the page comes out of here: the cream of the sugar crystal, the ink of the shadows, the rose of the one sweet. The blue and the amber stay in the picture.
Condensed caps, a script for the name, a plain face to read
Display is uppercase and condensed, for headlines, labels, prices and big numbers. The script is for the name of the thing only. Never a paragraph in either. Anton and Pacifico stand in until the look's own face lands; Inter reads.
the script the name
Aural Rain
--text-h1 display
Sugar, set hard
--text-h2
Looks edible
--text-h3
Hard candy
display
$125
--text-lede
Cream, ink, one band of oxblood, and the rose once a screen.
--text-body
A raised thing is a slab of poured sugar with a lit top edge and one gloss sweep. A well is the mould it was cast in.
--text-meta
--text-eyebrow
Look 14, an edition of fifty
Hard candy, and the mould
Raised is a slab of poured sugar with a lit top edge and one gloss sweep, the colour deepening toward the foot. Recessed is the mould it was cast in. There is no third, and state is depth rather than colour. The key is the same sugar poured in the rose; the ink key is the same sugar in the dark. The frost is the slab laid over the film.
.bl-raised.bl-recessed.bl-btn--accent.bl-btn--ink
--rim | inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(42, 22, 20, 0.06), inset 0 -2px 0 rgba(42, 22, 20, 0.05) | |
--rim-sm | inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(42, 22, 20, 0.06) | |
--throw | 0 1px 1px rgba(42, 22, 20, 0.05), 0 4px 10px -2px rgba(42, 22, 20, 0.1), 0 14px 28px -12px rgba(42, 22, 20, 0.22) | |
--throw-lg | 0 2px 2px rgba(42, 22, 20, 0.06), 0 10px 20px -4px rgba(42, 22, 20, 0.14), 0 34px 60px -20px rgba(42, 22, 20, 0.3) | |
--gloss | linear-gradient(103deg, transparent 34%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0.06) 56%, transparent 66%) | |
--raised-bg | linear-gradient(178deg, var(--raised-hi) 0%, var(--surface) 38%, var(--raised-lo) 100%) | |
--recessed-bg | var(--well) | |
--well-in | inset 0 2px 4px rgba(42, 22, 20, 0.16), inset 0 1px 0 rgba(42, 22, 20, 0.1), inset 0 -1px 0 var(--well-lip) | |
--well-in-deep | inset 0 4px 10px rgba(42, 22, 20, 0.2), inset 0 1px 0 rgba(42, 22, 20, 0.12), inset 0 -1px 0 var(--well-lip) | |
--key-bg | linear-gradient(178deg, var(--accent-hi) 0%, var(--accent) 46%, var(--accent-lo) 100%) | |
--key-rim | inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 3px rgba(42, 22, 20, 0.18), 0 0 0 1px rgba(185, 75, 122, 0.25) | |
--key-throw | 0 10px 22px -8px rgba(185, 56, 111, 0.35), 0 24px 50px -20px var(--shadow) | |
--ink-bg | linear-gradient(178deg, #4A2A26 0%, var(--text) 60%, #1C0E0C 100%) | |
--glass-fill | linear-gradient(178deg, rgba(255, 253, 245, 0.66), rgba(255, 248, 224, 0.44)) | |
--glass-edge | inset 0 0 0 1px rgba(255, 255, 255, 0.5) | |
--glass-shadow | 0 10px 32px -12px rgba(42, 22, 20, 0.45) | |
--pattern | radial-gradient(70% 60% at 50% 110%, rgba(46, 107, 214, 0.14), transparent 70%), radial-gradient(40% 30% at 18% 100%, rgba(255, 255, 255, 0.7), transparent 70%) |
Twelve things, piped
One object each, drawn as one continuous line of icing with a bead where the bag lifted. currentColor throughout; the one in the rose is the one hit on that screen.
The slow turn
Presets, plus the one move only this look has: a thing arrives already there and turns the last three degrees into place, the gloss sliding across it as it settles.
.bl-hover-lift
.bl-ripen — one light slides across the sugar
.bl-reveal, .bl-stagger, .bl-words, .bl-rise and .bl-late all run on scroll and are the slow turn: already there, a few degrees off, settling into place. They are shown working in the demo rather than frozen here.
Components, every state drawn
Statically, with a helper class, styled identically to the real pseudo-class.
buttons
Buttons. Hard candy, always a pill. Pressed and current are the mould - state is depth, never colour. Two variants only: the plain one and the rose key, and the key appears once per screen. Every state below is drawn with a helper class so it can be inspected without a pointer.
inputs
Inputs. Fields are wells: a field is somewhere you put something into, so it is cut into the floor, never raised. The label sits above, never inside. The invalid state is the one place on a page a semantic colour is allowed.
That address is missing its ending.
Hints sit under the field, quiet.
cards
Cards. A piece of hard candy with the crescent of light on it. Selected is the mould and loses its gloss, because a thing pressed into the mould catches no light.
Hover
It lifts three pixels, its shadow lengthens and the sugar brightens a stop. Nothing changes colour.
Selected
Pressed into the floor. This is how the chosen plan, the current row and the open panel all read.
badges
Badges. Small wells with type in them. The semantic colours live here and in field errors and toasts, and nowhere else - they are not decoration.
One of fifty
Edition 07
Shipped
Two left
Archived
tabs
Tabs. The strip is a bar of sugar; the selected tab is a well inside it. Never an underline, never a coloured tab.
accordion
Accordion. Boxed. The open item is a well, the closed ones are sugar. The mark is a plus and a minus, never a chevron, never an arrow. The faq section is built from these same classes.
Open −
The open panel is recessed, so the thing you are reading is the thing pressed into the page. Only one needs to be open at a time.
Closed +
Hidden until opened.
Closed, hover +
Hidden until opened.
modal
Modal. A panel of sugar over a scrim that darkens the floor behind it. Use bl-modal--static to render it inline, as the kit sheet does; drop the modifier and it fixes to the viewport. The confirm is the accent and it is the only accent on the screen while the modal is open.
Edition 07 of 50
Take this one
Once fifty are gone the look is archived and never sold again. Yours keeps working.
toast
Toast. A sugar pill with one dot. Use bl-toast--static to render it inline; drop the modifier and it fixes to the bottom right. The dot carries the semantic colour so the text never has to.
table
Table. Rules between rows, never boxes around cells. Numbers are set in the display face; everything else is the body face. The selected row is a well.
| Edition | Bought | Where it went | Price |
|---|---|---|---|
| 01 | 14 Sep | A shop in Lisbon | $125 |
| 07 | 19 Sep | Yours | $125 |
| 08 | 21 Sep | A studio in Mexico City | $125 |
| 09 | 22 Sep | Held | — |
Sections, both variants
Eleven sections, two variants each. This is the real markup from sections/, not a drawing of it.
hero · variant A
Look 14 · one of fifty
Look 14 · Aural Rain · edition of 50
Aural Rain
Looks edible. Isn't. Every surface on the page is poured sugar with a hard gloss over it, and the whole thing turns slowly, the way the film does.
hero · variant B
Look 14 · Aural Rain
Sugar, set hard
The picture sits beside the headline instead of under it, for pages that need the copy to lead.
nav · variant A
nav · variant B
feature-grid · variant A
What is in the folder
Eleven sections, ten components, one law
One rose thing
The rose sweet is the one thing in the picture the eye goes to first, so rose is the only accent on the page. One word or one key a screen, never both.
Hard candy
A raised thing is a slab of poured sugar with a lit top edge and one gloss sweep. A well is the mould it was cast in. No third.
Four colours
Cream, ink, the rose and one band of oxblood. The blue and the amber stay in the picture where they belong; nothing else gets in.
The slow turn
Things arrive already there and turn the last three degrees into place, the way the film turns. It is the one move this look has.
Caps, and a script for the name
Headlines are set in condensed caps. The script is for the name of the thing and nothing else. A plain face does the reading.
A CLAUDE.md
Nine sections that tell your Claude what it may do, and stop it cold when you ask for something the look does not have.
feature-grid · variant B
Six, in a list
The parts, numbered
theme.css
Every token and every class. The law.
motion.css
Ten presets and the slow turn.
sections/
Eleven, two variants each.
components/
Ten, every state drawn.
assets/
The picture, its crops, the tile, twelve piped icons.
CLAUDE.md
The product. Hand it to your Claude.
bento · variant A
The rules, short
What this look refuses
One rose thing
Sugar, set hard.
The accent is the rose sweet, and there is one in the picture. Put two on a screen and it is a sweet-shop window, not a look.
02
03
04
bento · variant B
By the numbers
Fifty, then never again
50
11
10
12
$125
gallery · variant A
The picture, six ways
Crops of the one picture
gallery · variant B
Two, tall
Close, and closer
pricing · variant A
Editions
Fifty, then it is gone
Every look on Bandana is sold fifty times and archived. No renewals, no tiers, no free version.
One look
$125
- The whole folder
- The picture and the tile
- The twelve icons
Three looks
$300
- Any three, any time
- Mix shipped and unshipped
- The usual licence on each
Five looks
$425
- Any five, any time
- For a studio with a rack
- The usual licence on each
pricing · variant B
Two ways in
One, or three
One look
$125
- The whole folder
- One of fifty
Three looks
$300
- Any three, any time
- Twenty percent off
testimonial · variant A
It is the only kit I have bought that told me no.
testimonial · variant B
Looks edible. Isn't.
faq · variant A
Before you buy
The questions we get
What is actually in the folder −
A theme, a motion file, eleven sections in two variants, ten components with every state drawn, twelve piped icons, the picture and every crop of it, the tile, the film, and a CLAUDE.md that tells your Claude what it may and may not do.
Can I use my own pictures +
Yes, and you should. The rule is only that a picture is shot the way the candy is: macro, one hard key, a gloss, jewel colour that resolves warm, and never a cool grey studio.
What happens after fifty +
It is archived and never sold again. Yours keeps working; nobody else can buy it.
Do I need Claude Code +
No. It is plain CSS and plain markup. Claude Code is simply the fastest way to put it on something.
faq · variant B
Two questions
The short version
Is the film mine to use −
On any site wearing this look, yes. Not on its own, and not on a site that is not.
Can I change the rose +
Change the four palette tokens and the whole look moves with you. Add a fifth colour and it stops being this look.
cta · variant A
One of fifty
Take the candy home
Paste one prompt and your site is wearing it by the time you have made coffee.
cta · variant B
Still deciding
Fifty is not many
When they are gone the look is archived and nobody else gets it.
contact-form · variant A
Ask first
Not sure it fits
Tell us what you are building and we will say plainly whether this is the wrong look for it.
contact-form · variant B
The drop list
Hear when a look lands
footer · variant A
footer · variant B
The palette
Four tokens are the look; everything else is derived from them. Change the four and the whole thing moves with you.
--bg | #FFF8E0 | |
--surface | #FFFDF5 | |
--text | #2A1614 | |
--accent | #E77FA8 | |
--accent-hi | #FFC4DB | |
--accent-lo | #B94B7A | |
--accent-ink | #B9386F | |
--on-accent | #2A1614 | |
--muted | #8A5A57 | |
--oxblood | #612C2D | |
--line | rgba(42, 22, 20, 0.14) | |
--raised-hi | #FFFFFF | |
--raised-lo | #F3E9D2 | |
--well | #F1E6CC | |
--well-lip | rgba(255, 255, 255, 0.85) | |
--shadow | rgba(42, 22, 20, 0.28) | |
--sheen | rgba(255, 255, 255, 0.9) | |
--scrim | rgba(255, 248, 224, 0.86) | |
--ok | #4F8A5B | |
--warn | #B8862B | |
--err | #C0392B |
Type and metrics
The scale is closed. A value that is not here does not exist in this look.
--font-display | "Anton", Impact, "Arial Narrow", sans-serif | |
--font-body | "Inter", system-ui, sans-serif | |
--font-hand | "Pacifico", cursive | |
--text-eyebrow | 0.72rem | |
--text-meta | 0.82rem | |
--text-body | 1.02rem | |
--text-lede | 1.2rem | |
--text-h3 | 1.4rem | |
--text-h2 | clamp(2rem, 4.2vw, 3.4rem) | |
--text-h1 | clamp(3rem, 8vw, 7.4rem) | |
--track-eyebrow | 0.14em | |
--track-display | 0.005em | |
--leading-display | 0.92 | |
--leading-body | 1.55 |
--radius | 22px | |
--r-sm | 8px | |
--r-md | 14px | |
--r-lg | var(--radius) | |
--r-pill | 999px | |
--rule | 1px | |
--s1 | 4px | |
--s2 | 8px | |
--s3 | 16px | |
--s4 | 24px | |
--s5 | 32px | |
--s6 | 48px | |
--s7 | 72px | |
--measure | 60ch |