Look 12 from Bandana. The kit sheet.

Loud outside.Cold inside.

A billboard bolted to an instrument panel. Everything on this page is the real markup from sections and components. If a page built from the look disagrees with this sheet, this sheet wins.

Surfaces

One library, three canvases.

Loud outside, cold inside: the same markup, one attribute apart.

Three surfaces, one library

data-surface="paper | ink | signal"

A component never carries a dark or on-accent variant. It reads the tokens of the surface it stands on. Set the attribute on any container and everything inside re-tunes. The signal surface is a moment, not a mode: once per page.

Paper. The native canvas.

Live

Ink. The primary turns signal.

Live

Signal. All text is ink.

Live

Two materials

.bl-raised .bl-recessed

There is no third material. Flat and outlined do not exist here.

The plate

Sits up out of the canvas. A lit top edge, a hairline, one long soft shadow. Buttons, cards, panels, tiles.

The press

Pushed into the canvas. The only expression of selected, active, current and open. Fields, chosen plans, current links, open accordion items.

Palette

Four values.

That is the whole palette, and the contrast is solved, not eyeballed.

Four values

--ink --paper --signal --signal-deep

That is the whole palette. No semantic green, amber or blue: status is carried by weight and material.

Ink #0B0B0C

Every app screen. Text on paper and on signal.

Paper #F4F2ED

The native canvas. Text on ink.

Signal #FF3B14

The field, the focus ring, the live pill, the link underline.

Signal deep #D42B08

Errors, and nothing else.

Text tiers

--text --text-2 --text-3 --text-4

Hi #0B0B0C

Headlines, names, values.

Mid #46453F

Body. 7.5:1 on the press.

Low #5F5E57

Labels, captions, eyebrows.

Faint #78776F

Placeholders and decorative glyphs on a plate only.

Type

Two voices.

The poster voice for display, the panel voice for everything else, including every number.

The poster voice

--font-display .bl-display-xl .bl-display .bl-display-m

Anton stands in for the display face. Uppercase, jammed to .88, never below 2rem. Hero lines and section titles only. Never labels, never body, never numbers.

display-xlLoud

displayOutside.

display-mCold inside.

The panel voice

--font-body .bl-h1 .bl-h2 .bl-h3 .bl-lede .bl-body .bl-meta .bl-micro .bl-eyebrow

Inter Tight. Numbers are always the panel voice, tabular.

h1Stop guessing what was said

h2Every conversation, on the record

h3Session detail

ledeOne direction, two voices. Poster type on a full-bleed field for anything public; the same tokens, quiet and dense, for anything logged in.

bodyBody, the default. Fifteen pixels, 1.55 line-height, mid tier. Everything an interface says in a full sentence is set like this.

metaSecondary rows, helper text, table cells.

microTimestamps, counts, captions.

eyebrowThe only tracked-out type in the system

num1,284 · 96.4% · $18,900

Shape and space

Pill, and nine steps.

Radii 8, 12, 18, 26 and the pill. Space from 4 to 112.

Shape

--radius-sm 8 --radius-md 12 --radius 18 --radius-xl 26 --radius-pill

Buttons, chips, pills, toggles and avatars are always pill. Inputs and menu rows are md. Panels lg. Cards and tiles xl.

sm 8

md 12

lg 18

xl 26

pill

Space

--space-1 … --space-9 = 4 8 12 16 24 32 48 72 112

112

Icons

Twelve legends.

One construction, one weight, one door.

Twelve icons

.bl-icon .bl-icon--lg .bl-icon--xl <use href="#i-name">

Instrument legends from the look's world. A 24 grid, one stroke at 1.75, round caps, currentColor, and every enclosed shape a pill. One weight, one style, one door: never a second set.

billboard

panel

beacon

aerial

meter

wave

dial

switch

record

field

plate

press

Components

Every state, drawn.

Hover, focus, pressed, selected, disabled, loading, invalid, open. Inspect them without a pointer.

Buttons

components/buttons.html

Inputs

components/inputs.html

Default Focus

InvalidEnter a valid work email address. Disabled

Select TextareaWe answer within a working day.

Unchecked Checked

Cards

components/cards.html

A plate

Sits up out of the canvas. The default for anything interactive or holding content.

DefaultOpen

Hovered

The plate lifts one step and its shadow lengthens. Nothing changes colour.

HoverOpen

Selected

Pushed into the canvas. The only expression of chosen, active or current.

SelectedLive

50Copies, then retired
$125One look
3Surfaces

Badges

