Tokens · Sanctuary docs

Every token is a custom property prefixed --san-. Its name is the DTCG path joined with hyphens, and a group’s $root token takes the group’s own name: accent.$root is --san-accent. A typography token also has a -tracking property, its letter spacing.

This page is generated from the DTCG files in the package, through their resolver document, each time the site is built. Colors that change with the flavor show one column per flavor. A value that names another token is an alias, shown without the --san- prefix: the stylesheet reads that token, so it follows the theme.

The accent tokens show each flavor’s own accent. Setting data-san-accent points them at another pigment’s glass.

Stone, ink and lead

Token	Lauds	Vespers	Compline	Matins
`--san-surface-sunken`	`#eae6dc`	`#180c13`	`#070b14`	`#010103`
`--san-surface`	`#f5f0e6`	`#1f131a`	`#0d111b`	`#040408`
`--san-surface-raised-1`	`#fbf6ec`	`#271a21`	`#141923`	`#09090f`
`--san-surface-raised-2`	`#fffaf0`	`#2f2129`	`#1b202b`	`#101016`
`--san-surface-raised-3`	`#fffcf8`	`#372931`	`#222833`	`#18181e`
`--san-surface-raised-4`	`#ffffff`	`#40323a`	`#2b303c`	`#202026`
`--san-surface-inverse`	`#1d1d2f`	`#f4e6d2`	`#eee7d9`	`#e2ded3`
`--san-text`	`#1d1d2f`	`#f4e6d2`	`#eee7d9`	`#e2ded3`
`--san-text-muted`	`#45455a`	`#c6b8a6`	`#bdb7a9`	`#b1aea3`
`--san-text-subtle`	`#616177`	`#aa9c8a`	`#9e988b`	`#8d897f`
`--san-text-disabled`	`#9596ae`	`#685b4b`	`#605a4e`	`#535047`
`--san-text-inverse`	`#f5f0e6`	`#1f131a`	`#0d111b`	`#040408`
`--san-lead-soft`	`#dbd5c9`	`#3c2a34`	`#232a39`	`#1a1a22`
`--san-lead`	`#b9b4a7`	`#513d48`	`#363d4d`	`#2d2d36`
`--san-lead-strong`	`#686358`	`#77626d`	`#5b6374`	`#54545e`
`--san-lead-came`	`#231f15`	`#090105`	`#000108`	`#000001`
`--san-umbra-key`	`#25211a at 18%`	`#020001 at 55%`	`#000002 at 60%`	`#000000 at 70%`
`--san-umbra-ambient`	`#25211a at 10%`	`#020001 at 35%`	`#000002 at 40%`	`#000000 at 50%`
`--san-scrim`	`#000000 at 40%`	`#000000 at 60%`	`#000000 at 60%`	`#000000 at 70%`

Glass

ruby

Token	Lauds	Vespers	Compline	Matins
`--san-glass-ruby`	`pigment-ruby-600`	`pigment-ruby-300`	`pigment-ruby-300`	`pigment-ruby-400`
`--san-glass-ruby-lume`	`pigment-ruby-400`	`pigment-ruby-200`	`pigment-ruby-200`	`pigment-ruby-300`
`--san-glass-ruby-ink`	`pigment-ruby-700`	`pigment-ruby-200`	`pigment-ruby-200`	`pigment-ruby-300`
`--san-glass-ruby-pane`	`pigment-ruby-100`	`pigment-ruby-800`	`pigment-ruby-800`	`pigment-ruby-900`
`--san-glass-ruby-on`	`pigment-ruby-50`	`pigment-ruby-950`	`pigment-ruby-950`	`pigment-ruby-950`
`--san-glass-ruby-on-pane`	`pigment-ruby-800`	`pigment-ruby-100`	`pigment-ruby-100`	`pigment-ruby-200`

ember

Token	Lauds	Vespers	Compline	Matins
`--san-glass-ember`	`pigment-ember-600`	`pigment-ember-300`	`pigment-ember-300`	`pigment-ember-400`
`--san-glass-ember-lume`	`pigment-ember-400`	`pigment-ember-200`	`pigment-ember-200`	`pigment-ember-300`
`--san-glass-ember-ink`	`pigment-ember-700`	`pigment-ember-200`	`pigment-ember-200`	`pigment-ember-300`
`--san-glass-ember-pane`	`pigment-ember-100`	`pigment-ember-800`	`pigment-ember-800`	`pigment-ember-900`
`--san-glass-ember-on`	`pigment-ember-50`	`pigment-ember-950`	`pigment-ember-950`	`pigment-ember-950`
`--san-glass-ember-on-pane`	`pigment-ember-800`	`pigment-ember-100`	`pigment-ember-100`	`pigment-ember-200`

amber

