Global Operations
Brand System v10.0 — Complete Design Package
Global
Food
Solutions,
Inc.®
Food
Solutions,
Inc.®
Food supply systems built for scale.
We connect producers, products, and people through intelligent infrastructure and data.
Procurement
Logistics
Cold Chain
Intelligence
02Brand Narrative
Mission Statement
To build the most intelligent food supply infrastructure on the planet — connecting every producer, every product, and every person through data, precision, and trust.
Brand Story
Global Food Solutions was built on one observation: the food supply chain is one of the largest, most complex systems on earth — and one of the least connected. We exist to change that. Our systems track, trace, and optimize every link in the chain, from source to shelf. We don't just move food. We move data, intelligence, and accountability alongside it. Every shipment has a signal. Every route has a reason. Every decision is backed by real-time information.
Core Values
Precision Over Assumption
We measure, verify, and validate. Every data point matters. Every claim is backed by evidence.
Systems Thinking
We design for the whole chain, not individual links. Every decision considers upstream and downstream impact.
Operational Trust
We earn trust through reliability, transparency, and consistent delivery. No surprises. No excuses.
Intelligence at Scale
Smart systems that get smarter. Predictive, adaptive, and always on — across continental networks.
Brand Promise
"Intelligence in every link of the chain."
03Brand Vibe
Precise.
Data-driven accuracy
Global.
Continental scale
Fresh.
Cold chain integrity
Reliable.
Operational trust
Intelligent.
Predictive systems
04Color System
Primary Blues
Midnight
#051B3A
Cobalt
#092F64
Navy
#1A5799
Tufts
#468BE6
Jordy
#93BFEF
Alice
#E9F5FF
Ice
#F4F9FF
Neutrals
Eerie Black
#1F1F1F
Charcoal
#2D2D2D
Graphite
#4B5F7A
Slate
#6B7280
Steel
#9CA3AF
Silver
#D9E1EA
Fog
#F0F2F5
White
#FFFFFF
Semantic
Success
#0F766E
Success BG
#F0FDF4
Warning
#B45309
Warning BG
#FFFBEB
Error
#DC2626
Error BG
#FEF2F2
Contextual Usage
Delivered
Shipment confirmed on-time
In Transit
Currently en route to DC
Pending
Awaiting carrier assignment
Alert
Temperature breach detected
■ Blue is our signal. It represents trust, traceability, and global reach.
Primary: Cobalt for headings & primary actions. Tufts for interactive elements. Jordy for hover/selected states. Alice/Ice for backgrounds.
Rule: Never use blue below 4.5:1 contrast ratio on white backgrounds. Never mix warm colors into the palette.
Primary: Cobalt for headings & primary actions. Tufts for interactive elements. Jordy for hover/selected states. Alice/Ice for backgrounds.
Rule: Never use blue below 4.5:1 contrast ratio on white backgrounds. Never mix warm colors into the palette.
05Typography System
Display / Headlines
Inter
Display
Display
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Bold / Semibold / Medium
■ Open Source — SIL OFL 1.1
Google Fonts · Variable font
Body / UI / Subhead
Inter
Text
Text
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Regular / Medium / Bold
■ Open Source — SIL OFL 1.1
Google Fonts · Variable font
System / Mono / Data
IBM Plex Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Usage: Labels, IDs, SKUs, dates, routes, weights, temperatures, locations, system messages, code, coordinates.
■ Open Source — SIL OFL 1.1
Google Fonts · IBM Design Language
Type Scale
| Token | Size | Weight | Line Height | Preview |
|---|---|---|---|---|
| H1 / Hero | 96px | 900 | 0.9 | Intelligence |
| H2 / Display | 56px | 800 | 1.05 | Intelligence |
| H3 / Section | 32px | 700 | 1.2 | Intelligence |
| H4 / Subhead | 24px | 600 | 1.3 | Intelligence |
| H5 / Card | 20px | 600 | 1.35 | Intelligence |
| Body / Large | 17px | 400 | 1.6 | Intelligence in every link of the chain. |
| Body / Base | 15px | 400 | 1.6 | Intelligence in every link of the chain. |
| Caption / SM | 13px | 500 | 1.5 | Intelligence in every link |
| Label / XS | 11px | 600 | 1.4 | System Label |
| Micro / XXS | 9px | 500 | 1.3 | Metadata |
Paragraph Specimen
Global Food Solutions operates at the intersection of logistics, technology, and food safety. Our network spans 14 distribution centers across North America, processing over 2.4 million shipments annually with a 99.2% temperature compliance rate. Every product in our system carries a complete traceability record — from origin farm to destination shelf.
The cold chain never sleeps. Our real-time monitoring systems track temperature, humidity, and location across every leg of every journey. When anomalies occur, our predictive algorithms flag them before they become problems. This isn't just logistics — it's intelligence infrastructure built for the scale and complexity of modern food distribution.
06Spacing & Sizing
sp-1
4px
4px
sp-2
8px
8px
sp-3
12px
12px
sp-4
16px
16px
sp-5
20px
20px
sp-6
24px
24px
sp-8
32px
32px
sp-10
40px
40px
sp-12
48px
48px
sp-16
64px
64px
sp-20
80px
80px
sp-24
96px
96px
■ 8px base grid. All spacing tokens are multiples of 4px. Use sp-4 (16px) for default padding. sp-6 (24px) for section gaps. sp-8+ for major breaks.
07Borders & Dividers
1px solid silverDefault border
1px solid fogSubtle divider
2px solid cobaltSection emphasis
3px solid tuftsActive indicator
1px dashed jordyGuide / helper
1px dotted steelSecondary divider
Radii
sm / 2px
md / 4px
lg / 8px
full / 50%
08Elevation System
Level 0 — Flat
No shadow
No shadow
Level 1 — Raised
shadow-sm
shadow-sm
Level 2 — Card
shadow-md
shadow-md
Level 3 — Modal
shadow-lg
shadow-lg
■ Prefer flat borders (Level 0) for most UI. Use elevation sparingly — only for overlays, dropdowns, and modals.
09Color Accessibility Matrix
Every foreground/background combination tested against WCAG 2.1 guidelines.
AAA = 7:1+ (enhanced). AA = 4.5:1+ (normal text). AA-lg = 3:1+ (large text / UI only). Fail = below 3:1.
| Foreground | Background | Preview | Ratio | Rating | Normal Text | Large Text |
|---|---|---|---|---|---|---|
| Cobalt #092F64 | White #FFFFFF | Aa | 12.8:1 | AAA | Pass | Pass |
| Navy #1A5799 | White #FFFFFF | Aa | 7.0:1 | AAA | Pass | Pass |
| Tufts #468BE6 | White #FFFFFF | Aa | 3.5:1 | AA-lg | Fail | Pass |
| Tufts #468BE6 | Alice #E9F5FF | Aa | 3.1:1 | AA-lg | Fail | Pass |
| Cobalt #092F64 | Alice #E9F5FF | Aa | 11.3:1 | AAA | Pass | Pass |
| White #FFFFFF | Cobalt #092F64 | Aa | 12.8:1 | AAA | Pass | Pass |
| White #FFFFFF | Navy #1A5799 | Aa | 7.0:1 | AAA | Pass | Pass |
| White #FFFFFF | Tufts #468BE6 | Aa | 3.5:1 | AA-lg | Fail | Pass |
| Graphite #4B5F7A | White #FFFFFF | Aa | 5.5:1 | AA | Pass | Pass |
| Black #1F1F1F | White #FFFFFF | Aa | 16.6:1 | AAA | Pass | Pass |
| Slate #6B7280 | White #FFFFFF | Aa | 4.6:1 | AA | Pass | Pass |
| Black #1F1F1F | Fog #F0F2F5 | Aa | 15.2:1 | AAA | Pass | Pass |
■ Key takeaways:
Cobalt and Navy pass AAA on all light backgrounds — safe for any text size.
Tufts only reaches AA-lg (3:1) — restrict to large text (18px+), icons, or interactive elements with underlines.
Graphite and Slate pass AA on white — suitable for body text and metadata respectively.
Black on White/Fog exceeds AAA — use for maximum readability in primary content.
Cobalt and Navy pass AAA on all light backgrounds — safe for any text size.
Tufts only reaches AA-lg (3:1) — restrict to large text (18px+), icons, or interactive elements with underlines.
Graphite and Slate pass AA on white — suitable for body text and metadata respectively.
Black on White/Fog exceeds AAA — use for maximum readability in primary content.
10Typography Pairing Examples
Six real content examples showing how Inter (display/body) and IBM Plex Mono (system/data) work together. The pairing creates a clear visual hierarchy: Inter carries meaning, Mono carries metadata.
Pair 01 — Dashboard HeaderInter 24px bold + Mono 11px
Cold Chain Analytics
Shipment Performance Overview
Last updated: 2026-05-17 08:42 UTC · Region: North America
Pair 02 — Page TitleInter 32px + Mono 11px
Dashboard / Procurement / Vendors / Bongards
Bongards Creameries
Vendor ID: VND-00847 · Terms: Net 30 · Status: Active
Pair 03 — KPI DisplayInter 48px bold + Mono 10px
Revenue YTD
$4.2M
+12.4% vs prior
On-Time Rate
99.2%
Target: 98.5%
Pair 04 — Table DataMono 11px uppercase + Inter 14px
| SKU | Product | Weight | Price/lb |
|---|---|---|---|
| BNG-4210 | Barrel Cheddar, 640 lb | 42,240 lb | $1.8425 |
| BNG-4215 | Block Cheddar, 40 lb | 18,400 lb | $1.9150 |
| BNG-4220 | Mozzarella LMPS, 6/10 lb | 24,000 lb | $2.0375 |
Pair 05 — Button + HelperMono 11px uppercase + Inter 13px
This will create a new PO and notify the vendor via email. You can edit before it ships.
Confirmation will lock the manifest. Changes require supervisor approval after this point.
Pair 06 — Card TitleInter 18px semibold + Mono 10px
Northeast Distribution Center
Edgewood, NY — Primary hub for tri-state cold chain operations
DC-014
Updated 2h ago
Updated 2h ago
Capacity
84%
Temp
34.2 F
Shipments
127
■ Pairing rule: Inter carries the content — headlines, body text, values, and descriptions.
IBM Plex Mono carries the system — labels, IDs, timestamps, breadcrumbs, buttons, and metadata.
Never use Mono for body paragraphs. Never use Inter for system labels.
11Spacing in Context
Spacing tokens applied to real interface patterns. Blue dashed lines and labels show the exact token used at each position.
Example 01 — Card Internal Spacing
sp-5 (20px) padding
Shipment #SHP-20947
sp-3
Origin: Bongards, MN → Dest: Edgewood, NY
sp-3
42,240 lb
Reefer
On Time
Internal padding: sp-5 (20px) all sides
Element gap: sp-3 (12px) between title, description, and meta
Element gap: sp-3 (12px) between title, description, and meta
Example 02 — Form Field Spacing
sp-5 (20px) between field groups
Label to input: sp-2 (8px)
Between field groups: sp-5 (20px)
Column gap: sp-4 (16px)
Between field groups: sp-5 (20px)
Column gap: sp-4 (16px)
Example 03 — Table Cell Padding
Cell padding: 10px vertical, 16px (sp-4) horizontal
Header: Same padding, 1px solid silver bottom border
Row dividers: 1px solid fog (subtle)
Header: Same padding, 1px solid silver bottom border
Row dividers: 1px solid fog (subtle)
Example 04 — Button Group Spacing
Actions
sp-2 (8px) gap
Button gap (inline group): sp-2 (8px)
Button internal padding: 8px 16px (sp-2 / sp-4)
Divider margin: sp-4 (16px) above and below
Split layout: space-between with flex
Button internal padding: 8px 16px (sp-2 / sp-4)
Divider margin: sp-4 (16px) above and below
Split layout: space-between with flex
12Color Application Guide
Every color in the system has a defined role. This guide shows real examples of each color in its correct context.
Cobalt #092F64 — Primary Actions
The primary action color
Use for primary buttons, section headers, KPI values, and any element that needs to carry the most visual weight.
$1.84/lb
KPI values always render in Cobalt
Tufts #468BE6 — Interactive Elements
Links, active states, focus rings
Use for text links, breadcrumb navigation, active tab indicators, focus outlines, and secondary interactive elements.
Dashboard
/
Vendors
/
Bongards
Active Tab
Inactive Tab
Inactive Tab
See the full vendor report for details.
Navy #1A5799 — Hover / Pressed States
Darkened interactive feedback
Navy sits between Cobalt and Tufts. Use for button hover states, pressed indicators, and secondary emphasis.
Cobalt
→
Navy
→
Midnight
Alice / Ice / Fog — Backgrounds
Surface layers and containers
Three tiers of background color. Alice (#E9F5FF) for blue-tinted areas, Ice (#F4F9FF) for subtle blue wash, Fog (#F0F2F5) for neutral gray panels.
Black / Graphite — Body Text
Primary and secondary content
Black (#1F1F1F) for primary headings and body text. Graphite (#4B5F7A) for secondary descriptions and supporting paragraphs.
Shipment Performance Report
This report summarizes on-time delivery rates, temperature compliance, and route efficiency across all active lanes for the current fiscal quarter.
Slate / Steel — Metadata & Tertiary
Labels, timestamps, and supporting data
Slate (#6B7280) for form labels and secondary metadata. Steel (#9CA3AF) for timestamps, placeholders, and disabled text.
Slate: Form labels, section labels
Steel: Last modified 2026-05-17 at 08:42 UTC
Steel: Placeholder text in input...
Steel: Micro metadata · Document footer
Success #0F766E — Positive Outcomes
Confirmations, completions, positive deltas
Use for delivery confirmations, positive percentage changes, compliance pass indicators, and success toasts.
Delivered on time
+12.4%
vs. prior quarter
Temperature compliance: All 47 checkpoints passed.
Warning #B45309 — Caution States
Pending, approaching limits, attention needed
Use for pending approvals, approaching capacity thresholds, expiring documents, and items requiring review.
Pending approval
License 20-C expires in 14 days. Renewal required.
87%
warehouse capacity — approaching limit
Error #DC2626 — Critical States
Failures, violations, and destructive actions
Use for temperature breaches, form validation errors, failed shipments, and destructive action confirmations.
Temperature breach detected
Reefer unit R-4471 recorded 48.6 F at checkpoint 3. Threshold: 40 F.
Delete this shipment record?
This action cannot be undone. All associated tracking data will be permanently removed.
■ Color assignment is not decorative — it is functional.
Every color maps to a specific role. Cobalt = action. Tufts = interactive. Navy = feedback. Alice/Ice/Fog = surface. Black/Graphite = content. Slate/Steel = metadata. Green/Amber/Red = semantic status.
Never use semantic colors (success/warning/error) for decoration. Never use Tufts for body text. Never mix warm tones into the palette.
Every color maps to a specific role. Cobalt = action. Tufts = interactive. Navy = feedback. Alice/Ice/Fog = surface. Black/Graphite = content. Slate/Steel = metadata. Green/Amber/Red = semantic status.
Never use semantic colors (success/warning/error) for decoration. Never use Tufts for body text. Never mix warm tones into the palette.
13Dark Mode Color Specimens
Dark mode is not simply inverting colors. Each token is remapped to maintain contrast ratios, hierarchy, and brand recognition. Below is every GFS color shown side-by-side in light and dark mode contexts.
Light Mode
Dark Mode
Cobalt
#092F64
Cobalt (Dark)
#58A6FF
Tufts
#1E6FD9
Tufts (Dark)
#388BFD
Navy
#0A1E3D
Navy (Dark)
#1F2937
Alice
#E8F2FC
Alice (Dark)
#161B22
Graphite
#3D4F65
Graphite (Dark)
#C9D1D9
Success
#16A34A
Success (Dark)
#3FB950
Warning
#B45309
Warning (Dark)
#D29922
Error
#DC2626
Error (Dark)
#F85149
Dark mode mapping rules. Background surfaces invert to near-black (#0D1117, #161B22). Text inverts to light (#E6EDF3, #C9D1D9). Brand blues shift lighter. Semantic colors shift brighter. Never use pure white text in dark mode. Borders: #2D333B.
14Opacity Scale
A defined opacity scale ensures consistency across overlays, disabled states, hover effects, and background washes. Each step has a designated use case.
10%
Subtle tint
Background wash
Background wash
20%
Hover highlight
Focus ring
Focus ring
30%
Active state
Selected row
Selected row
40%
Disabled icon
Watermark
Watermark
50%
Placeholder text
Skeleton pulse
Skeleton pulse
60%
Modal scrim
Image overlay
Image overlay
70%
Heavy overlay
Dimmed section
Dimmed section
80%
Secondary text
Caption color
Caption color
90%
Near-solid
Subtle fade
Subtle fade
Opacity tokens in CSS. Modal scrims: 60% black. Image overlays: 50-70%. Disabled: 40%. Hover backgrounds: 10-20%. Never rely on opacity alone for state changes.
15Z-Index Scale Reference
A controlled z-index scale prevents stacking conflicts. GFS uses 7 defined tiers. Every component must use a tier token.
z-base: 0
z-raised: 10
z-dropdown: 100
z-sticky: 200
z-overlay: 500
z-modal: 1000
z-toast: 9999
Z-index discipline. Never use values outside the defined scale. If two elements at the same tier conflict, restructure the DOM. Modals always include an overlay scrim at z-500 behind z-1000. Toasts must always be visible over modals.