ACI navy
#0D4269Primary actions and brand moments
OPERATIONSWORKSPACE
OPERATIONSTHE ACI DESIGN SYSTEM
Navy for confidence. Warm surfaces for focus. A little sage to make the next step feel clear.
#0D4269Primary actions and brand moments
#0B3655Navigation and branded panels
#F5F0E5The original companion brand color
#FAF9F6The quiet background of the workspace
#FFFFFFCards, forms, and readable work areas
#426E57Selections, guidance, and supporting icons
Implementation: use named color tokens from globals.css. Sage and warm canvas are interface colors; the original logo and brand palette stay intact.
Example layout for a future project tool. Proposals start as an action within a project; they are not a separate item in core navigation.
Display headings · 600 and 700
Good work starts here.
Short, sentence-case headings with room to breathe.
Body, forms, navigation, and tables · 400 and 600
A few thoughtful questions. One clear proposal.
Use familiar words, direct labels, and a comfortable reading size.
SMALL LABELS, USED SPARINGLYThese examples use the same components as the working CRM.
One clear primary action per work area.
Use words and color together.
Reserve red for a real problem or destructive action. Do not use it as decoration.
| Project | Customer | Stage | Type |
|---|---|---|---|
| North lot resurfacing Example project | Example Property Group | Estimate | Commercial |
| Main entrance improvements Example project | Example Community Center | Signed | Municipal |
Group related questions. Keep labels visible. Put helpful context beside the decision.
Guidance should explain a decision or prevent a mistake. Keep it short and useful to the person doing the work.
Explain what belongs here and how someone can take the first step.
Use WorkspaceShell and its core top navigation. Keep the sides available for the current task, and build the work area from shared cards and controls.
Use a warm canvas, white work surfaces, thin borders, and generous spacing. Bring navy into navigation and the main action.
Short fades and gentle transitions acknowledge change. Honor reduced-motion settings. Never delay real work for an animation.
Stack layouts on small screens, keep controls comfortable to tap, and let wide tables scroll inside their own container.
The implementation guide lives in docs/DESIGN_SYSTEM.md. The repository’s agent instructions point to it, so new features start with this design system.