Colors
Lyra separates fixed primitive scales from semantic tokens. Use semantic tokens in components and application CSS; primitives are the palette that defines those meanings, not a second API for product code.
Primary — Indigo
Indigo is Lyra's accent scale. --accent resolves to indigo 600 in the default light theme, with
nearby steps reserved for hover, active, soft and readable soft-text states. Consume those semantic
names instead of choosing a scale step directly.
Indigo 50–950
The full scale is fixed across themes. Its token names are useful when defining the semantic
layer, but components should use --accent, --accent-hover and related semantic tokens.
--indigo-50#F1F1FC--indigo-100#E0E1FB--indigo-200#C6C8F5--indigo-300#A5A7EE--indigo-400#8285E4--indigo-500#6E6ADE--indigo-600#5B5BD6--indigo-700#4A48B8--indigo-800#3D3C94--indigo-900#343475--indigo-950#121430Neutrals
Slate provides the cool-neutral ramp for surfaces, borders and text. The light theme maps its
semantic layer to this scale, so --surface-card, --border-default and --text-primary continue
to express purpose even if their underlying primitive changes.
Slate 50–900
Use the semantic surface, border and text tokens in product UI. Reach for a slate primitive only while authoring or maintaining the token layer itself.
--slate-50#F8FAFC--slate-100#F1F5F9--slate-200#E2E8F0--slate-300#CBD5E1--slate-400#94A3B8--slate-500#64748B--slate-600#475569--slate-700#334155--slate-800#1E293B--slate-900#0F172ASemantic colors
Success, warning, danger and info each provide a strong token for emphasis, a soft token for a
subtle background, and a text token for readable ink on that background. This pairing keeps status
states consistent across components. Text on a solid --danger fill (for example .lyra-btn--danger)
uses --on-danger, #FFFFFF by default. Override it when a custom --danger is too light for white.
Intent tokens
Pair --*-soft with its matching --*-text; use --success, --warning, --danger or --info
for the strong signal. Do not substitute green, amber, red or blue primitives in a component.
--success--warning--danger--infoDark mode
[data-theme="dark"] replaces semantic surfaces, text, borders and intent values while the indigo,
slate and status primitives remain fixed. A component that consumes only semantic tokens therefore
adapts automatically, including inside a dark theme island.
Dark semantic layer
The nested sample applies data-theme="dark" locally. Its surface tokens resolve to the night
scale. The default accent ramp uses indigo 600, hover 700, and active 800 to preserve contrast;
branded dark accents continue to derive their interaction states from white.
#0B0D1D#0E1023#121430#1C1F42