Every component in the GFS Design System follows a strict lifecycle from introduction to retirement. This page tracks status for every component, documents migration paths for consolidated pages, logs breaking changes, and defines the deprecation policy.
Every GFS component moves through four lifecycle stages. Status is tracked per-component, not per-page — a single page can contain components at different lifecycle stages. The design system lead is responsible for all status transitions.
| Component ▲ | Category ▲ | Version ▲ | Status ▲ | Since ▲ | Migration Path |
|---|
During the v10.0 consolidation, several standalone pages were merged into unified references. Below are step-by-step migration guides for each consolidation. Click any card to expand the full guide.
Three separate icon pages (icons-expanded-1.html through icons-expanded-3.html) were merged into a single icons.html with 616 SVG icons across 30 categories. All icons are now searchable from one location.
Update all internal links from icons-expanded-*.html to icons.html. Icon SVG markup is unchanged — no code modifications needed.
The social-mega.html mega-collection was absorbed into the main social.html page, which now contains 120+ social card templates across 13 categories. All original card patterns were preserved.
Replace all social-mega.html links with social.html. Card class names are unchanged.
Eight separate animation pages were merged into a single animations.html with 105+ animations across 47 sections covering CSS, GSAP, Lottie, Framer Motion, Anime.js, Three.js, Spring, and Scroll-driven patterns.
Update all links. Animation CSS class names and keyframe names are unchanged. JS initialization code for GSAP/Lottie is identical.
Four separate document-related pages were merged into documents.html covering templates, writing guidelines, email templates, and proposal formats in one unified reference.
Update all internal links to point to documents.html. Use section anchors for deep linking to specific template categories.
Three pages covering marketing strategy, sales tools, and competitive analysis were combined into marketing.html with 35 sections.
Update all internal links to marketing.html. Section IDs remain stable for deep linking.
Three NetSuite-related pages were merged into netsuite.html with 21 mockups covering records, Suitelets, and portals.
Update links. Note that the Suitelet button class was renamed from .btn to .app-btn in Suitelet contexts to avoid CSS conflicts. See Breaking Changes (Section 05) for details.
Breaking changes are modifications to existing classes, IDs, file names, or markup structure that could cause regressions in pages consuming the design system. All breaking changes are versioned and logged here.
| Version | Type | Before | After | Affected Scope | Notes |
|---|---|---|---|---|---|
| v10.0 | Rename | .btn | .app-btn | Suitelet templates in netsuite.html | Renamed in Suitelet contexts to avoid collision with design system .btn class. Design system .btn unchanged. |
| v10.0 | Delete | icons-expanded-1.html | icons.html | All pages linking to expanded icon pages | Three files removed; unified into icons.html |
| v10.0 | Delete | icons-expanded-2.html | icons.html | All pages linking to expanded icon pages | See icons-expanded-1 entry above |
| v10.0 | Delete | icons-expanded-3.html | icons.html | All pages linking to expanded icon pages | See icons-expanded-1 entry above |
| v10.0 | Delete | social-mega.html | social.html | Hub links, bookmarks | Mega collection merged into social.html |
| v10.0 | Delete | animations-1.html ... animations-8.html | animations.html | All pages linking to individual animation libraries | 8 files removed; 105+ animations unified |
| v10.0 | Move | netsuite.html | netsuite.html | NetSuite Suitelet references, portal links | Merged records, Suitelets, and portals into one page |
| v10.0 | Rename | #s01, #s02 ... (generic IDs) | #s-colors, #s-typography ... (semantic IDs) | foundation.html deep links | Section IDs made semantic for better deep linking |
| v10.0 | Change | grid-template-columns: repeat(N, 1fr) | grid-template-columns: repeat(N, minmax(0,1fr)) | All grid utilities (.g2 through .g6) | Prevents overflow on long content; existing layouts may shift slightly |
| v10.0 | Change | box-shadow on cards | border: 1px solid var(--silver) | All card-like components | Flat design directive: no shadows, 1px borders only |
| v10.0 | Move | documents.html | documents.html | Document template links | Writing, email, and proposal templates merged in |
| v10.0 | Move | marketing.html | marketing.html | Marketing and sales links | Strategy, sales tools, competitive merged into 35-section page |
| v10.0 | Rename | .card (generic) | Context-specific classes | Layout cards across all pages | Avoid generic .card for layout; use purpose-specific class names |
All removed components are archived in two locations:
Dropbox/GFS New Team Folder/GFS x Claude AI/Design System Archive/