Token	Lauds	Vespers	Compline	Matins
`--san-glass-amber`	`pigment-amber-600`	`pigment-amber-300`	`pigment-amber-300`	`pigment-amber-400`
`--san-glass-amber-lume`	`pigment-amber-400`	`pigment-amber-200`	`pigment-amber-200`	`pigment-amber-300`
`--san-glass-amber-ink`	`pigment-amber-700`	`pigment-amber-200`	`pigment-amber-200`	`pigment-amber-300`
`--san-glass-amber-pane`	`pigment-amber-100`	`pigment-amber-800`	`pigment-amber-800`	`pigment-amber-900`
`--san-glass-amber-on`	`pigment-amber-50`	`pigment-amber-950`	`pigment-amber-950`	`pigment-amber-950`
`--san-glass-amber-on-pane`	`pigment-amber-800`	`pigment-amber-100`	`pigment-amber-100`	`pigment-amber-200`

gilt

Token	Lauds	Vespers	Compline	Matins
`--san-glass-gilt`	`pigment-gilt-600`	`pigment-gilt-300`	`pigment-gilt-300`	`pigment-gilt-400`
`--san-glass-gilt-lume`	`pigment-gilt-400`	`pigment-gilt-200`	`pigment-gilt-200`	`pigment-gilt-300`
`--san-glass-gilt-ink`	`pigment-gilt-700`	`pigment-gilt-200`	`pigment-gilt-200`	`pigment-gilt-300`
`--san-glass-gilt-pane`	`pigment-gilt-100`	`pigment-gilt-800`	`pigment-gilt-800`	`pigment-gilt-900`
`--san-glass-gilt-on`	`pigment-gilt-50`	`pigment-gilt-950`	`pigment-gilt-950`	`pigment-gilt-950`
`--san-glass-gilt-on-pane`	`pigment-gilt-800`	`pigment-gilt-100`	`pigment-gilt-100`	`pigment-gilt-200`

verdure

Token	Lauds	Vespers	Compline	Matins
`--san-glass-verdure`	`pigment-verdure-600`	`pigment-verdure-300`	`pigment-verdure-300`	`pigment-verdure-400`
`--san-glass-verdure-lume`	`pigment-verdure-400`	`pigment-verdure-200`	`pigment-verdure-200`	`pigment-verdure-300`
`--san-glass-verdure-ink`	`pigment-verdure-700`	`pigment-verdure-200`	`pigment-verdure-200`	`pigment-verdure-300`
`--san-glass-verdure-pane`	`pigment-verdure-100`	`pigment-verdure-800`	`pigment-verdure-800`	`pigment-verdure-900`
`--san-glass-verdure-on`	`pigment-verdure-50`	`pigment-verdure-950`	`pigment-verdure-950`	`pigment-verdure-950`
`--san-glass-verdure-on-pane`	`pigment-verdure-800`	`pigment-verdure-100`	`pigment-verdure-100`	`pigment-verdure-200`

viridian

Token	Lauds	Vespers	Compline	Matins
`--san-glass-viridian`	`pigment-viridian-600`	`pigment-viridian-300`	`pigment-viridian-300`	`pigment-viridian-400`
`--san-glass-viridian-lume`	`pigment-viridian-400`	`pigment-viridian-200`	`pigment-viridian-200`	`pigment-viridian-300`
`--san-glass-viridian-ink`	`pigment-viridian-700`	`pigment-viridian-200`	`pigment-viridian-200`	`pigment-viridian-300`
`--san-glass-viridian-pane`	`pigment-viridian-100`	`pigment-viridian-800`	`pigment-viridian-800`	`pigment-viridian-900`
`--san-glass-viridian-on`	`pigment-viridian-50`	`pigment-viridian-950`	`pigment-viridian-950`	`pigment-viridian-950`
`--san-glass-viridian-on-pane`	`pigment-viridian-800`	`pigment-viridian-100`	`pigment-viridian-100`	`pigment-viridian-200`

azure

Token	Lauds	Vespers	Compline	Matins
`--san-glass-azure`	`pigment-azure-600`	`pigment-azure-300`	`pigment-azure-300`	`pigment-azure-400`
`--san-glass-azure-lume`	`pigment-azure-400`	`pigment-azure-200`	`pigment-azure-200`	`pigment-azure-300`
`--san-glass-azure-ink`	`pigment-azure-700`	`pigment-azure-200`	`pigment-azure-200`	`pigment-azure-300`
`--san-glass-azure-pane`	`pigment-azure-100`	`pigment-azure-800`	`pigment-azure-800`	`pigment-azure-900`
`--san-glass-azure-on`	`pigment-azure-50`	`pigment-azure-950`	`pigment-azure-950`	`pigment-azure-950`
`--san-glass-azure-on-pane`	`pigment-azure-800`	`pigment-azure-100`	`pigment-azure-100`	`pigment-azure-200`

cobalt

