Default
A raised card sitting on the floor, lit from the top left like everything else.
Still Life
Look 13 · the kit sheet · a still life in the dark
Black floor, glass fruit, one lemon thing
The picture the look is made of, and six crops of it. Every colour on the page comes out of here: the black of the floor, the grey of the glass, the lemon of the physalis. The red stays in the picture.
Wide slab caps, and a plain face to read
Display is uppercase, tight and heavy, for headlines, the mark, prices and big numbers. Never a paragraph. Arvo stands in until the look's own slab lands; Schibsted Grotesk reads.
--text-h1 display
Still life
--text-h2
In the dark
--text-h3
Blown glass
display
$125
--text-lede
Black floor, glass fruit, wide slab caps and one lemon word.
--text-body
A raised thing is a lozenge of dark glass with one crescent of light on it. A well is the void it came out of.
--text-meta
--text-eyebrow
_13 Look 13, an edition of fifty
Blown glass, and the void
Raised is a lozenge of dark glass with one crescent of light on its top and its thickness showing at the rim. Recessed is the void it was lifted out of. There is no third, and state is depth rather than colour. The key is the same glass blown in the physalis's colour.
.bl-raised.bl-recessed.bl-btn--accent
--rim | inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 12px 18px -10px rgba(255, 255, 255, 0.22), inset 0 -14px 22px -14px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.08) | |
--rim-sm | inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 6px 10px -6px rgba(255, 255, 255, 0.2), inset 0 -6px 10px -6px rgba(0, 0, 0, 0.9) | |
--throw | 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 20px -6px var(--shadow), 0 34px 60px -18px var(--shadow) | |
--gloss | radial-gradient(120% 90% at 30% -12%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0) 48%) | |
--raised-bg | radial-gradient(120% 90% at 30% -12%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, var(--raised-hi) 0%, var(--raised-lo) 100%) | |
--recessed-bg | var(--well) | |
--key-bg | radial-gradient(38% 46% at 26% 16%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(140% 70% at 50% -30%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.18) 46%, rgba(255, 255, 255, 0) 60%), radial-gradient(120% 60% at 50% 118%, rgba(255, 255, 240, 0.42) 0%, rgba(255, 255, 240, 0) 60%), linear-gradient(180deg, #FDFFB8 0%, var(--accent) 44%, #C9CF52 82%, var(--accent-lo) 100%) | |
--key-rim | inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 210, 0.55), inset 0 10px 14px -8px rgba(255, 255, 255, 0.7), inset 0 -9px 12px -8px rgba(90, 96, 20, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 -1px rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(160, 166, 50, 0.6) | |
--key-throw | 0 1px 1px rgba(0, 0, 0, 0.5), 0 10px 22px -8px rgba(251, 255, 127, 0.45), 0 30px 56px -18px rgba(251, 255, 127, 0.22), 0 26px 44px -16px var(--shadow) | |
--pattern | radial-gradient(70% 60% at 50% 110%, rgba(140, 16, 28, 0.55), transparent 70%), radial-gradient(40% 30% at 18% 100%, rgba(255, 255, 255, 0.06), transparent 70%) |
Twelve things, kept under glass
One object each, drawn in a single hairline inside a hairline circle, the way a specimen is kept. currentColor throughout; the one in the lemon is the one hit on that screen.
The ripen
Presets, plus the one move only this look has: a thing arrives matte and dim and takes its gloss a beat later.
.bl-hover-lift
.bl-ripen — one light passes over the glass
.bl-reveal, .bl-stagger, .bl-words, .bl-rise and .bl-late all run on scroll and are the ripen too: matte first, then the gloss. 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. Jelly: a domed lozenge of glass, always a pill. Pressed and current are the void - state is depth, never colour. Two variants only: the plain one and the lemon 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 blown glass with the crescent of light on it. Selected is the void and loses the crescent, because a thing pressed into the floor catches no light.
Hover
It lifts three pixels, its shadow lengthens and the glass 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 glass; 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 glass. 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 glass 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 glass 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
Glass fruit on a black floorLook 13
Limited to fiftythen retired
_13 · Still Life · edition of 50
A still life in the dark.
Black floor, glass fruit, wide slab caps and one lemon word. A look for sites built with Claude Code, and fifty of them will ever wear it.
hero · variant B
_13 · Still Life
Glass, on a black floor
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 lemon thing
The physalis is the only bright colour in the picture, so it is the only bright colour on the page. One word or one key a screen, never both.
Blown glass
A raised thing is a lozenge of dark glass with one crescent of light on it and its thickness showing at the rim. A well is the void it came out of. No third.
Four colours
The floor, the glass, the text and the lemon. Nothing else is allowed in, and the red stays in the picture where it belongs.
The ripen
Things arrive matte and dim and take their gloss a beat later. It is the one move this look has, and every reveal is built on it.
Wide slab caps
Headlines are set in a wide slab, uppercase, tight. A plain grotesque does the reading. The display face never touches a paragraph.
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
What is in the folder
Six things, plainly
_01
One lemon thing
One word or one key a screen, never both.
_02
Blown glass
The lozenge and the void it came out of. No third.
_03
Four colours
The floor, the glass, the text and the lemon.
_04
The ripen
Matte first, then the gloss, a beat later.
_05
Wide slab caps
Uppercase, tight, and never on a paragraph.
_06
Fifty editions
Then it is archived and never sold again.
bento · variant A
The rules, short
What this look refuses
One lemon thing
_01
The accent is the physalis, and there is one in the picture. Put two on a screen and it is a fruit bowl, not a still life.
_02
_03
_04
bento · variant B
Look 13
Still Life
Eleven sections, ten components, twelve icons kept under glass, and a picture nobody else will ever have.
50
$125
gallery · variant A
The picture, six ways
Crops of the one still
gallery · variant B
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
Still Life
$125
- One of fifty
- Yours on any number of sites
Three for $300
Save $75
- Spend it whenever
- On anything on the rack
testimonial · variant A
It is the only kit I have bought that told me no.
testimonial · variant B
Four colours and one picture, and every page I build with it looks like the same evening.
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 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 sits in the glass like the fruit does: on black, lit from one side, and never with a second bright colour in it.
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
Where is the display face −
Owed. Arvo stands in from Google Fonts until the look's own slab lands, and the folder updates in place when it does.
Can I change the colours +
Change the four tokens and the whole look moves with you. Add a fifth and you are no longer wearing it.
cta · variant A
One of fifty
Take the picture home
Paste one prompt and your site is wearing it by the time you have made coffee.
cta · variant B
Fifty, then archived
Buy Still Life $125contact-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
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 | #050505 | |
--surface | #121212 | |
--text | #F2F2F0 | |
--accent | #FBFF7F | |
--accent-hi | #FFFFC9 | |
--accent-lo | #A9AE3C | |
--accent-ink | #FBFF7F | |
--on-accent | #111111 | |
--muted | #9C9C97 | |
--line | rgba(242, 242, 240, 0.14) | |
--raised-hi | #1E1E1F | |
--raised-lo | #0A0A0A | |
--well | #000000 | |
--well-lip | rgba(242, 242, 240, 0.12) | |
--shadow | rgba(0, 0, 0, 0.7) | |
--sheen | rgba(255, 255, 255, 0.22) | |
--scrim | rgba(5, 5, 5, 0.84) | |
--ok | #9ED7A6 | |
--warn | #E8C97A | |
--err | #E37A7A |
Type and metrics
The scale is closed. A value that is not here does not exist in this look.
--font-display | "Arvo", "Rockwell", serif | |
--font-body | "Schibsted Grotesk", system-ui, sans-serif | |
--text-eyebrow | 0.72rem | |
--text-meta | 0.8rem | |
--text-body | 1.04rem | |
--text-lede | 1.22rem | |
--text-h3 | 1.32rem | |
--text-h2 | clamp(1.8rem, 3.6vw, 2.8rem) | |
--text-h1 | clamp(2.6rem, 7.2vw, 6.6rem) | |
--track-eyebrow | 0.24em | |
--track-display | 0.01em | |
--leading-display | 0.94 | |
--leading-body | 1.6 |
--radius | 16px | |
--r-sm | 8px | |
--r-md | var(--radius) | |
--r-lg | 26px | |
--r-pill | 999px | |
--rule | 1px | |
--s1 | 6px | |
--s2 | 12px | |
--s3 | 20px | |
--s4 | 32px | |
--s5 | 52px | |
--s6 | 84px | |
--s7 | 132px | |
--measure | 60ch |