components/badges.html

7 24 3 1 New

Processing Recording Archived

Tabs

components/tabs.html

Accordion

components/accordion.html

Open

The open item is the press. Pushed into the canvas, hairline gone, the plus turned to a dash on an ink dot.

Closed

A plate, raised.

Flat

No shadow, a hairline, for dense pages.

Modal

components/modal.html

Toast

components/toast.html

Saved. Nothing else changed.

Copy 12 of 50 is yours.Download

Three copies left.

The key did not match. Check the licence.

A new look just dropped.See it

Table

components/table.html

Rep	Sessions	Talk ratio	Status
Dana Moreno	24	38%	Coached
Chris Mao	18	44%	Recording
Natalie Cruz	31	29%	Archived
Ravi Sethi	9	51%	Processing

Nav links

components/nav-links.html

Motion

The switch, the jam, the run.

Presets only, in motion.css, with a reduced-motion fallback.

Presets

.bl-reveal .bl-stagger .bl-lines .bl-words .bl-rise .bl-hover-lift .bl-page-enter .bl-skeleton .bl-spinner .bl-progress

Motion is presets. Nothing outside motion.css animates. Under prefers-reduced-motion everything lands instantly and the hero holds its first frame.

The switch and the jam

Off, then on.Lines jam to .88.

Surfaces cut, no fade. Headlines drop the last of the way and stop dead. Ledes and keys follow.

Spinner, 0.7s

Sections

Eleven, twice.

Every section in variant A and variant B, the real markup the demo is built from.

Nav, variant A

sections/nav.html

Signal

Parts
Rules
Editions
Questions

Get the look

Nav, variant B

sections/nav.html

Signal

Parts
Rules
Editions
Questions

Get the look

Hero, variant A

sections/hero.html

Look 12 from Bandana

Loud outside.Cold inside.

A billboard bolted to an instrument panel. Signal is a locked look for sites built with Claude Code: poster type on a full-bleed field for anything public, the same tokens quiet and dense for anything logged in. One folder, one prompt, fifty copies.

Get the look, $125 See the parts

Hero, variant B

sections/hero.html

Look 12, inner page

Cold inside.

The split hero for pricing, about and work pages. No field: the poster line on the left, three panel-voice numbers on the right, one primary.

Get the look, $125 See the parts

50Copies, then retired
3Surfaces, one library
4Values in the palette

Feature grid, variant A

sections/feature-grid.html

The parts

One system,one attribute apart.

Every part reads the tokens of the surface it stands on. Set one attribute on a container and the same markup re-tunes: paper, ink or signal.

The switch

Surfaces cut from paper to signal on a hard cut. Nothing fades, nothing slides. Off, then on.

Two materials

The plate sits up out of the canvas. The press is pushed into it. Selected, active and current are always the press. There is no third.

Three surfaces

Paper, ink and signal. One component library. No dark variant, no on-accent variant, ever.

The poster voice

Display type at 2rem or more, uppercase, jammed to .88. Never labels, never body, never numbers, even big ones.

Four values

Ink, paper, signal, and signal deep. That is the whole palette. Status is carried by weight and material, never by hue.

Fifty copies

Sold fifty times, then retired for good. A new look takes the slot. Yours is numbered.

Feature grid, variant B

sections/feature-grid.html

The parts

In one column.

The switch

Surfaces cut from paper to signal on a hard cut.

Two materials

The plate and the press. Selected is always the press.

Three surfaces

Paper, ink, signal. One library, no variants.

The poster voice

Display type at 2rem or more, uppercase, jammed to .88.

Four values

Ink, paper, signal, signal deep. Status by weight, not hue.

Fifty copies

Sold fifty times, then retired for good.

Bento, variant A

sections/bento.html

Cold inside

The panel half.

The same tokens, quiet and dense, for anything logged in. Fifteen-pixel body, tabular numbers, one primary per view.

Session detail

Kitchen remodel. 24 min. Yesterday.

Recording

Talk ratio38%

Questions asked11

Next step setYes

Copies, then retired.

Numbers are set in the panel voice, never the poster voice.

Primary PlateLive

Same markup, ink surface.

The primary inverts to signal on ink. Nothing else changes.

The field.

The signal surface is a moment, not a mode. Once per page.

$125

One look. Three for $300, five for $425.

Installed with one command and one pasted prompt.

Bento, variant B

sections/bento.html

Loud outside.

The field, wide. One moment per page.

Materials, and no third.

The plate and the press.

Gallery, variant A

sections/gallery.html