Token	Lauds	Vespers	Compline	Matins
`--san-glass-cobalt`	`pigment-cobalt-600`	`pigment-cobalt-300`	`pigment-cobalt-300`	`pigment-cobalt-400`
`--san-glass-cobalt-lume`	`pigment-cobalt-400`	`pigment-cobalt-200`	`pigment-cobalt-200`	`pigment-cobalt-300`
`--san-glass-cobalt-ink`	`pigment-cobalt-700`	`pigment-cobalt-200`	`pigment-cobalt-200`	`pigment-cobalt-300`
`--san-glass-cobalt-pane`	`pigment-cobalt-100`	`pigment-cobalt-800`	`pigment-cobalt-800`	`pigment-cobalt-900`
`--san-glass-cobalt-on`	`pigment-cobalt-50`	`pigment-cobalt-950`	`pigment-cobalt-950`	`pigment-cobalt-950`
`--san-glass-cobalt-on-pane`	`pigment-cobalt-800`	`pigment-cobalt-100`	`pigment-cobalt-100`	`pigment-cobalt-200`

indigo

Token	Lauds	Vespers	Compline	Matins
`--san-glass-indigo`	`pigment-indigo-600`	`pigment-indigo-300`	`pigment-indigo-300`	`pigment-indigo-400`
`--san-glass-indigo-lume`	`pigment-indigo-400`	`pigment-indigo-200`	`pigment-indigo-200`	`pigment-indigo-300`
`--san-glass-indigo-ink`	`pigment-indigo-700`	`pigment-indigo-200`	`pigment-indigo-200`	`pigment-indigo-300`
`--san-glass-indigo-pane`	`pigment-indigo-100`	`pigment-indigo-800`	`pigment-indigo-800`	`pigment-indigo-900`
`--san-glass-indigo-on`	`pigment-indigo-50`	`pigment-indigo-950`	`pigment-indigo-950`	`pigment-indigo-950`
`--san-glass-indigo-on-pane`	`pigment-indigo-800`	`pigment-indigo-100`	`pigment-indigo-100`	`pigment-indigo-200`

amethyst

Token	Lauds	Vespers	Compline	Matins
`--san-glass-amethyst`	`pigment-amethyst-600`	`pigment-amethyst-300`	`pigment-amethyst-300`	`pigment-amethyst-400`
`--san-glass-amethyst-lume`	`pigment-amethyst-400`	`pigment-amethyst-200`	`pigment-amethyst-200`	`pigment-amethyst-300`
`--san-glass-amethyst-ink`	`pigment-amethyst-700`	`pigment-amethyst-200`	`pigment-amethyst-200`	`pigment-amethyst-300`
`--san-glass-amethyst-pane`	`pigment-amethyst-100`	`pigment-amethyst-800`	`pigment-amethyst-800`	`pigment-amethyst-900`
`--san-glass-amethyst-on`	`pigment-amethyst-50`	`pigment-amethyst-950`	`pigment-amethyst-950`	`pigment-amethyst-950`
`--san-glass-amethyst-on-pane`	`pigment-amethyst-800`	`pigment-amethyst-100`	`pigment-amethyst-100`	`pigment-amethyst-200`

murrey

Token	Lauds	Vespers	Compline	Matins
`--san-glass-murrey`	`pigment-murrey-600`	`pigment-murrey-300`	`pigment-murrey-300`	`pigment-murrey-400`
`--san-glass-murrey-lume`	`pigment-murrey-400`	`pigment-murrey-200`	`pigment-murrey-200`	`pigment-murrey-300`
`--san-glass-murrey-ink`	`pigment-murrey-700`	`pigment-murrey-200`	`pigment-murrey-200`	`pigment-murrey-300`
`--san-glass-murrey-pane`	`pigment-murrey-100`	`pigment-murrey-800`	`pigment-murrey-800`	`pigment-murrey-900`
`--san-glass-murrey-on`	`pigment-murrey-50`	`pigment-murrey-950`	`pigment-murrey-950`	`pigment-murrey-950`
`--san-glass-murrey-on-pane`	`pigment-murrey-800`	`pigment-murrey-100`	`pigment-murrey-100`	`pigment-murrey-200`

rose

Token	Lauds	Vespers	Compline	Matins
`--san-glass-rose`	`pigment-rose-600`	`pigment-rose-300`	`pigment-rose-300`	`pigment-rose-400`
`--san-glass-rose-lume`	`pigment-rose-400`	`pigment-rose-200`	`pigment-rose-200`	`pigment-rose-300`
`--san-glass-rose-ink`	`pigment-rose-700`	`pigment-rose-200`	`pigment-rose-200`	`pigment-rose-300`
`--san-glass-rose-pane`	`pigment-rose-100`	`pigment-rose-800`	`pigment-rose-800`	`pigment-rose-900`
`--san-glass-rose-on`	`pigment-rose-50`	`pigment-rose-950`	`pigment-rose-950`	`pigment-rose-950`
`--san-glass-rose-on-pane`	`pigment-rose-800`	`pigment-rose-100`	`pigment-rose-100`	`pigment-rose-200`

Accent

