← Hub Onboarding Wizard
v10.0
Welcome
02 Onboarding Wizard Interactive guided tour for new users
Welcome to the GFS Design System
7 steps to master the system
Your Guide to the Design System
This wizard walks you through the key features of the GFS Design System in 7 interactive steps. Each step takes about 30 seconds. Your progress is saved automatically.
1
Your Brand
Learn the GFS color palette
Locked

These are the 6 primary GFS colors. Try clicking any swatch to copy its hex code to your clipboard. See all colors on foundation.html

I know where to find brand colors
2
Find Anything
Search across 72+ pages instantly
Locked

The design system has a powerful search. Try typing "cheese" in the box below to see how results appear. Full search on search.html

I can search the system
3
Copy & Paste
Ready-made code snippets
Locked

Every component has a copy-to-clipboard button. Try clicking COPY on any snippet below. Full snippet library on snippets.html

I can copy snippets
4
Create a Document
Start from a template
Locked

The quick-start page has ready-made templates for every department. Pick a template to jump straight in. All templates on quick-start.html

I know how to start a new document
5
Your Role
Pages tailored to you
Locked

Based on your role, here are the 5 most relevant pages for you. Bookmark these for quick access.

I've bookmarked my key pages
6
Dark Mode
Toggle light and dark themes
Locked

Every page supports dark mode. Try toggling it on and off with the button below. The Mode button in the top bar works on every page.

Current: Light Mode
Light Mode
White backgrounds, dark text
Dark Mode
Dark backgrounds, light text
I can toggle dark mode
7
Get Help
Where to go when you need guidance
Locked

Three resources you should know about. Click any card to visit that page.

I know where to get help
Progress saves automatically to localStorage. Click Reset in the progress bar to start over.
← Back to Hub · GFS Design System v10.0 · Global Food Solutions, Inc. · Edgewood, NY