The sheet
The default card, at rest on the room.
RestOpen
Look 05, the kit sheet
Drafting Room
Nothing is final. 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 room, the ink, the sheet, and three status colours.
Canvas and accent
--bg --surface --surface-2 --text --accent--bg
#FFF500--surface
#FFFFFF--surface-2
#FFFBD6--text
#060606--accent
#060606--accent-ink
#FFF500--accent-line
rgba(6, 6, 6, 0.3)--ok
#21AB3F--warn
#FD9800--err
#D8321EThe room
Decoration only. A hairline pattern for card media and the grain over everything. The cropped word and the film are the look's pictures and neither is a token. Never behind text, and never a photograph.
--pattern
repeating-linear-gradient(90deg, rgba(6, 6, 6, 0) 0 22px, rgba(6, 6, 6, 0.05) 22px 23px)--grain
inlinedType
Drafting Block for display. Instrument Sans for everything else.
Drafting Block 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
Nothing is final.
.bl-h2
Bigger than the page.
.bl-price
$125one of fifty
.bl-lede
A look for sites built with Claude Code. One yellow, one black, the name set so large the frame cuts it, and one ink block per screen.
.bl-body
Raised is a white sheet laid on the room, with its own thickness and its own shadow. Recessed is a cut, a window back through to the yellow. There is no third material, and state is depth, never a colour.
.bl-eyebrow
Look 05, an edition of fifty
.bl-meta
.bl-labelEmail
Materials
Two. Raised is the sheet and can be pressed. Recessed is the cut.
.bl-raised
.bl-recessed
Icons
12 drawings, in the face's own construction.
24-unit grid, one stroke at 3 with butt caps and mitred joins, one corner radius, solid ink blocks where a drawing needs mass, currentColor. Outline is the sheet, solid is the ink. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.
Motion
Laid on.
Everything arrives and stops dead. Headlines are laid on word by word, each its own strip slid in from the left (.bl-words). Blocks are laid on (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). The sheet beside the headline slides in from the right and settles flat (.bl-lay). Sheets lift on hover (.bl-hover-lift). Keys lift, then travel their own thickness when pressed. Reduced motion lands everything instantly.
Word rise and reveal
.bl-reveal .bl-words .bl-rise .bl-rise--x .bl-rise--late .bl-lay .bl-hover-liftReplay
Nothing is final.
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
Buttons are keys. The default key is a white sheet with its own thickness. The primary is the black key, the one hit per screen. The inverse key lives only on ink. Hover lifts a key, pressed travels the thickness and sinks it, loading swaps the label for a spinner.
components/buttons.htmlinputs
Every field is a cut: a dark wall along the top, a graded floor, a bright lower lip. On the room a cut is deeper yellow; inside a sheet it shows the yellow through. Focus is a heavy ring in the text colour, invalid is the same ring in the error colour. The checkbox is a small cut that becomes a black key when checked.
components/inputs.htmlThat address is missing its ending.
It is in the receipt.
cards
A card is a sheet with three parts: media, body, foot. The media carries the pattern and one icon, never a photograph behind text. Hover lifts the sheet further. Selected sinks the whole card into the cut.
components/cards.htmlbadges
Badges are small flat chips with a square dot. The dot is the only place the three status colours appear, besides toasts and field errors.
components/badges.html
Edition 07 of 50
Licensed
Nine left
Archived
tabs
Tabs sit in one sheet. The active tab is a cut in that sheet. Hover only darkens the label.
components/tabs.htmlaccordion
Each question is a sheet. The open one sinks into the cut, and the upright bar of its plus lays flat.
components/accordion.htmlOpen
The open item is recessed. State is depth, never a colour.
Closed
A closed item is a sheet at rest.
modal
A modal is one sheet over a scrim. The title is in Drafting Block, the actions sit right, and the primary action is the one key. The static modifier renders it inline.
components/modal.htmlTake edition 07?
It is one of fifty. Once it is yours the count drops by one for everybody else.
toast
A toast is a small sheet with a square dot. The dot carries the status. The static modifier renders it inline.
components/toast.htmlLook added to the project.
Licence accepted.
Nine copies left.
That key has been used.
table
A table sits in one cut. The head closes with the heavy rule, rows divide with the hairline. Hover tints a row, selected sinks it.
components/table.html| Plan | Looks | Each | Total |
|---|---|---|---|
| One look | 1 | $125 | $125 |
| Hover | 3 | $100 | $300 |
| Selected | 5 | $85 | $425 |
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 word and the sheet: the headline hung left, the film of the lifting sheet beside it, the meta row under a heavy rule. B is the word alone, set larger, for inner pages.
sections/hero.htmlVariant A
Look 05 from Bandana
Nothing is final.
One yellow, one black, one word bigger than the page. Drafting Room is a locked look for sites built with Claude Code: one folder, one prompt, fifty copies.
Variant B
Look 05 from Bandana
Bigger than the page.
No film, no sheet, only the word. Use this hero on inner pages, where the headline is the whole opening screen.
feature-grid
Three or six things. A is three numbered sheets, each with the part itself drawn in the middle. B is a numbered two-column list with one icon each.
sections/feature-grid.htmlVariant A
The parts
Three things, drawn for it.
A look is not a theme. Everything in this folder was made for this folder, and nothing in it ships anywhere else.
One
face
01Rg37
Drafting Block. Condensed, super-heavy, built from rectangles and one radius. Two cuts, ninety-nine glyphs each, bundled with the look and sold nowhere.
Two
materials
02The keyThe cut
The sheet and the cut. Raised is a sheet laid on the room. Recessed is a window through it. Anything pressed or chosen sinks. There is no third material.
Eleven
sections
03Two variants each. Nav, hero, features, bento, gallery, pricing, testimonial, questions, the ask, contact and footer. Every state of every component drawn.
Variant B
The parts
Six things, in order.
The numbered list, for when there are six and each needs a sentence. One icon each, never the same one twice.
The sheet
Raised. A white sheet laid on the room, with its own thickness and its own shadow.
The cut
Recessed. A window through to the yellow. Fields, the chosen plan, the open question.
The key
The one black block on the screen. Pressing it travels the sheet's thickness, then it sinks.
The face
Drafting Block, two cuts, for display only. Headlines, the mark, prices, big numbers.
Laid on
The motion. Words and sheets slide in and stop dead. Nothing floats, nothing bounces.
Day and night
Both schemes ship. Only colour tokens change, and the yellow moves from the room to the key.
bento
The parts, unevenly. A is the ink tile with the word cut by its edge, plus the schemes tile and the rules tile; the ink tile is the hit on that screen. B is three even sheets with an icon each and no ink.
sections/bento.htmlVariant A
The idea
Bigger than the page.
One yellow, one black, and the name set so large the frame cuts it. That is the whole look. Everything else is a sheet laid on top.
The tile
The record sleeve. The rack card, the home page and the detail page all show this, and it reads at three hundred pixels wide.
Both schemes
DayNight
Yellow is native. Dark swaps the room for black and hands the yellow to the one key. Only colour tokens change.
The rules
- Tokens only. Never a hex, a pixel or a font name in a page.
- Two materials. The sheet and the cut, nothing flat.
- State is depth. Pressed, chosen and current sink.
Fourteen more in CLAUDE.md, the file that is the product.
Variant B
The idea
Three even sheets.
The even bento, for three things of the same weight. No ink tile, so the screen's key can live elsewhere.
The crop
The name is set bigger than whatever holds it, and the edge cuts it. Once per page.
The stack
Everything that is not the room is a sheet laid on it. Sheets may overlap. They never blur.
The rule
One heavy rule, three pixels, in the text colour. It closes a block. The hairline divides inside one.
gallery
Work, products, presets. A is six portrait sheets with one letter each, sized to the sheet and cut by it. B is wide sheets, two to a row.
sections/gallery.htmlVariant A
The face
Six letters, cut.
Drafting Block is built from rectangles and one radius, and it is drawn to be cropped. Every letter of the name, set bigger than its sheet.
Variant B
The face
Four more, wide.
Wide sheets, two to a row, for landscape work. The letter still runs past the edge.
pricing
Plans. A is three plans with the middle one chosen, which sinks into the cut and carries the one key. B is two plans.
sections/pricing.htmlVariant A
Editions
Fifty copies. Then none.
Every look sells fifty times and is archived for good. One look is $125. Three are $300. Five are $425. There is no free tier.
One look Edition of 50
$125 one
- Drafting Room, the whole folder
- CLAUDE.md, the file that is the product
- Drafting Block, both cuts, bundled
- Every section, every state, both schemes
- A second look
Three looks Chosen
$300 three
- Drafting Room and any two on the rack
- Three folders, three prompts, three faces
- Switch a site's look with one attribute
- Every section, every state, both schemes
- $100 a look instead of $125
Five looks Edition of 50
$425 five
- Drafting Room and any four on the rack
- Five folders, five prompts, five faces
- Switch a site's look with one attribute
- Every section, every state, both schemes
- $85 a look instead of $125
Variant B
Editions
One, or three.
Two plans, for a page that does not need the third. The chosen one still sinks, and still carries the key.
testimonial
One voice. A is one quote on one big sheet, hung left, in Drafting Block. B is three quote cards.
sections/testimonial.htmlVariant A
If the word fits on the page, make the word bigger.
Variant B
Never a hex, a pixel or a font name in a page.
Pressed, chosen and current sink. Nothing changes colour.
One black block on a screen. Find it, then stop adding.
faq
Questions. A is the split with the accordion; the open question sinks into the cut. B is a two-column grid with every answer visible.
sections/faq.htmlVariant A
Questions
Asked before buying.
The short version: one folder, one prompt, and a file of rules your Claude does not get to argue with.
What is in the folder?
CLAUDE.md, which is the product. The stylesheet and the motion presets. Drafting Block in two cuts. Eleven sections in two variants each, ten components with every state drawn, twelve icons, the tile, the hero film, the kit sheet and this page.
How do I put it on a site?
Run npx bandana add drafting-room --key with your licence, then paste the starter prompt into Claude Code. It reads the rules first and rebuilds every screen from the fragments.
What happens after fifty copies?
The look is archived and never sold again. Your copy keeps working. A new look takes its place on the rack.
Can I change the yellow?
No. One yellow and one black is the look. Both schemes ship, and the file tells your Claude to stop and say so when it wants a colour that does not exist.
Is the typeface mine to use?
On any site wearing Drafting Room, yes. It is never sold apart from the look and never redistributed. It is for display only: headlines, the mark, prices.
Variant B
Questions
All four, open.
The grid, for a short list where nothing should hide behind a click.
What is in the folder?
The rules, the stylesheet, the face, eleven sections, ten components, twelve icons, the tile, the film, the kit sheet and the demo.
How do I put it on a site?
One command adds the folder. One prompt tells Claude Code to read the rules and rebuild every screen from the fragments.
What happens after fifty?
The look is archived and never sold again. Your copy keeps working.
Can I change the yellow?
No. One yellow and one black is the look. Both schemes ship.
cta
The ask. A is one big ink block with its key inverted; the block is the hit. B is a compact ink bar.
sections/cta.htmlVariant A
The ask
Take one. There are fifty.
$125 for the folder, the face and the file of rules. When the fiftieth copy goes, the look goes with it.
Variant B
Variant A
Variant B
contact-form
Write to us. A is the split, with the fields cut straight into the room and Send as the one key. B is the form on a sheet, where each field cuts back through to the yellow.
sections/contact-form.htmlVariant A
Write to us
Ask before you buy.
A question about the licence, the face, or putting the look on something unusual. A person answers, usually the same day.
Variant B
Write to us
A short note.
The form on a sheet, for pages where the form is the only thing to do. Inside a sheet, every field is a cut back through to the yellow.
Tokens
76 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 | #FFF500 | #060606 |
| --surface | canvas | #FFFFFF | #161616 |
| --surface-2 | canvas | #FFFBD6 | #1F1F1F |
| --text | canvas | #060606 | #F4F4F0 |
| --text-2 | canvas | rgba(6, 6, 6, 0.66) | rgba(244, 244, 240, 0.66) |
| --text-3 | canvas | rgba(6, 6, 6, 0.42) | rgba(244, 244, 240, 0.42) |
| --line | canvas | rgba(6, 6, 6, 0.14) | rgba(244, 244, 240, 0.14) |
| --accent | accent | #060606 | #FFF500 |
| --accent-ink | accent | #FFF500 | #060606 |
| --accent-line | accent | rgba(6, 6, 6, 0.3) | rgba(255, 245, 0, 0.4) |
| --day | other | #FFF500 | |
| --day-ink | other | #060606 | |
| --night | other | #060606 | |
| --night-ink | other | #FFF500 | |
| --grain-opacity | other | 0.07 | 0.1 |
| --key-bg | other | linear-gradient(180deg, #222222 0%, #0B0B0B 45%, #060606 100%) | linear-gradient(180deg, #FFFA70 0%, #FFF500 45%, #EFE500 100%) |
| --key-ink | other | var(--accent-ink) | |
| --key-shadow | other | inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0… | inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 0 #D9D000, 0 2px 0 #C2BA00, 0 3px 0 #A8A100… |
| --key-shadow-up | other | inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0… | inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 0 #D9D000, 0 2px 0 #C2BA00, 0 3px 0 #A8A100… |
| --key-inv-bg | other | linear-gradient(180deg, #FFFA70 0%, #FFF500 45%, #EFE500 100%) | linear-gradient(180deg, #222222 0%, #0B0B0B 45%, #060606 100%) |
| --key-inv-ink | other | #060606 | #FFF500 |
| --key-inv-shadow | other | inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 0 #D9D000, 0 2px 0 #C2BA00, 0 3px 0 #A8A100… | inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 0 #1C1C1C, 0 2px 0 #141414, 0 3px 0 #0C0C0C… |
| --key-inv-shadow-up | other | inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 0 #D9D000, 0 2px 0 #C2BA00, 0 3px 0 #A8A100… | inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 #1C1C1C, 0 2px 0 #141414, 0 3px 0 #0C0C0C… |
| --sunk | other | inset 0 2px 5px rgba(6, 6, 6, 0.3), inset 0 0 0 1px rgba(6, 6, 6, 0.08) | inset 0 2px 6px #000000, inset 0 0 0 1px rgba(255, 255, 255, 0.07) |
| --gutter | other | clamp(1rem, 3vw, 2.5rem) | |
| --pattern | aura | repeating-linear-gradient(90deg, rgba(6, 6, 6, 0) 0 22px, rgba(6, 6, 6, 0.05) 22px 23px) | repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, 0.05) … |
| --grain | aura | url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='2… | |
| --ok | status | #21AB3F | |
| --warn | status | #FD9800 | |
| --err | status | #D8321E | |
| --raised-bg | materials | linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #F5F5EF 100%) | linear-gradient(180deg, #202020 0%, #181818 50%, #121212 100%) |
| --raised-line | materials | rgba(6, 6, 6, 0.10) | rgba(255, 255, 255, 0.10) |
| --raised-shadow | materials | inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(6, 6, 6, 0.05), 0 1px 0 #DEDED6, 0 2px 0 #D2D2C… | inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 #10101… |
| --raised-shadow-up | materials | inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(6, 6, 6, 0.05), 0 1px 0 #DEDED6, 0 2px 0 #D2D2C… | inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 #10101… |
| --recessed-bg | materials | linear-gradient(180deg, #D2C900 0%, #E4DA00 16%, #EDE300 42%) | linear-gradient(180deg, #000000 0%, #050505 35%, #0E0E0E 100%) |
| --recessed-line | materials | rgba(6, 6, 6, 0.16) | rgba(255, 255, 255, 0.16) |
| --recessed-shadow | materials | inset 0 3px 0 rgba(6, 6, 6, 0.2), inset 0 9px 12px -4px rgba(6, 6, 6, 0.34), inset 0 0 0 1… | inset 0 3px 0 #000000, inset 0 10px 14px -4px #000000, inset 0 -1px 0 rgba(255, 255, 255, … |
| --scrim | materials | rgba(6, 6, 6, 0.6) | rgba(0, 0, 0, 0.7) |
| --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 | "Drafting Block", Impact, "Arial Narrow", sans-serif | |
| --font-body | type | "Instrument Sans", "Helvetica Neue", Arial, sans-serif | |
| --display-stretch | type | 100% | |
| --display-weight | type | 900 | |
| --text-xs | type | 0.75rem | |
| --text-sm | type | 0.875rem | |
| --text-md | type | 1.0625rem | |
| --text-lg | type | 1.25rem | |
| --text-xl | type | 1.625rem | |
| --text-h2 | type | clamp(3rem, 7vw, 6.5rem) | |
| --text-display | type | clamp(4.25rem, 13.5vw, 13rem) | |
| --track-caps | type | 0.16em | |
| --leading-tight | type | 0.86 | |
| --leading-body | type | 1.5 | |
| --radius | shape | 18px | |
| --radius-sm | shape | 10px | |
| --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 | 4.5rem | |
| --space-9 | space | 7rem | |
| --wrap | space | 1280px | |
| --control | space | 50px | |
| --control-sm | space | 38px | |
| --icon | space | 22px | |
| --dur-fast | motion | 140ms | |
| --dur | motion | 380ms | |
| --dur-slow | motion | 760ms | |
| --ease | motion | cubic-bezier(0.2, 0.8, 0.2, 1) | |
| --ease-lay | motion | cubic-bezier(0.32, 1, 0.36, 1) | |
| --reveal-y | motion | 16px |