Salt Glaze
One dip, four depths.
50 of 50 left · retired when gonePalette
Canvas & version
- Canvas
- Light
- Version
- 1.0.0
Everything on the page sits at a depth. One cobalt, dipped four times, and the porcelain it was cut from: one scale, nothing between the stops, nothing decorated. The interface is stoneware. Raised is glazed: a hard gloss, the glaze gathering darker at the foot, one specular on top. Recessed is bisque, the matte well it sits in. Anything chosen sinks into bisque. One cobalt per screen, the deepest tile of the dip.
Control Meter for display, the condensed rounded monoline drawn for Bandana, bundled with the look and shared with Ground Control and Slow Burn. Figtree for reading. Twelve dipped icons: solid silhouettes, no strokes, each one cut by its own glaze line at its own depth. Things are drawn up out of the glaze, and headline words come up cobalt and drain to ink.
It refuses: a fifth depth, a third material, a gradient on text, a warm grey, a flat button, a drop shadow standing in for depth, a centred hero, an icon that is a variation of another, and a paragraph in Control Meter.
What's inside
folderlooks/salt-glaze/
├── CLAUDE.md ← read this first
├── theme.css all tokens as CSS variables
├── theme.json same tokens, machine-readable
├── fonts/ .woff2 + LICENSE.txt
├── sections/ hero, pricing, footer …
├── components/ buttons, forms …
├── motion.css easings, keyframes, reveals
├── assets/ icons, favicon
├── kit/ the kit sheet, everything on one page
├── demo/ one page wearing the look
└── README.md install + licenceSections · 2 variants each
Components · every state drawn
Motion · baked into this look
Font pack
Control Meter · Figtree
Control Meter · open-licence companions · .woff2 self-hosted · LICENSE.txt included
Install
1 · Pull it in
Download the zip and unzip into your project as ./looks/salt-glaze, or run the command below.
Terminalnpx bandana add salt-glaze --key <your key>2 · Paste into Claude Code
PromptDress this site in the Salt Glaze look at ./looks/salt-glaze. Read ./looks/salt-glaze/CLAUDE.md first and obey it. Put data-look="salt-glaze" on <html>, link theme.css then motion.css, add the icon sprite and the reveal script from the kit, and build every screen from the fragments in sections/ and components/. Never invent a colour, shadow, radius, font, size or motion; if a token, section or component you need does not exist, stop and tell me instead.3 · Everything matches
Every screen Claude builds from now on comes out looking like the kit sheet.
