Look 08, the kit sheet

Sugar Static

Sweets in a tray. 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

Almost white, navy ink, one brick, the twelve, and three status colours.

Canvas and accent

--bg --surface --surface-2 --text --accent

--bg#FBFAF7

--surface#FFFFFF

--surface-2#FFFFFF

--text#2C2B3A

--accent#B43B33

--accent-ink#FFF3EE

--accent-bgradial-gradient(120% 100% at 16% 10%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04)…

--accent-side#7E2620

--accent-shadowinset 1.5px 1.5px 0 rgba(255, 255, 255, 0.45), inset -6px -8px 14px rgba(0, 0, 0, 0.12), 0…

--accent-shadow-upinset 1.5px 1.5px 0 rgba(255, 255, 255, 0.5), inset -6px -8px 14px rgba(0, 0, 0, 0.1), 0 6…

--ok#4F7F55

--warn#B9861E

--err#B43B33

The tray

Decoration only. The twelve pastilles as tokens, the sand as the pattern, the grain over everything, and one photograph: the tray still, for the hero film, the bento art and the corner of the call to action. Never behind text, and never a second photograph.

--mint#C8DDD0

--blush#F0C9C8

--navy#2C2B3A

--peach#E0B995

--butter#F1E08C

--forest#5C7A5D

--periwinkle#9095BF

--popcorn#F4F2EC

--coral#DD8470

--teal#6C999B

--brick#B43B33

--lilac#C8ABD1

--sand#D9D0BE

--sand-2#ECE8DF

--sand-lit#F3F0E9

