System variables / 06
Design tokens
A fixed sign palette preserves operational meaning while theme-aware UI tokens preserve readable text, controls, focus, surfaces, and feedback states.
Fixed equipment colors
These seven values are embedded in the equipment-sign SVGs and intentionally do not change between paper and bridge themes.
Theme-aware interface colors
Interface red, orange, blue, and green are adjusted per theme for text and control contrast. They are not required to match embedded sign fills exactly.
Spacing, geometry, and sizing
The scale is compact enough for instruments and regular enough for documentation. Most components consume the same 4, 8, 12, 16, 24, and 32 pixel rhythm.
| Token group | Examples | Intent |
|---|---|---|
| Radius | --c19-radius-sm / md / lg | Crisp interfaces with limited softening. |
| Line | --c19-line / line-strong | Single-pixel separators and two-pixel emphasis. |
| Content | --c19-content / content-wide | Manual and application measure. |
| Motion | --c19-duration-* / ease-standard | Brief control feedback and the title resolve. |
Override tokens at the narrowest useful scope
Custom properties can be set on the root, a themed subtree, an application shell, or one component without editing compiled selectors.
.mission-console {
--c19-bg: #080a08;
--c19-surface: #101510;
--c19-signal-red: #ff4051;
--c19-content: 90rem;
--c19-radius-md: 0.125rem;
}Tune one family without forking selectors
Panels, cards, buttons, controls, menus, dialogs, and loading indicators expose focused variables with global-token fallbacks. Set them on a component or a containing application region.
.mission-console .c19-panel {
--c19-panel-bg: #0b110d;
--c19-panel-border: #5fc88d;
--c19-panel-radius: 0;
--c19-panel-padding: 1.25rem;
}
.mission-console .c19-button {
--c19-button-bg: #5fc88d;
--c19-button-ink: #06110a;
--c19-button-radius: 0;
}
.mission-console .c19-input {
--c19-control-bg: #050705;
--c19-control-border: #8b9189;
}| Family | Focused variables |
|---|---|
| Panel | --c19-panel-bg / border / radius / shadow / padding / header-bg / footer-bg / divider |
| Card | --c19-card-bg / border / radius / shadow / padding |
| Button | --c19-button-bg / ink / border / radius / height / padding |
| Form control | --c19-control-bg / ink / border / radius / padding / addon-bg / addon-ink |
| Popover menu | --c19-menu-anchor / bg / ink / border / radius / padding / shadow |
| Dialog | --c19-dialog-bg / ink / border / radius |
| Loading | --c19-loading-ink / --c19-spinner-size / --c19-spinner-width |
Predictable cascade order
The compiled build declares eight named layers so application overrides can be placed deliberately.
@layer c19.reset, c19.tokens, c19.base, c19.typography,
c19.layout, c19.components, c19.utilities, c19.motion;