Token	Lauds	Vespers	Compline	Matins
`--san-accent`	`glass-cobalt`	`glass-amber`	`glass-cobalt`	`glass-ruby`
`--san-accent-lume`	`glass-cobalt-lume`	`glass-amber-lume`	`glass-cobalt-lume`	`glass-ruby-lume`
`--san-accent-ink`	`glass-cobalt-ink`	`glass-amber-ink`	`glass-cobalt-ink`	`glass-ruby-ink`
`--san-accent-pane`	`glass-cobalt-pane`	`glass-amber-pane`	`glass-cobalt-pane`	`glass-ruby-pane`
`--san-accent-on`	`glass-cobalt-on`	`glass-amber-on`	`glass-cobalt-on`	`glass-ruby-on`
`--san-accent-on-pane`	`glass-cobalt-on-pane`	`glass-amber-on-pane`	`glass-cobalt-on-pane`	`glass-ruby-on-pane`

Status

Token	Value
`--san-danger`	`glass-ruby`
`--san-danger-lume`	`glass-ruby-lume`
`--san-danger-ink`	`glass-ruby-ink`
`--san-danger-pane`	`glass-ruby-pane`
`--san-danger-on`	`glass-ruby-on`
`--san-danger-on-pane`	`glass-ruby-on-pane`
`--san-warning`	`glass-amber`
`--san-warning-lume`	`glass-amber-lume`
`--san-warning-ink`	`glass-amber-ink`
`--san-warning-pane`	`glass-amber-pane`
`--san-warning-on`	`glass-amber-on`
`--san-warning-on-pane`	`glass-amber-on-pane`
`--san-success`	`glass-verdure`
`--san-success-lume`	`glass-verdure-lume`
`--san-success-ink`	`glass-verdure-ink`
`--san-success-pane`	`glass-verdure-pane`
`--san-success-on`	`glass-verdure-on`
`--san-success-on-pane`	`glass-verdure-on-pane`
`--san-info`	`glass-azure`
`--san-info-lume`	`glass-azure-lume`
`--san-info-ink`	`glass-azure-ink`
`--san-info-pane`	`glass-azure-pane`
`--san-info-on`	`glass-azure-on`
`--san-info-on-pane`	`glass-azure-on-pane`

Syntax

Token	Value
`--san-syntax-keyword`	`glass-amethyst`
`--san-syntax-string`	`glass-verdure`
`--san-syntax-number`	`glass-ember`
`--san-syntax-constant`	`glass-amber`
`--san-syntax-function`	`glass-azure`
`--san-syntax-type`	`glass-gilt`
`--san-syntax-property`	`glass-cobalt`
`--san-syntax-tag`	`glass-ruby`
`--san-syntax-operator`	`glass-viridian`
`--san-syntax-regex`	`glass-rose`
`--san-syntax-variable`	`text`
`--san-syntax-punctuation`	`text-muted`
`--san-syntax-comment`	`text-subtle`

Terminal

Token	Lauds	Vespers	Compline	Matins
`--san-ansi-red`	`glass-ruby`	`glass-ruby`	`glass-ruby`	`glass-ruby`
`--san-ansi-bright-red`	`glass-ruby-lume`	`glass-ruby-lume`	`glass-ruby-lume`	`glass-ruby-lume`
`--san-ansi-green`	`glass-verdure`	`glass-verdure`	`glass-verdure`	`glass-verdure`
`--san-ansi-bright-green`	`glass-verdure-lume`	`glass-verdure-lume`	`glass-verdure-lume`	`glass-verdure-lume`
`--san-ansi-yellow`	`glass-gilt`	`glass-gilt`	`glass-gilt`	`glass-gilt`
`--san-ansi-bright-yellow`	`glass-gilt-lume`	`glass-gilt-lume`	`glass-gilt-lume`	`glass-gilt-lume`
`--san-ansi-blue`	`glass-cobalt`	`glass-cobalt`	`glass-cobalt`	`glass-cobalt`
`--san-ansi-bright-blue`	`glass-cobalt-lume`	`glass-cobalt-lume`	`glass-cobalt-lume`	`glass-cobalt-lume`
`--san-ansi-magenta`	`glass-amethyst`	`glass-amethyst`	`glass-amethyst`	`glass-amethyst`
`--san-ansi-bright-magenta`	`glass-amethyst-lume`	`glass-amethyst-lume`	`glass-amethyst-lume`	`glass-amethyst-lume`
`--san-ansi-cyan`	`glass-viridian`	`glass-viridian`	`glass-viridian`	`glass-viridian`
`--san-ansi-bright-cyan`	`glass-viridian-lume`	`glass-viridian-lume`	`glass-viridian-lume`	`glass-viridian-lume`
`--san-ansi-black`	`text-muted`	`surface-raised-3`	`surface-raised-3`	`surface-raised-3`
`--san-ansi-white`	`lead`	`text-muted`	`text-muted`	`text-muted`
`--san-ansi-bright-black`	`text-subtle`	`lead-strong`	`lead-strong`	`lead-strong`
`--san-ansi-bright-white`	`lead-soft`	`text`	`text`	`text`

Named windows

