Ground Control kit sheet

Look 04, the kit sheet

Ground Control

Nothing in the red. 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 meter light, the desk, and three status lamps.

Canvas and accent

--bg --surface --surface-2 --text --accent
--bg#070A09
--surface#121A16
--surface-2#0C110F
--text#D3E9DA
--accent#7EDBA5
--accent-ink#071A11
--ok#7EDBA5
--warn#E3C77A
--err#E08080

The desk

Decoration only. The haze and the grain over everything, the pool of meter light under a key, the lip and the deep green. The forest is a film and appears in hero A alone. Never behind text.

--patternlinear-gradient(180deg, #0E1613, #070A09)
--poolradial-gradient(50% 40% at 50% 100%, rgba(126, 219, 165, 0.30), rgba(126, 219, 165, 0))
--graininlined

Type

Control Meter for display. IBM Plex Sans 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

Nothing in the red.

.bl-h2

Every level, set once.

.bl-price

$125one of fifty

.bl-lede

A look for sites built with Claude Code. A black desk at night, a forest moving above it, rubber keys and the slots they press into, one cold green hit per screen.

.bl-body

Raised is soft-touch rubber on a machined lip. Recessed is the slot it presses into. There is no third material, and state is depth, never a colour.

.bl-eyebrow

Look 04, an edition of fifty

.bl-meta

Edition 07 of 50, archived when gone

.bl-label

Email

Materials

Two. Raised is rubber and can be pressed. Recessed is the slot.

.bl-raised
.bl-recessed

Icons

12 legends. None is a variation of another.

24-unit grid, one two-unit stroke, round caps, currentColor, no fill: the symbol printed beside a control. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.

cans
cue
fader
jack
knob
mic
needle
pad
patch
reel
sub
wave

Motion

Needle ballistics.

Everything arrives the way a meter answers a hit: fast attack, one overshoot, a damped settle. Headlines kick in word by word (.bl-words). Blocks rise into place (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). The needle swings and settles on its own (.bl-meter__needle). The lamp breathes (.bl-lamp-breathe). 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-hover-lift .bl-lamp-breathe

Replay

Nothing in the red.

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 rubber keys on a machined lip. The primary carries the lit green edge and is the one hit per screen. Hover lifts the key and leaks a little light from the slot; pressed sinks it into the slot. Loading swaps the label for a spinner.

components/buttons.html

inputs

Fields are slots. Focus brings the green up inside the slot from the bottom edge; invalid draws a red line along it; disabled dims. The checkbox is a small slot with a lamp in it.

components/inputs.html

That does not look like an email.

No mailing list. We only write back.

cards

Cards are raised modules with recessed media. Media is the pool, the meter or an icon on the pattern, never a photograph. Hover lifts; selected sinks the whole card into the desk.

components/cards.html

The meter

At rest. Lifts on hover.

Edition 07

The reel

Hover, drawn.

Live

The low end

Selected, recessed.

Chosen

badges

Badges are small slots with a lamp. The plain badge is a dim lamp; ok, warn and err light it. They are the only place the status colours appear besides toasts and field errors.

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

tabs

Tabs are keys in a raised strip. The active tab is recessed. Hover brightens, focus rings in the accent line, disabled dims.

components/tabs.html

accordion

The accordion is a stack of raised keys. The open item sinks into a well and its plus becomes a minus.

components/accordion.html
Is it really mine?

Fifty sites get to wear Ground Control. 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 forest?

Something has to be moving above the desk.

modal

The modal is a raised module over a scrim. The static modifier renders it inline on the sheet, in a well with the pool behind it.

components/modal.html

toast

Toasts are small raised keys with a lamp. Plain, ok, warn and err. The static modifier renders them inline.

components/toast.html
Saved.
Ground Control installed.Open
Twelve copies left.

table

The table is a channel list in a well. Numbers are set in Control Meter Regular and ranged right. Hover brightens a row; selected raises it out of the well.

components/table.html
LookStatusCopiesLeft
Aura GlowEdition open5043
RadioEdition open5050
Ground ControlTwelve 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 is the module bar: a floating rubber strip with the lamp beside the wordmark, links, the Lights toggle drawn as a slot and one plain key. B is the flat bar with a hairline for pages where the hero carries its own chrome. The current link is recessed.

sections/nav.html

Variant A

Ground Control Get the look

Variant B

Ground Control

hero

The opening screen. A is the film: the top of the forest at night, smoke moving through the crowns, looping behind the headline, with the drawn meter and three stats on a module rail beside it. B is the split hero for inner pages: headline left, the meter module right, no film. Headlines use .bl-words so they kick in word by word.

sections/hero.html

Variant A

Look 04 from Bandana

Bass you can see.

A black desk at night, every level set, one meter lit. Ground Control is a locked look for sites built with Claude Code: one folder, one prompt, fifty copies.

Get the look, $125 See the parts

Variant B

Look 04, inner page

Nothing in the red.

The split hero. Headline on the left, the meter on the right, one lit key. For pricing, about and work pages.

Get the look, $125 See the parts

feature-grid

Three or six things. A is the icon grid: modules on the desk, each with an icon in a recessed well, a number in Control Meter, a title and a paragraph. B is the numbered two-column list for denser pages, no icons.

sections/feature-grid.html

Variant A

The parts

Every level, set once.

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

  • 01

    Two materials

    Soft-touch rubber on a machined lip, and the slot it presses into. Buttons are raised, fields are recessed, and anything selected sinks. State is depth, never a colour.

  • 02

    One meter light

    The accent is the meter's green, and it lands once per screen, on the primary key. Nothing else on the page is lit.

  • 03

    Control Meter

    An original display face, condensed and rounded like a console legend, drawn from scratch and bundled only. Headlines, prices, big numbers. Never a paragraph.

  • 04

    Twelve legends

    The symbols printed beside a control: fader, needle, knob, jack, pad, reel, sub, patch, cue, wave, mic, cans. One drawing each, none a variation of another.

  • 05

    Needle ballistics

    Everything arrives the way a meter answers a hit: fast attack, one overshoot, a damped settle. Presets only. Nothing is animated in a page.

  • 06

    Both schemes

    Native is the desk at night. Lights on is the same desk with the room lit. Only the colour tokens change; nothing else does.

Variant B

The rules

Six things it will not do.

  1. 01

    A second accent

    One green, one hit per screen. Status colours live on badges, toasts and field errors and nowhere else.

  2. 02

    A third material

    Rubber that is raised, a slot that is recessed. No flat, no outlined, no glass.

  3. 03

    A paragraph in Control Meter

    The legend face is for headlines, prices and big numbers. Reading is IBM Plex Sans.

  4. 04

    The forest behind text

    The film sits behind the headline in hero A and nowhere else. Body copy never sits on it.

  5. 05

    A centred page

    Headlines sit left on the desk. Nothing is centred by default.

  6. 06

    Motion written in a page

    Presets only. The needle ease is the look's and it lives in motion.css.

bento

The parts, unevenly. A is the wide materials tile plus the legend face, the meter, the pool and the three status lamps. B is three even tiles, each with the pool as art, for a lighter page.

sections/bento.html

Variant A

The rules, made visible

Raised, recessed, and nothing else.

Rubber and the slot

The key has a grain, a lip and a shadow. Press it and it sinks into the slot. Every field is a slot too, and the green comes up inside it on focus.

AaControl Meter, two cuts

The legend face

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

The meter

Drawn in the theme, needle live. One per page, never behind text.

The pool

The one gradient. Hero and CTA backdrops, tile art, card media. Never behind a paragraph.

Edition open Twelve left Archived

Status, in three lamps

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

Variant B

Three tiles

What the folder holds.

The file

CLAUDE.md. Nine sections, numbered rules, page recipes, a starter prompt.

04Ground Control

The law

theme.css and motion.css. Every token, every class, both schemes.

The proof

Eleven sections, ten components, the kit sheet and this demo.

Variant A

Variant B

pricing

Plans. A is three plans with the middle one chosen, which is recessed into the desk and carries the one lit key on the screen. B is two plans.

sections/pricing.html

Variant A

Editions

Fifty copies, then gone.

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

One look

$125Ground Control

  • 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

One, or three.

One look

$125Ground Control

  • The whole folder, every part
  • Control Meter, both cuts
  • 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
Get three

testimonial

One voice. A is one big quote on a module, set in Control Meter Bold, offset left. B is three quote cards in a row.

sections/testimonial.html

Variant A

It refuses a second accent. That is the whole trick.

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

Variant B

Buttons are raised. Fields are recessed. That is the whole material system.

Rule three

Display face for display only. Never a paragraph in Control Meter.

Rule five

If a part you need does not exist, stop and say so.

Rule one

faq

Questions. A is the split: the head on the left, an accordion of raised keys on the right, the open one sunk into a well. B is a two-column grid with every answer visible.

sections/faq.html

Variant A

Questions

Before you buy.

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 change the green?
No. The accent is the meter light and it 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 Ground Control, as many as you build. It is never sold apart and never redistributed on its own.
Is there a light version?
Lights on is the same desk with the room lit. Set data-scheme to light, or to auto to follow the system. Only the colour tokens change.

Variant B

Questions

All of them, open.

What do I actually get?

One folder: the file, the two stylesheets, the face, the sections, the components, the icons, the tile, the film and the kit sheet.

Does it work on a site I already have?

Yes. Put the folder in, set data-look, link the stylesheets, paste the prompt.

Can I change the green?

No. If you want another colour, you want another look.

What happens after fifty?

The look is archived. The fifty owners keep it forever.

Is the typeface mine?

Licensed for sites wearing Ground Control, never sold apart.

Is there a light version?

Lights on. Set data-scheme to light, or auto to follow the system.

cta

The ask. A is the band: a module with the pool rising from the bottom, headline, lede and the one lit key. B is the compact bar for the end of an inner page.

sections/cta.html

Variant A

Look 04

Set the levels once.

Fifty copies. When they are gone, Ground Control is archived and the rack moves on.

Get the look, $125

Variant B

Fifty copies. Then it is archived.

Get the look, $125

Variant A

Variant B

Ground Control, Look 04. Bandana, 2026. Nothing in the red.

contact-form

Write to us. A is the split, head on the left and the fields on the right, every field a slot. B is the whole form in a raised module for a contact page of its own.

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

Ask before you buy.

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#070A09#E3E6E1
--surfacecanvas#121A16#EEF0EC
--surface-2canvas#0C110F#D6DAD4
--textcanvas#D3E9DA#10201A
--text-2canvasrgba(211, 233, 218, 0.62)rgba(16, 32, 26, 0.66)
--text-3canvasrgba(211, 233, 218, 0.38)rgba(16, 32, 26, 0.42)
--linecanvasrgba(211, 233, 218, 0.10)rgba(16, 32, 26, 0.10)
--accentaccent#7EDBA5#2F8A5E
--accent-inkaccent#071A11#EAF7EF
--accent-lineotherrgba(126, 219, 165, 0.42)rgba(47, 138, 94, 0.45)
--accent-glowotherrgba(126, 219, 165, 0.28)rgba(47, 138, 94, 0.22)
--deepother#3E8C68#3E8C68
--lipother#6F7D75#8C948E
--lip-darkother#2A3330#B4BAB5
--lip-lineotherrgba(111, 125, 117, 0.26)rgba(16, 32, 26, 0.18)
--hazeotherradial-gradient(60% 50% at 45% 62%, rgba(62, 140, 104, 0.22), rgba(62, 140, 104, 0))radial-gradient(60% 50% at 45% 62%, rgba(62, 140, 104, 0.12), rgba(62, 140, 104, 0))
--grain-opacityother0.070.05
--hero-textother#D3E9DA
--hero-text-2otherrgba(211, 233, 218, 0.66)
--hero-scrimotherlinear-gradient(180deg, rgba(7, 10, 9, 0.10) 0%, rgba(7, 10, 9, 0.35) 55%, rgba(7, 10, 9, …
--module-bgotherlinear-gradient(180deg, #141C18, #0E1411)linear-gradient(180deg, #F2F4F0, #E6E9E4)
--module-shadowotherinset 0 1px 0 rgba(111, 125, 117, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.8), 0 30px 60px -3…inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(16, 32, 26, 0.16), 0 30px 60px -30px rgba(16, 3…
--dialother#0B1410#101A15
--dial-lightotherradial-gradient(100% 110% at 30% 105%, #7EDBA5 0%, #3E8C68 28%, #1B3A2F 62%, #0C1512 100%)radial-gradient(100% 110% at 30% 105%, #7EDBA5 0%, #3E8C68 28%, #1B3A2F 62%, #0C1512 100%)
--dial-shadeotherlinear-gradient(90deg, rgba(5, 8, 7, 0) 35%, rgba(5, 8, 7, 0.82) 100%)
--dial-inkother#D3E9DA#D3E9DA
--patternauralinear-gradient(180deg, #0E1613, #070A09)linear-gradient(180deg, #D6DAD4, #E3E6E1)
--poolauraradial-gradient(50% 40% at 50% 100%, rgba(126, 219, 165, 0.30), rgba(126, 219, 165, 0))radial-gradient(50% 40% at 50% 100%, rgba(47, 138, 94, 0.22), rgba(47, 138, 94, 0))
--grainauraurl("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='1…
--okstatus#7EDBA5#2F8A5E
--warnstatus#E3C77A#9A7A1E
--errstatus#E08080#B54A4A
--raised-bgmaterialslinear-gradient(180deg, #26302B 0%, #161D19 48%, #10161300 48.5%, #0F1512 100%), #121815linear-gradient(180deg, #FBFCFA 0%, #ECEFEA 48%, #E6E9E400 48.5%, #DFE3DE 100%), #E8EBE6
--raised-shadowmaterialsinset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -2px 0 rgba(0, 0, 0, 0.65), inset 1px 0 0…inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(16, 32, 26, 0.14), 0 0 0 1px var(--lip-dark), 0…
--raised-shadow-upmaterialsinset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.65), 0 0 0 1px var…inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(16, 32, 26, 0.14), 0 0 0 1px var(--lip-dark), 0…
--raised-hitmaterialsinset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -2px 0 rgba(0, 0, 0, 0.65), 0 0 0 1px rgb…inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(16, 32, 26, 0.14), 0 0 0 1px rgba(47, 138, 94, …
--raised-sheenmaterialslinear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0))linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))
--raised-grain-opacitymaterials0.090.05
--recessed-bgmaterialslinear-gradient(180deg, #030504 0%, #070B09 30%, #0B110E 100%)linear-gradient(180deg, #C4C9C3 0%, #D0D4CE 30%, #D8DCD6 100%)
--recessed-shadowmaterialsinset 0 2px 0 rgba(0, 0, 0, 0.95), inset 0 10px 18px -4px rgba(0, 0, 0, 0.9), inset 0 -1px…inset 0 2px 0 rgba(16, 32, 26, 0.22), inset 0 10px 18px -4px rgba(16, 32, 26, 0.28), inset…
--recessed-shadow-deepmaterialsinset 0 3px 0 rgba(0, 0, 0, 0.95), inset 0 14px 26px -6px rgba(0, 0, 0, 0.92), inset 0 -1p…inset 0 3px 0 rgba(16, 32, 26, 0.24), inset 0 14px 26px -6px rgba(16, 32, 26, 0.3), inset …
--recessed-litmaterialsinset 0 2px 0 rgba(0, 0, 0, 0.95), inset 0 10px 18px -4px rgba(0, 0, 0, 0.9), inset 0 -1px…inset 0 2px 0 rgba(16, 32, 26, 0.22), inset 0 10px 18px -4px rgba(16, 32, 26, 0.28), inset…
--recessed-rulematerialslinear-gradient(90deg, transparent, rgba(111, 125, 117, 0.25), transparent)linear-gradient(90deg, transparent, rgba(16, 32, 26, 0.18), transparent)
--scrimmaterialsrgba(3, 5, 4, 0.72)rgba(227, 230, 225, 0.78)
--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"IBM Plex Sans", 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.4rem, 4.6vw, 4rem)
--text-displaytypeclamp(3.4rem, 9.4vw, 8.5rem)
--text-pricetype3rem
--track-capstype.16em
--leading-tighttype.92
--leading-bodytype1.55
--radiusshape14px
--radius-smshape10px
--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-slowmotion900ms
--dur-needlemotion1100ms
--easemotioncubic-bezier(.2, .7, .2, 1)
--ease-needlemotioncubic-bezier(.18, 1.35, .32, 1)
--reveal-ymotion16px