--patternlinear-gradient(135deg, #E5DDCD 0%, #D9D0BE 55%, #CBC1AD 100%)

--trayinlined

--graininlined

--light0.7

Type

Static Round for display. Manrope for everything else.

Static Round 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

Sweets in a tray.

.bl-h2

Every colour, one at a time.

.bl-price

$125one of fifty

.bl-lede

A look for sites built with Claude Code. A tray of pressed pastilles on sand, one window over the page, and the scroll carries the light.

.bl-body

Raised is a pressed pastille with a lit rim, its own thickness and one long shadow that follows the window. Recessed is the dimple it was lifted from. There is no third material, and state is depth, never a colour.

.bl-eyebrow

Look 08, an edition of fifty

.bl-meta

Edition 01 of 50, retired when gone

.bl-label

Materials

Two. Raised is a pastille and can be pressed. Recessed is the dimple.

.bl-raised

.bl-recessed

Icons

12 reliefs. None is a variation of another.

24-unit grid, one to three solid pads in two tones of currentColor, no strokes, the shadow always down and to the right. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.

dimple

lift

note

pastille

press

shadow

stack

sugar

tag

tin

tray

window

Motion

The sundial.

Nothing on the page moves except its shadow. One window, and the scroll carries it across the room: every shadow token is built on --light, so every pastille's shadow swings as you scroll (the demo script writes --light). Headlines are lifted out of the tray word by word (.bl-words). Blocks are set down (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes follow (.bl-rise). Cards lift (.bl-hover-lift). Buttons lift on hover and sink to the tray when pressed. Reduced motion pins the window and lands everything instantly.

Word rise and reveal

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

Replay

Sweets in a tray.

Click to play it again.

Loading

.bl-skeleton .bl-spinner .bl-progress

Lifting the look out

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 pastilles. Primary is the brick, the one accent; default is white. Small is for the mast and dense rows. Pressed sinks to the tray (.is-active), hover lifts (.is-hover), focus rings in brick (.is-focus), disabled fades (.is-disabled). Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/buttons.html

inputs

Every field is a dimple in the tray. Focus rings in brick, invalid rings in the error red, disabled fades. Selects carry the chevron; textareas are taller dimples. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/inputs.html

Default

Focus

Invalid

That is not an email address.

Disabled

Select

With help

We answer within a day.

Textarea

cards

A card is a pastille with something inside. Media cards carry the pattern or one pastille of colour; a selected card is sunk to the tray. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/cards.html

Butter

Pastille, one of twelve.

$14

Periwinkle, hover

Lifted off the tray, its shadow grows.

$14

Selected

Sunk to the tray

A selected card is recessed. State is depth, never a colour.

badges

Badges are small dimples. Status colours live here and in toasts and field errors, nowhere else. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/badges.html

Edition 08 One of fifty Shipped Twelve left Retired

tabs

Tabs sit in one long dimple; the active tab is a pastille pressed down into it. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/tabs.html

accordion

The open question is a dimple; the closed ones are pastilles. Draw the open state with [open] or .is-active. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/accordion.html

Open

The open item is sunk to the tray.

Closed

Closed items sit on the tray as pastilles.

Active, drawn statically

The same as open, for inspection without a pointer.

toast

Toasts are small pastilles at the foot of the page. The dot carries the status colour. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/toast.html

Saved to the tray

Edition 12 of 50 is yours

Three left

That key has been used

table

The table is one pastille with hairlines inside. A selected row is a dimple. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/table.html

Look	Edition	Left	Price
Sugar Static	08	50	$125
Blue Hour	06	41	$125
Cold Open	07	47	$125

nav-links

Nav links are text on the mast; the current one is a dimple. Hover brightens, nothing moves. Every state is drawn statically with .is-hover, .is-active, .is-focus, .is-disabled, .is-selected, .is-invalid; theme.css styles the helper class and the real pseudo-class identically. Fragment. Assumes data-look="sugar-static" on an ancestor, theme.css and motion.css loaded, and the icon sprite present.

components/nav-links.html

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 mast: one long pastille laid across the top of the tray, sticky, with the current link sunk into it as a dimple and the brick pastille as the one accent (every marketing page). B is the flat bar with its thickness showing along the bottom edge, for app-like pages, inner pages and anything with a table under it.

sections/nav.html

Variant A

Sugar Static

Get the look

Variant B

Sugar Static

Get the look

hero

The opening screen. A is the tray: the headline on the sand and the film beside it in a raised pad cut by the right edge of the screen (the home page, once per site). The video carries the film (../motion/sugar-static-hero.mp4) with its poster; reduced motion shows the poster alone. In a site, point the poster and the film at /looks/sugar-static/motion/; ../motion/ is for the kit and the demo only. B is the split for inner pages: a headline on the sand and four pads beside it, three pastilles and one dimple.

sections/hero.html

Variant A

Bandana · Look 08 · one of fifty

Sweets in a tray.

Every surface is a pressed pastille on sand, lit from one window. Scroll, and the light moves across the room; nothing else does. A look for sites built with Claude Code.

Get the look, $125 See the parts

Variant B

The parts

Everything is a pastille.

Every colour, radius, shadow and duration in Sugar Static is a token. Claude uses them or stops. Nothing is invented twice.

Get the look, $125 See the parts

feature-grid

The parts, or any list of three to six things. A is the grid: each part is a raised card with its own pastille chip as the mark. B is the numbered list beside a head, for rules and steps.

sections/feature-grid.html

Variant A

The parts

Nine layers, one tray.

A look is a folder. Claude reads it first and obeys it after. Every colour, radius, shadow and duration is a token; every surface is one of two materials; every page is built from the same eleven sections.

Tokens only

Sand, ink, twelve pastilles and one brick. Nothing is typed twice, so nothing drifts.

Two materials

Raised is a pastille with its own thickness. Recessed is the dimple it was lifted from. There is no third.

One accent

The brick pastille lands once per screen, on the thing that matters. Everything else stays on the sand.

Static Round

An original display face, drawn for this look and bundled with it. Soft corners, soft ends, never for body copy.

The sundial

One window over the page. As you scroll, every shadow swings with it. Nothing else on the page moves.

Both schemes

By day the tray is almost white. By night it is the navy pastille, and the twelve keep their colours.

Variant B

How it is built

Four rules, in order.

The short version of CLAUDE.md. The long version is in the folder.

1
Tokens only
Every value is a custom property on the look. If the one you need is missing, the look is missing a part. Stop and say so.
2
Two materials
Raised is a pastille, recessed is its dimple. Buttons are raised, fields are recessed, anything selected is recessed.
3
One accent
The brick lands once per screen. The twelve pastilles are decoration and product colour, never interface.
4
Display face for display
Static Round for headlines, the mark, prices and big numbers. Manrope for everything that is read.

bento

Mixed tiles in one tray. A leads with the art tile (the tray still, the one photograph the look allows) plus three pads, one of them a dimple. B is six pads without the art, for inner pages.

sections/bento.html

Variant A

The tray

Twelve pastilles on sand, the signature image. It is the tile on the rack, the poster in the hero and the film behind it.

Install

One command, one pasted prompt. The folder goes in, the look comes out.

Pressed

Every button is a pastille. Press it and it sinks to the tray, then comes back.

Fifty, then retired

Each look is sold fifty times and archived forever. A new look is built to replace it. This is edition one of fifty.

Variant B

The dimple

Where a pastille was lifted out. Fields, the current link, the chosen plan, the open question: all dimples.

Static Round

Two cuts, drawn for the look, bundled and never sold apart.

Twelve icons

Small reliefs of pastilles. Two tones, no strokes.

Both schemes

Day is almost white. Night is the navy pastille.

Motion

Reveals, hovers, a loader, and the sundial.

One prompt

Paste the starter prompt. Claude reads CLAUDE.md, then builds every page from the same eleven sections and ten components.

gallery

Colour, as product. A is the twelve pastilles as swatches with their hex. B is four large swatches with prices, the shop grid.

sections/gallery.html

Variant A

The twelve

Every colour, one at a time.

The pastilles are decoration and product colour, never interface. A card may carry one. A page carries one brick.

MintC8DDD0

BlushF0C9C8

Navy2C2B3A

PeachE0B995

ButterF1E08C

Forest5C7A5D

Periwinkle9095BF

PopcornF4F2EC

CoralDD8470

Teal6C999B

BrickB43B33

LilacC8ABD1

Variant B

Four of the twelve

Product colour.

On a shop page a card carries one pastille as its colour. The card stays white; the pastille does the talking.

Butter$14

Periwinkle$14

Coral$14

Forest$14

pricing

The editions. A is the three plans, the chosen one recessed. B is two plans for a simpler page. The prices are the real ones: $125, three for $300, five for $425.

sections/pricing.html

Variant A

Editions

Fifty, then retired.

One look, or a few. Each is its own edition of fifty, and each comes with its own face, its own icons and its own film.

One look

$125

Sugar Static, the whole folder
Static Round, two cuts
The tray, tile and film
One site, forever

Get Sugar Static

Three looks

$300 $100 each

Any three from the rack
Three original faces
Three films, three icon sets
Three sites, forever

Pick three

Five looks

$425 $85 each

Any five from the rack
Five original faces
Five films, five icon sets
Five sites, forever

Pick five

Variant B

Editions

One, or three.

One look

$125

Sugar Static, the whole folder
One site, forever

Get Sugar Static

Three looks

$300 $100 each

Any three from the rack
Three sites, forever

Pick three

testimonial

Quotes. A is two raised cards, each cited with a chip. B is one bare quote in the display face, for a breath between sections.

sections/testimonial.html

Variant A

State is depth, never a colour. Pressed is recessed. Selected is recessed. The open question is recessed.
CLAUDE.md, the rules

If a token, a section or a component does not exist, stop and say so. Do not invent one. The tray has twelve pastilles, not thirteen.
CLAUDE.md, rule 2

Variant B

Nothing on the page moves except its shadow.
motion.css, the first line

faq

Questions. A is the accordion beside a head, the open question sunk into the tray. B is the two-column grid of short answers, no interaction.

sections/faq.html

Variant A

Questions

Before you buy.

Short answers. The long ones are in the folder.

What do I get?

One folder: CLAUDE.md, theme.css and theme.json, motion.css, Static Round in two cuts, twelve icons, eleven sections in two variants, ten components in every state, the kit sheet, this demo, and the film.

How does it install?

Run npx bandana add sugar-static with your licence key, then paste the starter prompt into Claude Code. It reads CLAUDE.md before it writes a line.

Can I use the face elsewhere?

No. Static Round ships only with Sugar Static and is licensed for sites wearing this look. It is never sold apart and never redistributed.

What happens at fifty?

The look is retired from the rack and never sold again. Your site keeps it. A new look is built to take its place.

Does it work in the dark?

Yes. The tray becomes the navy pastille, the twelve keep their colours, and the brick stays the one accent. Set data-scheme to dark, light or auto.

Variant B

Questions

Short answers.

What do I get?

One folder: CLAUDE.md, the stylesheets, Static Round, twelve icons, eleven sections, ten components, the kit sheet, the demo and the film.

How does it install?

npx bandana add sugar-static with your key, then paste the starter prompt into Claude Code.

Can I use the face elsewhere?

No. Static Round is licensed for sites wearing Sugar Static, never sold apart, never redistributed.

What happens at fifty?

The look is retired and never sold again. Your site keeps it. A new look takes its place on the rack.

cta

The close. A is the big dimple with the tray still tilted into its corner and the brick pastille. B is the bar, one line and one button, for the foot of inner pages.

sections/cta.html

Variant A

Edition of fifty

Lift one out of the tray.

Sugar Static, $125. One site, forever, and fifty of them in the world.

Get the look Read the rules

Variant B

Edition of fifty

Lift one out of the tray.

Get the look, $125

Variant A

Variant B

contact-form

The form. A is the card form beside a head. B is the bare form under a head, for a contact page. Every field is a dimple; the button is a pastille.

sections/contact-form.html

Variant A

Contact

Ask about the look.

Licensing, a site that needs more than one, or a question the folder does not answer.

Variant B

Contact

Ask about the look.

Tokens

89 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	`#FBFAF7`	#2C2B3A
--surface	canvas	`#FFFFFF`	#3D3C50
--surface-2	canvas	`#FFFFFF`	#4A495F
--text	canvas	`#2C2B3A`	#F3F1EC
--text-2	canvas	`rgba(44, 43, 58, 0.68)`	rgba(243, 241, 236, 0.7)
--text-3	canvas	`rgba(44, 43, 58, 0.46)`	rgba(243, 241, 236, 0.46)
--line	canvas	`rgba(44, 43, 58, 0.10)`	rgba(243, 241, 236, 0.12)
--accent	accent	`#B43B33`	#D2493F
--accent-ink	accent	`#FFF3EE`	#FFF3EE
--accent-bg	accent	`radial-gradient(120% 100% at 16% 10%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04)…`	radial-gradient(120% 100% at 16% 10%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) …
--accent-side	accent	`#7E2620`	#8A2A24
--accent-shadow	accent	`inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.45), inset -6px -8px 14px rgba(0, 0, 0, 0.12), 0…`
--accent-shadow-up	accent	`inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.5), inset -6px -8px 14px rgba(0, 0, 0, 0.1), 0 6…`
--mint	aura	`#C8DDD0`
--blush	aura	`#F0C9C8`
--navy	aura	`#2C2B3A`
--peach	aura	`#E0B995`
--butter	aura	`#F1E08C`
--forest	aura	`#5C7A5D`
--periwinkle	aura	`#9095BF`
--popcorn	aura	`#F4F2EC`
--coral	aura	`#DD8470`
--teal	aura	`#6C999B`
--brick	aura	`#B43B33`
--lilac	aura	`#C8ABD1`
--sand	aura	`#D9D0BE`
--sand-2	aura	`#ECE8DF`	#22212E
--sand-lit	aura	`#F3F0E9`	#3A394C
--pattern	aura	`linear-gradient(135deg, #E5DDCD 0%, #D9D0BE 55%, #CBC1AD 100%)`	linear-gradient(135deg, #3A394C 0%, #2C2B3A 55%, #1F1E2A 100%)
--tray	aura	`file assets/tray.webp`
--tray-ratio	aura	`4 / 3`
--grain	aura	`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='2…`
--light	aura	`0.7`
--ok	status	`#4F7F55`	#8FC79A
--warn	status	`#B9861E`	#E7BA5A
--err	status	`#B43B33`	#F08A80
--sx	other	`calc(var(--light) * 22px)`
--sy	other	`26px`
--sx-up	other	`calc(var(--light) * 30px)`
--sy-up	other	`36px`
--shade	other	`rgba(60, 50, 30, 0.18)`	rgba(0, 0, 0, 0.5)
--shade-soft	other	`rgba(60, 50, 30, 0.08)`	rgba(0, 0, 0, 0.25)
--raised-bg	materials	`radial-gradient(120% 100% at 16% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06)…`	radial-gradient(120% 100% at 16% 10%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)…
--raised-side	materials	`#E4DFD5`	#26253A
--raised-shadow	materials	`inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.85), inset -6px -8px 14px rgba(60, 50, 30, 0.08)…`
--raised-shadow-up	materials	`inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.9), inset -6px -8px 14px rgba(60, 50, 30, 0.07),…`
--raised-shadow-down	materials	`inset 1px 1px 0 rgba(255, 255, 255, 0.6), inset -4px -5px 10px rgba(60, 50, 30, 0.08), 0 2…`
--recessed-bg	materials	`var(--sand-2)`	var(--sand-2)
--recessed-shadow	materials	`inset calc(var(--sx) * 0.3) 8px 14px rgba(60, 50, 30, 0.18), inset -2px -2px 3px rgba(255,…`	inset calc(var(--sx) * 0.3) 8px 14px rgba(0, 0, 0, 0.5), inset -1px -1px 2px rgba(255, 255…
--scrim	materials	`rgba(44, 43, 58, 0.5)`	rgba(10, 9, 18, 0.66)
--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	`"Static Round", "Helvetica Neue", Arial, sans-serif`
--font-body	type	`"Manrope", "Helvetica Neue", Arial, sans-serif`
--display-weight	type	`700`
--text-xs	type	`0.75rem`
--text-sm	type	`0.875rem`
--text-md	type	`1.0625rem`
--text-lg	type	`1.25rem`
--text-xl	type	`1.75rem`
--text-2xl	type	`clamp(2rem, 3.6vw, 3rem)`
--text-display	type	`clamp(2.8rem, 7vw, 6.6rem)`
--track-caps	type	`0.22em`
--track-display	type	`0.015em`
--track-h2	type	`0.01em`
--leading-tight	type	`1`
--leading-body	type	`1.55`
--radius	shape	`30px`
--radius-sm	shape	`20px`
--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	`6.5rem`
--wrap	space	`1280px`
--control	space	`52px`
--control-sm	space	`40px`
--icon	space	`22px`
--dur-fast	motion	`160ms`
--dur	motion	`420ms`
--dur-slow	motion	`900ms`
--ease	motion	`cubic-bezier(0.22, 0.8, 0.3, 1)`
--ease-lift	motion	`cubic-bezier(0.34, 1.3, 0.64, 1)`
--reveal-y	motion	`18px`

Sugar Static

Almost white, navy ink, one brick, the twelve, and three status colours.

Canvas and accent

The tray

Static Round for display. Manrope for everything else.

Two. Raised is a pastille and can be pressed. Recessed is the dimple.

12 reliefs. None is a variation of another.

The sundial.

Word rise and reveal

Loading

Every state, drawn.

buttons

inputs

cards

Butter

Periwinkle, hover

Sunk to the tray

badges

tabs

accordion

modal

toast

table

nav-links

Eleven sections, two variants each.

nav

hero

Sweets in a tray.

Everything is a pastille.

feature-grid

Nine layers, one tray.

Tokens only

Two materials

One accent

Static Round

The sundial

Both schemes

Four rules, in order.

Tokens only

Two materials

One accent

Display face for display

bento

The tray

Install

Pressed

Fifty, then retired

The dimple

Static Round

Twelve icons

Both schemes

Motion

One prompt

gallery

Every colour, one at a time.

Product colour.

pricing

Fifty, then retired.

One, or three.

testimonial

faq

Before you buy.

Short answers.

What do I get?

How does it install?

Can I use the face elsewhere?

What happens at fifty?

cta

Lift one out of the tray.

Lift one out of the tray.

footer

contact-form

Ask about the look.

Ask about the look.

89 custom properties. Nothing else exists.