A · Deep Blue Editorial
Workforce decisions, defensibly governed.
Request a sessionRead the doctrine
Sample · Decision Record
Grade architecture · Region EMEA
Consultant reviewedIndicative
Brand & Interface Color Direction · v2
A logo-derived color system built for defensible workforce decisions.
Blue for authority and proof. Graphite for governance and seriousness. Silver for structure. White for clarity. No turquoise. No decorative color. No startup gradients. Built to sit credibly beside Big-4 advisory and institutional software brands.
Approve directionCompare against alternatives
01 · Diagnosis
Logo-informed brand DNA
The Evalio mark is built from four families: institutional blue, premium graphite, refined silver, and calm white. The color system below is derived strictly from these tones. Anything outside this lineage — turquoise, emerald, indigo, decorative gradients — is rejected on sight.
Why this works
- Blue carries authority without alarm — the same register CHROs and CFOs trust from advisory firms and ratings agencies.
- Graphite reads as protected and governed; it tells the user the surface is consultant-managed, not a marketing toy.
- Silver gives the system structural elegance — borders and panels that frame evidence without competing for attention.
- White and frost create calm reading surfaces that let evidence and decision records lead.
Why not turquoise / generic SaaS
- Turquoise reads as health-tech, fintech consumer, or wellness — wrong category for workforce decision infrastructure.
- Bright greens and purples signal startup energy; CHROs reading a board paper interpret them as low credibility.
- Rainbow dashboard palettes break the evidence hierarchy that Evalio depends on.
- The blue logo is already the strongest signal — borrowed equity from McKinsey, Moody's, MSCI, Bloomberg-class brands.
02 · Final palette
The twelve colors that run the system
Twelve roles. Each one earns its place. Components consume semantic roles built on top of these primitives — never raw hex.
03 · Extended UI palette
Full token shelves by family
Each family carries enough range to support hover, pressed, focus, dividers, and on-dark contexts without inventing new hues.
Brand blue
Graphite
Silver
White & text
Semantic — restrained
04 · Website
Three premium website color treatments
Each treatment uses 55–65% white/silver, 20–30% blue/graphite, and ≤10% action blue. Status color appears only when semantically required.
05 · Tool UI
Three premium product UI treatments
Workspace stays calm and white. Chrome carries the seriousness — graphite or deep blue. Action blue is reserved for the next decision-grade move.
06 · Components · Buttons
Action hierarchy
One primary per surface. Outline and ghost handle siblings. Destructive is text-only on white — reserved for irreversible actions.
Approve decision recordSave draftRequest consultant reviewCancelDiscard draft
On dark shell
Open Decision RoomExport packAudit log
07 · Components · Tables
Data system
Tables are the workhorse surface. Row state encodes governance — never decoration. Hover is calm, selection is silent, locked rows are visibly protected.
08 · Components · Status
Governance state vocabulary
One chip, one meaning. Status colors never appear as decoration.
DraftIn reviewConsultant reviewedClient approvedLockedNeeds evidenceSource-rights dependentErrorProtected in workspace
09 · Components · Alerts
Inline alert system
Left-rule accent in status color, soft fill, body in heading ink. No icons larger than 16px. No drop shadows.
Info
This workspace is in indicative review mode.
Numbers shown are sample. Apply consultant review before sharing externally.
Governed complete
Decision record approved by client.
Locked into the audit log. Subsequent edits create a new versioned record.
Needs review
5 evidence items missing for Commercial — Sales.
Add evidence or mark items as source-rights dependent before re-running readiness.
Error
Could not export pack — protected source detected.
Removing the protected source will allow the export. No client data is exposed.
Locked / protected
Workspace locked by Decision Room.
Editing is paused while the Decision Room is in session.
10 · Components · Progress
Workflow rails
A single calm spine in action blue. Steps are tabular, restrained, and read left-to-right like a published methodology.
Lifecycle rail · Salary structure
Job architecture
Complete
Role evidence
Complete
Evaluation
Complete
Benchmarking
In progress
Structure
Pending
Approval
Pending
Readiness indicator
78/ 100
Indicative · refreshes after consultant review
Review queue
- Engineering · IC ladder12
- Commercial · Sales5
- Operations · Plant3
11 · Decision Room
The graphite room where decisions are signed
Decision Room uses the graphite shell as a signal of seriousness. Content surfaces stay white. Blue marks the next decision-grade move. Nothing decorative survives this surface.
12 · Report & Dashboard
Publication-grade report surfaces
Reports use Fraunces headings, frost background, and silver-framed artifact cards. Charts use a single-hue blue ramp — never categorical rainbow.
Output Pack · FY26
Workforce decision report — Acme Holdings plc
Consultant-governed · v3.2
Roles evaluated
412
Structures approved
9 / 11
Readiness avg.
82%
Decision records
37
Readiness by function — sample
Eng
Sales
Ops
Fin
HR
Prod
Leg
Mkt
Decision record summary
- Salary structure FY26Approved
- Sales incentive planIn review
- Job architecture v2Approved
- Benefits harmonisationLocked
13 · Pricing & Trust
Calm, evidence-led pricing surface
Pricing uses white surfaces, silver frames, and one blue-shelled tier to anchor recommendation. No urgency colors. No discount badges.
Foundation
On request
For HR teams beginning the architecture
- Job architecture
- Role evidence library
- Decision Room access
- Audit-grade output pack
Talk to consulting
Consultant recommended
Governed
On request
For Total Rewards leaders running structures
- Job architecture
- Role evidence library
- Decision Room access
- Audit-grade output pack
Request a session
Enterprise
On request
Multi-region, board-grade governance
- Job architecture
- Role evidence library
- Decision Room access
- Audit-grade output pack
Talk to consulting
Consultant-governed
Every decision record is reviewed before it leaves the workspace.
Source-rights respected
Protected sources stay protected. Always.
Audit-trail by default
Versioned decision records. No silent edits.
No autonomous decisions
Evalio supports decisions. People sign them.
14 · Restrained “wow”
Six premium moments — used sparingly
Memorability without flash. Each moment earns its place because it makes a decision easier to read or trust easier to give.
15 · Creative direction
Final recommendation
Acting as creative director: this is the deployment that best serves CHRO/CFO trust, governance, and decision clarity.
Public website
B · White / Silver Executive
Calm, restrained, institutional. Carries the blue logo without flooding the eye. Reserves blue for primary CTAs and proof artifacts.
Protected tool UI
1 · Graphite Shell + White Workspace
Graphite chrome signals 'protected workspace' instantly. White canvas keeps tables and forms readable for full sessions.
Decision Room
Graphite slab + blue accent
Use the dark Decision Room treatment as a separate moment — not as default product chrome. It must feel like a different room.
Pricing page
White surfaces + one blue-shelled recommended tier + silver frames
Quiet authority. Blue ring marks the consultant-recommended path. No urgency colors.
Trust / governance
White cards on frost, with metallic silver rules
Reads like a published methodology document. Use for compliance, doctrine, and audit.
Report / dashboard
Frost background, single-hue blue charts, Fraunces headings
Reports look published, not generated. Charts are calm and one-axis — never categorical.
16 · Integrity
Token export self-check
Live audit comparing the downloadable brand kit (tokens.json + tokens.css) against BRAND_TOKENS and the CSS variables resolved on :root. Any drift fails loudly.
17 · Import
Preview an imported brand kit
Drop a tokens.json exported from this kit (or a compatible one) to preview its palette and typography in place. Preview-only — nothing is mutated.
Import a brand kit
Drop a
tokens.json fileMust follow the kit export shape:
{ flat: [{ name, cssVar, hex, group, role }], typography? }. Preview-only — nothing is persisted, no globals are mutated.18 · Export
Copy or download tokens
Generated live from BRAND_TOKENS. Copy any single format to clipboard, or download the full brand kit as a zip.
Generated live from
BRAND_TOKENS. Copy any one format, or download the full kit (palette SVG, components, README).19 · Visual exports
Download each SVG preview individually
Palette sheet, light hero, Decision Room hero, and components sample — each downloadable as full-resolution SVG or rasterised PNG at 1×, 2×, or 3×.
Each visual is generated from the live token set. SVG is full-resolution, infinitely scalable. PNG @1× / @2× / @3× is rasterised in-browser for slide decks and screenshots.
20 · Accessibility
WCAG AA / AAA contrast audit
Every foreground/background pair used in /brand tables, buttons, alerts, and status chips, checked against WCAG 2.1 thresholds. Body 4.5:1 AA / 7:1 AAA · large 3:1 / 4.5:1 · UI & chip labels 3:1.
Pairs audited
39
WCAG AA pass
31 / 39
WCAG AAA pass
29 / 39
AA failures
8
Tables
5/7AA3/7 AAA
Buttons
7/8AA7/8 AAA
Alerts
10/15AA10/15 AAA
Chips
9/9AA9/9 AAA
WCAG AA failures · 8
- Tables · Row · meta on review-tinted row — ratio 4.46:1 (need ≥4.5:1 · 1.4.3 normal text)
- Tables · Row · meta on locked-tinted row — ratio 3.86:1 (need ≥4.5:1 · 1.4.3 normal text)
- Buttons · Dark-shell CTA · graphite on highlight — ratio 1.10:1 (need ≥3:1 · 1.4.11 UI / chip label)
- Alerts · Info · body on blue-wash — ratio 4.34:1 (need ≥4.5:1 · 1.4.3 normal text)
- Alerts · Governed · body on governed-fill — ratio 4.34:1 (need ≥4.5:1 · 1.4.3 normal text)
- Alerts · Review · body on review-fill — ratio 4.46:1 (need ≥4.5:1 · 1.4.3 normal text)
- Alerts · Error · body on error-fill — ratio 4.38:1 (need ≥4.5:1 · 1.4.3 normal text)
- Alerts · Locked · body on locked-fill — ratio 3.86:1 (need ≥4.5:1 · 1.4.3 normal text)
Method · sRGB relative-luminance per WCAG 2.1. Body text checked at 4.5:1 (AA) / 7:1 (AAA); large text at 3:1 / 4.5:1; chip labels and UI graphics at 3:1 (1.4.11). Pairs are taken from the actual components rendered in /brand sections 06–09; if a component is changed, this audit re-runs on next render.
21 · Theme bindings
/theme ↔ /brand kit drift audit
Resolves every --ui-* role in THEME_ROLE_MAPS through :root, then matches each final hex against BRAND_TOKENS. Drifted bindings mean the live preview and the downloadable kit would render different colors.
Auditing theme bindings…
22 · Live preview
Decision Room component gallery
Switch between theme directions and watch tables, alerts, the approval stepper, and progress rails repaint live against the new palette. Sandboxed — production layout is untouched.
Decision Room · 01 Institutional Editorial
Cycle 26.Q2 · 14 jobs awaiting governed approval
Cycle progress rails
Intake completeness92%
Range coverage74%
Reviewer approvals48%
Audit-record fill100%
Range refreshed
Market band updated 6 hours ago. Two pending decisions need re-review.
Reviewer SLA at risk
3 decisions exceed 48h in Review. Auto-escalation engages at 72h.
Blocked: missing audit record
Data Scientist · DE cannot publish. Attach decision rationale to unblock.
23 · Archival
Superseded — see locked Evalio palette
An earlier theme-migration narrative lived here. It has been retired in favour of the locked Evalio palette doctrine: Deep Navy #0B1F3A, Proof Turquoise #0B1F3A, Proof Deep #0B1F3A, Tint #F1F5F9, Wash #F8FAFC, Frost #F8FAFC. Authoritative source: docs/registers/palette-doctrine.md and the --color-ev-* tokens in src/styles.css.
Archival notice
Superseded by the locked Evalio palette doctrine.
Earlier theme-migration narratives on this page have been retired. The single source of truth for brand colour is the palette doctrine register and the --color-ev-* tokens declared in src/styles.css.
See docs/registers/palette-doctrine.md for the full rule set, the gated allowlist, and the migration workflow.
--color-ev-blue-900— Deep Navy — authority, hero ink--color-ev-blue-700— Proof Turquoise — primary action / focus--color-ev-blue-800— Proof Deep — pressed / on-dark companion--color-ev-blue-100— Proof Tint — selection wash--color-ev-blue-wash— Proof Wash — surface wash--color-ev-frost— Frost — workspace background
Components reference the --brand-* role layer; raw colour values are not permitted outside src/styles.css.