Token	Value
`--san-window-rosace`Ruby against cobalt, the rose window.	`pigment-ruby-600 0%, pigment-murrey-500 50%, pigment-cobalt-400 100%`
`--san-window-jesse`Vine, gold and blood: the Jesse tree.	`pigment-verdure-600 0%, pigment-gilt-500 50%, pigment-ruby-400 100%`
`--san-window-lancet`A tall cool window, all blues.	`pigment-viridian-600 0%, pigment-azure-500 50%, pigment-indigo-400 100%`
`--san-window-aureole`Halo light, gold falling to coal.	`pigment-gilt-600 0%, pigment-amber-500 50%, pigment-ember-400 100%`
`--san-window-vesperal`The west window at sunset.	`pigment-indigo-600 0%, pigment-amethyst-500 50%, pigment-rose-400 100%`

Pigments

rubyCopper ruby, the red of the great rose windows.

Token	Value
`--san-pigment-ruby-50`	`#fef3f2`
`--san-pigment-ruby-100`	`#fee4e2`
`--san-pigment-ruby-200`	`#fdcbc7`
`--san-pigment-ruby-300`	`#fca59f`
`--san-pigment-ruby-400`	`#fa726e`
`--san-pigment-ruby-500`	`#ed3a42`
`--san-pigment-ruby-600`	`#c11929`
`--san-pigment-ruby-700`	`#95101d`
`--san-pigment-ruby-800`	`#6c0812`
`--san-pigment-ruby-900`	`#4c0309`
`--san-pigment-ruby-950`	`#300003`

emberRed-orange, a coal seen through thick glass.

Token	Value
`--san-pigment-ember-50`	`#fff3ee`
`--san-pigment-ember-100`	`#fee5da`
`--san-pigment-ember-200`	`#fdcdb7`
`--san-pigment-ember-300`	`#fca87f`
`--san-pigment-ember-400`	`#fa782a`
`--san-pigment-ember-500`	`#d36219`
`--san-pigment-ember-600`	`#a54b11`
`--san-pigment-ember-700`	`#7f380a`
`--san-pigment-ember-800`	`#5c2604`
`--san-pigment-ember-900`	`#401801`
`--san-pigment-ember-950`	`#280b00`

amberDeep silver stain, fired towards orange.

Token	Value
`--san-pigment-amber-50`	`#fef4e8`
`--san-pigment-amber-100`	`#fee7ce`
`--san-pigment-amber-200`	`#fdd09e`
`--san-pigment-amber-300`	`#f6af57`
`--san-pigment-amber-400`	`#dc9021`
`--san-pigment-amber-500`	`#b87819`
`--san-pigment-amber-600`	`#915b11`
`--san-pigment-amber-700`	`#70440a`
`--san-pigment-amber-800`	`#512f04`
`--san-pigment-amber-900`	`#391e01`
`--san-pigment-amber-950`	`#230f00`

giltPale silver stain, the yellow of halos.

Token	Value
`--san-pigment-gilt-50`	`#fcf6e3`
`--san-pigment-gilt-100`	`#f6ebc8`
`--san-pigment-gilt-200`	`#ecd89a`
`--san-pigment-gilt-300`	`#dbbd58`
`--san-pigment-gilt-400`	`#c1a021`
`--san-pigment-gilt-500`	`#a1851a`
`--san-pigment-gilt-600`	`#806511`
`--san-pigment-gilt-700`	`#644c0a`
`--san-pigment-gilt-800`	`#493404`
`--san-pigment-gilt-900`	`#332201`
`--san-pigment-gilt-950`	`#1f1200`

verdureLeaf green of foliage borders.

Token	Value
`--san-pigment-verdure-50`	`#ecfbea`
`--san-pigment-verdure-100`	`#d9f4d5`
`--san-pigment-verdure-200`	`#b8e9b3`
`--san-pigment-verdure-300`	`#8cd584`
`--san-pigment-verdure-400`	`#61bc59`
`--san-pigment-verdure-500`	`#3ea036`
`--san-pigment-verdure-600`	`#1b7f12`
`--san-pigment-verdure-700`	`#12610b`
`--san-pigment-verdure-800`	`#094505`
`--san-pigment-verdure-900`	`#032f02`
`--san-pigment-verdure-950`	`#001c00`

viridianBlue-green, cool and mineral.

Token	Value
`--san-pigment-viridian-50`	`#e9fbf4`
`--san-pigment-viridian-100`	`#d2f4e8`
`--san-pigment-viridian-200`	`#ace8d4`
`--san-pigment-viridian-300`	`#74d5b8`
`--san-pigment-viridian-400`	`#37bc9a`
`--san-pigment-viridian-500`	`#1f9e80`
`--san-pigment-viridian-600`	`#157a63`
`--san-pigment-viridian-700`	`#0d5e4b`
`--san-pigment-viridian-800`	`#064234`
`--san-pigment-viridian-900`	`#022d22`
`--san-pigment-viridian-950`	`#001a13`

