Look 16, the kit sheet

Every headline gets one word in the sky.

Blue sky, white type, one word written by a plane. Clouds you can press, clearings for anything chosen, one ink key per screen. Everything below is the real markup from sections/ and components/. If a page built from the look disagrees with this sheet, this sheet wins.

The palette

Sky, white, the cloud, the clearing, one drop of ink.

The sky is a gradient, never an image. The type is white. The cloud is white with a grey-blue underside. The clearing is the sky, deeper. The ink is the one dark thing on a screen. At night the sky goes navy and the ink goes white.

--patternlinear-gradient(180deg, #2A5FE0 0%, #3F86EA 46%, #6FB9F6 100%)

--bg#3F86EA

--surface#FFFFFF

--text#FFFFFF

--accent#0B1F4D

--raised-bglinear-gradient(180deg, #FFFFFF 0%, #F7FAFE 58%, #E4EDFA 100%)

--recessed-bgrgba(5, 32, 98, 0.34)

--smokergba(255, 255, 255, 0.92)

Type

Albert Sans carries the line. Contrail writes one word.

Contrail is the original face drawn for this look: a monoline connected script, one line of smoke, two cuts, bundled in fonts/. It sets exactly one word per headline and the mark, never a paragraph. Albert Sans, from Google Fonts, sets everything else. The scale is closed.

.bl-display

Give your ideas room to breathe.

.bl-h2

Fifty, then retired.

.bl-h3

The cloud and the clearing

.bl-brand

Public Record

Contrail, both cuts

sky breathe retired hello
sky breathe retired hello

.bl-price

$125one of fifty

.bl-lede

A locked look for sites built with Claude Code. One folder, one prompt, fifty copies.

.bl-body

Plain words drift in. Then the script word writes itself on, left to right, the way smoke arrives behind a plane.

.bl-eyebrow

Look 16 from Bandana

.bl-meta

One of fifty. Retired when gone.

.bl-label

The two materials

The cloud, and the clearing.

Raised is a cloud: a lit top, a grey-blue underside, a shadow on the sky, no hairline. Recessed is a clearing: a well of deeper sky. Keys are clouds. Fields are clearings. Press a cloud and it becomes a clearing. Nothing turns a colour.

.bl-raised

.bl-recessed

Motion

The write.

Plain words drift in from the left (.bl-words). Then the script word writes itself on, left to right, soft-edged like smoke. Blocks drift in (.bl-reveal, staggered by .bl-stagger). Eyebrows, ledes and key rows follow (.bl-rise). Clouds lift on hover (.bl-hover-lift). The sky comes up with the page (.bl-hero__film). Reduced motion lands everything instantly.

The write, replayed

.bl-reveal .bl-words .bl-rise

Replay

Give your ideas room to breathe.

Click to play it again.

Loading

.bl-skeleton .bl-spinner .bl-progress

Writing the look in

The twelve lines

One line each, never lifted.

Every icon is a single path, stroked at two, round caps, in currentColor. The pen never leaves the sky. Use them in a clearing (.bl-icon-well) or bare.

balloon

banner

cloud

dive

glide

horizon

kite

loop

plane

sun

wind

word

Components

Every state, drawn.

Helper classes (.is-hover, .is-focus, .is-active, .is-selected, .is-disabled, .is-loading, .is-invalid) draw each state without a pointer. theme.css styles the helper and the real pseudo-class identically.

buttons

components/buttons.html

Keys are pills of cloud. The primary is the ink, the one dark thing on a screen. Hover lifts; pressed goes to the clearing. Every state drawn with helper classes.

inputs

components/inputs.html

Fields are clearings: pills of deeper sky, a white ring when focused, a red ring when invalid. On a cloud the labels go ink. Every state drawn.

Default

Hover

Focus

Invalid

That is not a whole address.

Disabled

Select

Textarea

One line is enough.

Unchecked Checked

On a cloud

cards

components/cards.html

A card is a cloud with its media on top. Media is a patch of sky, with or without a word. Hover lifts; selected becomes a clearing.

breathe

Default

A cloud with a word on the sky above it.

One of fiftyOpen

hover

Hover

The cloud lifts a little higher.

One of fiftyOpen

chosen

Selected

The chosen card sits in a clearing.

One of fiftyChosen

badges

components/badges.html

Small clouds. Status colours live here and in toasts and field errors, nowhere else. The quiet badge is a small clearing.

Look 16 Available Twelve left Retired Chosen With a line

tabs

components/tabs.html

A row of tabs on one cloud. The active tab is a clearing. Hover and focus drawn.

accordion

components/accordion.html

A stack of clouds; the open one is a clearing. Native details, so it works without script. Open drawn with the attribute and with .is-active.

Open

The open item sits in a clearing and its plus becomes a line.

Closed

Closed items are clouds.

Active, drawn

The same state by helper class.

toast

components/toast.html

A small cloud with a dot of status. Sits bottom right; the static modifier renders it inline here.

Saved to the drop list

Public Record is yoursDownload

Twelve copies left

The card was declinedTry again

table

components/table.html

Rows on a cloud with a hairline between them, the only hairline in the look. Hover tints; the selected row is a clearing. Numbers are tabular.

Look	Word	Sold	Left
Public Record	sky	0	50
Hover	breathe	12	38
Selected	retired	50	0
Another	hello	3	47

nav-links

components/nav-links.html

Links in the mast are white on the sky; the current one sits in a clearing. Hover, focus and current drawn.

Sections

Eleven sections, two variants each.

Variant A is what the demo uses. Variant B is the alternative for the same job. Page recipes and where the ink key falls are in CLAUDE.md.

nav

sections/nav.html

The mast floats on the sky with no bar under it. The mark is the name, written. A is the full nav with links, the day/night toggle and one key; the current link sits in a clearing. B is the slim nav for inner pages: mark and one key, a hairline under it.

Variant A

Public Record

Parts
Rules
Editions
Questions

Get the look

Variant B

Public Record

Get the look

hero

sections/hero.html

The opening screen. A is the sky, full bleed: the skywriter behind everything (the still until the film lands), the mast over it, the words on the left. The headline is plain Albert Sans with one word in Contrail, and that word writes itself on after the others have drifted in. B is the split hero for inner pages: headline left, three clearings right, no film.

Variant A

Look 16 from Bandana

Every headline gets one word in the sky.

Public Record is a locked look for sites built with Claude Code. A sky for a canvas, clouds you can press, one word per headline written by a plane. One folder, one prompt, fifty copies, then retired.

Get the look, $125 See the parts

Variant B

Look 16, inner page

Give your ideas room to breathe.

The split hero. Headline on the left, three clearings on the right, one ink key. For pricing, about and work pages.

Get the look, $125 See the parts

50Copies
1Word per headline
2Materials

feature-grid

sections/feature-grid.html

The parts of the look, three across, each on a cloud with one line icon in a clearing. A is the six-up grid with a section head. B is the row of three with the head on the left, for inner pages.

Variant A

The parts

Everything you need to fly.

One folder. Every part in it is drawn for this look and for nothing else.

01
One word, written
Every headline is Albert Sans with one word in Contrail, the script drawn for this look. Never two words. Never a paragraph.
02
The cloud
Cards and keys are clouds: a lit top, a grey underside, a shadow on the sky. No hairline, no glass. Press one and it goes to the clearing.
03
The clearing
Fields, the current link, the chosen plan: a well of deeper sky. Anything selected sits in it. State is depth, never a colour.
04
Day and night
The same sky, twice. Day is the native scheme; night turns it navy and the ink key turns white. One attribute.
05
The write
Plain words drift in. Then the script word writes itself on, left to right, the way smoke arrives behind a plane. Reduced motion lands it at once.
06
Twelve lines
Twelve icons, one continuous line each, never lifted. Plane, loop, cloud, sun, word, wind, kite, banner, horizon, glide, balloon, dive.

Variant B

Three parts

Cloud, clearing, sky.

The cloud
Raised. Cards, keys, the plan you have not chosen yet.
The clearing
Recessed. Fields, the current page, the plan you chose.
The sky
The canvas. It never carries a card's colour and it is never covered.

bento

sections/bento.html

The look, laid out on clouds of different sizes. Each tile's art is one of the look's own parts: a script word on the sky, the cloud and the clearing side by side, the day and night skies, the twelve lines, the write replaying. A is the full bento; B is the two-tile band for inner pages.

Variant A

The rules

Six things it always does, and one it never does.

breathe

The sky is the canvas

One gradient, deep at the top and pale at the horizon, fixed behind the whole page. Nothing is ever laid over it but clouds and words.

CloudClearing

Two materials

Raised is a cloud. Recessed is a clearing. There is no third.

Day and night

The same page under the same sky, at two hours. Only colour tokens change.

One line, never lifted

Every icon is a single path. So is every letter of the script.

Get the look, $125

One ink key per screen

The only dark thing on the page is the key you are meant to press. Everything else is white on blue.

glasshairlinesgradients on texta second script wordblackexclamation marks

What it refuses

Frosted glass, hairlines, gradients on text, a second script word in a headline, black, exclamation marks, stock clouds and a drop shadow standing in for a cloud.

Variant B

sky

The word

One per headline, in Contrail, a size up from the rest.

CloudClearing

The materials

Press a cloud and it becomes a clearing. That is the only state change there is.

gallery

sections/gallery.html

The imagery at full size: three crops of the skywriter still (assets/gallery/*.webp, inlined by the demo builder) and three words written on the sky. A is the six-up grid with captions; B is the wide three-up band.

Variant A

The sky

One plane, one line, one afternoon.

The signature image is a skywriter finishing a loop. The hero film is the same plane finishing the same loop, and starting again.

The plane
fifty
Fifty copies
The loop
The tail
night
The other scheme
The whole line

Variant B

pricing

sections/pricing.html

The editions. Three clouds; the chosen plan sits in a clearing, because anything chosen is recessed. Prices are the real ones. A is the three-up with the head above; B is the row for inner pages.

Variant A

Editions

Fifty, then retired.

Every look is sold fifty times and then archived for good. A new look takes its place. Yours stays yours.

One look

$125

Public Record, the whole folder
Both cuts of the script, bundled
Day and night
One of fifty

Get Public Record

Chosen

Three looks

$300 $100 each

Any three from the rack
Twenty percent off
Every original face, bundled
Three sites, three skies

Get three

Five looks

$425 $85 each

Any five from the rack
Thirty-two percent off
Every original face, bundled
For a studio

Get five

Variant B

One look

$125

Get Public Record

Three

$300

Get three

Five

$425

Get five

testimonial

sections/testimonial.html

No invented praise. The quotes are the look's own rules, pulled out and set large, each with one script word. A is three quotes on clouds; B is one quote, wide, on the sky.

Variant A

From the rules

What the look says about itself.

One word per headline. If you want two, you want a different look.
CLAUDE.md, rule 3

Press a cloud and it becomes a clearing. Nothing turns a colour.
CLAUDE.md, rule 5

The sky is never covered. Sections have no background of their own.
CLAUDE.md, rule 7

Variant B

Every headline gets one word in the sky.
Public Record, the one idea

faq

sections/faq.html

Questions, answered short. The accordion is a stack of clouds; the open one is a clearing. A is head-left, list-right; B is the single column.

Variant A

Questions

Before you buy.

What do I get?

One folder: CLAUDE.md, theme.css, motion.css, eleven sections in two variants, ten components in every state, the kit sheet, the demo, twelve icons, the hero film and both cuts of Contrail. You paste one prompt and Claude builds in it.

Can I use the script for a whole headline?

No. One word, marked with an i tag. CLAUDE.md stops Claude if it tries for two.

Does it come with the sky?

The sky is a gradient token, so yes, and it costs nothing to load. The skywriter still and film are yours to use on sites wearing the look.

What happens at fifty?

The look is archived and never sold again. Your copy keeps working, keeps its licence, and keeps getting its fixes.

Can I change the blue?

You can change any token. But the sky is the look, and a green one is a different afternoon.

Variant B

How do I install it?

npx bandana add public-record with your licence key, then paste the starter prompt from CLAUDE.md.

Is there a refund?

Within seven days, if the look has not been installed. Editions are counted, so a returned copy goes back on the rack.

cta

sections/cta.html

The last ask. A is on the open sky, the headline with its one word, the ink key. B is a band on a cloud for inner pages.

Variant A

One of fifty

Give your site one word in the sky.

Public Record, $125. One folder, one prompt, and every headline you write from now on gets its word.

Get the look, $125 See the parts again

Variant B

Fifty copies. Then it is gone.

Public Record retires at fifty. This is one of them.

Get the look, $125

contact-form

sections/contact-form.html

A form on a cloud, the fields in clearings, one ink key. A is the two-column form with a head; B is the single email line for the footer or a drop list.

Variant A

Write

Say hello.

A question about the look, the licence, or the rack. Short answers, within the day.

Variant B

Variant A

Variant B

Tokens, for reference

82 custom properties. Nothing else exists.

Day values first; night overrides the colour tokens only. The same list is in theme.json.

Token	Group	Day	Night
--pattern	aura	`linear-gradient(180deg, #2A5FE0 0%, #3F86EA 46%, #6FB9F6 100%)`	`linear-gradient(180deg, #06113A 0%, #0E2360 52%, #1B3F8E 100%)`
--bg	canvas	`#3F86EA`	`#0E2360`
--surface	canvas	`#FFFFFF`	`#E6ECF8`
--surface-2	canvas	`#EAF2FD`	`#CFDCF2`
--text	canvas	`#FFFFFF`	`#FFFFFF`
--text-2	canvas	`rgba(255, 255, 255, 0.80)`	`rgba(255, 255, 255, 0.78)`
--text-3	canvas	`rgba(255, 255, 255, 0.58)`	`rgba(255, 255, 255, 0.54)`
--line	canvas	`rgba(255, 255, 255, 0.24)`	`rgba(255, 255, 255, 0.20)`
--accent	accent	`#0B1F4D`	`#FFFFFF`
--accent-ink	accent	`#FFFFFF`	`#0B1F4D`
--accent-line	accent	`rgba(255, 255, 255, 0.55)`	`rgba(255, 255, 255, 0.45)`
--accent-glow	accent	`rgba(11, 31, 77, 0.30)`	`rgba(255, 255, 255, 0.25)`
--accent-bg	accent	`linear-gradient(180deg, #1C3470 0%, #0B1F4D 60%, #071538 100%)`	`linear-gradient(180deg, #FFFFFF 0%, #F3F7FE 60%, #DCE6F7 100%)`
--accent-bg-up	accent	`linear-gradient(180deg, #2A4585 0%, #14295E 60%, #0B1F4D 100%)`	`linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 60%, #E8EFFB 100%)`
--accent-shadow	accent	`inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -8px 14px -10px rgba(0, 0, 0, 0.5), 0 14p…`	`inset 0 1px 0 #FFFFFF, inset 0 -8px 14px -10px rgba(46, 96, 180, 0.35), 0 14px 30px -12px …`
--accent-shadow-up	accent	`inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -8px 14px -10px rgba(0, 0, 0, 0.45), 0 22…`	`inset 0 1px 0 #FFFFFF, inset 0 -8px 14px -10px rgba(46, 96, 180, 0.28), 0 22px 40px -14px …`
--ok	status	`#2F9E6B`	`#6FD3A0`
--warn	status	`#E0A62A`	`#F0C15A`
--err	status	`#E0533F`	`#F0806E`
--raised-bg	materials	`linear-gradient(180deg, #FFFFFF 0%, #F7FAFE 58%, #E4EDFA 100%)`	`linear-gradient(180deg, #F2F5FC 0%, #E3EAF7 58%, #CBD8EF 100%)`
--raised-bg-up	materials	`linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 58%, #EEF4FC 100%)`	`linear-gradient(180deg, #FAFBFE 0%, #EEF2FA 58%, #D9E3F4 100%)`
--raised-flat	materials	`#FFFFFF`	`#E3EAF7`
--raised-ink	materials	`#0B1F4D`	`#0B1F4D`
--raised-ink-2	materials	`rgba(11, 31, 77, 0.68)`	`rgba(11, 31, 77, 0.68)`
--raised-ink-3	materials	`rgba(11, 31, 77, 0.46)`	`rgba(11, 31, 77, 0.46)`
--raised-line	materials	`rgba(11, 31, 77, 0.12)`	`rgba(11, 31, 77, 0.12)`
--raised-shadow	materials	`inset 0 1px 0 #FFFFFF, inset 0 -12px 20px -14px rgba(46, 96, 180, 0.34), 0 2px 6px -2px rg…`	`inset 0 1px 0 #FFFFFF, inset 0 -12px 20px -14px rgba(46, 96, 180, 0.40), 0 2px 6px -2px rg…`
--raised-shadow-up	materials	`inset 0 1px 0 #FFFFFF, inset 0 -12px 20px -14px rgba(46, 96, 180, 0.26), 0 4px 10px -2px r…`	`inset 0 1px 0 #FFFFFF, inset 0 -12px 20px -14px rgba(46, 96, 180, 0.32), 0 4px 10px -2px r…`
--raised-hit	materials	`inset 0 1px 0 #FFFFFF, inset 0 -12px 20px -14px rgba(46, 96, 180, 0.34), 0 0 0 4px var(--a…`	`inset 0 1px 0 #FFFFFF, inset 0 -12px 20px -14px rgba(46, 96, 180, 0.40), 0 0 0 4px var(--a…`
--gloss	materials	`radial-gradient(80% 60% at 30% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%)`	`radial-gradient(80% 60% at 30% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%)`
--recessed-bg	materials	`rgba(5, 32, 98, 0.34)`	`rgba(0, 8, 40, 0.50)`
--recessed-shadow	materials	`inset 0 3px 8px rgba(3, 18, 60, 0.45), inset 0 1px 0 rgba(3, 18, 60, 0.30), 0 1px 0 rgba(2…`	`inset 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 2…`
--recessed-shadow-deep	materials	`inset 0 5px 12px rgba(3, 18, 60, 0.55), inset 0 1px 0 rgba(3, 18, 60, 0.36), 0 1px 0 rgba(…`	`inset 0 5px 12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255,…`
--recessed-lit	materials	`inset 0 3px 8px rgba(3, 18, 60, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 1px 0 …`	`inset 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 1px 0 rgb…`
--recessed-ink	materials	`#FFFFFF`	`#FFFFFF`
--scrim	materials	`rgba(10, 40, 120, 0.55)`	`rgba(3, 12, 45, 0.6)`
--chevron	materials	`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'…`
--hero-scrim	other	`linear-gradient(90deg, rgba(20, 70, 170, 0.50) 0 18%, rgba(20, 70, 170, 0.22) 42%, rgba(20…`	`linear-gradient(90deg, rgba(4, 14, 50, 0.55) 0 18%, rgba(4, 14, 50, 0.25) 42%, rgba(4, 14,…`
--hero-text	other	`#FFFFFF`	`#FFFFFF`
--hero-text-2	other	`rgba(255, 255, 255, 0.82)`	`rgba(255, 255, 255, 0.80)`
--smoke	other	`rgba(255, 255, 255, 0.92)`	`rgba(255, 255, 255, 0.86)`
--chevron-ink	other	`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'…`
--script-scale	other	`1.12`
--font-display	type	`"Contrail", "Brush Script MT", cursive`
--font-body	type	`"Albert Sans", system-ui, sans-serif`
--display-weight	type	`500`
--text-xs	type	`.75rem`
--text-sm	type	`.875rem`
--text-md	type	`1.0625rem`
--text-lg	type	`1.1875rem`
--text-xl	type	`1.5rem`
--text-h3	type	`1.75rem`
--text-h2	type	`clamp(2.2rem, 4.4vw, 3.8rem)`
--text-display	type	`clamp(2.9rem, 6.6vw, 6rem)`
--text-price	type	`3rem`
--track-caps	type	`.14em`
--leading-tight	type	`1.02`
--leading-body	type	`1.55`
--radius	shape	`24px`
--radius-sm	shape	`14px`
--radius-pill	shape	`999px`
--rule	shape	`1px`
--space-1	space	`.25rem`
--space-2	space	`.5rem`
--space-3	space	`.75rem`
--space-4	space	`1rem`
--space-5	space	`1.5rem`
--space-6	space	`2rem`
--space-7	space	`3rem`
--space-8	space	`4.5rem`
--space-9	space	`7rem`
--wrap	space	`1200px`
--control	space	`50px`
--control-sm	space	`38px`
--icon	space	`22px`
--dur-fast	motion	`160ms`
--dur	motion	`440ms`
--dur-slow	motion	`900ms`
--dur-write	motion	`1400ms`
--ease	motion	`cubic-bezier(.2, .7, .2, 1)`
--ease-drift	motion	`cubic-bezier(.22, 1, .36, 1)`
--reveal-y	motion	`0px`

Every headline gets one word in the sky.

Sky, white, the cloud, the clearing, one drop of ink.

Albert Sans carries the line. Contrail writes one word.

The cloud, and the clearing.

The write.

The write, replayed

Loading

One line each, never lifted.

Every state, drawn.

buttons

inputs

cards

Default

Hover

Selected

badges

tabs

accordion

modal

toast

table

nav-links

Eleven sections, two variants each.

nav

hero

Every headline gets one word in the sky.

Give your ideas room to breathe.

feature-grid

Everything you need to fly.

One word, written

The cloud

The clearing

Day and night

The write

Twelve lines

Cloud, clearing, sky.

The cloud

The clearing

The sky

bento

Six things it always does, and one it never does.

The sky is the canvas

Two materials

Day and night

One line, never lifted

One ink key per screen

What it refuses

The word

The materials

gallery

One plane, one line, one afternoon.

pricing

Fifty, then retired.

testimonial

What the look says about itself.

faq

Before you buy.

cta

Give your site one word in the sky.

Fifty copies. Then it is gone.

contact-form

Say hello.

footer

82 custom properties. Nothing else exists.