One light source
Every highlight sits on the same edge and every shadow falls the same way. Light a surface from somewhere else and the room falls apart.
Amethyst
Look 11 · the kit sheet · one window, the light
The room, six ways
Six stills from the same room, shipped in assets/gallery. Card media, bento art, gallery tiles. Never behind text.
Sections
Eleven sections, two variants each. This is the real markup from sections/, not a drawing of it.
nav · variant A
nav · variant B
hero · variant A
Look 11 · Amethyst
Nothing in the room but the light
Two lines of light and a plant standing where they cross. Everything else is the dark they sit in, and the floor gives both of them back.
hero · variant B
Look 11 · Amethyst
Two lines and the dark
The film sits beside the headline instead of under it, for pages that need the copy to lead.
feature-grid · variant A
What is in the folder
Eleven sections, ten components, one law
Two materials
Polished amethyst sits on the canvas and can be pressed. The well is cut into it. There is no third.
Four colours
A ground, a surface, the text and the light. Change the four and the whole look moves with you.
The film
Seven seconds, two tubes breathing, and the last frame is the first. It ships with the look.
The reflection
Things arrive, and what they reflect arrives a beat after them. It is the one move this look has.
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 light source
Every highlight on the same edge, every shadow the same way.
02
Two materials
Polished stone and the well it sits in. No third.
03
Four colours
A ground, a surface, the text and the light.
04
One accent
One hit a screen, and it is always the lamp.
05
The reflection
What a thing reflects arrives a beat after the thing does.
06
Fifty editions
Then it is archived and never sold again.
bento · variant A
The rules, short
What this look refuses
One light source
01
Every highlight is on the same edge and every shadow falls the same way. Light a surface from somewhere else and the page stops being a room.
02
03
04
bento · variant B
Look 11
Amethyst
Eleven sections, ten components, twelve icons, one original face and a film that loops.
50
$125
gallery · variant A
The dark, six ways
Stills from the same room
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 original face, bundled
- The film and the tile
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
Amethyst
$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
Two materials and four colours, and somehow 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 original display face with its licence, the tile, the film, and a CLAUDE.md that tells your Claude what it may and may not do.
Can I use it on more than one site +
Yes. The licence is yours, not the site's. The face is the exception: it is bundled with the look and may only be used on sites wearing 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
Is the face really original −
Drawn from scratch for this look, in a build script that ships with it. It is never sold apart from the look and never redistributed.
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 room home
Paste one prompt and your site is wearing it by the time you have made coffee.
cta · variant B
Fifty, then archived
Buy Amethyst — $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 two materials
Raised sits on the canvas and can be pressed. Recessed is the well cut into it. There is no third, and state is depth rather than colour.
.bl-raised.bl-recessed
--rim | inset 0 0 0 1px rgba(236, 226, 252, 0.17), inset 0 0 0 5px rgba(236, 226, 252, 0.05), inset 0 0 1px 5px rgba(236, 226, 252, 0.26), inset 0 2px 0 rgba(244, 236, 255, 0.95), inset 0 4px 2px -2px rgba(236, 226, 252, 0.72), inset 0 10px 13px -9px rgba(236, 226, 252, 0.55), inset 3px 0 0 -1px rgba(226, 214, 250, 0.36), inset -3px 0 0 -1px rgba(226, 214, 250, 0.36), inset 11px 0 17px -15px rgba(226, 214, 250, 0.5), inset -11px 0 17px -15px rgba(226, 214, 250, 0.5), inset 0 -22px 34px -18px rgba(0, 0, 0, 0.42), inset 0 -4px 3px -3px rgba(236, 226, 252, 0.62), inset 0 -2px 0 rgba(255, 255, 255, 0.3) | |
--sheen-face | linear-gradient(112deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 24%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.05) 100%) | |
--pattern | linear-gradient(104deg, transparent 38%, rgba(232, 74, 214, 0.20) 50%, transparent 62%), radial-gradient(120% 80% at 50% 108%, var(--card-line-soft), transparent 64%) |
The twelve icons
One drawing each, none a variation of another. Every mark carries its reflection, which is the look's one move drawn small. currentColor throughout.
Components
Every state drawn statically with a helper class, styled identically to the real pseudo-class.
buttons
Buttons. Raised always. Pressed and current are recessed - state is depth, never colour. Two variants only: the plain one and the accent, and the accent appears once per screen. Every state below is drawn with a helper class so it can be inspected without a pointer; theme.css styles the helper and the real pseudo-class identically.
inputs
Inputs. Fields are wells: a field is somewhere you put something into, so it is cut into the surface, 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 raised slab with the look's sheen across it. Selected is recessed and loses the sheen, because a thing pressed into the surface catches no light.
Default
A raised card sitting on the canvas, lit from the top left like everything else.
Hover
It lifts three pixels and its shadow lengthens. Nothing changes colour.
Selected
Pressed into the surface. 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 raised bar; 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 raised. 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 raised panel over a scrim that dims the room 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 raised 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 | — |
Motion
Presets, plus the one move only this look has.
.bl-hover-lift
.bl-reflect — the reflection arrives late
.bl-reveal, .bl-stagger, .bl-words, .bl-rise and .bl-late all run on scroll; they are shown working in the demo rather than frozen here.
The palette
Four tokens are the look; everything else is derived from them. Change the four and the whole thing moves with you.
--bg | #0F0A18 | |
--surface | #241536 | |
--text | #E7DDF5 | |
--accent | #FFFFFF | |
--accent-hi | #FFFFFF | |
--accent-ink | #FFFFFF | |
--on-accent | #0F0A18 | |
--muted | #A38FBE | |
--line | rgba(231, 221, 245, 0.12) | |
--raised-hi | #2E1B44 | |
--raised-lo | #160E22 | |
--chamfer | rgba(214, 199, 245, 0.42) | |
--well | #0A0612 | |
--well-lip | rgba(214, 199, 245, 0.10) | |
--shadow | rgba(0, 0, 0, 0.62) | |
--sheen | rgba(255, 255, 255, 0.16) | |
--scrim | rgba(15, 10, 24, 0.82) | |
--ok | #8FD6B4 | |
--warn | #E8C07A | |
--err | #E8788A |
Type
Plinth Cast for display: headlines, the mark, prices and big numbers. Never for body copy. Karla reads.
Amethyst --text-h1 display
Amethyst --text-h2
Amethyst --text-h3
Amethyst --text-lede
Amethyst --text-body
Amethyst --text-eyebrow
--text-eyebrow | 0.72rem | |
--text-meta | 0.78rem | |
--text-body | 1.02rem | |
--text-lede | 1.28rem | |
--text-h3 | 1.6rem | |
--text-h2 | 2.1rem | |
--text-h1 | clamp(2.2rem, 5.2vw, 4.4rem) | |
--track-eyebrow | 0.26em | |
--track-display | 0.09em | |
--leading-display | 1.02 | |
--leading-body | 1.62 |
Metrics
The scale is closed. A value that is not here does not exist in this look.
--r-sm | 5px | |
--r-md | var(--radius) | |
--r-lg | 18px | |
--r-pill | 999px | |
--rule | 1px | |
--s1 | 6px | |
--s2 | 12px | |
--s3 | 20px | |
--s4 | 32px | |
--s5 | 52px | |
--s6 | 84px | |
--s7 | 132px | |
--measure | 62ch |