Changelog — IGrow Design System

All notable changes to this design system. Newest first.

v3.2 — May 2026

Minor additive pass — no breaking changes. Bump ?ver= query string to pick up new tokens.

Responsive guidelines added — new system/docs/responsive.md documents the full mobile-first approach: breakpoints (base→2xl), canonical gutters, spacing scale per breakpoint, fluid typography, layout patterns (band+container, prose max-width, deliberate 2xl whitespace), column grids, property card grid progression, and per-component behaviour. Anchored to IGrow's dominant screen sizes: 384×832 (Android mobile) and 1920×1080 (desktop).
Gutter tokens added — --gutter-mobile (16px), --gutter-tablet (24px), --gutter-desktop (32px) as canonical horizontal padding values for page-level containers. Exposed in Tailwind as px-gutter-mobile, px-gutter-tablet, px-gutter-desktop.
Responsive callouts in component reference — Button, Field, Property card, Nav, Hero, and Table each have a new "Responsive behaviour" subsection linking to the guidelines.
Doc pages get mobile navigation — all reference pages now show a collapsible <details>/<summary> nav drawer below 768px, replacing the desktop sidebar.
Preview pages made mobile-responsive — component demo and foundations pages no longer overflow at narrow viewports; swatches are fluid, typographic role specimens stack label-above-sample on mobile, and wide tables scroll horizontally.

Minor additive pass — no breaking changes. Bump ?ver= query string to pick up new tokens.

50% brand tints added — --color-raspberry-tint-50 (#DA9BA5), --color-dusty-grey-tint-50 (#E8E8EA), --color-bright-grey-tint-50 (#F6F6F8), --color-black-tint-50 (#808080). For infographics and charts only — never UI chrome.
Footer gradient corrected — bare .ig-footer now defaults to the main IGrow Wealth Investments dark grey/black gradient. Sub-brand sites must now add an explicit modifier (.ig-footer--rentals etc.).
Nav alignment fixed — .ig-nav__links gets margin-inline-start: auto so links and CTA are grouped right-aligned, matching the live site.
Car icon added — #car added to system/icons/sprite.svg for parking specs on property listings.
Montserrat Thin not added — brand guide lists Thin but assigns it to no typographic role. No use case in the system.
Social icons replaced with Simple Icons — Facebook, Instagram, LinkedIn, and WhatsApp brand marks are now sourced from simpleicons.org (CC0 licence). Previously they were mixed-source filled paths of unknown origin misattributed to Lucide. The sprite now has a clear split: Lucide for UI icons, Simple Icons for brand marks.
Shadow tokens corrected — --shadow-sm/card/hover/modal were still using the removed navy alpha rgba(15, 22, 40, …) despite the v3.0 changelog claiming otherwise. Now correctly use rgba(0, 0, 0, …). Visual difference is imperceptible but the tokens are now brand-clean.

Breaking colour change — bump ?ver= query string in production.

Teal #244C5A removed — not in the official palette. .ig-btn--secondary outline is now Black.
Navy #0f1628 removed — also not a brand colour. --color-brand-dark resolves to #000000.
Brand red corrected — #B7364A → #B6364B (exact Pantone 703 C value).
Dusty Grey corrected — #D8DADB → #D1D0D4 (Pantone 5315 C).
Bright Grey introduced — #ECEDF0 (Pantone 9380 C) as --color-bg-muted.
Shadow tints recoloured — card/modal shadows from navy alpha to pure-black alpha.
Sub-brand gradients consolidated — three gradient families (Raspberry / Teal / Navy) reduced to two (Raspberry / IGrow dark).

See brand-colour-alignment.md in the workspace root for the full rationale.

No new components. No breaking changes.

Accordion rewritten on native <details>/<summary> — zero JS.
Modal moved to native <dialog> + showModal() — browser-native focus trap, Escape-to-close, top-layer.
Mobile nav drawer and filter drawer moved to <dialog> with slide-from-edge transforms via @starting-style.
Tabs implement the APG keyboard pattern — ArrowLeft/Right, Home/End, roving tabindex.
Switch gains role="switch".
Form fields adopt :user-invalid — error border without JS.
Filter toggle wired with aria-expanded/aria-controls. Listing count in aria-live="polite".
Naming — .ig-footer--homeloans renamed to .ig-footer--home-loans.

Major release turning the v1 prototype kit into a development-ready system.

Single consolidated system/components.css (all .ig-* component classes).
Expanded system/tokens.css (breakpoints, fluid type, semantic colours, z-index, aspect ratios).
Full React JSX component library (system/react/components.jsx).
WordPress PHP partials, Gutenberg block patterns, theme.json.
Tailwind config + class recipes.
system/docs/ — components.md, tokens.md, accessibility.md.
Six sub-brand brand.json manifests.
Icon system: curated Lucide sprite + lucide-react + PHP helper.

Original design tokens and component specimens. Superseded by v2.