The world

Six frames,one system.

Everything below is drawn from the tokens. No stock, no filler. The caption plate is the kit's own: dark glass, one line, one number.

The billboard at dusk.

Three panels lit from inside on one field.

The instrument panel.

Quiet, dense, one signal reading.

The poster voice.

Cut by the frame, never below 2rem.

Book a demo

One primary per view.

Ink on signal. If a screen needs two, the screen is wrong.

The marquee.

Display type between two hairlines, running.

The plate and the press.

Up out of the canvas, and pushed into it.

Gallery, variant B

sections/gallery.html

The billboard at dusk.

Wide, two to a row, for work pages.

The marquee.

Between two hairlines, on ink.

Pricing, variant A

sections/pricing.html

Editions

Fifty, then retired.

Every look is sold fifty times and then archived for good. A new look is built to take its slot. The one you buy is numbered.

One look

Signal, on its own.

$125

The folder: CLAUDE.md, theme, motion, sections, components, kit sheet, demo
Both schemes and all three surfaces
One numbered copy of fifty

Get Signal

Installs with one command and one pasted prompt.

Most chosen

Three looks

Signal and two more from the rack.

$300$100 a look

Everything in one look, three times
Switch a whole site between looks with one attribute
Three numbered copies

Get three, $300

Twenty percent off the single price.

Five looks

Signal and four more.

$425$85 a look

Everything in one look, five times
Enough range for a studio's whole client list
Five numbered copies

Get five, $425

Thirty-two percent off the single price.

No free tier, no subscription, no whole-rack bundle. Prices in US dollars.

Pricing, variant B

sections/pricing.html

Edition of fifty

Signal

Look 12. One folder, one prompt, one numbered copy.

$125

Get Signal, $125

Three looks for $300, five for $425. No free tier, no subscription.

Testimonial, variant A

sections/testimonial.html

The rules

Stated, not hidden.

The constraints of the direction, in the kit's own words. They ship in CLAUDE.md and the buyer's Claude obeys them.

The signal surface is a moment, not a mode. One per page, at most. Using it twice halves it.

SThe Signal kit, surface proofs

One primary per view. If a screen seems to need two, the screen is wrong, not the kit.

The Signal kit, buttons

No semantic green, amber or blue. Status is carried by weight and material, not by hue.

The Signal kit, palette

Display type is for display only. Never labels, never body, never numbers, even big ones.

The Signal kit, type

A second icon set is the most common way a system starts to look assembled rather than designed.

The Signal kit, icons

Testimonial, variant B

sections/testimonial.html

Loud outside, cold inside. Same system, one attribute apart.

SThe Signal kit, the point of view

Faq, variant A

sections/faq.html

Questions

Before youpress the key.

Everything a buyer asks before the first install, answered in the look's own terms.

What exactly do I get?

One folder. CLAUDE.md is the product: the rules your Claude obeys. Beside it, theme.css with every token and class, motion.css with the presets, eleven sections in two variants, ten components with every state drawn, the kit sheet, this demo, and the fonts.

How do I install it?

Run npx bandana add signal --key YOUR-KEY in your project, then paste the starter prompt from the README into Claude Code. It reads CLAUDE.md and builds from the sections and components, nothing else.

Can I change the colours?

No, and that is the point. Four values are the whole palette. Adding a fifth colour is a kit change, not an app decision. What you can change is the surface: set data-surface to paper, ink or signal on any container and everything inside re-tunes.

What happens after fifty copies?

Signal is retired for good. It stays live on every site that bought it, and nobody else ever gets it. A new look is built to take slot 12.

Can I use it for client work?

Yes. A copy covers the sites you build with it. What you cannot do is resell the folder, redistribute the fonts, or ship the look as a theme of your own.

Does it come in dark?

Paper is native. Set data-scheme="dark" and the whole page reads the ink surface, or auto to follow the system. The field stays signal in both. Only colour tokens change.

Faq, variant B

sections/faq.html

Questions

Two more.

Why is the signal surface only allowed once?

Because it is the loudest thing the system can do, and using it twice halves it. The hero takes it. Everything else is paper or ink.

Why are the fields pressed in?

A field is a well you type into, and every Bandana look draws fields as its recessed material. The kit Signal was built from raised its fields; the look departs from the kit there, on purpose.

Cta, variant A

sections/cta.html

Edition of fifty

Get the look.

Signal, Look 12 from Bandana. One folder, one prompt, one numbered copy. $125.

Get Signal, $125 Read the rules

Cta, variant B

