A fragment
At rest. Lifts on hover.
Look 03, the kit sheet
Plinth
A display piece, up close. 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
Plaster, one painted passage, the cast surfaces, and three status colours.
Canvas and accent
--bg --surface --surface-2 --text --accent--bg
#EFECE6--surface
#F7F5F0--surface-2
#F2EFE9--text
#1C1C1A--accent
#C25A21--accent-ink
#FFFFFF--ok
#6F9A7F--warn
#C9A64B--err
#B9553FThe plaster
Decoration only. The mottle and the grain over everything, the skylight on the page, the cast in its corner, the six painted fragments and the smear. Never behind text.
--grain
inlined--light
radial-gradient(90% 60% at 18% -10%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%…--pattern
linear-gradient(180deg, var(--plaster), var(--plaster-shade))Type
Plinth Cast for display. IBM Plex Mono for everything else.
Plinth Cast 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
A display piece, up close.
.bl-h2
A cast, a niche, a rulebook.
.bl-price
$125one of fifty
.bl-lede
A look for sites built with Claude Code. Cast plaster you can press, a niche for everything that is chosen, one painted passage per screen.
.bl-body
Raised is a piece of cast plaster set down under one skylight. Recessed is the niche it sits in. There is no third material, and state is depth, never a colour.
.bl-eyebrow
Look 03, an edition of fifty
.bl-meta
.bl-labelEmail
Materials
Two. Raised is cast plaster and can be pressed. Recessed is the niche.
.bl-raised
.bl-recessed
Icons
12 casts. None is a variation of another.
24-unit grid, one oblique depth for all twelve, three tones of currentColor, no strokes. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.
Motion
Set down, then still.
Nothing fades in. Headlines are set down word by word from just above their line (.bl-words). Blocks are set down (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). A cast lands and its shadow catches up a beat later (.bl-settle). The film in the hero is the skylight passing over the cast (.bl-cast--video). Keys lift on hover and sink when pressed. Reduced motion lands everything instantly.
Word rise and reveal
.bl-reveal .bl-words .bl-rise .bl-rise--x .bl-rise--late .bl-settle .bl-placeReplay
A display piece, up close.
Click to play it again.
Loading
.bl-skeleton .bl-spinner .bl-progressComponents
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
Keys are cast plaster. The primary carries the painted line and is the one hit per screen. Hover lifts the key off the floor; pressed sinks it into the niche. Loading swaps the label for a spinner.
components/buttons.htmlinputs
Fields are niches cut into the plaster. Focus lets the paint show at the rim. Invalid takes the error colour on the rim and a help line. The checkbox is a small niche with a painted square when checked.
components/inputs.htmlThat does not look like an email.
No mailing list. We only write back.
cards
Cards are casts with the picture set into the top. Hover lifts (.bl-hover-lift). Selected sinks the whole card into the niche.
components/cards.htmlTwo halves
Hover, drawn.
Live
The cast
Selected, in the niche.
Chosen
badges
Badges are small cast chips with a dot. The dot is the only place the status colours appear, apart from toasts and field errors.
components/badges.html
Chosen
Edition 12
Live
Ten left
Sold out
tabs
Tabs sit on one cast strip. The active tab is sunk into the niche; the rest rest on the surface.
components/tabs.htmlaccordion
Each question is a cast on the floor. The open one is sunk into the niche; the plus turns to a minus.
components/accordion.htmlIs it really mine?
Fifty sites get to wear Plinth. 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 plaster?
Because it shows its flaws up close, and that is the part you keep.
modal
A modal is a cast slab set down over a scrim. One title in Plinth Cast, the body in mono, the actions at the foot with the one painted key. .bl-modal--static renders it inline.
components/modal.htmlRetire this look?
When the fiftieth edition sells, Plinth is retired for good and a new look takes its rank. This cannot be undone.
toast
Toasts are small casts that sit at the bottom centre. A dot carries the status; the copy stays plain. .bl-toast--static renders them inline.
components/toast.htmltable
A table sits in a niche. Rows are separated by hairlines; the selected row is a cast piece lying in the niche.
components/table.html| Look | Status | Editions | Left |
|---|---|---|---|
| Aura Glow | Live | 50 | 43 |
| Radio | Live | 50 | 50 |
| Plinth | Ten left | 50 | 9 |
| Ground Control | Sold out | 50 | 0 |
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.
Variant A
Variant B
hero
The opening screen. A is the cast in its corner: headline left, the film in the stage right with its catalogue caption, stats under. B is the split hero with a fragment beside the headline, for inner pages and launches. Headlines take .bl-words so they are set down on load.
sections/hero.htmlVariant A
Look 03 · an edition of fifty
A display piece,
up close.
A look for sites built with Claude Code. Cast plaster you can press, a niche for everything that is chosen, one orange passage per screen. Fifty copies, then it is gone.
BD-03 The cast, in its cornerPlaster, paint
Variant B
Look 03 · the fragments
One break,
painted.
The split hero for inner pages. Headline on the left, a fragment on the right, one painted key.
BD-03.03 Warm air estatePlaster, paint
feature-grid
Three or six things. A is the listing: a head that stays put on the left, rows under hairlines on the right, number then name then body, the way a label lists a catalogue. B is three cast tiles with an icon well each.
sections/feature-grid.htmlVariant A
What is in it
A cast, a niche, a rulebook.
Six parts, listed the way a label lists a catalogue. Every one is drawn for this look and ships only with it.
01The cast
Raised is a piece of cast plaster set down on the floor under one skylight: matte, a faint mottle, one soft shadow falling down and to the left. Every key, every bar, every card.
02The niche
Recessed is the inside corner of a cast cube: two walls, a floor, a seam. Every field, the current link, the chosen plan, the open question sits in one.
03Plinth Cast
A hairline geometric drawn for the look, in two cuts, tracked wide like a title on a sleeve. Headlines, the mark and prices only. The body is a monospace, in a catalogue voice.
04The passage
One painted passage per screen, cast into the object. It marks the single most important thing in view and nothing else.
05Twelve casts
Twelve icons, each a small cast object with one shaded face: arch, plinth, corner, fragment, dome, column and so on. None is a variation of another.
06Set down
Nothing fades in. Headlines are set down word by word, pieces land and their shadow catches up a beat later, then everything holds perfectly still.
Variant B
What is in it
Three parts.
The cast
Matte plaster set down under one skylight. Every key, every bar, every card.
The niche
The inside corner of a cast cube. Anything chosen, active or open sits in one.
The paint
One painted passage per screen. It marks the single most important thing in view.
bento
The parts, unevenly. A is a wide tile with the cast, a niche tile with text, and the paint. B is three even tiles with a fragment each. Captions carry the number and the name.
sections/bento.htmlVariant A
The room
Two materials, one light.
Raised
The cast
Matte plaster with a faint mottle. Hover lifts it off the floor; press sets it into the niche.
BD-03.1 The castPlaster
Recessed
The niche
The inside corner of a cast cube. Anything chosen, active or open sits in one. State is depth, never a colour.
BD-03.2 The paintOrange, grey
Variant B
The room
Three fragments.
BD-03.01 Sunken cornerPlaster, paint
BD-03.04 Artificial foliagePlaster, paint
BD-03.06 Perfume cataloguePlaster, paint
gallery
Work, products, presets. A is six fragment tiles, each captioned with a number and a name. B is wide tiles, two per row, for the cast and the paint, or for landscape work.
sections/gallery.htmlVariant A
Fragments
Six pieces, one break each.
The gallery tiles. Broken casts with paint poured into the break. Use them for work, products or presets; the caption carries the number and the name.
Variant B
Wide
The cast and the paint.
pricing
Plans. A is three plans with the middle one chosen, sunk into the niche and carrying the painted key. B is two plans, for a simpler offer. The chosen plan is always recessed; only it gets the primary key.
sections/pricing.htmlVariant A
Editions
Fifty, then retired.
Every look is sold fifty times and then archived for good. Buy one, or bring the rack home in threes and fives.
One look
$125one of fifty
- Plinth, the whole folder
- Plinth Cast, both cuts
- Twelve casts, the film, the rules
- Use on one site
BD-03 PlinthEdition 12 of 50
Three looks
$300$100 a look
- Any three from the rack
- Three original faces
- Three films, thirty-six casts
- Use on three sites
BD-03 + 2 Any threeChosen
Five looks
$425$85 a look
- Any five from the rack
- Five original faces
- Five films, sixty casts
- Use on five sites
BD-03 + 4 Any fiveThe best price
Variant B
Editions
One, or three.
One look
$125one of fifty
- Plinth, the whole folder
- Plinth Cast, both cuts
- Use on one site
BD-03 PlinthEdition 12 of 50
Three looks
$300$100 a look
- Any three from the rack
- Three original faces
- Use on three sites
BD-03 + 2 Any threeChosen
testimonial
One voice. A is one quote on a cast slab, offset to the right, never centred. B is three quote cards in a row.
sections/testimonial.htmlVariant A
From across the room it is a display piece. Up close you see the chip, and that is the part you keep.
Variant B
It looks like a gallery from across the room.
The niche is the whole trick. Nothing is a colour.
Claude stopped and asked instead of inventing. That sold me.
faq
Questions. A is the split with an accordion: the open item sinks into the niche, the rest wait on the floor. B is a two-column grid with every answer visible.
sections/faq.htmlVariant A
Questions
Asked before.
The open one sits in the niche. Everything else waits on the floor.
What do I get for $125?
One folder. The rules Claude obeys, the stylesheet that is the law, the sections and components it composes from, Plinth Cast in two cuts, twelve casts, the film, the kit sheet and this demo. One licence key, one site.
What happens when the fifty are gone?
Plinth is retired and never reissued. The fifty sites that wear it keep wearing it. A new look takes its place on the rack.
Can I change the orange?
No. One accent, one hit per screen, the paint in the cast. If you need a second colour you need a different look.
Can I use Plinth Cast on something else?
No. It is bundled with the look and licensed for sites that wear it. It is never sold apart.
Does it come in dark?
Light is native. Dark is the same room after hours, deep green plaster, on one attribute. The toggle in the bar shows you.
Variant B
Questions
Asked before.
- What do I get?
- One folder: the rules, the stylesheet, the sections and components, Plinth Cast, twelve casts, the film, the kit sheet and the demo.
- When the fifty are gone?
- Plinth is retired and never reissued. The fifty sites keep wearing it.
- Can I change the orange?
- No. One accent, one hit per screen, the paint in the cast.
- Does it come in dark?
- Light is native. Dark is the same room after hours, on one attribute.
cta
The ask. A is a wide cast with the paint in it and one key. B is a compact bar for the foot of an inner page. The key is the one hit on the screen.
sections/cta.htmlVariant A
Edition 12 of 50
Take the piece home.
One folder, one prompt, one site that looks like nothing else on the rack.
Variant B
Variant A
Variant B
contact-form
Write to us. A is the split with the fields set into niches on the right and Send as the hit. B is the form in a cast card, for a contact page on its own.
sections/contact-form.htmlVariant A
Write to us
Ask for a key.
Tell us the site it is for. We send the key and the folder the same day.
Variant B
Tokens
73 custom properties. Nothing else exists.
Native values first; the dark scheme overrides only the colour tokens. The same list is in theme.json.
| Token | Group | Native | dark |
|---|---|---|---|
| --bg | canvas | #EFECE6 | #1B211E |
| --surface | canvas | #F7F5F0 | #232A26 |
| --surface-2 | canvas | #F2EFE9 | #2A322D |
| --text | canvas | #1C1C1A | #E9ECE8 |
| --text-2 | canvas | rgba(28, 28, 26, 0.66) | rgba(233, 236, 232, 0.66) |
| --text-3 | canvas | rgba(28, 28, 26, 0.44) | rgba(233, 236, 232, 0.44) |
| --line | canvas | rgba(28, 28, 26, 0.10) | rgba(233, 236, 232, 0.12) |
| --accent | accent | #C25A21 | #E07A42 |
| --accent-ink | accent | #FFFFFF | #1B1611 |
| --accent-line | other | rgba(194, 90, 33, 0.55) | rgba(224, 122, 66, 0.55) |
| --plaster | other | #F4F2ED | #28302B |
| --plaster-shade | other | #DDD9D1 | #1F2622 |
| --plaster-deep | other | #C9C5BD | #151A17 |
| --mottle | other | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='3… | |
| --cast | other | file assets/cast.webp | |
| --cast-ratio | other | 4 / 3 | |
| --smear | other | file assets/smear.webp | |
| --niche-floor | other | #E6E2DA | #171C19 |
| --niche-ink | other | 70, 64, 54 | 0, 0, 0 |
| --niche-lit | other | 255, 255, 255 | 233, 236, 232 |
| --niche-lip | other | 0.55 | 0.12 |
| --grain | aura | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='2… | |
| --light | aura | radial-gradient(90% 60% at 18% -10%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%… | radial-gradient(90% 60% at 18% -10%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%… |
| --pattern | aura | linear-gradient(180deg, var(--plaster), var(--plaster-shade)) | |
| --ok | status | #6F9A7F | |
| --warn | status | #C9A64B | |
| --err | status | #B9553F | |
| --raised-bg | materials | var(--mottle), var(--plaster) | |
| --raised-shadow | materials | inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(120, 115, 105, 0.18), inset -1… | inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.5), -8px 14px 28px… |
| --raised-shadow-up | materials | inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(120, 115, 105, 0.18), inset -1… | inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.5), -12px 22px 40p… |
| --raised-hit | materials | inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(120, 115, 105, 0.18), 0 0 0 1.… | inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1.5px va… |
| --recessed-shadow | materials | inset 0 1px 0 rgba(var(--niche-ink), 0.34), inset 1px 0 0 rgba(var(--niche-ink), 0.26), in… | inset 0 1px 0 rgba(var(--niche-ink), 0.7), inset 1px 0 0 rgba(var(--niche-ink), 0.55), ins… |
| --recessed-focus | materials | inset 0 1px 0 rgba(var(--niche-ink), 0.34), inset 1px 0 0 rgba(var(--niche-ink), 0.26), in… | inset 0 1px 0 rgba(var(--niche-ink), 0.7), inset 1px 0 0 rgba(var(--niche-ink), 0.55), ins… |
| --scrim | materials | rgba(28, 28, 26, 0.42) | rgba(0, 0, 0, 0.6) |
| --chevron | materials | url("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-display | type | "Plinth Cast", "Jost", "Helvetica Neue", Arial, sans-serif | |
| --font-body | type | "IBM Plex Mono", "SFMono-Regular", Menlo, monospace | |
| --display-weight | type | 200 | |
| --track-display | type | 0.14em | |
| --track-caps | type | 0.22em | |
| --track-mark | type | 0.42em | |
| --text-xs | type | 0.8125rem | |
| --text-sm | type | 0.9375rem | |
| --text-md | type | 1.0625rem | |
| --text-lg | type | 1.25rem | |
| --text-xl | type | 1.75rem | |
| --text-h2 | type | clamp(2.1rem, 4vw, 3.4rem) | |
| --text-display | type | clamp(3rem, 6.4vw, 6.2rem) | |
| --leading-tight | type | 1.06 | |
| --leading-body | type | 1.62 | |
| --radius | shape | 10px | |
| --radius-sm | shape | 6px | |
| --radius-pill | shape | 999px | |
| --rule | shape | 1px | |
| --space-1 | space | 0.25rem | |
| --space-2 | space | 0.5rem | |
| --space-3 | space | 0.75rem | |
| --space-4 | space | 1rem | |
| --space-5 | space | 1.5rem | |
| --space-6 | space | 2rem | |
| --space-7 | space | 3rem | |
| --space-8 | space | 5rem | |
| --space-9 | space | 7rem | |
| --wrap | space | 1240px | |
| --control | space | 48px | |
| --control-sm | space | 36px | |
| --icon | space | 22px | |
| --dur-fast | motion | 160ms | |
| --dur | motion | 420ms | |
| --dur-slow | motion | 900ms | |
| --ease | motion | cubic-bezier(0.2, 0.8, 0.2, 1) | |
| --ease-settle | motion | cubic-bezier(0.3, 0.9, 0.3, 1) | |
| --reveal-y | motion | -10px |