ANVIL · Colors
Brand
Primary · Secondary · Accent
Primary
#E8002D
Secondary
#1A1A1A
Accent
#C9A84C
Primitive Scales
Connected swatches (50 → 900)
Red
50
100
200
300
400
500
600
700
800
900
Neutral
50
100
200
300
400
500
600
700
800
900
Gold
50
100
200
300
400
500
600
700
800
900
Semantic Mapping
Semantic color tokens
| Semantic token | Mapped value | Resolved hex |
|---|---|---|
| Brand | ||
| --c-brand-primary | --p-red-500 | #E8002D |
| --c-brand-primary-hover | --p-red-600 | #C90026 |
| --c-brand-primary-active | --p-red-700 | #A80020 |
| --c-brand-secondary | --p-neutral-900 | #1A1A1A |
| --c-brand-secondary-hover | --p-neutral-800 | #2D2D2D |
| --c-brand-accent | --p-gold-500 | #C9A84C |
| --c-brand-accent-hover | --p-gold-600 | #B3943D |
| --c-brand-accent-active | --p-gold-700 | #9A7E30 |
| Text | ||
| --c-text-base | --p-neutral-900 | #1A1A1A |
| --c-text-subtle | --p-neutral-400 | #9A9A9A |
| --c-text-muted | --p-neutral-600 | #525252 |
| --c-text-inverse | --p-white | #FFFFFF |
| Surfaces And Borders | ||
| --c-bg-canvas | --p-white | #FFFFFF |
| --c-bg-surface | --p-white | #FFFFFF |
| --c-bg-surface-subtle | --p-neutral-50 | #FAFAFA |
| --c-bg-surface-muted | --p-neutral-100 | #F0F0F0 |
| --c-border-subtle | --p-neutral-200 | #D9D9D9 |
| --c-border-strong | --p-neutral-500 | #737373 |
| States And Layout | ||
| --c-state-focus | --p-neutral-900 | #1A1A1A |
| --c-state-error | --p-red-500 | #E8002D |
| --c-state-error-bg | literal | #FEF2F2 |
| --c-state-success-bg | literal | #F0FDF4 |
| --c-state-warning-bg | literal | #FFFBEB |
| --c-state-info-bg | literal | #EFF6FF |
| --c-layout-sidebar-bg | --p-neutral-800 | #2D2D2D |
| --c-layout-sidebar-text | --p-neutral-100 | #F0F0F0 |
| Legacy Aliases | ||
| --c-primary | alias to --c-brand-primary | #E8002D |
| --c-primary-hover | alias to --c-brand-primary-hover | #C90026 |
| --c-primary-active | alias to --c-brand-primary-active | #A80020 |
| --c-secondary | alias to --c-brand-secondary | #1A1A1A |
| --c-secondary-hover | alias to --c-brand-secondary-hover | #2D2D2D |
| --c-accent | alias to --c-brand-accent | #C9A84C |
| --c-accent-hover | alias to --c-brand-accent-hover | #B3943D |
| --c-accent-active | alias to --c-brand-accent-active | #9A7E30 |
| --c-text | alias to --c-text-base | #1A1A1A |
| --c-bg | alias to --c-bg-surface | #FFFFFF |
| --c-bg-subtle | alias to --c-bg-surface-subtle | #FAFAFA |
| --c-bg-muted | alias to --c-bg-surface-muted | #F0F0F0 |
| --c-border | alias to --c-border-subtle | #D9D9D9 |
| --c-focus | alias to --c-state-focus | #1A1A1A |
| --c-error | alias to --c-state-error | #E8002D |
| --c-error-bg | alias to --c-state-error-bg | #FEF2F2 |
| --c-success-bg | alias to --c-state-success-bg | #F0FDF4 |
| --c-warning-bg | alias to --c-state-warning-bg | #FFFBEB |
| --c-info-bg | alias to --c-state-info-bg | #EFF6FF |
| --c-sidebar-bg | alias to --c-layout-sidebar-bg | #2D2D2D |
| --c-sidebar-text | alias to --c-layout-sidebar-text | #F0F0F0 |