-
Notifications
You must be signed in to change notification settings - Fork 3
Color
The color palette is intentionally Maryland-brand only — red, yellow, and a grayscale ramp. There is no blue. Colors are defined as CSS custom properties in css/base.css (:root) and consumed in components through the c-* color utilities (see Design Tokens and Utility Classes), never as hard-coded hex values.
| Token | Value | Notes |
|---|---|---|
--maryland-red |
#e21833 |
Brand primary — CTAs, interactive surfaces |
--maryland-yellow |
#ffd200 |
Brand secondary — alerts |
--dark-red |
#a90007 |
Interactive hover (red) |
--white |
#ffffff |
|
--black |
#000000 |
|
--lightest-gray |
#fafafa |
Subtle background |
--lighter-gray |
#f1f1f1 |
|
--light-gray |
#e6e6e6 |
|
--medium-gray |
#757575 |
Secondary text |
--dark-gray |
#454545 |
Default body text |
--darker-gray |
#242424 |
Emphasis |
--green |
#037623 |
Status only (open/available) |
--green is the single exception to the Maryland-brand-only palette. It is reserved strictly for status indicators (e.g. open/available chips in the chat widget and utility-status navigation), where a brand color would misread as an error or alert. It is theme-independent — like the spacing scale, it does not flip in .dark-theme.
In markup you never reference the primitives above directly — you pick a role and the system resolves the value (and flips it for dark mode). The roles:
| Role class | Resolves to |
|---|---|
c-content-primary |
--black (default text, headings) |
c-content-secondary |
--dark-gray (body copy) |
c-content-tertiary |
--medium-gray (dates, captions) |
c-content-dark-primary / -secondary
|
--white / --light-gray (text on dark surfaces) |
c-bg-primary / -secondary / -tertiary
|
--white / --lightest-gray / --lighter-gray
|
c-bg-dark-primary / -secondary
|
--black / --darker-gray
|
c-content-interactive-primary + c-bg-interactive-primary
|
white text on --maryland-red, hover --dark-red (buttons, CTAs, error chip) |
See Design Tokens and Utility Classes for the complete role tables, and Design Tokens for how dark mode re-maps these values.
.dark-theme re-maps the same token names: red ↔ yellow, white ↔ black, and the gray ramp reverses. Components need no dark-mode-specific code. --green and the spacing scale are not re-mapped.