Visual elements
The building blocks used across Claroview presentations, rendered from the
shared claroview.css. Each demo sits on a slide-coloured panel at
deck scale. Edit this file to prototype variations — the same stylesheet drives
the real decks, so anything you confirm here transfers directly.
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.
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.
Score palette
Sokrates RdYlGn scale — reserved for maintainability scoring, never brand chrome.
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 white; emphasis reads gold; links use gold 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