Color roles

Components never reference a raw palette color. They use semantic roles, which resolve to a palette color in the nearest flavor scope. The same names work as CSS variables (--sb-canvas) and as Tailwind color keys (bg-canvas, text-fg-muted, border-line-strong).

Semantic tokens

Generated from semanticRoles. The swatches are the token resolved in each flavor.

Semantic color roles with their CSS variable, Tailwind key, palette color and the hex value in every flavor

CSS variable	Tailwind key	Palette	Dusk	Midnight	Blackout	Daybreak
--sb-canvas	canvas	base	#2f2235	#111629	#060910	#f9f5fa
--sb-canvas-subtle	canvas-subtle	mantle	#271b2c	#0b0f20	#03050a	#f1eaf2
--sb-canvas-sunken	canvas-sunken	crust	#1f1424	#060918	#010205	#e7e0e9
--sb-panel	panel	surface0	#392c3e	#1b2034	#0e131b	#ebe3ec
--sb-panel-hover	panel-hover	surface1	#433748	#262c3f	#181d26	#e0d7e1
--sb-panel-active	panel-active	surface2	#4d4152	#323749	#232831	#d5ccd7
--sb-fg	fg	text	#f1edf3	#ebedf2	#eef0f4	#2a1d2d
--sb-fg-muted	fg-muted	subtext1	#d3cdd6	#c6c9d1	#c3c6cb	#4d4050
--sb-fg-subtle	fg-subtle	subtext0	#b8afbc	#a2a6b1	#9da0a6	#635665
--sb-fg-faint	fg-faint	overlay2	#968d9b	#7d818e	#767a82	#776b7a
--sb-fg-disabled	fg-disabled	overlay1	#7c7182	#626776	#5b5f67	#8d828f
--sb-line	line	overlay0	#615667	#474c5d	#393d46	#c4bac6
--sb-line-strong	line-strong	overlay1	#7c7182	#626776	#5b5f67	#8d828f
--sb-line-bright	line-bright	overlay2	#968d9b	#7d818e	#767a82	#776b7a
--sb-primary	primary	plasma	#fd65b2	#fd65b2	#fd65b2	#c20072
--sb-secondary	secondary	ultraviolet	#b580ff	#b580ff	#b580ff	#7c3ad3
--sb-info	info	ion	#59a7ff	#59a7ff	#59a7ff	#0160d1
--sb-success	success	acid	#a1ee54	#a1ee54	#a1ee54	#2d7304
--sb-warning	warning	sodium	#ffa73e	#ffa73e	#ffa73e	#9c5100
--sb-danger	danger	laser	#ff7379	#ff7379	#ff7379	#c51d28
--sb-ring	ring	plasma	#fd65b2	#fd65b2	#fd65b2	#c20072
--sb-link	link	plasma	#fd65b2	#fd65b2	#fd65b2	#c20072

• Surfaces: canvas is the page; canvas-subtle holds sidebars, navigation and inputs; canvas-sunken holds app chrome, HUD backdrops and code. panel raises cards, menus and popovers, with panel-hover and panel-active for interaction.
• Text: fg for body text, fg-muted for secondary text, fg-subtle for placeholders, fg-faint for icons and comments, fg-disabled for disabled controls.
• Lines: line for decorative hairlines, line-strong for component boundaries such as input borders (3:1 or better), line-bright for emphasis.
• Intents: primary (or the data-accent choice), secondary, info, success, warning, danger. ring and link follow primary.

Derived tokens

These are built with color-mix() in @static-bloom/css and have no palette entry of their own.

CSS variable	Value	Tailwind key
--sb-on-<intent>	--sb-on-accent: text on a solid intent fill (crust on dark flavors, base on Daybreak)	on-primary, on-secondary, on-info, on-success, on-warning, on-danger
--sb-<intent>-soft	intent at 16% over transparent	none (CSS only)
--sb-soft-ink	share of the intent in soft-variant and button-hover text, the rest is fg: 100% in Blackout, 90% in Midnight, 75% in Dusk and Daybreak	none (CSS only)
--sb-selection	ultraviolet at 35%	none (CSS only)
--sb-backdrop	crust at 72%, behind dialogs	backdrop
--sb-glass	base at 88%, for panels over imagery	glass

Accents

Every accent passes 4.5:1 on crust, mantle, base and surface0 in its flavor, so any of them can be used for text. Meanings stay stable across flavors:

The twelve accents with their meaning, tokens and a badge in a dark and a light flavor

Accent	Meaning	Tokens	Dark	Daybreak
plasma	Brand primary: links, focusprimaryringlink	--sb-plasmasb-plasma	plasma	plasma
laser	Danger, errors, deletionsdanger	--sb-lasersb-laser	laser	laser
ember	Rose-coral: parameters, booleans	--sb-embersb-ember	ember	ember
sodium	Warning; numbers and constantswarning	--sb-sodiumsb-sodium	sodium	sodium
halogen	Lamp yellow: types, highlights	--sb-halogensb-halogen	halogen	halogen
acid	Success; stringssuccess	--sb-acidsb-acid	acid	acid
coolant	Aquamarine: operators, regex	--sb-coolantsb-coolant	coolant	coolant
frost	Ice blue: properties	--sb-frostsb-frost	frost	frost
ion	Info; functionsinfo	--sb-ionsb-ion	ion	ion
ultraviolet	Secondary; keywordssecondary	--sb-ultravioletsb-ultraviolet	ultraviolet	ultraviolet
orchid	Lilac-pink: storage, decorators	--sb-orchidsb-orchid	orchid	orchid
chrome	Silver: neutral and metal badges	--sb-chromesb-chrome	chrome	chrome

Syntax roles

Generated from syntaxRoles and used by the Expressive Code themes of the Starlight plugin. Code backgrounds are crust; dark flavors share the token colors.

Syntax highlighting roles with their palette color and samples in Midnight and Daybreak

Role	Palette	Midnight	Daybreak
keyword	ultraviolet	keyword	keyword
storage	orchid	storage	storage
modifier	orchid	modifier	modifier
string	acid	string	string
number	sodium	number	number
constant	sodium	constant	constant
boolean	ember	boolean	boolean
null	ember	null	null
function	ion	function	function
method	ion	method	method
type	halogen	type	type
class	halogen	class	class
interface	halogen	interface	interface
enum	halogen	enum	enum
namespace	halogen	namespace	namespace
variable	text	variable	variable
parameter	ember	parameter	parameter
property	frost	property	property
tag	plasma	tag	tag
attribute	coolant	attribute	attribute
operator	coolant	operator	operator
punctuation	overlay2	punctuation	punctuation
comment	overlay2italic	comment	comment
regex	coolant	regex	regex
escape	plasma	escape	escape
decorator	orchid	decorator	decorator
markup-heading	plasma	markup-heading	markup-heading
markup-link	ion	markup-link	markup-link
inserted	acid	inserted	inserted
deleted	laser	deleted	deleted
changed	sodium	changed	changed
editor-bg	crust	crust fill	crust fill
selection	ultraviolet30%	ultraviolet fill	ultraviolet fill
line-highlight	surface0	surface0 fill	surface0 fill