The Alter & Amulet brand book. Every swatch, face, bell and button on this page is the live system from the shop, not a picture of it.
Tokens live in src/styles.css. The written rules live in DESIGN.md.
Every neutral leans verdigris, the green old brass turns. Brass itself is the only accent, and it never fills a wall.
Mist 2
#f4faf7
Raised surface on mist: cards, dialogs, fields.
Mist
#eaf4ef
The day page. Every light section starts here.
Seafoam
#bfe3d5
The logo's alcohol-ink wash. Highlights, selected states.
Seafoam 2
#9fd3c1
The deeper wash. Panels that sit on seafoam.
Verdigris
#4f9a86
Patina on old brass. Line art and marks, not day text.
Patina
#2b5f53
Links, focus rings, the hover of every ink tag.
Dusk
#1b3a33
Where the scroll starts to turn. The builder lives here.
Cauldron
#0f1b17
Night. Never pure black.
Each swatch shows ink and moonmilk set on it, with the WCAG ratio. The page you are reading walks this ramp from top to bottom.
Two text colors and their quiet steps. Ink for day, moonmilk for night. Never pure black, never pure white.
Ink
Text on light. Also the default tag button.
Ink soft
Secondary text on light. 6.83:1 on mist.
Moonmilk
Text on dark. Also the light tag button.
Moonmilk soft
Secondary text on dark. 8.93:1 on cauldron.
The bells. Three tonal steps, used like the metal: small, bright, and never as a floor.
Brass
The bells themselves. Sparkles, rules, the moon.
Brass light
The brass tag, links at night, selection.
Brass deep
Brass that can be read on day: 5.59:1 on mist.
Eight tested combinations, each with its WCAG ratios worked out. Reach for a pairing, not a loose swatch.
A little magic for the door.
Dried strawflowers, gold chain and a little sun.
Marigold Crown$38
mistinkink-softbrass
Use for: The hero, the lore, the shop grid. Any page that is still in daylight.
Not for: Brass type on mist. Set a price or link in brass-deep or ink instead.
inkmoonmilkpatina
Use for: The one main action on a day surface: add to cart, shop the bells.
Not for: Two ink tags side by side. One loud action per view.
patinamoonmilkseafoambrass-light
Use for: Hotspot tag cards, product tags, the focus and hover tone.
Not for: Whole sections. Patina is a tag, not a floor; dusk does that job.
Selected: Calm, Love
Seafoam is the wash behind the logo, and the fill of a chosen filter.
seafoaminkpatinaseafoam-2
Use for: Behind the logo, selected filters, a highlight band under one line.
Not for: Brass anything. It turns to mud on seafoam at 2.27:1.
Ring it in at dusk.
Pick a ring, a ribbon and a charm. The builder waits here, between day and night.
duskmoonmilkbrass-lightmoonmilk-soft
Use for: The builder and the turn from market to night. Brass-light links.
Not for: Small brass (#b8893f) type. Step up to brass-light.
Still ringing at midnight.
Moonmilk for words, seafoam for the one lit thing, brass for the bells.
cauldronmoonmilkseafoammoonmilk-soft
Use for: The story at night and the footer floor. Seafoam for one lit detail.
Not for: Pure black, or a blue night. Cauldron is green-black on purpose.
brass-lightinktag-brass-hover
Use for: The one main action on dusk or night. Price tags on dark photos.
Not for: Day surfaces. Brass-light on mist is 1.49:1, the tag edge vanishes.
On mist
On dusk
rib-protectionrib-calmrib-growthrib-abundance+3 more
Use for: Swatches, ribbons and the builder. Each one always carries its word.
Not for: Type, backgrounds, or color alone to say which intent is which.
Basteleur Moonlight carries the big lines, with Bold for names and prices. Supreme carries anything someone has to read twice.
.display-xl
Basteleur Moonlight 400
clamp(2.9rem, 1.2rem + 6.4vw, 6rem)
Leading 0.98 · Tracking -0.012em
Hero only. Once per page.
Hang a little magic.
.display-lg
Basteleur Moonlight 400
clamp(2.3rem, 1.2rem + 4.2vw, 4.25rem)
Leading 1.02 · Tracking -0.008em
Big section statements.
Bells for the front door
.display-md
Basteleur Moonlight 400
clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem)
Leading 1.08 · Tracking 0
Section heads, dialog titles.
Wrapped by hand, rung by the door
.title-bold
Basteleur Bold 700
1.3rem
Leading 1.2 · Tracking 0
Product names and small titles.
Marigold Crown
.lede
Supreme 400
clamp(1.125rem, 1rem + 0.45vw, 1.3rem)
Leading 1.55 · Tracking 0
The one intro line under a head. 38ch max.
Each bell is wrapped by hand in jute and grapevine, then hung with brass.
.body
Supreme 400
1.0625rem (17px)
Leading 1.6 · Tracking 0
Everything a customer reads twice.
The ribbons are picked for intent: green for growth, blue for calm, red for protection. Hang it on the door and let it ring every time someone comes home.
.label
Supreme 560
0.8125rem (13px)
Leading 1.6 · Tracking 0.01em
Sentence case. Never uppercase.
Ribbon color
.spaced-caps
Basteleur Moonlight 400, uppercase
0.9rem
Leading 1.6 · Tracking 0.34em
The logo's lockup line. Once per view at most.
Handmade crafts
.price
Basteleur Bold 700, lining figures
inherits
Leading inherits · Tracking 0
Prices only. Sized by its context.
$38
Basteleur is soft and a little eccentric, with a hand-cut feel at big sizes. The Moonlight cut is light enough to sit beside the traced line art of the logo without shouting over it.
Supreme is a plain, even grotesque with a real italic. It stays out of the way at 17px and still reads at 13px on a label, so Basteleur is the only voice with character.
For print, social posts and packaging only. They never load on the shop. Both keep Basteleur's job: one face with character, one that stays quiet.
Hang a little magic on the door.
Each bell is wrapped by hand in jute and grapevine, then hung with three brass bells. The ribbons are picked for intent.
Mazius Display + Switzer
The market sign and the printed card. Mazius has a true extra-italic, so this is the pairing to use when a line needs to lean. Switzer for the small print.
Ring it in at dusk.
A quiet house, a door that sings when it opens. Brass bells, seafoam ribbon, a little silver at the knot.
Boska + Supreme
Packaging, gift tags and the thank-you note in the box. Boska is finer and more formal than Basteleur, so it keeps Supreme to stay in the family.
Line art traced from the original logo. One lockup, four parts, and it always takes the color of the surface it sits on.
mark.svg
Favicon, stamps, the seal on a gift tag.
word-alter.svg
Only inside the lockup, never alone.
word-amulet.svg
The script. A flourish on packaging.
word-handmade.svg
The lockup's last line. Spaced caps come from here.
The house effects, running live. Each one has a single job, and none of them hides a word behind an animation.
Craft tag buttons.tag-btn
A hand-cut tag: pointed end, punched hole. Hover shifts the fill and slides the arrow; the tag itself never moves. Ink by day, brass or light at night.
Arch frame.arch
The doorway silhouette for every product photo. Hover this one: it swings from the top like a bell on a hook, and settles.
Quiet link.quiet-link
For the second action. A tonal color step and the arrow sliding up and out. No underline that grows.
Surface grain.grain
Film grain on the surface, behind the words. Multiply at 16% by day, screen at 7% at night. You should feel it, not see it.
Four-point sparkle
The star from the logo, and the only small mark on the site. Brass on day, brass-light at night. Point at one.
Moon phases
New to full. The moon in the bar above is the live meter: it waxes as you read down this page, and is full at the footer.
Every time the door opens, the bells ring and the doorway is cleared. That is the whole idea, and it is a good one.
Ink-in text
Words start at ink-soft, which already reads at 6.83:1, and darken to ink as they cross the screen. They never start invisible.
Alcohol-ink wash and gold fleck
Real scans from the logo, not CSS gradients. The wash sits behind type at full strength. The glitter is one fleck under one corner, never a sprinkle.
This band is the hand-off: mist, seafoam, patina, dusk, with grain across the whole run so it never bands. Sections pass their color on. They never stop at a hard line.
No audio files. Each bell is six sine partials and a click of noise, tuned like small brass. The bigger the bell, the lower the note.
Bells ring only after a tap or a key, never on load.
B5988 Hz
D61175 Hz
E61318 Hz
F#61480 Hz
G61568 Hz
A61760 Hz
B61976 Hz
A struck bell is not one note. It is a stack of tones at odd ratios, each fading at its own rate, plus 25ms of filtered noise for the clapper. Height is loudness, the faint tail is how long each one rings.
Jingle strikes three or four bells at random pitches within a quarter second. The chime is two soft bells, 988 Hz then 1480 Hz.
Six intents, one ribbon color each. These colors live on product data only: swatches, ribbons and the builder. Never on type, never as a floor.
Protection
Red & black
Keeps what should stay out, out.
Calm
Blue
For a house that needs to breathe out.
Growth
Green
New starts, gardens, slow good things.
Abundance
Gold & marigold
Plenty at the table and in the jar.
Love
Rose & pink
Warmth for whoever walks in.
Clarity
White & linen
Clears the air after a long week.
Protection hangs two strands, red and the shadow black #2a2a2e. Red and black both drop under 3:1 on dusk, so every strand wears a faint moonmilk edge, and every swatch in the shop carries its word.
Write like she talks at the market table. Say what it is, what it is for, and stop.
Say
Hang it where the door swings.
Not: Elevate your entryway.
Red and black, to keep what should stay out, out.
Not: Curated protective energy for your journey.
Sold out for now.
Not: Hurry! Only 2 left!!
Brass bells, jute, a little silver at the knot.
Not: Seamlessly crafted artisanal luxury.
