GFS Design System — Version Diff

01 Version Diff Overview v10.0 to v10.0 Visual Comparison

This page documents every change between GFS Design System versions with visual before/after comparisons, consolidation maps, and bug fix records. The v10.0 → v10.0 release was the largest single update in the system's history: 35 pages consolidated, 8 new pages added, and 25 bugs fixed.

Pages Consolidated

-35

New Pages

+8

Bugs Fixed

25

Net Page Count

107 → 72

02 Version Timeline v7 through v10.0

timeline
    title GFS Design System Version History
    section v0.1 — Discovery
        April 2026 : Brand discovery phase
                   : Inter + IBM Plex Mono pairing
                   : Cobalt #092F64 anchor color
                   : Flat aesthetic direction
    section v1.0 — Foundation
        May 2026 : 12 foundational sections
                 : Color palette established
                 : Typography scale
                 : Spacing system
    section v7 — Growth
        May 2026 : Multi-section expansion
                 : Component library
                 : Initial icon set
    section v8 — Monolith
        May 16 2026 : 146 sections in 1 file
                    : ~15K lines of HTML
                    : Real US state SVG borders
                    : NetSuite ERP templates
                    : Globe animation
    section v10.0 — Multi-Page
        May 17 2026 : Architecture rewrite
                    : 107 pages, 200+ sections
                    : shared.css token system
                    : 220 icons, 36 slides
                    : 14 hub categories
    section v10.0 — Consolidation
        May 18 2026 : 107 to 72 pages (-33%)
                    : 616 icons (+180%)
                    : 200 slides (+456%)
                    : 105 animations (+425%)
                    : 25 bugs fixed
                    : Dot-matrix hero redesign

Timeline rendered with Mermaid.js. Each version represents a distinct architectural phase of the design system.

03 v10.0 → v10.0 Changes Major Visual Diffs

Page Consolidation Map

Content Expansion Table

Asset	v10.0	v10.0	Growth
Pages	107	72	-33% (consolidated)
Icons	220	616	+180%
Slides	36	200	+456%
Social Cards	56	120	+114%
Animations	20	105	+425%
Vendor Logos	0	62	New
FDA Sections	0	21	New
Diagrams	10	25	+150%

Hero Card Fix

Hero Layout (Broken)

position: absolute on hero-right caused the document ID card to overlap the globe animation. No z-index management. Barcode displaced. Affected 50+ pages.

Hero Layout (Fixed)

CSS Grid replaces absolute positioning. Three clean rows: meta (top), globe (center), barcode (bottom). z-index:2 on hero-meta. No overlaps.

Landing Page Redesign

index.html (Card Grid)

Simple card grid layout with 14 category tiles. No hero section. No animations. Static page load.

index.html (Dot-Matrix Canvas Hero)

Canvas-based dot-matrix US map hero with animated supply chain routes from Edgewood NY to 8 cities. Counter-up stats. Scroll-triggered category reveals. 8 clean categories.

Hub Reorganization

v10.0 — 14 Categories

Brand Foundation
Visual Identity
Components & UI
Data & Visualization
Documents & Templates
Marketing & Sales
Operations & Facilities
Maps & Geography
Presentations & Media
Digital & Web
NetSuite & ERP
Social & Content
People & Culture
Developer & Tools

v10.0 — 8 Categories

Brand & Identity
Design System
Documents & Content
Operations & Logistics
Maps & Data
Marketing & Communications
People & Culture
Developer & Tools

          Related categories merged:

          Brand Foundation + Visual Identity → Brand & Identity

          Components + Data/Viz → Design System

          Marketing + Digital + NetSuite → Maps & Data / Marketing

          Presentations + Social → Documents & Content

          Operations + Maps → Operations / Maps & Data

Section 03 covers the five major visual changes in v10.0: consolidation, content expansion, hero card fix, landing page redesign, and hub reorganization.

04 What Got Merged 13 Consolidations

Every merge reduced duplication while preserving all content. Source pages were deleted after content was absorbed into the target.

icons-expanded-1.html icons-expanded-2.html icons-expanded-3.html

icons.html 616 SVGs across 30 categories in one unified page

social.html social-mega.html

social.html 120+ cards, 13 categories, content calendar

mascot.html frosty-system.html

frosty.html 13 sections, AI chat bot, 20 expressions

presentations.html presentations-expanded.html

presentations.html 200 slide templates across 11 departments

animations.html advanced-dotmatrix.html dot-matrix-effects.html

animations.html 105 animations, 47 sections, 8 libraries

