kit sheet

Look 02, the kit sheet

Radio

Everything in its place. Everything the look is made of, on one page. Every block below is the real markup from sections/ and components/, so if a page built from the look disagrees with this sheet, this sheet wins.

Palette

Canvas, one green edge, the stage, and three status colours.

Canvas and accent

--bg --surface --surface-2 --text --accent
--bg#050505
--surface#111111
--surface-2#171717
--text#F4F2EC
--accent#C8FF3F
--accent-ink#0F1A05
--ok#9ED9A8
--warn#E8D9A0
--err#E58A8A

The stage

Decoration only. The light field and grain behind everything, the pool under the wing, and the two wings. Never behind text. The mark is its own thing: RADIO in chrome, an svg symbol from assets/mark.svg.

--poolradial-gradient(ellipse 58% 60% at 50% 100%, rgba(200, 255, 63, 0.12), rgba(200, 255, 63, …
--patternvar(--pool)
--winginlined
--wing-2inlined
--lightradial-gradient(70% 46% at 50% -6%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 70%)…
--graininlined
--sheenlinear-gradient(112deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 22%, rgba(…
--sweeplinear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.28) 50%, rgba(25…

Type

Radio Chrome for display. DM Sans for everything else.

Radio Chrome is the original face drawn for this look and ships in fonts/. The scale is closed: eyebrow, display, h2, lede, body, meta, price.

.bl-display

Everything in its place.

.bl-h2

Six ways to hang it.

.bl-price

$125one of fifty

.bl-lede

A look for sites built with Claude Code. A black stage, one centre line, one wing lit from behind, and one lit edge per screen.

.bl-body

Raised is a thick slab of frosted glass with a lit rim and a sheen. Recessed is the well it sits in. There is no third material, and state is depth, never a colour.

.bl-eyebrow

Look 02, an edition of fifty

.bl-meta

Edition 07 of 50, retired when gone

.bl-label

Email

.bl-hand

an edition of fifty, then gone

Materials

Two. Raised is frosted glass and can be pressed. Recessed is a well.

.bl-raised
.bl-recessed

Icons

12 strokes, one hand.

48-unit grid, one marker stroke each, 2.2 stroke, round caps, currentColor. They draw themselves on when an ancestor gets .is-in. Use inline as <svg class="bl-icon bl-icon--hand"><use href="#i-name"/></svg> or as the files in assets/icons/.

antenna
bolt
cassette
dial
disc
feather
needle
perch
signal
speaker
wave
wing

Motion

Presets, not effects.

Headlines rise word by word (.bl-words). Blocks rise into place (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). The wing arrives and then drifts (.bl-place). Hand notes write themselves on (.bl-hand). Icons draw themselves on (.bl-icon--hand). Keys sweep a light on hover. Reduced motion lands everything instantly.

Word rise and reveal

.bl-reveal .bl-words .bl-rise .bl-rise--late .bl-place .bl-hand .bl-icon--hand

Replay an edition of fifty, then gone

Everything in its place.

Click to play it again.

Loading

.bl-skeleton .bl-spinner .bl-progress
Installing the look

Components

Every state, drawn.

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

buttons

Buttons are glass keys. The primary carries the lit green edge and is the one hit per screen. Pressed is recessed. Hover lifts the key and sweeps a light across it. Loading swaps the label for a spinner.

components/buttons.html

inputs

Fields are recessed wells. Focus brightens the rim. Invalid swaps the rim for the error colour and shows a help line. Select and checkbox share the well.

components/inputs.html

That does not look like an email.

No mailing list. We only write back.

cards

Cards are glass. Media is a recessed well with the wing in it. Hover lifts (.bl-hover-lift). Selected is recessed, with the sheen off.

components/cards.html

The wing

At rest. Lifts on hover.

Edition 07

Folded

Hover, drawn.

Live

Low light

Selected, recessed.

Chosen

badges

Badges are small glass pills in the body face. The plain badge is for labels. The three status badges are the only place the status colours appear besides toasts and field errors.

components/badges.html
Chosen Edition 07 Live Ten left Sold out

tabs

Tabs sit in a glass pill group. The active tab is recessed. Hover brightens the label; focus draws the ring; disabled fades.

components/tabs.html

accordion

The accordion uses details and summary in glass. The open item is recessed. The plus turns into a dash when open. .is-open draws the open state without interaction.

components/accordion.html
Is it really mine?

Fifty sites get to wear Radio. Yours is one of them, with its own edition number and licence key.

Does Claude obey it?

CLAUDE.md is a set of rules with teeth. If a part does not exist, Claude stops and says so.

Why a wing?

Something has to hang on the black.

modal

The modal is a glass panel over a blurred scrim. The close key sits in the corner; the actions sit right, with the primary last. .bl-modal--static renders it inline over a well.

components/modal.html

toast

Toasts are glass pills that float at the bottom centre. A dot carries the status; the copy stays plain. .bl-toast--static renders them inline.

components/toast.html
Saved.
Radio installed.Open
Ten editions left.

table

Tables sit in a recessed well. Headers are tracked caps; rows are separated by hairlines. Hover brightens the row; the selected row is recessed a step deeper. Numbers are tabular and right-aligned.

components/table.html
LookStatusEditionsLeft
Aura GlowLive5043
RadioLive5050
Slow DanceTen left509
Ground ControlSold out500

Sections

Eleven sections, two variants each.

Variant A is what the demo uses. Variant B is the alternative for the same job. Page recipes are in CLAUDE.md.

nav

The top bar. A is the floating glass pill: two links, the chrome mark on the centre line, two links, the one lit key at the far right. B is the flat glass bar with a hairline, for app-like pages and anything with a table under it. The current link is recessed.

sections/nav.html

Variant A

Look 02
Get the look

Variant B

Look 02
Get the look

hero

The opening screen. A is the stage: headline on the centre line, the wing lit from behind (the motion clip when it is there, the still otherwise), the chrome mark beneath it. B is the split hero, headline left and the folded wing right, for inner pages and launches. Headlines use .bl-words so they rise on load.

sections/hero.html

Variant A

Look 02 an edition of fifty, then gone

Everything
in its place.

A look for sites built with Claude Code. A black stage, one centre line, one wing lit from behind, and one lit edge per screen. Fifty copies, then it is gone.

Get the look, $125 See the formations
50editions
1lit edge per screen
1wing

Variant B

Look 02 the folded one

One wing,
hung straight.

The split hero for inner pages. Headline on the left, the folded wing on the right, one lit key.

Get the look, $125 See the formations

feature-grid

Three or six things the product does. A is the ranked grid: cards in rows of one, two and three, each with a hand-drawn icon in a well. B is the numbered two-column list, for pages that already carry icons elsewhere.

sections/feature-grid.html

Variant A

What comes in the box

A stage, a wing and a rulebook.

One centre line

Every section is symmetrical about it. Nothing hangs left, nothing hangs right.

Two materials

Raised is a black key with a lit edge. Recessed is the well. Pressed is recessed. There is no third.

Radio Chrome

An original angular face, drawn from octagons with no curves. Headlines use it plain. The mark alone gets the chrome.

The wing

One wing, lit from behind, placed once per screen. It is the only image in the look.

Motion, in place

Things take their places on the centre line. The wing drifts as if it were hanging. Reduced motion lands everything at once.

One lit edge

The accent is the wing's green on the edge of one key per screen. It appears nowhere else.

Variant B

What comes in the box

Six parts, in a list.

01

One centre line

Every section is symmetrical about it.

02

Two materials

Frosted glass, and the well it sits in.

03

Two original faces

Radio Chrome for headlines, Radio Hand for notes.

04

The wing

One image, placed once per screen.

05

Twelve icons

Hand-drawn, one stroke each, and they draw themselves on.

06

One lit edge

The green, on one key per screen.

bento

The parts, laid out unevenly. A is the wide materials tile plus the scheme tile and the rules tile. B is three even glass tiles, each with a wing in a well.

sections/bento.html

Variant A

The parts

Everything is a token.

The materials

The whole look, drawn once. Three keys: at rest, lit, pressed. A well, with the wing in it. Every colour, edge, shadow and duration on this page is a custom property.

Both schemes

Dark is native: the wing on a black stage. Light is one attribute away: paper, and the chrome goes to gunmetal.

The rules

CLAUDE.md is the product. Claude reads it before it touches a file, and stops when a token it needs does not exist.

Variant B

The parts

Three tiles, even.

The wing

The open wing, in a well.

Folded

The second wing, mid-stroke.

Low light

Faded, for empty states.

Variant A

Formations

Six ways to hang it.

The wingAs it comes. The hero.
The pairMirrored. The CTA.
CloseCropped. Card media.
FoldedThe second wing. Bento art.
Low lightFaded. Empty states.
Off axisnot quite hung straight

Variant B

Formations

Two ways, wide.

The wingLandscape. The hero.
Foldedthe second wing

pricing

Plans. A is three plans with the middle one chosen (recessed) and carrying the lit key. B is two plans, for a simpler offer. The chosen plan is always recessed; only it gets the primary button.

sections/pricing.html

Variant A

Editions

One look, or a rack.

One look

$125Radio

  • One of fifty editions
  • Theme, motion, sections, components
  • Radio Chrome, woff2 and licence
  • CLAUDE.md, the rules
Three looksChosen

$300any three

  • Radio and two more from the rack
  • Three licence keys
  • Three original faces
  • One command each
Five looks

$425any five

  • Radio and four more from the rack
  • Five licence keys
  • Five original faces
  • The whole studio, dressed

Variant B

Editions

One, or three.

One look

$125Radio

  • One of fifty editions
  • Theme, motion, sections, components
  • Radio Chrome, woff2 and licence
Three looksChosen

$300any three

  • Radio and two more from the rack
  • Three licence keys
  • Three original faces

testimonial

One voice. A is a single quote at display size on a glass slab, with the signal icon. B is three short quotes in glass cards. The starter prompt is real copy that fits here on the demo; on a client site use a real quote.

sections/testimonial.html

Variant A

Dress this site in the look at ./looks/radio. Read its CLAUDE.md first and obey it.
The starter promptThe only thing you type

Variant B

Everything landed on the centre line. I did not touch a pixel.
A studio, on a TuesdayEdition 04
The glass is the first thing anyone mentions.
A label, at launchEdition 11
Claude read the rules and stopped when it should have.
A founder, mid-buildEdition 19

faq

Questions. A is the split with the accordion (the open item recessed). B is the two-column grid with every answer visible.

sections/faq.html

Variant A

Questions

The ones we get asked.

Is it really mine?

Fifty sites get to wear Radio. Yours is one of them, with its own edition number and licence key. When the fiftieth sells, the look is retired for good.

Does Claude obey it?

CLAUDE.md is a set of rules with teeth: tokens only, two materials, one lit edge per screen. If a token, section or component does not exist, Claude stops and says so instead of inventing one.

Why a wing?

Something has to hang on the black. A wing lit from behind is the whole record cover in one object. One was enough. Two looked like a logo.

What about the font?

Two faces were drawn for Radio and ship as woff2 with their licence: Radio Chrome for headlines and the mark, Radio Hand for the notes, the same hand that drew the icons. Neither is sold on its own.

Variant B

Questions

All the answers, open.

Is it really mine?

Fifty sites get to wear Radio. Yours is one of them, with its own edition number and licence key.

Does Claude obey it?

CLAUDE.md is a set of rules with teeth. If a part does not exist, Claude stops and says so.

Why a wing?

Something has to hang on the black. A wing lit from behind is the whole record cover in one object.

What about the fonts?

Radio Chrome and Radio Hand ship as woff2 with their licence, for sites wearing Radio only.

cta

The ask. A is the big glass slab with the folded wing hanging out of the bottom of it. B is the compact bar: one line, one key. Either way, one lit edge.

sections/cta.html

Variant A

Look 02

Fifty sites get to wear this.
Then it is retired.

One command. no redesign meetings

Get the look, $125

Variant B

Fifty sites get to wear this. Then it is retired.

Get the look, $125

Variant A

Variant B

contact-form

Write to us. A is the split: headline left, fields right. B is the form inside a glass card, stacked. Fields are recessed wells; the submit is the lit key.

sections/contact-form.html

Variant A

Write to us

Ask us something.

We answer in a day or two. If it is about a licence key, write from the email you bought with.

No mailing list. We only write back.

Variant B

Write to us

Ask us something.

No mailing list. We only write back.

Tokens

75 custom properties. Nothing else exists.

Native values first; the light scheme overrides only the colour tokens. The same list is in theme.json.

TokenGroupNativelight
--bgcanvas#050505#F2F0EA
--surfacecanvas#111111#FFFFFF
--surface-2canvas#171717#F8F7F3
--textcanvas#F4F2EC#0A0A0A
--text-2canvasrgba(244, 242, 236, 0.62)rgba(10, 10, 10, 0.62)
--text-3canvasrgba(244, 242, 236, 0.38)rgba(10, 10, 10, 0.40)
--linecanvasrgba(244, 242, 236, 0.10)rgba(10, 10, 10, 0.10)
--accentaccent#C8FF3F#5C8F00
--accent-inkaccent#0F1A05#FFFFFF
--accent-lineotherrgba(200, 255, 63, 0.42)rgba(92, 143, 0, 0.38)
--mark-ratioother4.7921
--grain-opacityother0.160.22
--poolauraradial-gradient(ellipse 58% 60% at 50% 100%, rgba(200, 255, 63, 0.12), rgba(200, 255, 63, …radial-gradient(ellipse 60% 55% at 50% 100%, rgba(10, 10, 10, 0.08), rgba(10, 10, 10, 0) 7…
--patternauravar(--pool)
--wingaurafile assets/wing.webp
--wing-ratioaura1200 / 1025
--wing-2aurafile assets/wing-2.webp
--wing-2-ratioaura1200 / 674
--lightauraradial-gradient(70% 46% at 50% -6%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 70%)…radial-gradient(70% 46% at 50% -6%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),…
--grainauraurl("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='2…
--sheenauralinear-gradient(112deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 22%, rgba(…linear-gradient(112deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 22%, rgba(25…
--sweepauralinear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.28) 50%, rgba(25…linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(255…
--okstatus#9ED9A8
--warnstatus#E8D9A0
--errstatus#E58A8A
--blurmaterials26px
--raised-bgmaterialslinear-gradient(158deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.07) 34%, rgba(…linear-gradient(158deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.55) 34%, rgba(…
--raised-linematerialsrgba(255, 255, 255, 0.17)rgba(255, 255, 255, 0.9)
--raised-shadowmaterialsinset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.65), inset 1px 0 0…inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(10, 10, 10, 0.10), inset 1px 0 0 rgba(255, 255,…
--raised-shadow-upmaterialsinset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 0 rgba(0, 0, 0, 0.65), inset 1px 0 0…inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(10, 10, 10, 0.10), inset 1px 0 0 rgba(255, 255,…
--raised-hitmaterialsinset 0 1px 0 var(--accent), inset 0 -1px 0 rgba(0, 0, 0, 0.65), inset 1px 0 0 rgba(200, 2…inset 0 1px 0 var(--accent), inset 0 -1px 0 rgba(10, 10, 10, 0.10), inset 1px 0 0 rgba(92,…
--recessed-bgmaterialsrgba(0, 0, 0, 0.52)rgba(10, 10, 10, 0.06)
--recessed-linematerialsrgba(0, 0, 0, 0.6)rgba(10, 10, 10, 0.06)
--recessed-shadowmaterialsinset 0 3px 14px rgba(0, 0, 0, 0.92), inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rg…inset 0 3px 10px rgba(10, 10, 10, 0.16), inset 0 -1px 0 #FFFFFF, 0 1px 0 #FFFFFF
--scrimmaterialsrgba(5, 5, 5, 0.72)rgba(10, 10, 10, 0.42)
--chevronmaterialsurl("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><…url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><…
--font-displaytype"Radio Chrome", "Helvetica Neue", Arial, sans-serif
--font-bodytype"DM Sans", "Helvetica Neue", Arial, sans-serif
--font-handtype"Radio Hand", "Bradley Hand", "Segoe Script", cursive
--text-handtype1.25rem
--display-stretchtype100%
--display-weighttype800
--text-xstype0.75rem
--text-smtype0.875rem
--text-mdtype1.0625rem
--text-lgtype1.1875rem
--text-xltype1.5rem
--text-h2typeclamp(2.25rem, 4.6vw, 4rem)
--text-displaytypeclamp(3rem, 7.6vw, 6.75rem)
--track-capstype0.22em
--leading-tighttype0.96
--leading-bodytype1.5
--radiusshape18px
--radius-smshape12px
--radius-pillshape999px
--ruleshape1px
--space-1space0.25rem
--space-2space0.5rem
--space-3space0.75rem
--space-4space1rem
--space-5space1.5rem
--space-6space2rem
--space-7space3rem
--space-8space4.5rem
--space-9space7rem
--wrapspace1180px
--controlspace48px
--control-smspace36px
--iconspace20px
--dur-fastmotion160ms
--durmotion420ms
--dur-slowmotion900ms
--easemotioncubic-bezier(0.2, 0.8, 0.2, 1)
--ease-placemotioncubic-bezier(0.16, 1, 0.3, 1)
--reveal-ymotion14px