Look 01, the kit sheet

Aura Glow

Light, as a system. 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 accent, the aura, and three status colours.

Canvas and accent

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

--bg#0A1220

--surface#121C30

--surface-2#1A2740

--text#EEF1FA

--accent#FF9E7A

--accent-ink#2A1208

--ok#7FE0B4

--warn#FFD27F

--err#FF7A8A

The aura

Decoration only. Hero and CTA backdrops, bento art, gallery tiles, card media. Never behind text.

--aura-peach#FFC59E

--aura-coral#FF7A8A

--aura-lilac#A78BFF

--aura-teal#4FD1E0

--aura-sky#7FB3FF

--glowrgba(255, 158, 122, 0.45)

--glow-2rgba(167, 139, 255, 0.38)

--patternlinear-gradient(160deg, var(--aura-lilac), var(--aura-coral) 45%, var(--aura-peach) 80%, v…

--skylinear-gradient(180deg, #070C1A 0%, #1A2352 20%, #5A4A9A 38%, #C86B8A 54%, #FFB08A 67%, #7…

--sealinear-gradient(180deg, rgba(10, 18, 32, 0) 0%, #0A1220 100%)

--grainfeTurbulence, inlined

Type

Aura Solar for display. Hanken Grotesk for everything else.

Aura Solar 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

Light, as a system.

.bl-h2

Every backdrop is an hour of the day.

.bl-price

$125one of fifty

.bl-lede

A look for sites built with Claude Code. A sun in a sunset sky, buttons made of jelly, twelve drawn icons and one coral hit per screen.

.bl-body

Raised is a gel dome with a highlight and a glow. Recessed is that dome pressed into the canvas. There is no third material, and state is depth, never a colour.

.bl-eyebrow

Look 01, an edition of fifty

.bl-meta

Edition 07 of 50, retired when gone

.bl-label

Materials

Two. Raised sits on the canvas and can be pressed. Recessed is a well.

.bl-raised

.bl-recessed

Icons

12 drawings. None is a variation of another.

24-unit grid, 1.5 stroke, round caps, currentColor. Use inline as <svg class="bl-icon"><use href="#i-name"/></svg> or as the files in assets/icons/.

aperture

bloom

comet

lens

orbit

prism

pulse

signal

strata

sun

tide

tuner

Motion

Presets, not effects.

The sun in its gradient sky is a film that loops behind the headline (.bl-hero__film). Headlines rise word by word (.bl-words). Blocks fade up through a blur (.bl-reveal, staggered by .bl-stagger). Eyebrows and ledes rise (.bl-rise). Cards lift (.bl-hover-lift). Buttons wobble once (.bl-hover-jelly). Reduced motion lands everything instantly.

Word rise and reveal

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

Replay

Light, as a system.

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 raised jelly. The primary carries the accent and is the one hit per screen. Pressed is recessed. Hover wobbles once (.bl-hover-jelly). Loading swaps the label for a spinner.

components/buttons.html

inputs

Fields are recessed wells. Focus adds the accent ring and a glow. Invalid swaps the ring for the error colour and shows a help line. Select and checkbox share the well.

components/inputs.html

Default

Focus

Invalid

That does not look like an email.

Disabled

Select

Textarea

No mailing list. We only write back.

Unchecked Checked Focus Disabled

cards

Cards are raised. Media is a recessed well carrying an hour. Hover lifts (.bl-hover-lift). Selected is recessed, with the gloss off.

components/cards.html

Golden

The hour the look is named for. The sun in its sky, bands in its lower half.

18:48

First light (hover)

Lifted four pixels with the jelly ease. Nothing else changes.

07:12

Blue hour (selected)

Pressed into the canvas. Selected is recessed, never a colour.

21:05Chosen

badges

Badges are hairline pills in the body face. The plain badge is for labels. The three status badges are the only place the status colours appear besides toasts and field errors.

components/badges.html

Chosen Edition 07 of 50 Live 3 left Retired

tabs

Tabs sit in a raised pill group. The active tab is recessed. Hover brightens the label; focus draws the accent ring; disabled fades.

components/tabs.html

accordion

The accordion uses details and summary. The open item is recessed; closed items sit on a hairline. The plus turns into a cross when open. .is-open draws the open state without interaction.

components/accordion.html

Open

The open item is pressed into the canvas. Only one needs to be open, but nothing stops two.

Closed

Closed items sit on the canvas with a hairline above.

Drawn open with .is-open

For inspection without a pointer. The browser will keep this one collapsed; the styling is what matters.

toast

Toasts are raised pills that float at the bottom centre. A dot carries the status; the copy stays plain. .bl-toast--static renders them inline.

components/toast.html

Saved.

Look installed.Open it

Three editions left.

That key does not match.Try again

table

Tables sit in a recessed well. Headers are small caps labels; rows are separated by hairlines. Hover brightens the row; the selected row is recessed a step deeper. Numbers are tabular and right-aligned.

components/table.html

Edition	Site	Installed	Installs	Status
01	ba-nd.com	13 Sep 2026	4	Live
02	getdirtyhands.com	13 Sep 2026	2	Live
03	dreamclean.space	14 Sep 2026	1	Chosen
04	atcakes.com	14 Sep 2026	0	Pending
05	jessicaresler.com	15 Sep 2026	0	Retired

nav-links

Nav links are pills in the body face. The current one is recessed. Hover brightens; focus draws the accent ring.

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 floating jelly pill (every marketing page). B is the flat bar with a hairline, for app-like pages and anything with a table under it. The current link is recessed; the primary button is the one accent hit in the bar.

sections/nav.html

Variant A

Aura Glow

Get the look

Variant B

Aura Glow

Get the look

hero

The opening screen. A is the film: the sun in its gradient sky, rendered, looping behind the headline (the home page, once per site). In a site, point the film at /looks/aura-glow/motion/aura-glow-hero.mp4 and its poster; ../motion/ is for the kit and the demo only. B is the split hero with the drawn panel as media, for inner pages and launches. Headlines use .bl-words so they rise on load.

sections/hero.html

Variant A

Look 01, an edition of fifty

Light, as a system.

A look for sites built with Claude Code. A sun in a sunset sky, buttons made of jelly, twelve drawn icons and one coral hit per screen. Fifty copies, then it is gone.

Get the look, $125 See the hours

50editions

1accent per screen

12drawn icons

Variant B

The parts

Everything is a token.

Every colour, radius, shadow and duration in Aura Glow is a custom property. Claude uses them or stops. Nothing is invented twice.

Get the look, $125 See the parts

feature-grid

Three or six things the product does. A is the icon grid, one icon per feature, all different. B is the numbered two-column list, for pages that already carry icons elsewhere.

sections/feature-grid.html

Variant A

What is in it

A sun, a jelly and a rulebook.

The sun

A banded disc in one long gradient, navy through peach and back to navy, with grain over it. It is the hero backdrop and the CTA, and it never sits behind text.

Two materials

Raised is a gel dome with a highlight and a glow. Recessed is that dome pressed into the canvas. There is no third.

Aura Solar

An original display face drawn for this look. Wide, light, with a sun-round O. Headlines only; the body face does the reading.

Twelve icons

One composition each, drawn on the same grid. Nothing is a variation of anything else.

Six hours

Six gradients, one for each hour of the day, for gallery tiles, card media and bento art.

Motion, built in

Headlines rise out of a line. Cards lift. Buttons wobble once. Reduced motion lands everything instantly.

Variant B

The rules

Six rules Claude cannot argue with.

Tokens only

Every value comes from theme.css. If the token you need is missing, the look is missing a part. Say so and stop.

Two materials

Raised and recessed. Buttons are raised. Fields are recessed. There is no flat and no outlined.

Pressed is recessed

The current link, the chosen plan, the selected row, the open item. State is depth, never a colour.

One accent per screen

The coral marks the single most important element in a viewport. Status colours live only on badges, toasts and field errors.

Display for display

Aura Solar sets headlines, the brand mark, prices and big numbers. Everything else is the body face.

The sun is decoration

The aura and the hours appear in hero and CTA backdrops, bento art, gallery tiles and card media. Never behind text.

bento

The parts, laid out unevenly. A is the wide panel tile plus two tiles. B is three even tiles with a strip of hour art each.

sections/bento.html

Variant A

The parts

Everything is a token.

The materials

The whole look, drawn once. The aura is the pattern, the dial is raised, the third key is pressed. Every colour, radius, shadow and duration on this page is a custom property.

Both schemes

Dark is native. Light is one attribute away, and only the colour tokens change.

The rules

CLAUDE.md is the product. Claude reads it before it touches a file, and stops when a token it needs does not exist.

Variant B

What ships

Three folders and a rulebook.

sections/

Eleven sections, two variants each. Hero to footer. Real markup, no placeholders.

components/

Ten components with every state drawn, so hover, focus, pressed and disabled can be inspected without a pointer.

fonts/

Aura Solar in two cuts, as woff2, with its licence. Drawn for this look and not sold on its own.

gallery

Work, products or presets. A is six portrait tiles, one hour each. B is wide tiles, two per row, for landscape work.

sections/gallery.html

Variant A

Hours

Every backdrop is an hour of the day.

Nautical dawn05:40

First light07:12

Noon haze13:00

Golden18:48

Civil dusk19:30

Blue hour21:05

Variant B

Hours, wide

The same hours, for landscape work.

Golden18:48

First light07:12

Civil dusk19:30

Blue hour21:05

pricing

Plans. A is three plans with the middle one chosen (recessed) and carrying the accent button. B is two plans, for a simpler offer. The chosen plan is always recessed; only it gets the primary button.

sections/pricing.html

Variant A

Editions

One look, or a rack.

One look

$125Aura Glow

One of fifty editions
Theme, motion, sections, components
Aura Solar, woff2 and licence
CLAUDE.md, the rules

Three looksChosen

$300any three

Aura Glow and two more from the rack
Three licence keys
Three original faces
One command each

Five looks

$425any five

Aura Glow and four more from the rack
Five licence keys
Five original faces
The whole studio, dressed

Variant B

Editions

One look, or three.

One lookChosen

$125Aura Glow

One of fifty editions
Theme, motion, sections, components
Aura Solar, woff2 and licence
CLAUDE.md, the rules

Three looks

$300any three

Aura Glow and two more from the rack
Three licence keys
Three original faces
One command each

testimonial

One voice. A is a single big quote at display size, offset to the right. B is three short quotes in raised cards. The starter prompt is real copy that fits here on the demo; on a client site use a real quote.

sections/testimonial.html

Variant A

Dress this site in the look at ./looks/aura-glow. Read its CLAUDE.md first and obey it.

The starter promptThe only thing you type

Variant B

Buttons are raised. Fields are recessed. Pressed is recessed.

Rule 3CLAUDE.md

One accent. One hit per screen.

Rule 6CLAUDE.md

If the token does not exist, stop and say so.

Rule 1CLAUDE.md

faq

Questions. A is the split with the accordion (open item recessed). B is the two-column grid with every answer visible.

sections/faq.html

Variant A

Questions

The ones we get asked.

Is it really mine?

Fifty sites get to wear Aura Glow. Yours is one of them, with its own edition number and licence key. When the fiftieth sells, the look is retired for good.

Does Claude obey it?

CLAUDE.md is a set of rules with teeth: tokens only, two materials, one accent per screen. If a token, section or component does not exist, Claude stops and says so instead of inventing one.

Can I change the colours?

The palette is the look. You can switch scheme, and you can ask us. What you cannot do is hand Claude a new hex and call it Aura Glow.

What about the font?

Aura Solar ships as woff2 with its licence, for use on any site wearing the look. It is drawn for Aura Glow and is not sold on its own.

Variant B

Questions

The ones we get asked.

Is it really mine?

Fifty sites get to wear Aura Glow. Yours is one of them, with its own edition number and licence key. When the fiftieth sells, the look is retired for good.

Does Claude obey it?

CLAUDE.md is a set of rules with teeth: tokens only, two materials, one accent per screen. If a part does not exist, Claude stops and says so instead of inventing one.

Can I change the colours?

The palette is the look. You can switch scheme, and you can ask us. What you cannot do is hand Claude a new hex and call it Aura Glow.

What about the font?

Aura Solar ships as woff2 with its licence, for use on any site wearing the look. It is drawn for Aura Glow and is not sold on its own.

cta

The ask. A is the big raised band with the aura and a small sun. B is the compact bar: one line, one button. Either way, one accent hit.

sections/cta.html

Variant A

Look 01

Fifty sites get to wear this. Then it is retired.

One command. No redesign meetings.

Get the look, $125

Variant B

Fifty sites get to wear this.

Get the look, $125

Variant A

Variant B

contact-form

Write to us. A is the split: headline left, fields right. B is the form inside a raised card, stacked. Fields are recessed; the submit is the accent hit.

sections/contact-form.html

Variant A

Write to us

Ask us something.

We answer in a day or two. If it is about a licence key, write from the email you bought with.

Variant B

Write to us

Ask us something.

Tokens

71 custom properties. Nothing else exists.

Native values first; the light scheme overrides only the colour tokens. The same list is in theme.json.

Token	Group	Native	light
--bg	canvas	`#0A1220`	#F4EDE4
--surface	canvas	`#121C30`	#FFFFFF
--surface-2	canvas	`#1A2740`	#FBF6EF
--text	canvas	`#EEF1FA`	#1A1A2C
--text-2	canvas	`rgba(238, 241, 250, 0.68)`	rgba(26, 26, 44, 0.68)
--text-3	canvas	`rgba(238, 241, 250, 0.44)`	rgba(26, 26, 44, 0.46)
--line	canvas	`rgba(238, 241, 250, 0.10)`	rgba(26, 26, 44, 0.10)
--accent	accent	`#FF9E7A`	#F0653F
--accent-ink	accent	`#2A1208`	#2A1208
--aura-peach	aura	`#FFC59E`
--aura-coral	aura	`#FF7A8A`
--aura-lilac	aura	`#A78BFF`
--aura-teal	aura	`#4FD1E0`
--aura-sky	aura	`#7FB3FF`
--glow	aura	`rgba(255, 158, 122, 0.45)`	rgba(240, 101, 63, 0.32)
--glow-2	aura	`rgba(167, 139, 255, 0.38)`	rgba(167, 139, 255, 0.30)
--pattern	aura	`linear-gradient(160deg, var(--aura-lilac), var(--aura-coral) 45%, var(--aura-peach) 80%, v…`
--sky	aura	`linear-gradient(180deg, #070C1A 0%, #1A2352 20%, #5A4A9A 38%, #C86B8A 54%, #FFB08A 67%, #7…`	linear-gradient(180deg, #6FA6F0 0%, #A9C3F5 22%, #E4BBD6 42%, #FFC7A1 58%, #FFE3C4 68%, #F…
--sea	aura	`linear-gradient(180deg, rgba(10, 18, 32, 0) 0%, #0A1220 100%)`	linear-gradient(180deg, rgba(244, 237, 228, 0) 0%, #F4EDE4 100%)
--horizon	aura	`rgba(255, 220, 200, 0.35)`	rgba(90, 60, 80, 0.28)
--grain	aura	`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='1…`
--ok	status	`#7FE0B4`
--warn	status	`#FFD27F`
--err	status	`#FF7A8A`
--raised-bg	materials	`linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 42%, rgba(255…`	linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55) 45%, rgba(255…
--raised-shadow	materials	`inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -10px 18px rgba(0, 0, 0, 0.22), 0 12px 34…`	inset 0 1px 0 #FFFFFF, inset 0 -8px 14px rgba(120, 80, 60, 0.10), 0 12px 30px rgba(60, 40,…
--raised-glow	materials	`0 0 44px var(--glow)`
--recessed-bg	materials	`rgba(0, 0, 0, 0.30)`	rgba(60, 40, 80, 0.07)
--recessed-shadow	materials	`inset 0 3px 10px rgba(0, 0, 0, 0.50), inset 0 -1px 0 rgba(255, 255, 255, 0.06)`	inset 0 3px 8px rgba(60, 40, 80, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.9)
--gloss	materials	`linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 55%, rgba(255…`	linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2) 55%, rgba(255, …
--gloss-strong	materials	`linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0))`	linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0))
--blur	materials	`14px`
--scrim	materials	`rgba(4, 8, 20, 0.62)`	rgba(26, 26, 44, 0.42)
--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	`"Aura Solar", "Archivo", "Helvetica Neue", Arial, sans-serif`
--font-body	type	`"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif`
--display-stretch	type	`118%`
--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(3rem, 8.4vw, 7.25rem)`
--track-caps	type	`0.18em`
--leading-tight	type	`0.98`
--leading-body	type	`1.55`
--radius	shape	`22px`
--radius-sm	shape	`14px`
--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	`1240px`
--control	space	`48px`
--control-sm	space	`36px`
--icon	space	`22px`
--dur-fast	motion	`160ms`
--dur	motion	`440ms`
--dur-slow	motion	`1100ms`
--dur-drift	motion	`18s`
--ease	motion	`cubic-bezier(0.22, 0.8, 0.3, 1)`
--ease-jelly	motion	`cubic-bezier(0.34, 1.56, 0.64, 1)`
--reveal-y	motion	`18px`

Aura Glow

Canvas, one accent, the aura, and three status colours.

Canvas and accent

The aura

Aura Solar for display. Hanken Grotesk for everything else.

Two. Raised sits on the canvas and can be pressed. Recessed is a well.

12 drawings. None is a variation of another.

Presets, not effects.

Word rise and reveal

Loading

Every state, drawn.

buttons

inputs

cards

badges

tabs

accordion

modal

toast

table

nav-links

Eleven sections, two variants each.

nav

hero

Light, as a system.

Everything is a token.

feature-grid

A sun, a jelly and a rulebook.

The sun

Two materials

Aura Solar

Twelve icons

Six hours

Motion, built in

Six rules Claude cannot argue with.

Tokens only

Two materials

Pressed is recessed

One accent per screen

Display for display

The sun is decoration

bento

Everything is a token.

The materials

Both schemes

The rules

Three folders and a rulebook.

sections/

components/

fonts/

gallery

Every backdrop is an hour of the day.

The same hours, for landscape work.

pricing

One look, or a rack.

One look, or three.

testimonial

faq

The ones we get asked.

The ones we get asked.

Is it really mine?

Does Claude obey it?

Can I change the colours?

What about the font?

cta

Fifty sites get to wear this. Then it is retired.

Fifty sites get to wear this.

footer

contact-form

Ask us something.

Ask us something.

71 custom properties. Nothing else exists.