maps.html maps-interactive.html

regional-maps-interactive.html Leaflet.js + ECharts, 11 interactive sections

netsuite.html netsuite-suitelets.html netsuite-portals.html

netsuite.html Records, Suitelets, Portals — 21 mockups

marketing.html marketing-tools.html

marketing.html Strategy, Sales Tools, Competitive — 35 sections

communications.html internal-comms.html

communications.html Customer, Internal, Vendor — 36 sections

documents.html email-templates.html proposals.html

documents.html Templates, Writing, Email, Proposals

charts.html tables.html

tables-charts.html Data tables + chart patterns unified

illustrations.html custom-illustrations.html

custom-visuals.html 70+ custom SVG illustrations

state-maps.html state-badges.html

state-badges-complete.html State badge grid with all 49 SVGs

Total merges: 13 · Source files removed: 35 · Net reduction: 107 → 72 pages

All content from source pages was preserved in the target. Zero data loss during consolidation.

05 New Pages in v10.0 8 Additions

New

nutritionals.html

FDA food labeling with 21 sections covering Nutrition Facts panels, ingredient lists, allergen declarations, and regulatory compliance templates.

New

vendor-logos.html

62 vendor and partner logos with usage guidelines, minimum sizes, color and monochrome variants, and clearspace rules.

New

locations.html

49 state SVG maps, facility profiles for Edgewood NY and Hermitage PA, sales territory definitions, and coverage zone visualizations.

New

search.html

Full-text search across all 72 pages with fuzzy matching, category filtering, section-level deep links, and keyboard navigation.

New

snippets.html

Copy-paste code snippets for common GFS UI patterns: hero sections, data tables, stat cards, form layouts, and navigation bars.

New

quick-start.html

5-minute onboarding guide: install shared.css, pick a template, add sections, deploy. Aimed at new developers and AI agents building GFS pages.

New

how-to-use.html

Usage guide for the design system: how to navigate the hub, use search, switch themes, export tokens, and contribute new pages.

New

token-export.html

Export design tokens as JSON, CSS custom properties, SCSS variables, Tailwind config, or Figma-compatible format. One-click download for each.

All 8 new pages follow the standard GFS template with shared.css, print.css, search, dark mode, and hub linking.

06 Bug Fixes 25 Resolved

hero layout — 50+ pages affected

Critical Document ID card overlapping globe animation due to absolute positioning on hero-right Fixed

Critical Hero-meta z-index missing, causing content to render behind animated elements Fixed

High Hero-right switched from absolute to CSS Grid (meta top, globe center, barcode bottom) Fixed

High Barcode element displaced by overlapping document ID card Fixed

title row alignment — 48 pages affected

High Hero-meta title row misaligned — Document ID label lacked min-width constraint Fixed

Medium Applied strong tag with min-width to Document ID label for consistent alignment Fixed

Medium Title row flex wrapping incorrectly on narrow viewports Fixed

reading progress bar — 5 pages

High spec-sheet-template.html: progress bar using width instead of scaleX transform Fixed

High advanced-dotmatrix.html: progress bar using width instead of scaleX transform Fixed

Medium fleet.html: scaleX reading progress bar not updating on scroll Fixed

Medium procurement.html: scaleX reading progress bar not updating on scroll Fixed

Medium reporting.html: scaleX reading progress bar not updating on scroll Fixed

dark mode — 1 page

High suitelet-operations.html: dark mode toggle targeting document.body instead of document.documentElement Fixed

missing print.css — 5 pages

Medium fleet.html: missing print.css stylesheet link Fixed

Medium procurement.html: missing print.css stylesheet link Fixed

Medium quality.html: missing print.css stylesheet link Fixed

Medium reporting.html: missing print.css stylesheet link Fixed

Medium safety.html: missing print.css stylesheet link Fixed

missing searchSections() — 6 pages

Low Six pages had search input in topbar but missing searchSections() function in script block Fixed

missing back-to-top button — 4 pages

Low Four long-form pages missing the back-to-top floating button and scroll listener Fixed

hub index — index.html

Medium Homepage stats showing 105 pages instead of 101 after consolidation Fixed

Low Missing hub links for newly added pages (nutritionals, vendor-logos, locations, search) Fixed

Low Icon count stat displayed 90 instead of 396 after icon page consolidation Fixed

        Critical 2
      

        High 6
      

        Medium 12
      

        Low 5
      

        ALL 25 FIXED
      

All bugs were identified by automated health check script and resolved in the v10.0 release cycle.