Color
Three tiers: primitive ramps (the raw values), semantic aliases (brand, surface, feedback), and component tokens (button.brand.bg). Components reference semantic tokens so re-themes are a primitive-only swap.
Brand & accent
The two anchor colors of USA Clean. Brand blue is used for surfaces, links, focus states; accent gold is reserved for the highest-emphasis CTA.
Text
Six levels of text emphasis. default is the body color; inverted is for text over dark surfaces.
| Token | Hex | Sample |
|---|---|---|
| --caster-color-text-default | #131313 | The brushless drive motor pairs with most Tennant T7 chassis. |
| --caster-color-text-secondary | #222222 | The brushless drive motor pairs with most Tennant T7 chassis. |
| --caster-color-text-subtle | #5d5d5d | The brushless drive motor pairs with most Tennant T7 chassis. |
| --caster-color-text-muted | #757575 | The brushless drive motor pairs with most Tennant T7 chassis. |
| --caster-color-text-brand | #0021a6 | The brushless drive motor pairs with most Tennant T7 chassis. |
| --caster-color-text-inverted | #ffffff | The brushless drive motor pairs with most Tennant T7 chassis. |
Surface
Background surfaces. Most pages use default; cards on white use subtle; the announcement bar and footer use inverted.
Feedback
Status colors with three slots: default (icon/strong text), text (accessible body text on light surface), surface, border. All text variants are WCAG 2.2 AA verified.
Order shipped — tracking added.
3 items left in stock at this price.
Card declined. Try another method.
Net-30 invoicing now available.
<div style="background: var(--caster-color-feedback-success-surface);
color: var(--caster-color-feedback-success-text);
border: 1px solid var(--caster-color-feedback-success-border);">
Order shipped — tracking added.
</div>| Tone | default | text (on surface) | surface | border |
|---|---|---|---|---|
| Success | #00a900 | #15692a | #e6f7e6 | #86efac |
| Warning | #d97706 | #92400e | #fff7e6 | #fde68a |
| Error | #c70e1d | #991b1b | #fef2f2 | #c70e1d |
| Info | #1e40af | #1e40af | #eff6ff | #bfdbfe |
Border
Four border colors. default is the workhorse; strong appears on card hover; brand on focused or selected states; focus is the alpha-channel ring.
| Token | Hex / value | Demo |
|---|---|---|
| --caster-color-border-default | #d9d9d9 | |
| --caster-color-border-subtle | #ececec | |
| --caster-color-border-strong | #c0c0c0 | |
| --caster-color-border-brand | #0021a6 |
var(--caster-color-brand-default), never the underlying primitive blue.700 directly. To change the brand color globally, update tokens/semantic.json or override the semantic custom property on a parent scope.