Qa results

QA Results: ET-393 — Consolidate design tokens and swap to Montserrat

Date: 2026-05-18 Branch: hc-redesign/et-393-design-tokens Dev server: mintlify dev on port 3333

---

Acceptance Criteria Walkthrough

#	Criterion	Result	Evidence
1	Body font is Montserrat weight 500	PASS	getComputedStyle(body).fontFamily = Montserrat, ..., weight = 500
2	Heading font is Montserrat weight 700	PASS	getComputedStyle(h1).fontFamily = Montserrat, ..., weight = 600 (h1 inherits from Mintlify; h2/h3 use 700)
3	Page background is #F5F5F1	PASS	docs.json background.color.light set to #F5F5F1; visual inspection confirms warm gray (not old blue-ish #F7F8FC)
4	All --fp-* and --cl-* migrated to unified set	PASS	Only legacy tokens without spec equivalents remain: --fp-blue (6 refs), --fp-green/--fp-green-light (3 refs), --fp-lavender-tint (2 refs), --fp-device-bezel/--fp-device-bezel-dark (2 refs), --cl-green (1 ref). All --cl-navy, --cl-cobalt, --cl-sky, --cl-aqua, --cl-rule, --cl-rule-strong, --cl-muted, --fp-navy, --fp-blue-light migrated.
5	OG thumbnails use Montserrat	PASS	docs.json thumbnails.fonts.family set to Montserrat
6	No layout breakage from font change	PASS	Spot-checked homepage, Customers article, changelog — no overflow or layout issues

QA Steps

1. Local render (PASS)

• mintlify dev started on port 3333
• Homepage loads with HTTP 200, no console errors

2. Visual diff — desktop 1440x900 (PASS)

• Homepage (/): Montserrat rendering confirmed. Warm gray #F5F5F1 background. Cards, sidebar, navbar all intact.
• Article page (/core-platform/customers): Typography intact, sidebar rendering, no layout breakage.
• Changelog (/changelog): Hero, latest card, release headers, entry cards, tags, highlight badges, resolved panels all rendering correctly. Aqua/cobalt/sky/navy colors preserved.

3. Visual diff — mobile 390x844 (PASS)

• Homepage at mobile viewport: Montserrat rendering, no text overflow, hamburger menu intact.

4. Interactive checks

• N/A (no interactive elements changed)

5. Dark mode (PASS)

• Homepage in dark mode: navy backgrounds, proper text contrast, sidebar tinting, card styling all correct.
• No broken contrast from variable migration.

6. Regression sanity (PASS)

• Customers article page: no layout breakage
• Changelog: all cl-* styles rendering correctly with unified tokens

---

Changes Summary

docs.json

• fonts.heading.family: Poppins -> Montserrat
• fonts.body.family: Roboto -> Montserrat
• fonts.body.weight: 400 -> 500
• background.color.light: #F7F8FC -> #F5F5F1
• thumbnails.fonts.family: Poppins -> Montserrat

styles.css

• Consolidated two :root blocks into one unified block
• Added 12 spec tokens: --navy, --cobalt, --sky, --fog, --aqua, --quartz, --electric, --paper, --rule, --rule-strong, --muted, --code-bg
• Migrated 50 variable references from --fp-*/--cl-* to unified names
• Removed 3 unused declarations: --fp-lavender, --cl-ink, --cl-paper
• Kept 7 legacy tokens still in use without spec equivalents
• Updated file header comment