sections/cta.html

The drop list

Hear when a look drops.

Contact form, variant A

sections/contact-form.html

Write

A questionbefore you buy.

Fields are the press: you type into a well. The one key on the form is the primary. Nothing else on the plate is raised.

Contact form, variant B

sections/contact-form.html

Write

One line will do.

Footer, variant A

sections/footer.html

Footer, variant B

sections/footer.html

Tokens

The law, spelled out.

Every custom property in theme.css with its native value.

Every token, native values

[data-look="signal"] { … }

The ink and signal surfaces override the colour tokens only. See theme.json for all three columns.

Token	Paper (native)
--ink	#0B0B0C
--paper	#F4F2ED
--signal	#FF3B14
--signal-deep	#D42B08
--signal-tint	#FF5A38
--bg	#F4F2ED
--surface	#FFFFFF
--surface-2	#E6E3DB
--text	#0B0B0C
--text-2	#46453F
--text-3	#5F5E57
--text-4	#78776F
--line	rgba(11, 11, 12, 0.13)
--line-2	rgba(11, 11, 12, 0.06)
--accent	#FF3B14
--accent-ink	#0B0B0C
--accent-line	rgba(255, 59, 20, 0.45)
--accent-glow	rgba(255, 59, 20, 0.22)
--act-fill	#0B0B0C
--act-text	#F4F2ED
--act-fill-hov	#23232A
--focus	#FF3B14
--ok	#0B0B0C
--warn	#46453F
--err	#D42B08
--raised-bg	#FFFFFF
--raised-border	rgba(11, 11, 12, 0.10)
--raised-hi	inset 0 1px 0 rgba(255, 255, 255, 0.90)
--raised-in	inset 0 -1px 0 rgba(11, 11, 12, 0.05)
--raised-drop	0 1px 2px rgba(11, 11, 12, 0.05), 0 10px 28px -14px rgba(11, 11, 12, 0.22)
--raised-drop-up	0 2px 4px rgba(11, 11, 12, 0.06), 0 18px 40px -16px rgba(11, 11, 12, 0.30)
--raised-shadow	var(--raised-hi), var(--raised-in), var(--raised-drop)
--raised-shadow-up	var(--raised-hi), var(--raised-in), var(--raised-drop-up)
--recessed-bg	#E6E3DB
--recessed-hi	inset 0 1px 0 rgba(255, 255, 255, 0.65)
--recessed-in	inset 0 2px 6px rgba(11, 11, 12, 0.11)
--recessed-shadow	var(--recessed-hi), var(--recessed-in)
--glass	color-mix(in srgb, var(--bg) 78%, transparent)
--blur	14px
--pattern	linear-gradient(180deg, #FF5A38 0%, #FF3B14 38%, #D62C0A 100%)
--pool	radial-gradient(70% 70% at 62% 18%, rgba(255, 176, 138, 0.22), rgba(255, 176, 138, 0) 100%)
--hero-text	#0B0B0C
--hero-text-2	rgba(11, 11, 12, 0.72)
--font-display	"Anton", "Haettenschweiler", "Arial Narrow", sans-serif
--font-body	"Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
--display-weight	400
--text-display-xl	clamp(3.5rem, 13.5vw, 11rem)
--text-display	clamp(2.75rem, 8vw, 6rem)
--text-display-m	clamp(2rem, 4.5vw, 3.25rem)
--text-h1	clamp(1.75rem, 3vw, 2.5rem)
--text-h2	1.5rem
--text-h3	1.125rem
--text-lede	clamp(1rem, 1.6vw, 1.25rem)
--text-md	0.9375rem
--text-sm	0.8125rem
--text-xs	0.75rem
--text-micro	0.6875rem
--text-price	clamp(2.5rem, 5vw, 3.75rem)
--track-caps	0.14em
--leading-display	0.88
--leading-body	1.55
--radius	18px
--radius-xl	26px
--radius-md	12px
--radius-sm	8px
--radius-pill	999px
--rule	1px
--space-1	4px
--space-2	8px
--space-3	12px
--space-4	16px
--space-5	24px
--space-6	32px
--space-7	48px
--space-8	72px
--space-9	112px
--wrap	1240px
--control	44px
--control-sm	34px
--icon	18px
--dur-fast	150ms
--dur	320ms
--dur-slow	560ms
--ease	cubic-bezier(0.2, 0.7, 0.2, 1)
--ease-jam	cubic-bezier(0.1, 0.9, 0.1, 1)
--reveal-y	0.4em