azureSky blue of clerestory grounds.

Token	Value
`--san-pigment-azure-50`	`#ebf8fe`
`--san-pigment-azure-100`	`#d4f0fe`
`--san-pigment-azure-200`	`#aae3fd`
`--san-pigment-azure-300`	`#6bcdf7`
`--san-pigment-azure-400`	`#26b2e3`
`--san-pigment-azure-500`	`#1e94be`
`--san-pigment-azure-600`	`#157394`
`--san-pigment-azure-700`	`#0d5872`
`--san-pigment-azure-800`	`#063e51`
`--san-pigment-azure-900`	`#022a38`
`--san-pigment-azure-950`	`#001822`

cobaltCobalt blue, the signature of Gothic glazing.

Token	Value
`--san-pigment-cobalt-50`	`#f1f6fe`
`--san-pigment-cobalt-100`	`#e1ecfe`
`--san-pigment-cobalt-200`	`#c5dbfd`
`--san-pigment-cobalt-300`	`#9bc1fb`
`--san-pigment-cobalt-400`	`#6ca3fa`
`--san-pigment-cobalt-500`	`#3683f8`
`--san-pigment-cobalt-600`	`#1062d3`
`--san-pigment-cobalt-700`	`#094aa4`
`--san-pigment-cobalt-800`	`#043377`
`--san-pigment-cobalt-900`	`#012254`
`--san-pigment-cobalt-950`	`#001237`

indigoBlue-violet, glass at the last light.

Token	Value
`--san-pigment-indigo-50`	`#f4f5fe`
`--san-pigment-indigo-100`	`#e7eafe`
`--san-pigment-indigo-200`	`#d2d6fd`
`--san-pigment-indigo-300`	`#b4b9fb`
`--san-pigment-indigo-400`	`#9497fa`
`--san-pigment-indigo-500`	`#7772f8`
`--san-pigment-indigo-600`	`#5b50d4`
`--san-pigment-indigo-700`	`#4539a9`
`--san-pigment-indigo-800`	`#30267d`
`--san-pigment-indigo-900`	`#1f1858`
`--san-pigment-indigo-950`	`#110b39`

amethystManganese purple.

Token	Value
`--san-pigment-amethyst-50`	`#f8f3fe`
`--san-pigment-amethyst-100`	`#f1e6fe`
`--san-pigment-amethyst-200`	`#e4cefd`
`--san-pigment-amethyst-300`	`#d2abfb`
`--san-pigment-amethyst-400`	`#bf81fa`
`--san-pigment-amethyst-500`	`#a65ee5`
`--san-pigment-amethyst-600`	`#863ec0`
`--san-pigment-amethyst-700`	`#682a98`
`--san-pigment-amethyst-800`	`#4a1a6f`
`--san-pigment-amethyst-900`	`#330f4e`
`--san-pigment-amethyst-950`	`#1f0532`

murreyMurrey, the mulberry red-purple of glaziers.

Token	Value
`--san-pigment-murrey-50`	`#fef2f9`
`--san-pigment-murrey-100`	`#fee2f2`
`--san-pigment-murrey-200`	`#fdc6e7`
`--san-pigment-murrey-300`	`#fc9ad8`
`--san-pigment-murrey-400`	`#ec6fc2`
`--san-pigment-murrey-500`	`#d04ea7`
`--san-pigment-murrey-600`	`#ab2c86`
`--san-pigment-murrey-700`	`#861a68`
`--san-pigment-murrey-800`	`#610d4b`
`--san-pigment-murrey-900`	`#440633`
`--san-pigment-murrey-950`	`#2a011f`

roseSoft rose, flesh tones and dawn.

Token	Value
`--san-pigment-rose-50`	`#fff2f5`
`--san-pigment-rose-100`	`#fee3e9`
`--san-pigment-rose-200`	`#fdc9d5`
`--san-pigment-rose-300`	`#fca1b8`
`--san-pigment-rose-400`	`#ef769a`
`--san-pigment-rose-500`	`#d2577e`
`--san-pigment-rose-600`	`#ad3760`
`--san-pigment-rose-700`	`#882448`
`--san-pigment-rose-800`	`#631632`
`--san-pigment-rose-900`	`#450c21`
`--san-pigment-rose-950`	`#2b0412`

Space and size

Token	Value
`--san-space-0`	`0rem`
`--san-space-1`	`0.25rem`
`--san-space-2`	`0.5rem`
`--san-space-3`	`0.75rem`
`--san-space-4`	`1rem`
`--san-space-5`	`1.25rem`
`--san-space-6`	`1.5rem`
`--san-space-8`	`2rem`
`--san-space-10`	`2.5rem`
`--san-space-12`	`3rem`
`--san-space-16`	`4rem`
`--san-space-20`	`5rem`
`--san-space-24`	`6rem`
`--san-space-32`	`8rem`
`--san-space-px`	`0.0625rem`
`--san-space-half`	`0.125rem`
`--san-size-control-sm`	`2rem`
`--san-size-control-md`	`2.5rem`
`--san-size-control-lg`	`3rem`
`--san-size-icon-sm`	`1rem`
`--san-size-icon-md`	`1.25rem`
`--san-size-icon-lg`	`1.5rem`
`--san-size-measure`Maximum line length for running text.	`42rem`
`--san-breakpoint-sm`	`40rem`
`--san-breakpoint-md`	`48rem`
`--san-breakpoint-lg`	`64rem`
`--san-breakpoint-xl`	`80rem`
`--san-breakpoint-2xl`	`96rem`

