Steel Blue (Command Center)
The Command Center palette. Deep navy header with steel blue accents throughout cards, buttons, badges, and active states.
Primary Colors
#3b7dd8
#3b7dd8
Primary Blue. Buttons, links, active accents, KPI values.
#2c6ab8
#2c6ab8
Dark Blue. Hover states, pressed buttons, emphasis borders.
#5a9be6
#5a9be6
Light Blue. Secondary accents, icon tints, lighter highlights.
Background Tints
6%
rgba(59,125,216,0.06)
Subtle card highlight, callout backgrounds.
10%
rgba(59,125,216,0.1)
Badge backgrounds, tag fills.
12%
rgba(59,125,216,0.12)
Hover states on nav items and interactive elements.
15%
rgba(59,125,216,0.15)
Filter pill backgrounds, selected state tints.
20%
rgba(59,125,216,0.2)
Active filter pills, focus rings.
30%
rgba(59,125,216,0.3)
Box shadows on active sidebar items, strong emphasis.
Gradients
Header
linear-gradient(160deg, #0a1628, #1a3a5c, #162d4a)
Main header gradient. Deep navy, three-stop.
Sub-header
linear-gradient(135deg, #6a9fd8, #5889c2)
Sub-header muted gradient. Lighter blue tones for secondary bars.
Active Sidebar
linear-gradient(135deg, #3b7dd8, #5a9be6, #3b7dd8)
Active sidebar item gradient. Blue version of the purple standard.
Demo Elements
Buttons
Badges & Tags
Active
Complete
Overdue
Waiting
Filter Pills
All Tasks
Revenue
Maintenance
Table Header Row
| Task Name | Status | Priority | Due Date |
|---|---|---|---|
| Revenue review | Active | High | Jul 10 |
| Email follow-up | Done | Medium | Jul 8 |
Card with Accent Border
Key Insight: This is how callout cards look with the Steel Blue accent border.
Stevens Family Hub
Family planning dashboard. Currently using the default purple palette.
Note: Palette not yet customized. Currently using default purple.
Primary Colors
#7c3aed
#7c3aed
Primary Purple. Buttons, active states, accents.
#6d28d9
#6d28d9
Dark Purple. Hover, pressed, active sidebar border.
#a78bfa
#a78bfa
Light Purple. Secondary accents, lighter highlights.
Background Tints
6%
rgba(124,58,237,0.06)
Subtle card highlight, callout backgrounds.
10%
rgba(124,58,237,0.1)
Badge backgrounds, tag fills.
12%
rgba(124,58,237,0.12)
Hover states.
15%
rgba(124,58,237,0.15)
Active filter pills, accent glows.
20%
rgba(124,58,237,0.2)
Focus rings, stronger emphasis.
30%
rgba(124,58,237,0.3)
Box shadows, strong accent fills.
Gradient
Active Sidebar / Accent
linear-gradient(135deg, #7c3aed, #9333ea, #7c3aed)
Active sidebar item gradient. Default purple standard.
Core Forum Hub
EO Core Forum dashboard for scheduling, agendas, and group management.
Note: Palette not yet customized. Currently using default purple.
Primary Colors
#7c3aed
#7c3aed
Primary Purple. Default accent.
#6d28d9
#6d28d9
Dark Purple. Borders, pressed states.
#a78bfa
#a78bfa
Light Purple. Secondary highlights.
Gradient
Active Sidebar / Accent
linear-gradient(135deg, #7c3aed, #9333ea, #7c3aed)
Active sidebar item gradient. Default purple standard.
Field Green (DugoutReady)
DugoutReady baseball lineup tool. Dual palette: green for structure and navigation, orange as an accent for CTAs and brand marks.
Dual palette. Orange is accent only (logo, CTAs). Navigation and structure uses the green family.
Green Family
#1a3c24
#1a3c24
Primary Dark Green. Header backgrounds, deep anchors.
#2d6a3e
#2d6a3e
Mid Green. Sidebar active states, buttons, primary CTA backgrounds.
#3d8b53
#3d8b53
Light Green. Hover states, secondary accents, badge fills.
Accent
#e85d2a
#e85d2a
Accent Orange. Logo mark, primary CTAs, attention-drawing elements only.
Gradient
Header
linear-gradient(135deg, #1a3c24, #2d6a3e)
Main header gradient. Dark to mid green.
Demo Elements
Buttons
Badges
Active
New
Card with Accent Border
Field Note: Green accent border callout for DugoutReady context.
Universal Icons
Standard monochrome inline SVG icons used across all Sterling-built apps. All use fill: currentColor to inherit text color automatically.
Rule: NEVER use colorful emoji. All icons must be monochrome inline SVG with
fill: currentColor. Icons appear dark gray when inactive and white when on active/highlighted backgrounds.Core Action Icons
16
18
24
Edit (Pencil)
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</svg>
Edit actions on cards, rows, inline editing toggles.
16
18
24
Delete (Trash)
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
</svg>
Delete/remove actions. Always pair with confirmation on destructive actions.
16
18
24
Refresh
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
</svg>
Refresh/reload buttons. Mandatory in every page header.
Navigation Icons
16
18
24
Dashboard
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
</svg>
Overview, dashboard, or home nav item.
16
18
24
Inbox
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"/>
</svg>
Inbox, messages, incoming items.
16
18
24
Tasks / Checklist
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
Tasks, checklists, to-do items, completion tracking.
16
18
24
Financial / Money
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>
</svg>
Revenue, billing, financial dashboards, money-related nav.
16
18
24
People / Team
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
People, team members, contacts, relationship pages.
16
18
24
Settings
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58...z"/>
</svg>
Settings, configuration, preferences.
16
18
24
Calendar
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/>
</svg>
Calendar, scheduling, date-related nav items.
16
18
24
Search
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor">
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
Search bars, search nav items, lookup features.
Universal Colors
These colors stay constant across every app, regardless of the app's accent palette. They form the shared structural layer that all palettes build on top of.
Text Colors
Primary Text
#1a1a1a
Body text, headings, table column headers (always font-weight: 700 for th).
Secondary Text
#555555
Descriptions, supporting text, card body copy.
Tertiary / Muted Text
#999999
Timestamps, labels, placeholder text. NEVER for column headers.
Table Column Headers
Column headers always use dark text (#1a1a1a) at font-weight 700. Never light gray.
| Column A | Column B | Column C | Status |
|---|---|---|---|
| Sample data | Sample data | Sample data | Active |
| Sample data | Sample data | Sample data | Done |
Structural Colors
Sidebar Category Dividers
background: #4a4a5a, color: #ffffff, border-radius: 6px
Dark bars with white uppercase text. Used in every left-sidebar app to group nav items.
Card Background
#ffffff
All content cards, modals, dropdowns.
Page Background
#f5f5f7
Main content area background behind all cards.
Sidebar Background
#f3f3f6
Left sidebar background. Light gray, not white.
Border Color
rgba(0,0,0,0.08)
Card borders, dividers, table cell borders.
Status / Semantic Colors
Danger / Delete
#ef4444
Destructive actions, error states, overdue badges, delete buttons.
Success / Green
#10b981
Success states, completed badges, positive KPIs.
Warning / Amber
#f59e0b
Warning states, "waiting" badges, attention callouts.
Header Gradient (Universal)
This is the SAME gradient for all apps. The internal accent color changes per palette, but the header structure stays constant.
Universal Header
linear-gradient(160deg, #0a1628, #1a3a5c, #162d4a)
Deep navy three-stop gradient used across all app headers.
Sidebar Category Divider Demo
Category Label
Inactive Item
Active Item
Another Item