Slow Burn kit sheet

Look 09, the kit sheet

Slow Burn

Warm to the touch. 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

The kiln room, one ember, the scale, and three status discs.

Canvas and accent

--bg --surface --surface-2 --text --accent
--bg#2A1D14
--surface#33241A
--surface-2#22170F
--text#FFE3B3
--accent#EA6113
--accent-ink#2A1D14
--accent-linergba(234, 97, 19, 0.45)
--accent-glowrgba(234, 97, 19, 0.30)
--accent-bglinear-gradient(180deg, #F88F22 0%, #EA6113 62%, #D4530F 100%)
--accent-bg-uplinear-gradient(180deg, #FBB931 0%, #F88F22 55%, #EA6113 100%)
--accent-shadowinset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -10px 14px rgba(80, 20, 0, 0.36), 0 14px …
--accent-shadow-upinset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 14px rgba(80, 20, 0, 0.3), 0 18px 30…
--ok#9CD78A
--warn#FBB931
--err#FF6A4A

The scale and the halo

Decoration only. The four stops of the scale, the ramp they make, the halo under the fan, the brown ground and the grain over everything. The ramp is used only as a bar. Never behind text.

--ember#EA6113
--orange#F88F22
--gold#FBB931
--cream#FFE3B3
--ramplinear-gradient(90deg, #EA6113 0%, #F88F22 34%, #FBB931 67%, #FFE3B3 100%)
--haloradial-gradient(60% 55% at 50% 60%, rgba(248, 143, 34, 0.42), rgba(234, 97, 19, 0.12) 55%,…
--patternradial-gradient(120% 90% at 50% 40%, #3A281C 0%, #2A1D14 55%, #1E140E 100%)
--graininlined

Type

Control Meter for display. Figtree for everything else.

Control Meter 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 at a temperature.

.bl-h2

Four colours, one scale, nothing cold.

.bl-price

$125one of fifty

.bl-lede

A look for sites built with Claude Code. Glazed stoneware you can press, bisque wells for everything chosen, four colours on dark brown, one ember per screen.

.bl-body

Raised is glazed stoneware: a hard gloss, the glaze pooling darker toward the bottom edge, one specular on top. Recessed is bisque, the matte well it sits in. There is no third material, and state is depth, never a colour.

.bl-eyebrow

Look 09, an edition of fifty

.bl-meta

Edition 07 of 50, archived when gone

.bl-label

Email

Materials

Two. Raised is glazed and can be pressed. Recessed is bisque.

.bl-raised
.bl-recessed

Icons

12 discs. None is a variation of another.

24-unit grid, only circles and ovals, overlapping, no strokes: the discs at .55 of currentColor and every overlap solid. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.

chip
cone
dish
drip
fan
foot
glaze
kiln
ring
shelf
stack
tong

Motion

Fanned.

Things arrive as a stack and fan open, each a stop hotter than the last. Headlines fan out word by word (.bl-words). Blocks fan in (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). The film comes up with the page (.bl-hero__film). A glazed surface lifts and warms a stop on hover (.bl-hover-lift). Keys sink into bisque when pressed. Reduced motion lands everything instantly.

Word rise and reveal

.bl-reveal .bl-words .bl-rise .bl-rise--x .bl-rise--late .bl-hover-lift

Replay

Everything at a temperature.

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 glazed keys: a gloss on top, the glaze pooling darker at the bottom edge, a shadow under. The primary is the ember glaze with dark ink and is the one hit per screen. Hover lifts and warms a stop; pressed sinks the key into bisque. Loading swaps the label for a spinner.

components/buttons.html

inputs

Fields are bisque wells. Focus lights the floor of the well ember; invalid draws an error line along it; disabled dims. The checkbox is a small well that fills with an ember disc when checked.

components/inputs.html

That does not look like an email.

No mailing list. We only write back.

cards

Cards are glazed tiles with a bisque window in them. Media is the halo, the fan or an icon on the pattern, never a photograph. Hover lifts and warms; selected sinks the whole card into bisque.

components/cards.html

The dish

At rest. Warms on hover.

Edition 09

The fan

Hover, drawn.

Live

The licence

Selected, sunk into bisque.

Chosen

badges

Badges are small bisque wells with a disc in them. The plain badge carries a dim disc; ok, warn and err colour it. They are the only place the status colours appear besides toasts and field errors.

components/badges.html
Chosen Edition 09 Edition open Twelve left Archived

tabs

Tabs are keys on a glazed strip. The active tab has been pressed into bisque. Hover darkens the ink, focus rings in the ember line, disabled dims.

components/tabs.html

accordion

The accordion is a stack of glazed tiles. The open item sinks into bisque and its plus becomes an ember minus.

components/accordion.html
Is it really mine?

Fifty sites get to wear Slow Burn. 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 four colours?

Because a scale with more stops is a gradient, and a gradient is not a decision.

modal

The modal is a glazed panel over a scrim. The static modifier renders it inline on the sheet, in a bisque well with the halo behind it.

components/modal.html

toast

Toasts are small glazed slabs with a disc. Plain, ok, warn and err. The static modifier renders them inline.

components/toast.html
Saved.
Slow Burn installed.Open
Twelve copies left.

table

The table is the shelf, set in a bisque well. Numbers are in Control Meter Regular and ranged right. Hover warms a row; selected lifts it out of the well as a glazed strip.

components/table.html
LookStatusCopiesLeft
Aura GlowEdition open5043
RadioEdition open5050
Slow BurnTwelve left5012
PlinthArchived500

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 sits straight on the canvas: the ember disc beside the wordmark, links, the scheme toggle drawn as bisque with the ramp for a dot, and one glazed key. B adds a hairline for pages where the hero has no sleeve. The current link is recessed, a bisque well.

sections/nav.html

Variant A

Slow Burn Get the look

Variant B

Slow Burn Get the look

hero

The opening screen. A is the fan, full bleed: the film behind everything, the fan across the top of the screen, and the headline, lede, keys and the scale centred under it on a scrim. Until the film ships the video carries its poster alone, which is also what reduced motion shows; when it lands, a <source> for ../motion/slow-burn-hero.mp4 goes inside the video. B is the split hero for inner pages: headline left, three bisque stats right, no film. Headlines use .bl-words so they fan out word by word.

sections/hero.html

Variant A

Look 09 from Bandana

Everything at a temperature.

Four colours, one scale, nothing cold. Slow Burn is a locked look for sites built with Claude Code: glazed stoneware you can press, bisque wells for everything chosen, one ember per screen. One folder, one prompt, fifty copies.

Get the look, $125 See the parts
The scale

Variant B

Look 09, inner page

Warm to the touch.

The split hero. Headline on the left, three bisque wells on the right, one ember key. For pricing, about and work pages.

Get the look, $125 See the parts
  • 50Copies
  • 4Colours
  • 2Materials

feature-grid

The parts of the look, one per glazed tile. A is six tiles in a grid, each with a disc-built icon in a bisque well and a number; hover warms the tile one stop. B is the same six as rows for a narrower page, icon left, text right.

sections/feature-grid.html

Variant A

The parts

Fired once, used everywhere.

A look is one folder. Everything in it obeys one file, and the file is not negotiable.

  • 01

    Two materials

    Glazed stoneware: a hard gloss, the glaze pooling darker toward the bottom edge, one specular on top. And bisque, the matte well it sits in. Keys are glazed, fields are bisque, and anything chosen sinks into bisque. State is depth, never a colour.

  • 02

    One scale

    Ember, orange, gold, cream. Four stops and nothing between them. The ember is the accent and lands once per screen, at the front of the fan.

  • 03

    Control Meter

    A condensed rounded monoline, drawn from scratch for Bandana and bundled with the look. Headlines, prices, big numbers. Never a paragraph.

  • 04

    Twelve icons

    Disc-built: only circles and ovals, overlapping, and every overlap solid. Dish, stack, fan, kiln, glaze, chip, ring, foot, tong, shelf, cone, drip. One drawing each.

  • 05

    Fanned

    Things arrive as a stack and fan open, each a stop hotter than the last. Headlines fan out word by word. Nothing fades from nowhere and nothing slides in from off-screen. Presets only.

  • 06

    Both schemes

    Native is the kiln room, dark brown. The other is the same discs on cream stock in daylight. Only the colour tokens change; the film stays dark in both.

Variant B

The parts, as a list

Six things in the folder.

  • Glaze and bisque

    Raised and recessed. There is no third material.

  • The scale

    Four stops. The ember is the one hit per screen.

  • Control Meter

    Two cuts, display only, bundled.

  • Twelve icons

    Discs only. None is a variation of another.

  • Fanned

    From the stack, one stop hotter each.

  • Both schemes

    The kiln room, and the same discs in daylight.

bento

The rules, made visible. A is six glazed tiles on a three-column grid: the keys and their states, the face, the fan drawn in CSS, the scale, the three status discs, and the halo. B is four equal tiles for a shorter page.

sections/bento.html

Variant A

The rules, made visible

Glazed, bisque, and nothing else.

Glaze and bisque

A key is a glazed disc: a gloss on top, the glaze pooling at the bottom edge. Press it and it sinks into bisque. Every field is bisque too, and the ember comes up along its floor on focus.

AaControl Meter, two cuts

The face

Regular for prices and stats, Bold for headlines and the mark.

The fan

Four discs, ember in front. Drawn in CSS wherever a page needs the signature small.

The scale

The one gradient the look allows, and only as a bar: progress, the toggle dot, a bullet. Never on text, never behind a paragraph.

Edition open Twelve left Archived

Status, in three discs

Ok, warn and err exist for badges, toasts and field errors, and nowhere else. They are never the accent.

The halo

The warm glow under the fan. Hero and CTA backdrops, tile art, card media. Never behind a paragraph.

Variant B

Four rules

Short version.

One hit per screen

The ember lands on the primary key and nowhere else.

Chosen sinks

Selected, active, current: bisque, every time.

09Control Meter

Display for display

Headlines, prices, numbers. Body copy is Figtree.

Four colours

Nothing between the stops and nothing off the scale.

Variant A

Variant B

pricing

The editions. A is three glazed plans side by side; the chosen one has sunk into bisque and carries the one ember key. B is the same three as rows.

sections/pricing.html

Variant A

Editions

Fifty copies, then the kiln is cold.

Every look on the rack is sold fifty times and archived. No reprints, no free tier, no second firing.

One look

$125Slow Burn

  • The whole folder, every part
  • Control Meter, both cuts
  • The film, the tile, twelve icons
  • One of fifty
Get one
Chosen

Three looks

$300any three

  • Any three looks on the rack
  • Seventy-five dollars off
  • Each one of its fifty
  • Switch a site between them in one line
Get three

Five looks

$425any five

  • Any five looks on the rack
  • Two hundred dollars off
  • Each one of its fifty
  • A studio's worth
Get five

Variant B

Editions, as rows

Pick a number.

One look

$125

The folder, the face, the film, one of fifty.

Get one

Three looks

$300

Any three on the rack, seventy-five dollars off.

Get three

Five looks

$425

Any five on the rack, two hundred dollars off.

Get five

testimonial

A rule, set large, on one glazed slab. Not a customer quote: the look speaks for itself. A is one centred slab. B is two side by side, ranged left.

sections/testimonial.html

Variant A

It refuses a fifth colour. Ember, orange, gold, cream, and the brown they sit on.

Rule six, from the file the buyer's Claude obeys

Variant B

Nothing on the page is ever cold.

Rule one

State is depth. Chosen sinks into bisque.

Rule four

faq

Questions. A is the split: the head on the left, the accordion on the right; shut items are glazed, the open one has sunk into bisque and its plus has become an ember minus. B is a plain two-column definition list, no accordion.

sections/faq.html

Variant A

Questions

Before it goes in the kiln.

Short answers. The long ones are in the file.

What do I actually get?
One folder. A CLAUDE.md your Claude obeys, theme.css and motion.css, Control Meter in two cuts, eleven sections in two variants each, ten components with every state drawn, twelve icons, the tile, the film, and a kit sheet that shows all of it on one page.
Does it work on a site I already have?
Yes. Put the folder in the project, set data-look on the html element, link the two stylesheets, paste the starter prompt. Claude rebuilds every screen from the sections and components and stops when it needs a part that does not exist.
Can I add a colour?
No. The scale is four stops and the ember is the one hit per screen. If you want another colour, you want another look.
What happens after fifty?
The look is archived and a new one takes its place on the rack. The fifty owners keep it forever. Nobody else ever gets it.
Is the typeface mine?
Control Meter is licensed for sites wearing Slow Burn, as many as you build. It is never sold apart and never redistributed on its own.
Is there a light version?
The same discs on cream stock in daylight. Set data-scheme to light, or to auto to follow the system. Only the colour tokens change; the film stays dark.

Variant B

Questions, flat

Six answers.

What do I get?
One folder: the file, two stylesheets, the face, eleven sections, ten components, twelve icons, the tile, the film, the kit sheet.
Does it fit an existing site?
Yes. Set data-look, link the stylesheets, paste the prompt.
Can I add a colour?
No. Four stops, one hit per screen.
After fifty?
Archived. The fifty keep it forever.
Is the typeface mine?
Licensed for sites wearing Slow Burn, never sold apart.
A light version?
data-scheme="light", or auto. Only colours change.

cta

The close. A is one glazed slab with the halo under it, the headline left and the one ember key right. B is a full-width band, centred, for the foot of an inner page.

sections/cta.html

Variant A

Look 09

Take one while it is warm.

Fifty copies. When they are gone, Slow Burn is archived and the rack moves on.

Get the look, $125

Variant B

Look 09

Warm to the touch.

One folder, one prompt, fifty copies.

Get the look, $125 See the parts

Variant A

Variant B

contact-form

Write to us. A is the split: the head on the left, the form on the right, every field a bisque well and the one ember key to send. B is the form alone on a glazed slab, for a contact page.

sections/contact-form.html

Variant A

Write to us

Ask before you buy.

Tell us what you are building and which looks you have your eye on. We answer within a day.

Variant B

Write to us

A sentence is enough.

Tokens

84 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#2A1D14#F6E3C4
--surfacecanvas#33241A#FFF0D6
--surface-2canvas#22170F#EBD3AC
--textcanvas#FFE3B3#2A1D14
--text-2canvasrgba(255, 227, 179, 0.68)rgba(42, 29, 20, 0.70)
--text-3canvasrgba(255, 227, 179, 0.44)rgba(42, 29, 20, 0.46)
--linecanvasrgba(255, 227, 179, 0.10)rgba(42, 29, 20, 0.10)
--accentaccent#EA6113
--accent-inkaccent#2A1D14
--accent-lineaccentrgba(234, 97, 19, 0.45)
--accent-glowaccentrgba(234, 97, 19, 0.30)rgba(234, 97, 19, 0.22)
--accent-bgaccentlinear-gradient(180deg, #F88F22 0%, #EA6113 62%, #D4530F 100%)
--accent-bg-upaccentlinear-gradient(180deg, #FBB931 0%, #F88F22 55%, #EA6113 100%)
--accent-shadowaccentinset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -10px 14px rgba(80, 20, 0, 0.36), 0 14px …
--accent-shadow-upaccentinset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 14px rgba(80, 20, 0, 0.3), 0 18px 30…
--emberaura#EA6113
--orangeaura#F88F22
--goldaura#FBB931
--creamaura#FFE3B3
--rampauralinear-gradient(90deg, #EA6113 0%, #F88F22 34%, #FBB931 67%, #FFE3B3 100%)
--haloauraradial-gradient(60% 55% at 50% 60%, rgba(248, 143, 34, 0.42), rgba(234, 97, 19, 0.12) 55%,…radial-gradient(60% 55% at 50% 60%, rgba(248, 143, 34, 0.30), rgba(234, 97, 19, 0.08) 55%,…
--patternauraradial-gradient(120% 90% at 50% 40%, #3A281C 0%, #2A1D14 55%, #1E140E 100%)radial-gradient(120% 90% at 50% 40%, #FFF0D6 0%, #F6E3C4 55%, #EBD3AC 100%)
--grainauraurl("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='1…
--grain-opacityother0.070.05
--hero-textother#FFE3B3#FFE3B3
--hero-text-2otherrgba(255, 227, 179, 0.72)rgba(255, 227, 179, 0.72)
--hero-scrimotherlinear-gradient(180deg, rgba(42, 29, 20, 0) 0%, rgba(42, 29, 20, 0) 38%, rgba(42, 29, 20, …linear-gradient(180deg, rgba(42, 29, 20, 0) 0%, rgba(42, 29, 20, 0) 38%, rgba(42, 29, 20, …
--okstatus#9CD78A#3E8A3A
--warnstatus#FBB931#A66A0E
--errstatus#FF6A4A#D4400F
--raised-bgmaterialslinear-gradient(180deg, #3F2D20 0%, #34251B 55%, #2C1F16 100%)linear-gradient(180deg, #FFF6E6 0%, #FFF0D6 55%, #F5E1C0 100%)
--raised-bg-upmaterialslinear-gradient(180deg, #4A3525 0%, #3A2A1E 55%, #31221A 100%)linear-gradient(180deg, #FFFBF2 0%, #FFF4E0 55%, #F8E6C8 100%)
--raised-flatmaterials#34251B#FFF0D6
--raised-inkmaterials#FFE3B3#2A1D14
--raised-ink-2materialsrgba(255, 227, 179, 0.68)rgba(42, 29, 20, 0.70)
--raised-shadowmaterialsinset 0 1px 0 rgba(255, 227, 179, 0.20), inset 0 -12px 18px -8px rgba(0, 0, 0, 0.55), 0 1p…inset 0 1px 0 #FFFFFF, inset 0 -12px 18px -8px rgba(120, 70, 20, 0.22), 0 1px 0 rgba(120, …
--raised-shadow-upmaterialsinset 0 1px 0 rgba(255, 227, 179, 0.28), inset 0 -12px 18px -8px rgba(0, 0, 0, 0.5), 0 1px…inset 0 1px 0 #FFFFFF, inset 0 -12px 18px -8px rgba(120, 70, 20, 0.18), 0 1px 0 rgba(120, …
--raised-hitmaterialsinset 0 1px 0 rgba(255, 227, 179, 0.20), inset 0 -12px 18px -8px rgba(0, 0, 0, 0.55), 0 0 …inset 0 1px 0 #FFFFFF, inset 0 -12px 18px -8px rgba(120, 70, 20, 0.22), 0 0 0 2px var(--ac…
--glossmaterialsradial-gradient(70% 60% at 30% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%)radial-gradient(70% 60% at 30% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%)
--gloss-strongmaterialsradial-gradient(60% 50% at 35% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%)
--recessed-bgmaterials#1F1510#EBD3AC
--recessed-shadowmaterialsinset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(…inset 0 3px 6px rgba(120, 70, 20, 0.28), inset 0 1px 0 rgba(120, 70, 20, 0.18), inset 0 -1…
--recessed-shadow-deepmaterialsinset 0 5px 10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba…inset 0 5px 10px rgba(120, 70, 20, 0.32), inset 0 1px 0 rgba(120, 70, 20, 0.22), inset 0 -…
--recessed-litmaterialsinset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 -1px 0 var(--accent), inset 0 -14px 24px -14px…inset 0 3px 6px rgba(120, 70, 20, 0.28), inset 0 -1px 0 var(--accent), inset 0 -14px 24px …
--scrimmaterialsrgba(34, 23, 15, 0.78)rgba(246, 227, 196, 0.80)
--chevronmaterialsurl("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'…url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'…
--font-displaytype"Control Meter", "IBM Plex Sans Condensed", "Arial Narrow", sans-serif
--font-bodytype"Figtree", system-ui, sans-serif
--display-weighttype700
--text-xstype.75rem
--text-smtype.875rem
--text-mdtype1.0625rem
--text-lgtype1.1875rem
--text-xltype1.5rem
--text-h3type1.75rem
--text-h2typeclamp(2.2rem, 4.4vw, 3.8rem)
--text-displaytypeclamp(3rem, 7vw, 6.4rem)
--text-pricetype3rem
--track-capstype.16em
--leading-tighttype.98
--leading-bodytype1.55
--radiusshape22px
--radius-smshape14px
--radius-pillshape999px
--ruleshape1px
--space-1space.25rem
--space-2space.5rem
--space-3space.75rem
--space-4space1rem
--space-5space1.5rem
--space-6space2rem
--space-7space3rem
--space-8space4.5rem
--space-9space7rem
--wrapspace1200px
--controlspace50px
--control-smspace38px
--iconspace22px
--dur-fastmotion160ms
--durmotion420ms
--dur-slowmotion820ms
--easemotioncubic-bezier(.2, .7, .2, 1)
--ease-fanmotioncubic-bezier(.16, 1, .3, 1)
--reveal-ymotion0px