Shape

Token	Value
`--san-radius-none`	`0rem`
`--san-radius-xs`	`0.125rem`
`--san-radius-sm`	`0.25rem`
`--san-radius-md`	`0.5rem`
`--san-radius-lg`	`0.75rem`
`--san-radius-xl`	`1.25rem`
`--san-radius-full`	`624.9375rem`
`--san-border-width-hairline`	`1px`
`--san-border-width-came`The lead line between two panes.	`2px`
`--san-border-width-heavy`	`3px`

Type

Token	Value
`--san-font-family-display`	`Cormorant Garamond, Cormorant, EB Garamond, Georgia, serif`
`--san-font-family-text`	`Hanken Grotesk, Inter, system-ui, sans-serif`
`--san-font-family-mono`	`JetBrains Mono, Cascadia Code, ui-monospace, monospace`
`--san-font-family-inscription`	`Cinzel, Cormorant Garamond, Georgia, serif`
`--san-font-weight-regular`	`400`
`--san-font-weight-medium`	`500`
`--san-font-weight-semibold`	`600`
`--san-font-weight-bold`	`700`
`--san-type-display-lg`	`500 4.5rem/1.04 font-family-display`
`--san-type-display-lg-tracking`	`-0.09rem`
`--san-type-display-md`	`500 3.5rem/1.08 font-family-display`
`--san-type-display-md-tracking`	`-0.063rem`
`--san-type-display-sm`	`500 2.75rem/1.1 font-family-display`
`--san-type-display-sm-tracking`	`-0.04125rem`
`--san-type-headline-lg`	`500 2.25rem/1.16 font-family-display`
`--san-type-headline-lg-tracking`	`-0.0225rem`
`--san-type-headline-md`	`600 1.875rem/1.2 font-family-display`
`--san-type-headline-md-tracking`	`-0.01125rem`
`--san-type-headline-sm`	`600 1.5rem/1.25 font-family-display`
`--san-type-headline-sm-tracking`	`0rem`
`--san-type-title-lg`	`600 1.25rem/1.4 font-family-text`
`--san-type-title-lg-tracking`	`-0.00625rem`
`--san-type-title-md`	`600 1rem/1.5 font-family-text`
`--san-type-title-md-tracking`	`0rem`
`--san-type-title-sm`	`600 0.875rem/1.43 font-family-text`
`--san-type-title-sm-tracking`	`0.00438rem`
`--san-type-body-lg`	`400 1.125rem/1.6 font-family-text`
`--san-type-body-lg-tracking`	`0rem`
`--san-type-body-md`	`400 1rem/1.55 font-family-text`
`--san-type-body-md-tracking`	`0rem`
`--san-type-body-sm`	`400 0.875rem/1.5 font-family-text`
`--san-type-body-sm-tracking`	`0.00263rem`
`--san-type-label-lg`	`500 0.875rem/1.43 font-family-text`
`--san-type-label-lg-tracking`	`0.00875rem`
`--san-type-label-md`	`500 0.75rem/1.34 font-family-text`
`--san-type-label-md-tracking`	`0.015rem`
`--san-type-label-sm`	`500 0.6875rem/1.45 font-family-text`
`--san-type-label-sm-tracking`	`0.0275rem`
`--san-type-inscription`	`600 0.75rem/1.34 font-family-inscription`
`--san-type-inscription-tracking`	`0.135rem`
`--san-type-code-md`	`400 0.875rem/1.6 font-family-mono`
`--san-type-code-md-tracking`	`0rem`
`--san-type-code-sm`	`400 0.78125rem/1.6 font-family-mono`
`--san-type-code-sm-tracking`	`0rem`

Motion

Token	Value
`--san-duration-instant`	`80ms`
`--san-duration-fast`	`140ms`
`--san-duration-base`	`220ms`
`--san-duration-slow`	`360ms`
`--san-duration-slower`	`560ms`
`--san-duration-procession`Light moving across stone: flavor and glow changes.	`900ms`
`--san-ease-standard`	`cubic-bezier(0.2, 0, 0, 1)`
`--san-ease-enter`	`cubic-bezier(0.05, 0.7, 0.1, 1)`
`--san-ease-exit`	`cubic-bezier(0.3, 0, 0.8, 0.15)`
`--san-ease-linear`	`cubic-bezier(0, 0, 1, 1)`

Light

