GFS Design System — How to Use This System

02 System Overview Diagram Architecture — How the design system is organized

Each category node links to a cluster of related pages. Start from the Hub (index.html) to explore all 8 categories.

03 User Role Map Who uses what — Pages organized by job function

Find your role below and jump directly to the pages most relevant to your work. Each card links to your primary pages and describes your typical use cases.

CEO / Michael

Strategy, board prep, brand decisions, investor relations

brand investor annual-report dashboards reporting

Sales Rep

Customer pitches, proposals, social posts, quick references

marketing presentations social case-studies communications

Operations Manager

Warehouse ops, fleet management, safety protocols, manufacturing

fleet inventory manufacturing-ops safety facility

Purchasing

Purchase orders, vendor management, compliance, nutritional specs

procurement netsuite nutritionals vendor-logos spec-sheets

Marketing

Campaigns, content creation, brand consistency, social media

social presentations communications brand seasonal

IT / Developer

Code reference, tool integration, component library, diagrams

developer tools-ecosystem animations diagrams components

HR / Admin

Hiring, training, internal communications, employee onboarding

people communications documents badges brand

Quality / Compliance

FDA labeling, audits, certifications, allergen compliance

nutritionals quality safety badges packaging

Driver / Warehouse

Routes, safety protocols, facility info, fleet compliance

fleet safety facility locations

Finance

NetSuite records, financial reports, investor documents

netsuite reporting investor dashboards annual-report

Each role maps to the 4-5 most frequently accessed pages. All team members should also know foundation.html for brand basics.

04 Task-Based Navigation "I need to..." — Find the right page for any task

Click a category to expand it. Each task maps directly to the page where you can accomplish it.

Create Something ▶

Write a letter or formal document → documents.html

Build a slide presentation → presentations.html

Make a social media post → social.html

Design a product label → packaging.html + nutritionals.html

Send a branded email → documents.html (email section)

Draft a case study → case-studies.html

Record a video → video.html

Create a spec sheet → spec-sheet-template.html

Find a Reference ▶

Look up a brand color → foundation.html

Find an icon → icons.html

Check FDA labeling rules → nutritionals.html

Get a vendor or partner logo → vendor-logos.html

See state coverage and territories → locations.html

Look up typography rules → foundation.html

Find accessibility standards → standards.html

Check the company address → identity.html

Build Something ▶

Add a UI component → components.html

Create a process flow diagram → diagrams.html

Build a data dashboard → dashboards.html + netsuite.html

Add an animation → animations.html

Compose a page layout → patterns.html + blocks.html

Create data tables and charts → tables-charts.html + advanced-charts.html

Build a loading screen → loading-screen.html

Design a custom error page → error-pages.html

Onboard Someone ▶

Onboard a new employee → people.html

Onboard a new vendor → communications.html (vendor section)

Onboard a new customer → communications.html (customer section)

Onboard a new developer → developer.html

Train on safety protocols → safety.html

Introduce brand guidelines → brand.html + foundation.html

Manage Operations ▶

Track fleet vehicles → fleet.html

Manage inventory → inventory.html

Run manufacturing reports → manufacturing-ops.html

Handle a crisis situation → crisis.html

Run procurement workflows → procurement.html

Review quality metrics → quality.html

Click any category header to expand or collapse. Every task links to the exact page (or pages) where you can accomplish it.

05 Page Relationship Map Pipelines — How pages connect to each other

Pages are not isolated — they form pipelines. Each pipeline shows how work flows from one page to the next, building on top of previous outputs.

DESIGN PIPELINE

Tokens become components, components become patterns, patterns become blocks.

graph LR A[foundation] --> B[components] B --> C[patterns] C --> D[blocks] D --> E[dashboards] style A fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style B fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style C fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style D fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style E fill:#E9F5FF,stroke:#D9E1EA,color:#092F64

BRAND ASSETS PIPELINE

Brand identity flows into visual assets used across all materials.

graph LR A[brand] --> B[identity] B --> C[icons] C --> D[vendor-logos] B --> E[standards] style A fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style B fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style C fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style D fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style E fill:#E9F5FF,stroke:#D9E1EA,color:#092F64

PRODUCT PIPELINE

