Pot-metal
Glass coloured through its whole body. Solid, opaque accent.
Every axis, live
Playground
Change the light in the lectern above, or pick a value below. Every section follows it.
I · Flavors
The same building, four hours of light
A flavor is the canonical hour at which you stand in the nave. Stone, ink and shadow change with it; every pigment is re-toned so it stays legible. Each card is themed on its own, nested inside this page.
II · Pigments
Every glass, every tone
Pigments are flavor-independent ramps generated in OKLCH, so a tone number means the same lightness in every hue. The outlined tone is the one the current flavor uses as that glass. Pick a name to make it the accent; pick any tone or role to copy its hex.
Stone, lead and ink of this flavor
III · Glazing
One accent, three ways of holding color
Glazing decides how the accent is rendered on a filled element. It is a separate axis from the accent itself, so any pigment works in any glazing.
Flashed
A thin skin of colour over clear glass. Translucent, glowing accent.
Grisaille
Monochrome glass with a coloured border. Accent as a line only.
IV · Windows
Light that is cast, not applied
The window colors ambient light (beams, glows, hero gradients) while the accent keeps doing the precise work. It always follows the accent: alone, or leaded with its two neighbors on the hue wheel.
Named windows
Five fixed gradients for a single place, such as a cover or an illustration. They do not follow the accent and are not a theme switch.
V · Components
What the tokens feel like in use
Plain HTML and CSS reading only Sanctuary custom properties. This is a preview of the future component library, not the library itself.
Buttons
Chips
AccentNeutralConsecratedVigilProfanedNotice
Form
Navigation
The arms of the cross, each ending in a rose.
Where the hours are sung, behind the screen.
Stone under stone, lit by a single lamp.
Progress
Glazing the north transept: 64%
Status
Notice. Vespers begins at dusk.
Done. The window was leaded and set.
Careful. Silver stain darkens when over-fired.
Failed. A pane cracked in the kiln.
Lancet card
North rose, restored
The arch is a token: --san-shape-lancet. Media, avatars and badges can wear it.
Dialog
Extinguish the candles?
The nave will fall back to Matins. You can light them again at any hour.
ABHLSGEach avatar sets its own accent
VI · Light
Lumen: elevation is illumination
In a dark building, what is nearer to you is not only shadowed from behind, it is better lit. Each Lumen level pairs a lighter stone with a deeper umbra; at level 5 only the umbra deepens. Cast is the separate, colored glow that glass throws on its surroundings.
Lumen 0surface
Lumen 1raised-1
Lumen 2raised-2
Lumen 3raised-3
Lumen 4raised-4
Lumen 5raised-4, deeper umbra
cast-smfocus, chips
cast-mdhovered glass
cast-lgheroes, active windows
halofocus ring
VII · Foundations
Type, shape, space and motion
The systemic layer: every value below is a DTCG token with a matching custom property.
Type scale
display-lgLux aeternadisplay-smLight through glassheadline-mdThe nave at dusktitle-lgTitle large, for cards and dialogsbody-lgBody large. Stone is quiet so that color can speak.body-mdBody medium, the default running text of the system.label-lgLabel large · buttons and tabsinscriptionInscription · carved overlinescode-mdconst glass = pigment.cobalt[300];Shape
none
xs
sm
md
lg
xl
full
lancet
ogive
Lead
hairline
came
heavy
Space
1234681216Motion
ease-standard · slowease-enter · slowease-exit · slowease-standard · processionVIII · Ricing
Out of the browser, onto the desktop
The same palette is emitted as terminal themes, base16 schemes and bar and window-manager variables. This mock reads the generated ANSI and syntax tokens.