Color and Token System
The DST uses a structured token system built on Tailwind CSS custom properties. All colors are defined as global tokens in frontend/src/app/index.css and consumed via Tailwind classes.
Color Palette
- Primary Accent
- Neutrals
- Surfaces
- Interactive & Chart
- Branding & Special
The dst-steel-* family is the application's primary accent color. Use it for buttons, active states, links, and indicators.
| Token | Hex | Usage |
|---|---|---|
dst-steel-lightest | #e4edf3 | Cell highlights, tinted backgrounds, header backgrounds |
dst-steel-light | #7fb5d0 | Icons on dark surfaces, subtle accents, focus rings |
dst-steel | #4a7c9b | Primary accent — Section accent bars, buttons, active borders, indicators |
dst-steel-dark | #3a6a88 | Active link text, hover states, tab labels |
dst-steel-darkest | #2a5068 | Deep hover, pressed states |
Use Tailwind's built-in slate scale for all grays. Do not create custom neutral tokens.
text-slate-900 — Primary headings
text-slate-700 — Body text (alternative)
text-slate-500 — Secondary/hint text
text-slate-400 — Tertiary text, icons
bg-slate-100 — Subtle backgrounds
border-slate-200 — Borders, dividers
Red: Restricted
Red is reserved exclusively for:
- USACE branding elements (castle icon, avatar)
- Error, warning, and destructive states
Never use red as a decorative accent in application UI.
| Token | Hex | Purpose |
|---|---|---|
dst-page-bg | #f7f8fa | Page background |
dst-input-bg | #ffffff | Form input backgrounds |
dst-nav-bg | #1e293b | Sidebar navigation background |
dst-text | #333333 | Primary body text |
dst-text-secondary | #4b5563 | Secondary text |
dst-text-tertiary | #666666 | Hint/caption text |
dst-text-inverse | #f9f9f9 | Inverse text (on dark backgrounds) |
dst-border | #bfbfbf | Standard borders |
dst-disabled-bg | #f2f2f2 | Disabled input backgrounds |
dst-disabled-text | #9aa0a6 | Disabled text |
Interactive Tokens
| Token | Usage |
|---|---|
dst-button | Button background (#4a7c9b) |
dst-button-hover | Button hover (#3a6a88) |
dst-interactive-hover | Deep hover/pressed state (#2a5068) |
dst-link | Link text color (#3a6a88) |
dst-focus-ring | Focus ring color (#7fb5d0) |
dst-cell-highlight | Table cell highlight (#e4edf3) |
dst-cell-selected | Table cell selection (#d0e1ec) |
Table Tokens
| Token | Purpose |
|---|---|
dst-table-bg | Table background (#ffffff) |
dst-table-header-bg | Table header background (#e2e8f0) |
dst-table-header-text | Table header text (#334155) |
dst-table-text | Table body text (#333333) |
Chart Tokens
| Token | Purpose |
|---|---|
chart-primary | Primary data line (steel blue) |
chart-revised | Revised/user estimate line (amber) |
chart-text | Axis labels |
chart-grid-major | Major grid lines |
chart-grid-minor | Minor grid lines |
chart-bg | Chart background |
chart-border | Chart border |
chart-tooltip-bg | Tooltip background |
chart-tooltip-border | Tooltip border |
chart-tick | Axis tick marks |
chart-empty-state | Empty state placeholder |
chart-guide | Guide/reference lines (semi-transparent) |
chart-reference | Reference lines (gray) |
All chart colors are resolved at render time from CSS custom properties via getChartColors() in components/common/chart/utils.js.
USACE Branding
These tokens are reserved for USACE identity elements. Do not use them for general UI.
| Token | Hex | Usage |
|---|---|---|
dst-black | #18181b | True black for branding elements |
dst-gray | #cccccc | Neutral gray |
dst-red | #de1e2e | USACE red (castle icon, avatar, errors) |
dst-red-dark | #a00c30 | Dark red for hover/pressed states |
dst-red-light | #f0c8c8 | Light red for error backgrounds |
dst-sand | #e8d4a0 | USACE sand accent |
dst-sand-dark | #a08850 | Dark sand for hover/pressed states |
Special Purpose
| Token | Hex | Usage |
|---|---|---|
demo | #9ca3af | Demo/placeholder indicator |
revision | #fff3bf | Revision highlight background |
dst-hw-modified | #fef3c7 | Hardware-modified cell highlight |
dst-hw-modified-light | #fffbeb | Hardware-modified light background |
Shadows
| Token | Value | Usage |
|---|---|---|
shadow-card | 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) | Subtle card elevation |
Token Architecture Rules
- Global tokens in
index.cssdefine the palette — they describe color values, not component behavior. - Component-level constants at the top of each file map global tokens to component-specific roles using Tailwind class names.
- No arbitrary hex values in components. If you're typing
#inside a component, it should become a Tailwind class or a new global token. Seeingtext-[#94a3b8]in a component means there's a gap in the token system that should be filled. - Nav-specific tokens do not belong in
index.css. Tab hover backgrounds, icon colors, and active states are component concerns owned by the component's constants block.