01
Who Owns What
Role Definitions
R = Responsible
Does the work
A = Accountable
Final decision maker
C = Consulted
Provides input
I = Informed
Kept in the loop
| Domain | CEO Michael Levine |
Design System Core Team |
Dept Heads Operations, Sales, etc. |
All Staff Company-wide |
|---|---|---|---|---|
| Foundation (Colors, Type, Spacing) | A | R | C | I |
| Components (Buttons, Inputs, Tables) | A | R | C | I |
| Documents (Letters, POs, BOLs) | A | R | C | I |
| Templates (Email, NetSuite, Dashboards) | I | R | A | I |
| Content (Copy, Photography, Social) | A | C | R | I |
| Brand Identity (Logo, Icons, Marks) | A | R | I | I |
| Facility (Signage, Forms, Displays) | A | R | C | I |
02
Change Process
01
Propose
Submit a change request with mockup, rationale, and affected components. Include before/after screenshots.
Who: Anyone
02
Review
Design lead reviews against brand standards, accessibility, dark mode compatibility, and token compliance.
Who: Design System Team
03
Approve
Michael Levine signs off on any brand-impacting changes. Foundation and Identity changes always require CEO approval.
Who: Michael Levine (CEO)
04
Implement
Update the design system, deploy changes, update tokens.json and changelog, and notify all stakeholders.
Who: Design System Team
Turnaround targets: Patch requests within 24 hours. Minor changes within 3 business days. Major changes (foundation, identity) within 5 business days.
03
Locked Components
The following components are LOCKED and cannot be modified without explicit written approval from Michael Levine (CEO). Unauthorized changes will be reverted immediately.
LOCKED
Header / Topbar
The sticky topbar pattern, including layout, color, typography, and navigation structure. No modifications.
LOCKED
Sidebar Navigation
Sidebar layout, item ordering, active-state styling, and group headers. Functional links may be updated.
LOCKED
Footer
Brand footer layout, company information block, document metadata, and end-of-page pattern.
LOCKED
Color Palette
All 17 color values (primary, neutral, semantic). No additions, removals, or value changes without full review.
LOCKED
Logo Usage
GFS monogram, clearspace rules, minimum sizes, and all approved logo variants. Zero tolerance for modifications.
LOCKED
Font Stack
Inter (display/body) + IBM Plex Mono (system/data). No alternative fonts, no additional families, no weight changes.
04
Deprecation Policy
Day 0
Announce
Add deprecation notice to the component. Notify all teams via internal channel. Document the replacement path.
Day 1 – 30
Warn
Add DEPRECATED badge to the component in the design system. Component still functions.
Day 31 – 60
Migrate
All teams must complete migration to the replacement component. Design system team provides migration support.
Day 60+
Remove
Component is removed from the design system. All references are cleaned up. Changelog entry is created.
Exception: Security-related deprecations (e.g., vulnerable dependencies) may skip the warning period and be removed immediately. Notify teams post-removal.
05
Design Review Checklist
Every new page, template, or component must pass all 15 checks before deployment. No exceptions.
✓
01
Uses only approved color palette values
✓
02
Uses Inter and/or IBM Plex Mono only
✓
03
Follows 4px spacing grid (sp-1 through sp-24)
✓
04
Has dark mode support via CSS variables
✓
05
Accessible contrast ratios (WCAG AA minimum)
✓
06
Both facilities listed where required
✓
07
Michael Levine listed as CEO/contact
✓
08
Correct phone: (877) 728-5550
✓
09
Responsive down to 640px breakpoint
✓
10
Uses CSS variables (not hardcoded hex values)
✓
11
No box-shadow decorations (flat aesthetic)
✓
12
Topbar includes version number and Hub link
✓
13
Footer links back to Hub with company info
✓
14
IBM Plex Mono for labels, metadata, and codes
✓
15
No rounded corners beyond 8px (radius-lg max)
06
Brand Police
These are the most common brand violations found in internal and external materials. Every item below has been observed in production at least once.
Wrong Blue Shade
Wrong
#1E90FF (Dodger Blue)
#0066CC (Generic Blue)
#003366 (Dark Cyan)
#0066CC (Generic Blue)
#003366 (Dark Cyan)
Correct
#092F64 (Cobalt)
#1A5799 (Navy)
#468BE6 (Tufts)
#1A5799 (Navy)
#468BE6 (Tufts)
Wrong Font Family
Wrong
Arial for headings
Courier New for code
Georgia for body text
Courier New for code
Georgia for body text
Correct
Inter for headings
IBM Plex Mono for code
Inter for body text
IBM Plex Mono for code
Inter for body text
Incorrect Company Name
Wrong
"Global Food Solutions"
"GFS Inc"
"Global Foods Solutions"
"GFS LLC"
"GFS Inc"
"Global Foods Solutions"
"GFS LLC"
Correct
"Global Food Solutions, Inc."
"GFS" (abbreviation OK)
"GFS Inc." (informal OK)
Always include comma before Inc.
"GFS" (abbreviation OK)
"GFS Inc." (informal OK)
Always include comma before Inc.
Inconsistent Spacing
Wrong
padding: 15px;
margin: 10px 7px;
gap: 18px;
Arbitrary values off 4px grid
margin: 10px 7px;
gap: 18px;
Arbitrary values off 4px grid
Correct
padding: var(--sp-4); /* 16px */
margin: var(--sp-3) var(--sp-2);
gap: var(--sp-5); /* 20px */
Always use spacing tokens
margin: var(--sp-3) var(--sp-2);
gap: var(--sp-5); /* 20px */
Always use spacing tokens
Wrong Phone Number
Wrong
877-728-5550
(631) 9400198
+1-877-728-5550
Any other formatting
(631) 9400198
+1-877-728-5550
Any other formatting
Correct
(877) 728-5550
Always use this exact format.
Parentheses, space, hyphen.
Always use this exact format.
Parentheses, space, hyphen.
Decorative Shadows & Radius
Wrong
border-radius: 12px;
border-radius: 50%; (on cards)
box-shadow: 0 4px 20px ...
Drop shadows on static cards
border-radius: 50%; (on cards)
box-shadow: 0 4px 20px ...
Drop shadows on static cards
Correct
border-radius: 2px (sm)
border-radius: 4px (md)
border-radius: 8px (lg, max)
Shadows only on hover/elevation
border-radius: 4px (md)
border-radius: 8px (lg, max)
Shadows only on hover/elevation
07
Brand Usage Policy
All GFS brand assets are company property. Usage rights vary by role and context. Unauthorized use of brand assets in external materials is grounds for immediate corrective action.
Usage Tiers
| Asset Category | Internal (All Staff) | External (Sales/Marketing) | Third-Party / Vendor | Approval Required |
|---|---|---|---|---|
| Logo & Monogram | Yes | Yes | Case-by-case | CEO for external co-branding |
| Slide Templates | Yes | Yes | No | None (pre-approved) |
| Social Media Templates | Yes | Yes | No | Dept Head for external posts |
| Document Templates (PO, BOL, Invoice) | Yes | Yes | No | None (locked templates) |
| Color Palette & Tokens | Yes | Yes | Case-by-case | Design System Team |
| Photography / Product Shots | Yes | Case-by-case | No | CEO for all external use |
| Facility Signage & Display | Yes | N/A | No | Operations + CEO |
Approval Process
01
Request
Submit a Brand Usage Request form specifying the asset, context, audience, and distribution channel. Attach mockups.
Who: Requestor
02
Review
Design System Team checks compliance with brand guidelines, correct asset versions, and proper attribution. 24-hour SLA.
Who: Design System Team
03
Approve / Deny
CEO signs off on external/co-brand usage. Design System Team handles internal approvals. Denials include specific remediation steps.
Who: CEO or DS Team
Vendor co-branding rule. Third-party vendors may display the GFS logo only under a signed co-branding agreement. The GFS logo must always appear at equal or greater prominence. No vendor may alter, recolor, or animate the GFS logo.
08
Design System Contribution Guide
Anyone at GFS can propose new components, patterns, or pages for the design system. All contributions follow a structured review process to maintain quality and consistency.
Contribution Types
New Component
A reusable UI element not currently in the system. Must include: HTML markup, CSS styles using GFS tokens, dark mode variant, responsive behavior, usage guidelines, and at least 2 real-world use cases.
New Page
A full design system page covering a new domain. Must include: shared.css import, print.css import, topbar with search, back-to-top button, footer with hub link, favicon, section collapse, and dark mode.
Pattern / Template
A reusable layout or content pattern (e.g., card grid, data table, timeline). Must show 3+ variants, document spacing/sizing rules, and include copy-paste-ready code snippets.
Review Process
01
Draft
Author creates the contribution in a standalone HTML file following the GFS page template. Include all required infrastructure (shared.css, print.css, search, dark mode, etc.).
Who: Contributor
02
Self-Check
Run the 15-item Design Review Checklist (Section 05) and the Quality Gate Checklist (Section 11). Fix all failures before submitting.
Who: Contributor
03
Peer Review
Design System Team reviews for brand compliance, code quality, accessibility, performance, and consistency with existing pages. Feedback returned within 3 business days.
Who: Design System Team
04
Merge
Approved contributions are added to the design system, linked in the hub index, documented in the changelog, and announced to all stakeholders.
Who: Design System Team
Rejection policy. Contributions that fail the Design Review Checklist or use non-GFS colors, fonts, or spacing values will be returned with specific line-by-line remediation notes. No contribution is rejected outright without guidance on how to fix it.
09
Version Control & Release Process
The GFS Design System follows semantic versioning. Every change is tracked, reviewed, and deployed through a structured release pipeline.
Versioning Scheme
MAJOR
v8 → v9
Architecture overhauls, visual identity changes, page structure rewrites. Breaks backward compatibility. Requires CEO sign-off and full team notification.
MINOR
v10.0 → v10.0
New pages, new sections within existing pages, new component categories, content expansion. Backward compatible. Design lead approval.
PATCH
v10.0.1, v10.0.2
Bug fixes, typos, broken links, accessibility fixes, performance improvements. No approval needed. Must be documented in changelog within 24 hours.
Release Pipeline
01
Develop
Changes are made in a working copy. Each change is self-contained: one page or one component per changeset. No mixed concerns.
Who: Author
02
Validate
Run health check: shared.css loads, print.css loads, favicon present, dark mode works, search works, back-to-top works, all links resolve, no console errors.
Who: Author
03
Review
Design System Team reviews against brand standards. For MAJOR/MINOR: CEO review required. For PATCH: team lead only.
Who: DS Team / CEO
04
Deploy
Push to Cloudflare Pages. Update hub index. Update changelog. Bump version number in topbar across all affected pages. Notify stakeholders.
Who: DS Team
Rollback policy. Any deployment that introduces a visual regression, broken link, or accessibility failure is rolled back immediately. The previous version is restored within 1 hour. A post-mortem is filed within 24 hours.
10
Naming Conventions
Consistent naming ensures the design system stays navigable as it scales. Every file, CSS class, and section ID follows strict conventions.
File Naming
| Rule | Pattern | Example | Anti-Pattern |
|---|---|---|---|
| Page files | kebab-case.html | fleet-management.html | FleetManagement.html, fleet_mgmt.html |
| Shared assets | lowercase.ext | shared.css, print.css, tokens.json | Shared.CSS, PRINT.css |
| No version in filename | name.html (not name-v2) | icons.html | icons-v2.html, icons-new.html |
| No abbreviations | full-word-name.html | presentations.html | pres.html, pptx.html |
CSS Class Naming
| Rule | Pattern | Example | Anti-Pattern |
|---|---|---|---|
| Layout classes | kebab-case, semantic | .hero-section, .s-head, .topbar | .heroSection, .top_bar |
| Grid utilities | .g{n} for n-column grids | .g2, .g3, .g4 | .grid-2col, .two-column |
| Component classes | .component-element | .raci-table, .timeline-dot | .raciTable, .dot |
| State classes | .is-{state} or .{state} | .collapsed, .visible, .current | .isActive, .js-open |
| No .card for layout | .{context}-card | .highlight-card, .locked-card | .card (too generic) |
Section ID Naming
| Rule | Pattern | Example | Anti-Pattern |
|---|---|---|---|
| Sequential numbering | id="s{nn}" | s01, s02, s03 ... s99 | section-1, sec1, colors |
| Zero-padded | Always 2 digits | s01 (not s1) | s1, s2, s3 |
| No gaps in sequence | s01, s02, s03 (continuous) | s01, s02, s03 | s01, s03, s07 (gaps) |
| Hero is always s01 | id="s01-dup-x0" on hero-section | <div class="hero-section" id="s01-dup-x1"> | <div class="hero-section" id="hero"> |
11
Quality Gate Checklist
Every page must pass all 24 quality gates before it can be published to the GFS Design System. This checklist goes beyond brand compliance to cover infrastructure, accessibility, and performance.
Infrastructure (8 gates)
✓
01
Links shared.css (not inline copies of shared styles)
✓
02
Links print.css with media="print"
✓
03
Links favicon.svg with type="image/svg+xml"
✓
04
Has dark mode toggle (toggleTheme function)
✓
05
Has searchSections() wired to topbar input
✓
06
Has back-to-top button with scroll listener
✓
07
Has reading progress bar (scaleX transform, not width)
✓
08
Has section collapse/expand on .s-head click
Navigation (4 gates)
✓
09
Topbar links back to index.html (Hub)
✓
10
Footer links back to index.html with company info
✓
11
Skip-to-content link present as first element in body
✓
12
Page is listed and linked in hub index.html
Brand Compliance (6 gates)
✓
13
Uses only GFS palette colors via CSS variables
✓
14
Uses only Inter and IBM Plex Mono fonts
✓
15
Follows 4px spacing grid (no arbitrary px values)
✓
16
No box-shadow decorations (flat aesthetic)
✓
17
No border-radius beyond 8px (radius-lg max)
✓
18
Version number in topbar matches current release
Accessibility & Performance (6 gates)
✓
19
All text meets WCAG AA contrast ratio (4.5:1 body, 3:1 large)
✓
20
All interactive elements keyboard-accessible
✓
21
Responsive down to 640px (no horizontal scroll)
✓
22
No external JS dependencies beyond CDN libraries
✓
23
Page loads under 2 seconds on 3G simulation
✓
24
Zero console errors or warnings on load
12
Ownership & Contacts
Every domain in the design system has a clear owner. Ownership means accountability for accuracy, freshness, and compliance of that domain's pages and components.
| Domain | Owner | Pages Covered | Escalation |
|---|---|---|---|
| Foundation (Colors, Typography, Spacing, Tokens) | Design System Team | colors.html, typography.html, spacing.html, tokens.json | Michael Levine (CEO) |
| Brand Identity (Logo, Icons, Marks, Voice) | Michael Levine (CEO) | icons.html, logo-usage.html, voice-tone.html | N/A (top-level owner) |
| Components (Buttons, Inputs, Tables, Cards) | Design System Team | components.html, forms.html, data-tables.html | Michael Levine (CEO) |
| Documents (Letters, POs, BOLs, Invoices) | Operations | documents.html, spec-sheet-template.html | Design System Team |
| NetSuite / ERP Templates | Design System Team | netsuite-*.html, suitelet-*.html | Michael Levine (CEO) |
| Marketing (Social, Presentations, Email) | Sales / Marketing | social.html, presentations.html, email-templates.html | Design System Team |
| Facility (Signage, TV Displays, Safety) | Operations | signage.html, facility.html, safety.html | Michael Levine (CEO) |
| Animations & Interactive | Design System Team | animations.html, sketch-style.html, spring-motion.html | Michael Levine (CEO) |
| Governance & Process | Michael Levine (CEO) | governance.html, changelog.html, accessibility.html | N/A (top-level owner) |
Freshness rule. Every page must be reviewed by its owner at least once per quarter. Pages not reviewed within 90 days are flagged in the hub index with a "STALE" badge until the owner confirms accuracy.
13
Compliance Requirements
The GFS Design System enforces three categories of compliance. All pages and components must meet all applicable requirements before publishing.
Accessibility Compliance (WCAG 2.1 AA)
Perceivable
- All non-text content has text alternatives (alt text, aria-labels)
- Color is not the sole means of conveying information
- Text contrast meets 4.5:1 (body) and 3:1 (large text, UI components)
- Content reflows at 320px without horizontal scrolling
Operable
- All functionality available via keyboard (Tab, Enter, Escape, Arrow keys)
- Focus indicators visible on all interactive elements
- No content flashes more than 3 times per second
- Skip-to-content link as first focusable element
Understandable
- Page language declared (lang="en")
- Labels and instructions provided for all form inputs
- Error messages identify the field and describe the required correction
- Navigation consistent across all pages
Robust
- Valid HTML5 (no duplicate IDs, proper nesting, closed tags)
- ARIA roles and properties used correctly where needed
- Works in Chrome, Firefox, Safari, and Edge (latest 2 versions)
- Progressive enhancement: core content accessible without JavaScript
Brand Compliance
Colors: Only the 17 approved palette values. No custom hex codes. Use CSS variables exclusively.
Fonts: Inter for display and body. IBM Plex Mono for labels, metadata, and code. No other typefaces.
Spacing: 4px grid using spacing tokens (sp-1 through sp-24). No arbitrary pixel values.
Radius: Maximum 8px (radius-lg). No rounded-full except on timeline dots and avatars.
Shadows: No box-shadow on static elements. Hover/elevation shadows only where documented.
Company name: "Global Food Solutions, Inc." (full) or "GFS" (abbreviation). Always comma before "Inc."
Fonts: Inter for display and body. IBM Plex Mono for labels, metadata, and code. No other typefaces.
Spacing: 4px grid using spacing tokens (sp-1 through sp-24). No arbitrary pixel values.
Radius: Maximum 8px (radius-lg). No rounded-full except on timeline dots and avatars.
Shadows: No box-shadow on static elements. Hover/elevation shadows only where documented.
Company name: "Global Food Solutions, Inc." (full) or "GFS" (abbreviation). Always comma before "Inc."
Regulatory Compliance (Where Applicable)
FDA / 21 CFR
Nutritional Facts labels must follow FDA 21 CFR 101.9 formatting. Allergen statements per FALCPA. Ingredient lists in descending order by weight. No health claims without pre-approval.
USDA
USDA inspection marks and grading shields must use official artwork from USDA.gov. No modifications to size, color, or proportions. Mark placement per FSIS Directive 7620.3.
NYSDAM / State Licensing
Facility license numbers must appear on all official correspondence from licensed locations. License types (20-C, 28-D) must be current and verified quarterly.
SQF / GFSI
Safe Quality Food certification marks must follow SQF Institute usage guidelines. Only display current certification level. Remove immediately upon lapse or downgrade.
Compliance audit cadence. Accessibility audits: every release. Brand audits: every minor release. Regulatory audits: quarterly or upon any change to FDA/USDA-facing materials. Audit results documented in the changelog.