Source: business/marketing/qc-agents/micro-tool-build-qc.md

Micro-Tool Build QC

Applies to: Every AOS micro-tool HTML file before it ships — revelation tools, calculators, diagnostics, and any future tool types.

When to run: After the tool is functionally complete and before presenting the final file. This is not a design review. It's a compliance pass. Every check is binary — pass or fail.

Reference files: aos-brand-kit.html (canonical hex values), aos-brand-kit-skill.md (usage rules). Tool-type-specific checks (input design, scoring, results structure) live in each tool's own skill file.

Why This Exists

The brand kit QC covers everything from master plans to client SOPs. Most of those checks don't apply to micro-tools. Meanwhile, the violations that actually ship in micro-tools are specific and recurring:

var() in output files (every build so far has shipped with this)
Ad hoc colors that aren't in the brand kit
border-radius on structural elements (soft corners don't match AOS visual identity)
Label spec drift (0.12em tracking instead of 0.25em, wrong font-size, wrong weight)
Footer missing the 3px gold border
Severity/strength tier backgrounds at inconsistent opacity
Nav label in gold instead of stone

This checklist catches those patterns.

1. Zero var()

The single most common violation. The brand kit skill says it in bold: all colors in output files use hardcoded hex values — never CSS custom properties.

How to check: grep -c "var(--" filename.html — result must be 0.

This means:

[ ] No :root block defining CSS custom properties
[ ] No var(--gold), var(--cream), var(--charcoal), etc. in CSS rules
[ ] No var() in JavaScript-generated inline styles (these hide inside string concatenation in the calculate() or showResult() function)

The JS-generated styles are the ones that slip through. Search for 'var(-- in addition to var(-- to catch both CSS and JS contexts.

2. Canonical Colors Only

Every hex value in the file must trace back to the brand kit. No inventing colors.

How to check: grep -oE "#[0-9a-fA-F]{6}" filename.html | sort -u — compare output to the allowed list below.

Allowed Hex Values (Core Palette — Micro-Tools)

Hex	Name	Use
#1a1a1a	charcoal	Background, nav, footer, button text
#2a2a2a	deep-charcoal	Gradient depth, tool container background
#232323	panel	Card surfaces on charcoal (if needed)
#b79d64	gold	Accent — labels, CTAs, slider, scrollbar, borders
#c4aa74	gold-light	Hover states
#a08a58	gold-dark	Rarely used in micro-tools
#f5f4f0	cream	Primary text
#faf9f7	off-white	Alternate light background (rarely needed)
#8a8680	stone	Secondary text, hints, labels, nav label
#4a5a6a	slate	Secondary accent, dimension bars
#c45a4a	red	High severity, "bad" numbers, urgency
#5a9a6a	green	Low severity, "good" numbers, recovery

Banned patterns:

[ ] No #000000 (pure black) — use #1a1a1a
[ ] No #ffffff (pure white) for text — use #f5f4f0
[ ] No #6a8fc4 (ad hoc blue) — use #4a5a6a (slate)
[ ] No #c49a4a (ad hoc amber) — use #b79d64 (gold) or #c45a4a (red) depending on meaning

If a color appears in the sort -u output that isn't in the table above, it's a violation. Either replace it with the nearest canonical color or justify why the brand kit needs extending.

3. Sharp Geometry

AOS micro-tools use sharp corners on all structural elements. This is a brand identity decision, not an aesthetic preference.

How to check: grep "border-radius" filename.html | grep -v "50%\|scrollbar" — result should be empty or contain only slider track rounding (2px on the track itself is acceptable).

[ ] No border-radius on inputs
[ ] No border-radius on buttons (.btn-primary, .btn-secondary, .btn-next, .btn-back)
[ ] No border-radius on insight boxes
[ ] No border-radius on ratio bars
[ ] No border-radius on tool containers
[ ] No border-radius on score sections
[ ] No border-radius on offer bridges
[ ] No border-radius on result number sections
[ ] No border-radius on option cards (multi-select, single-select)

Allowed border-radius:

Scrollbar thumb (5px)
Slider thumb (50% — it's a circle)
Option letter circles (50%)
Layer number circles (50%)
Score/legend dots (50%)
Slider track (2px — acceptable for subtle rounding)

4. Label Spec

Every uppercase eyebrow label in the tool — section labels, eyebrows, counter text — must hit the brand spec exactly.

Brand spec: Inter, 0.625rem (10px), weight 600, letter-spacing 0.25em, text-transform uppercase.

Common violations:

0.7rem instead of 0.625rem (11.2px — too large)
0.65rem instead of 0.625rem (10.4px — close but not exact)
letter-spacing: 0.1em or 0.12em instead of 0.25em
font-weight: 500 instead of 600

Elements that must match this spec:

[ ] .calc-section-label / section group labels
[ ] .result-hero-label / .result-number-label / result eyebrows
[ ] .ratio-bar-label / visualization labels
[ ] .equation-visual-label / equation section labels
[ ] .bridge-label / bridge section labels
[ ] .hero-eyebrow / hero eyebrow
[ ] .hero-time / time badge
[ ] .intro-label / intro section label
[ ] .q-counter / question counter
[ ] .score-label / score section label
[ ] .layers-label / gap layers label
[ ] .result-eyebrow / result tier label
[ ] .intro-time / intro time label

Not every tool will have all of these. But every element that functions as an uppercase eyebrow label must hit the spec.

5. Severity/Strength Background Opacity

When severity or strength tiers use tinted backgrounds, all tiers must use the same opacity. This keeps visual weight consistent regardless of which tier the person lands in.

[ ] All severity/strength background fills use rgba(r, g, b, 0.1)
[ ] No tier uses 0.08 (too subtle, legacy value)
[ ] No tier uses 0.3 (that's the gold-dim canonical value for borders/tints, not background fills)

Correct values:

Red tier: rgba(196, 90, 74, 0.1)
Gold tier: rgba(183, 157, 100, 0.1)
Green tier: rgba(90, 154, 106, 0.1)

Borders and tints (not background fills) can use higher opacity: 0.15, 0.2, 0.25, 0.3 as appropriate. The 0.1 rule applies specifically to background fills on insight boxes, result sections, and offer bridges where the background is the primary visual signal.

6. Nav

Every micro-tool uses the same nav structure.

[ ] Fixed position, full-width
[ ] Background: #1a1a1a
[ ] Border-bottom: 3px solid #b79d64
[ ] Left side: logo image (Convertri-hosted) + "Advisory OS" text (Cormorant Garamond, 1.75rem, 500 weight, #f5f4f0)
[ ] Right side: tool name label (Inter, 0.7rem, 500 weight, #8a8680 stone — not gold)
[ ] Logo links to https://advisoryos.ai

Common violation: Nav label in gold (#b79d64) instead of stone (#8a8680). The tool name is metadata, not an accent — it's stone.

7. Footer

Every micro-tool uses the same footer structure.

[ ] Background: #1a1a1a
[ ] Border-top: 3px solid #b79d64 (not 1px, not rgba)
[ ] Padding: 60px 5%
[ ] Links: Contact, LinkedIn, Substack, Creating Your Plan
[ ] Link color: #8a8680, hover: #b79d64

Common violation: Footer border is 1px solid rgba(245, 244, 240, 0.06) (subtle divider) instead of 3px solid #b79d64 (gold signature element). The footer border is a signature element — it needs the full 3px gold treatment.

8. Typography Guards

[ ] Cormorant Garamond never set below 18px (1.125rem)
[ ] Cormorant Garamond never set to Bold (700) — max weight 500
[ ] Inter never used for headlines or display text
[ ] Cormorant never used for body copy, hints, or labels
[ ] Google Fonts import includes both families with correct weight ranges

Minimum Cormorant sizes in micro-tools:

Hero title: clamp(2rem, 5vw, 2.75rem) ✓
Intro title: 1.75rem (28px) ✓
Question text: 1.375rem (22px) ✓
Result title: 1.5rem (24px) ✓
Slider value: 2rem (32px) ✓
Hero number: clamp(4rem, 12vw, 7rem) ✓
Stat card numbers: 2.5rem (40px) ✓

All are above 18px. If you need a Cormorant element smaller than 1.125rem, switch it to Inter instead.

9. Gold Scrollbar

Every micro-tool gets the gold scrollbar. Both Webkit and Firefox.

[ ] ::-webkit-scrollbar width: 10px
[ ] ::-webkit-scrollbar-track background: #1a1a1a
[ ] ::-webkit-scrollbar-thumb background: #b79d64
[ ] ::-webkit-scrollbar-thumb:hover background: #c4aa74
[ ] html scrollbar-width: thin, scrollbar-color: #b79d64 #1a1a1a

10. Inline Styles in JS

JavaScript-generated result HTML is where brand violations hide. The CSS stylesheet is clean, but the calculate() / showResult() function builds HTML strings with inline style="" attributes. These need the same compliance as the stylesheet.

[ ] No var() in JS-generated inline styles
[ ] All inline hex values are canonical
[ ] No border-radius in inline styles on structural elements
[ ] Inline font-size, font-weight, color match the stylesheet specs
[ ] CTA link in results uses inline styles matching .btn-primary (gold bg, charcoal text, no border-radius)

How to check: Search for style=" and style=' within