FDA requirements inform packaging, which feeds into spec sheets and certifications.

graph LR A[nutritionals] --> B[packaging] B --> C[spec-sheet-template] C --> D[badges] A --> E[quality] style A fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style B fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style C fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style D fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style E fill:#E9F5FF,stroke:#D9E1EA,color:#092F64

OUTREACH PIPELINE

People drive communications, which become marketing materials and social content.

graph LR A[people] --> B[communications] B --> C[marketing-complete] C --> D[social] C --> E[presentations] style A fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style B fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style C fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style D fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style E fill:#E9F5FF,stroke:#D9E1EA,color:#092F64

DATA PIPELINE

NetSuite data powers dashboards, which feed into reports and investor materials.

graph LR A[netsuite-complete] --> B[dashboards] B --> C[reporting] C --> D[investor] D --> E[annual-report] style A fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style B fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style C fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style D fill:#E9F5FF,stroke:#D9E1EA,color:#092F64 style E fill:#E9F5FF,stroke:#D9E1EA,color:#092F64

Five pipelines cover the major workflows. Most pages participate in at least one pipeline.

06 Getting Started Checklist 10 steps — Your first day with the design system

Click each item to mark it complete. Your progress is saved locally in your browser. Complete all 10 steps to fully orient yourself in the GFS Design System.

Visit the Hub (index.html) and explore all 8 categories
Check Brand & Identity for colors, fonts, and logo usage
Find your role in the User Role Map above
Bookmark your 3 most-used pages for quick access
Try copying a snippet from the Component Library
Use Documents to create your first branded document
Search for something using the Global Search bar in the topbar
Toggle dark mode using the Mode button and confirm it works
Review the Changelog for the latest updates and version history
Share feedback with the design system team (design@GlobalFoodSolutions.co)

0 / 10

Progress is saved to localStorage. Clear browser data to reset.

07 Frequently Asked Questions 10 FAQs — The most common questions answered

01 Where do I find the GFS brand colors?

All brand colors, including primary blues, neutrals, and semantic colors, are documented on foundation.html. Each color includes its hex value, CSS variable token, and usage guidelines. For cross-platform color values (Pantone, CMYK, RGB), see color-platforms.html.

02 How do I make a presentation?

Go to presentations.html for 200 slide templates across 11 departments. Each template includes speaker notes, layout guides, and brand-compliant formatting. For quick starts, check the slide starter kits at the top of the page.

03 Where is the FDA labeling reference?

The complete FDA food labeling reference is on nutritionals.html, covering all 21 sections including Nutrition Facts panels, ingredient lists, allergen declarations, and claim substantiation. This is the definitive GFS resource for food packaging compliance.

04 How do I add an icon to my project?

Visit icons.html where all 616 SVG icons are organized into 30 categories. Click any icon to copy its SVG code directly to your clipboard. Icons are resolution-independent and work at any size. They inherit the current text color by default.

05 Where are the NetSuite dashboard mockups?

All 21 NetSuite mockups — including records, Suitelets, and portal designs — are on netsuite.html. For analytics and KPI dashboards, also see dashboards.html and reporting.html.

06 How do I create a social media card?

The social.html page has 120+ social card templates across 13 categories (LinkedIn, Instagram, Twitter/X, etc.). Each card is brand-compliant and includes copy templates, image specs, and hashtag suggestions.

07 Where is the company address and contact info?

Company details are on identity.html. HQ: 131 Heartland Blvd, Edgewood, NY 11717. Facility 2: 2500 Freeland Road, Hermitage, PA 16148. Phone: (877) 728-5550. These details also appear in every page footer.

08 How do I check allergen requirements?

Allergen declaration requirements are covered in Section 05 of nutritionals.html. This includes the Big 9 allergen list, "Contains" statement formatting, precautionary labeling (e.g., "May contain"), and cross-contact protocols.

09 Where are the vendor and partner logos?

All 62 vendor and partner logos are on vendor-logos.html, organized by category. Each logo includes usage guidelines, minimum size requirements, and clear-space rules. Logos are provided in SVG format for crisp rendering at any size.

10 How do I report a bug or suggest an improvement?

Check the changelog.html page for the latest version history and known issues. To report a bug or suggest an improvement, contact the design system team at design@GlobalFoodSolutions.co. Include the page name, section number, and a description of the issue.

