29Dark Mode
Dark Theme
Intelligence in every link of the chain.
Real-time data. Verified sources. Predictive insight. Delivered at scale across continental supply networks.
■ Dark surfaces use desaturated blues, never pure black.
■ Text maintains WCAG AA on all dark surfaces.
■ Tufts (#468BE6) anchors interactive elements.
■ Text maintains WCAG AA on all dark surfaces.
■ Tufts (#468BE6) anchors interactive elements.
Token Mapping
| Light | Dark | Usage |
|---|---|---|
| #FFFFFF | #111111 | Background |
| #F0F2F5 | #1A1A1A | Surface |
| #D9E1EA | #2D2D2D | Border |
| #1F1F1F | #F0F2F5 | Text |
| #092F64 | #93BFEF | Heading |
| #468BE6 | #6BA3ED | Interactive |
| #E9F5FF | #0A1929 | Tint BG |
30Accessibility
Contrast Ratios
Cobalt on White12.6:1 AAA
Navy on White7.2:1 AAA
Tufts on White3.5:1 AA-lg
Graphite on White5.9:1 AA
Black on White16.8:1 AAA
Focus States
Ring: 3px Alice + 2px Tufts
Never remove focus outlines
All interactive elements focusable
Never remove focus outlines
All interactive elements focusable
Requirements
■ 4.5:1 min contrast for body text
■ 3:1 min for large text (18px+)
■ All images require alt text
■ Keyboard nav for all interactions
■ 44×44px min touch targets
■ No info by color alone
■ prefers-reduced-motion support
■ Screen reader tested
■ 3:1 min for large text (18px+)
■ All images require alt text
■ Keyboard nav for all interactions
■ 44×44px min touch targets
■ No info by color alone
■ prefers-reduced-motion support
■ Screen reader tested
31Voice & Tone
Operational Clarity
Your shipment is in transit and on schedule. Expected delivery: May 18, 2026.
Lead with the answer. State facts. Skip filler.
Data-Forward
On-time rate: 96.2%. Temperature compliance: 99.1%. Zero cold chain breaches this month.
Numbers speak. Present data before narrative.
Professional Confidence
We connect producers, products, and people through intelligent infrastructure and data.
Authoritative, not arrogant. Systems language.
Human Precision
Something doesn't look right with this shipment. We're investigating and will update you within the hour.
Direct when things go wrong. No corporate hedge.
Error Messages
We couldn't update this shipment. Check your connection and try again, or contact support.
Say what happened, what to do, where to get help.
Success States
Shipment GFS-2026-05-00058 dispatched. Tracking is now active.
Confirm the action. Mention what happens next.
32Terminology & Formatting
Industry Terms
| Term | Definition |
|---|---|
| DC | Distribution Center |
| Cold Chain | Temperature-controlled supply chain |
| SKU | Stock Keeping Unit |
| Traceability | Origin-to-destination product tracking |
| Compliance | Adherence to temp/safety standards |
| ETA | Estimated Time of Arrival |
| PO | Purchase Order |
| BOL | Bill of Lading |
Number & Date Formatting
| Type | Format | Example |
|---|---|---|
| Date | MM/DD/YYYY | 05/17/2026 |
| Date (short) | MM/DD | 05/17 |
| Time | HH:MM (24h) | 14:30 |
| Currency | $X,XXX.XX | $4,825.00 |
| Temperature | X°C / X°F | -18°C |
| Weight | X,XXX lbs / kg | 12,450 lbs |
| Percentage | XX.X% | 96.2% |
| Shipment ID | GFS-YYYY-MM-XXXXX | GFS-2026-05-00058 |
33Do / Don't
Do
Keep it precise and uncluttered
Use blue as the signal color
Lead with clarity and hierarchy
Make food feel operational
Use system elements purposefully
Maintain the 8px grid at all times
Use IBM Plex Mono for data/labels
Design for density without clutter
Show data in tables and KPI cards
Use corner brackets for emphasis
Don't
Don't use rustic textures or filters
Don't use clip-art or photo cliches
Don't overcrowd with data
Don't use warm or earthy palettes
Don't rely on decorative effects
Don't use rounded corners above 8px
Don't mix font families arbitrarily
Don't add shadows or gradients to cards
Don't use emojis in operational UI
Don't animate without purpose
34CSS Token Reference
Colors
| --cobalt | #092F64 |
| --navy | #1A5799 |
| --tufts | #468BE6 |
| --jordy | #93BFEF |
| --alice | #E9F5FF |
| --black | #1F1F1F |
| --graphite | #4B5F7A |
| --slate | #6B7280 |
| --silver | #D9E1EA |
| --fog | #F0F2F5 |
Spacing & Motion
| --sp-2 | 8px |
| --sp-4 | 16px |
| --sp-6 | 24px |
| --sp-8 | 32px |
| --ease-out | cubic-bezier(0.16,1,0.3,1) |
| --dur-fast | 120ms |
| --dur-base | 200ms |
| --shadow-sm | 0 1px 2px rgba(9,47,100,.06) |
| --shadow-md | 0 2px 8px rgba(9,47,100,.08) |
| --radius-sm | 2px |
35Brand Timeline
V9.0 — MAY 2026
Complete Design Package
36-section system. Dark mode. Component library. Interactive demos. Dashboard patterns. CSS tokens. Full collateral suite.
V1.0 — MAY 2026
Foundation Brand System
12-section system. Color, typography, logo, visual elements, social templates, application examples.
V0.1 — APR 2026
Brand Discovery
Initial brand attributes, color exploration, typography selection. Inter + IBM Plex Mono pairing established. All fonts open source (SIL OFL).
36Brand Footer / Signature
DD1
Master Icon Library — 90 Icons
Food & Product
Cheese
Milk
Egg
Bread
Meat
Fish
Vegetable
Fruit
Butter
Can
Frozen
Grain
Warehouse & Facility
Warehouse
Dock Door
Forklift
Pallet
Conveyor
Shelving
Walk-in
Scale
Shrink Wrap
Label Printer
Hard Hat
Hairnet
Transportation
Reefer Truck
Box Truck
Sprinter Van
Trailer
Dolly
Loading
Unloading
Route Map
GPS
Fuel
Temperature & Cold Chain
Thermometer
Snowflake
Flame
Frozen Zone
Refrigerated
Ambient
Temp Alert
Cold Chain
Compliance & Quality
USDA
FDA
HACCP
SQF
Kosher
Organic
Audit
Inspection
Certificate
Recall
Business & Finance
Invoice
Purchase Order
Receipt
Credit Card
Bank
Calculator
Profit
Loss
Budget
Contract
Technology & Software
Dashboard
API
Database
Cloud
Mobile
Tablet
Barcode Scanner
IoT Sensor
Printer
QR Code
People & Communication
Team
Customer
Driver
Manager
Support
Meeting
Handshake
Presentation
Training
Badge
Operations & Logistics
Stopwatch
Calendar
Clipboard Check
Box Open
Box Sealed
Tape Gun
Barcode
Inventory
90 icons · 9 categories · 24x24 SVG · stroke 1.5px · round cap/join · cobalt on white
V5
US Market Intelligence
US Food Distribution Market
$1.2T
Total US food distribution market 2026
Top 500
GFS Market Position
+18%
Growth Rate YoY
Institutional & Wholesale
Target Segment
Commodity Price Tracker
Barrel Cheddar
$1.8725
/lb
▲ +$0.045
Block Cheddar
$1.9150
/lb
▲ +$0.032
Butter (AA)
$2.4500
/lb
▼ -$0.085
Mozzarella LMPS
$1.7200
/lb
▲ +$0.028
USDA Program Revenue
USDA Barrel Cheddar
USDA Brown Box Pancakes
NEW — BID PENDING
USDA Frozen Vegetables
USDA Butter
USDA Fruit
Seasonal Demand Calendar
Jan
Low
Feb
Low
Mar
Med
Apr
Med
May
Med
Jun
High
Jul
High
Aug
Peak
Sep
Peak
Oct
High
Nov
High
Dec
Med
Summer Programs (Jun-Aug)
School Year Start (Sep)
Holiday Season (Nov-Dec)
V6
Fleet & Logistics — US Operations
Fleet Performance KPIs
85
Total Fleet
72
(85%)
Refrigerated
48
Daily Routes
12,400
Avg Miles/Day
6.8
Fuel Eff. (mpg)
142
CO2/Shipment (lbs)
Fleet Composition
40' Refrigerated Trailer
53%
26' Refrigerated Box