Token	Value
`--san-elevation-0`	`0px 0px 0px 0px umbra-key, 0px 0px 0px 0px umbra-ambient`
`--san-elevation-1`	`0px 1px 2px 0px umbra-key, 0px 1px 3px 1px umbra-ambient`
`--san-elevation-2`	`0px 2px 4px -1px umbra-key, 0px 4px 10px 0px umbra-ambient`
`--san-elevation-3`	`0px 4px 8px -2px umbra-key, 0px 10px 24px 0px umbra-ambient`
`--san-elevation-4`	`0px 8px 16px -4px umbra-key, 0px 18px 40px 0px umbra-ambient`
`--san-elevation-5`	`0px 12px 24px -6px umbra-key, 0px 32px 64px 0px umbra-ambient`
`--san-blur-sm`	`8px`
`--san-blur-md`	`16px`
`--san-blur-lg`	`32px`

State and layers

Opacity of the content colour laid over a control in each interaction state.

Token	Value
`--san-state-hover`	`0.08`
`--san-state-focus`	`0.12`
`--san-state-pressed`	`0.16`
`--san-state-disabled-content`	`0.38`
`--san-state-disabled-container`	`0.12`
`--san-layer-base`	`0`
`--san-layer-raised`	`10`
`--san-layer-sticky`	`100`
`--san-layer-overlay`	`200`
`--san-layer-modal`	`300`
`--san-layer-toast`	`400`
`--san-layer-tooltip`	`500`

CSS only

The DTCG format has no color functions and no clip paths, so these tokens exist only in the stylesheet. They are computed from the flavor, accent, glazing and window, and the value shown is the stylesheet's first declaration.

Token	Declaration
`--san-light`	`oklch(1 0 0)`
`--san-shape-lancet`	`polygon(0% 100%, 0% 38%, 0.28% 34.72%, 1.12% 31.46%, 2.51% 28.24%, 4.44% 25.07%, 6.91% 21.97%, 9.9% 18.96%, 13.4% 16.06%, 17.38% 13.28%, 21.82% 10.64%, 26.69% 8.15%, 31.98% 5.83%, 37.65% 3.69%, 43.67% 1.75%, 50% 0%, 56.33% 1.75%, 62.35% 3.69%, 68.02% 5.83%, 73.31% 8.15%, 78.18% 10.64%, 82.62% 13.28%, 86.6% 16.06%, 90.1% 18.96%, 93.09% 21.97%, 95.56% 25.07%, 97.49% 28.24%, 98.88% 31.46%, 99.72% 34.72%, 100% 38%, 100% 100%)`
`--san-shape-ogive`	`polygon(0% 100%, 0% 100%, 0.28% 91.37%, 1.12% 82.79%, 2.51% 74.31%, 4.44% 65.96%, 6.91% 57.81%, 9.9% 49.9%, 13.4% 42.26%, 17.38% 34.95%, 21.82% 28.01%, 26.69% 21.46%, 31.98% 15.35%, 37.65% 9.72%, 43.67% 4.59%, 50% 0%, 56.33% 4.59%, 62.35% 9.72%, 68.02% 15.35%, 73.31% 21.46%, 78.18% 28.01%, 82.62% 34.95%, 86.6% 42.26%, 90.1% 49.9%, 93.09% 57.81%, 95.56% 65.96%, 97.49% 74.31%, 98.88% 82.79%, 99.72% 91.37%, 100% 100%, 100% 100%)`
`--san-harmony-a`	`var(--san-pigment-azure-600)`
`--san-harmony-b`	`var(--san-pigment-cobalt-500)`
`--san-harmony-c`	`var(--san-pigment-indigo-400)`
`--san-cast-sm`	`0 0 12px -2px color-mix(in oklch, var(--san-accent) 45%, transparent)`
`--san-cast-md`	`0 0 28px -4px color-mix(in oklch, var(--san-accent) 50%, transparent)`
`--san-cast-lg`	`0 0 18px -2px color-mix(in oklch, var(--san-accent-lume) 40%, transparent), 0 0 72px -8px color-mix(in oklch, var(--san-accent) 55%, transparent)`
`--san-halo`	`0 0 0 2px var(--san-surface), 0 0 0 4px var(--san-accent)`
`--san-window-a`	`var(--san-accent-pane)`
`--san-window-b`	`var(--san-accent)`
`--san-window-c`	`var(--san-accent-lume)`
`--san-window`	`linear-gradient(160deg in oklch, var(--san-window-a), var(--san-window-b) 55%, var(--san-window-c))`
`--san-glaze-bg`	`var(--san-accent)`
`--san-glaze-bg-hover`	`color-mix(in oklch, var(--san-accent), var(--san-accent-lume) 55%)`
`--san-glaze-fg`	`var(--san-accent-on)`
`--san-glaze-border`	`transparent`
`--san-glaze-sheen`	`linear-gradient(180deg, color-mix(in oklch, var(--san-light) 20%, transparent), transparent 55%)`
`--san-glaze-glow`	`0 0 0 0 transparent`
`--san-glaze-blur`	`none`