Click any question to expand its answer. Each answer links directly to the relevant page.

08 System Stats Dashboard By the numbers — What the design system contains

A snapshot of the GFS Design System at v10.0. These numbers reflect the total assets, templates, and reference materials available across all 72 pages.

72

Pages

8

Categories

616

SVG Icons

200

Slide Templates

120+

Social Cards

105+

Animations

62

Vendor Logos

49

State Maps

25+

Diagram Types

21

FDA Sections

Pages per Category

Category	Pages	Key Pages
Brand & Identity	9	foundation, identity, brand, icons, standards, frosty
Design System	10	components, blocks, patterns, animations, tables-charts
Documents & Content	8	documents-complete, presentations, social, video
Operations & Logistics	11	fleet, inventory, manufacturing-ops, safety, nutritionals
Maps & Data	7	locations, dashboards, netsuite-complete, regional-maps
Marketing & Communications	8	marketing-complete, communications, investor, crisis
People & Culture	4	people, vendor-logos, badges, playground
Developer & Tools	12	developer, tools-ecosystem, dot-matrix-tool, changelog

System Files

shared.css

Design tokens, component styles

print.css

Print-friendly overrides

tokens.json

Machine-readable tokens

CLAUDE.md

AI/developer build instructions

Stats reflect GFS Design System v10.0 as of May 2026. Updated with each release.

09 Complete Page Index All 72 pages — Alphabetical quick-reference

Every page in the GFS Design System, listed alphabetically with its category and a one-line description. Click any page name to navigate directly.

404.html Branded error page advanced-charts.html ECharts dashboards animations.html 105+ animations, 8 libraries annual-report.html Annual report template asset-library.html Searchable asset index badges.html Certifications & USDA badges blocks.html Composable UI blocks brand.html Story, culture, manifesto case-studies.html Case study templates changelog.html Version history (v10.0) color-platforms.html Colors across platforms communications.html Customer, internal, vendor comms components.html Buttons, inputs, navigation crisis.html Crisis communications custom-visuals.html 70+ custom SVG illustrations dashboards.html Analytics dashboards dataviz.html Data visualization system developer.html Developer reference diagrams.html Mermaid process flows documents.html Templates, writing, email dot-matrix-tool.html Image-to-dot-matrix converter enterprise.html Enterprise portal components error-pages.html Error page templates facility.html Facility management fleet.html Vehicle fleet management food-industry.html Food industry reference foundation.html Colors, typography, spacing frosty.html Mascot & chat bot governance.html Brand governance icons.html 616 SVG icons, 30 categories identity.html Logo, icons, photography illustrations.html Illustration library index.html Hub — main entry point inventory.html Inventory systems investor.html Investor materials journey-maps.html Customer journey maps label-designer.html Fabric.js label designer loading-screen.html Loading states locations.html 49 state SVGs, territories manufacturing-ops.html Manufacturing operations marketing.html Strategy, sales tools (35 sections) micro-copy.html UI text patterns netsuite.html Records, Suitelets (21 mockups) nutritionals.html FDA food labeling (21 sections) packaging.html Packaging & labels patterns.html Complete pattern reference people.html HR, training, recruitment playground.html Interactive sandbox presentations.html 200 slide templates procurement.html Procurement workflows quality.html Quality management regional-assets.html Regional visual assets regional-maps-interactive.html Leaflet + ECharts maps reporting.html Reports & KPIs responsive.html Breakpoint specimens safety.html Safety protocols scenes.html Warehouse/logistics scenes seasonal-themes.html Holiday/seasonal themes sketch-style.html Rough.js hand-drawn style social.html 120+ social cards sonic-brand.html Audio identity spec-sheet-template.html 200-product spec sheet standards.html Accessibility, voice, dark mode state-badges-complete.html State badge grid style-dictionary.html Token pipeline sustainability.html ESG & sustainability tables-charts.html Data tables, chart patterns tools-ecosystem.html 15 open source integrations vendor-logos.html 62 vendor/partner logos video.html Video templates watermarks.html Document watermarks

69 content pages listed (excluding template.html, shared.css, and this page). Click any entry to navigate.