Visual elements — light
The dark-on-white companion to the reference deck page,
driven by the same claroview.css. Brand chrome stays navy/gold; the
RdYlGn score spectrum is unchanged — it already reads on white, exactly as it does in
mc-portal. Use the Surface switch (top-left) to see each demo on paper, on a navy
inset, or mixed; toggle back to the dark page top-right.
Brand lockup — exploration
Wordmark + spectrum joined (tighter gap, bar length locked to the text). Three gradient options for comparison. Version A is adopted site-wide (landing + decks); B and C are kept here for discussion. On paper the wordmark reads as muted navy; the spectrum is unchanged.
A · Current spectrum — ADOPTED — 3 stops: #d7191c → #ffe53d → #1a9641. Blends red straight to yellow to green; skips the poor-orange and good-green bands. This is the base .cv-lockup now used on the landing and deck title.
B · Full adopted RdYlGn — smooth — all five mc-portal score colours blended: #d7191c → #fb9a3a → #ffe53d → #a6d96a → #1a9641.
C · Discrete 5-band — the same five colours as hard stops (no blending), mirroring the mc-portal “IN GRADIENT” column literally: five equal segments.
All five colours already match the mc-portal adopted palette exactly (verified against SCORE_BANDS in colors.ts). The difference is purely how many bands the bar shows: A uses 3 (red · yellow · green), B blends all five smoothly, C shows all five as discrete segments like the portal.
Brand palette
Navy/gold chrome — the surface and accent colours.
On white the bright gold is kept only for fills, dots and chips; text accents (headings' emphasis, links, kickers) use the deepened ochre #8a6a0a so they stay legible.
Score palette
Sokrates RdYlGn scale — reserved for maintainability scoring, never brand chrome. Unchanged from the dark page: these are tuned to read on white (that's how mc-portal renders them).
Typography
Headings, body, emphasis and links at deck scale.
Heading one
Heading two with emphasis
Heading three
Body copy at deck scale. Strong text reads navy; emphasis reads ochre; links use ochre too.
Spectrum bar
The signature maintainability motif. Default and .sm.
Eyebrow
Slide kicker label with a gold dot.
● The stakes
Section divider
.section-slide — number, kicker, title, spectrum.
Cards
Accent variants: red, cream, green, blue (gold).
Value lives in code
Products, revenue and customer experience are delivered through software you own.
Speed depends on health
Healthy code ships fast; decayed code grinds delivery to a halt.
Risk is concentrated
Security holes and unmaintainable modules are business risks in the codebase.
Accent: blue (gold)
Used to signal the Claroview answer / the measured path.
Row cards
Left-accented stacked rows: gold, green, red — plus .tight.
Process
A repeatable measure → review → act cadence.
Measurements
Comparable metrics trended over time.
Tight variant
Reduced padding for denser lists.
Evidence stat cards
.statrow / .stat — big number, label, source.
Metric chips
Pill-shaped tags; .hero highlights the headline metric.
"New" pill
Inline badge; default (cream) and .green.
Quality Trajectories New Live
Clean lists
Score-coloured square markers: default (green), .r, .y, .b.
- Default marker — green
- Risk / worst — red
- Caution / moderate — cream
- Accent / info — gold
Slide chrome
.slide-tag (bottom-left) and .version (bottom-right), as anchored on a slide.
Version · July 2026