GFS Design System

Brand Mark & Logo

All approved logo forms for Global Food Solutions. Click any SVG to copy. Never modify, stretch, recolor, or add effects to these marks.

Logo Forms

Primary Icon Mark — Globe

Size Renders

Double Ring Globe at every standard size

64px

48px

32px

28px nav

24px sidebar

16px favicon

Wordmark Lockup

Global Food Solutions

Food Distribution & Manufacturing

Global Food Solutions

Food Distribution & Manufacturing

Buddy Mascot — Chat FAB

The GFS Buddy replaces the generic "?" on the chat floating action button. A friendly blue sphere with two white oval eyes.

Buddy at all sizes

52px FAB

52px on white

36px compact

24px inline

Property	Spec
Shape	Circle with radial gradient: `#5B9EF4` center → `#1A5799` edge
Eyes	Two white ellipses: `rx="3.5" ry="5"`, y=24 (slightly above center)
Inner ring	`rgba(255,255,255,.15)`, 1px stroke, r=23
FAB size	`52px`, fixed bottom-right (24px inset)
Shadow	`0 4px 16px rgba(9,47,100,.3)`
Hover	`transform: scale(1.08)`
Use	AI chat trigger only — not a generic icon

Usage Rules

Rule	Spec
Minimum icon size	`24px` — never render smaller
Minimum wordmark width	`140px`
Clear space	Minimum padding = icon height × 0.5 on all sides
Approved backgrounds	Navy (#092F64), White (#FFF), Page grey (#F7F7F8)
Icon on dark bg	Translucent rect fill: `rgba(255,255,255,.1)`
Icon on light bg	Solid navy rect fill: `#092F64`
Favicon	32×32 icon mark with navy background

Do

Use the exact SVG provided — copy from this page
Maintain the globe proportions and line weights
Use on navy, white, or light grey backgrounds only
Include the wordmark when space permits (>140px)

Don’t

Stretch, skew, or rotate the mark
Change the globe stroke colors or line weights
Place on busy backgrounds or photos
Add drop shadows, glows, or gradients
Recreate in a different style

Photography & Imagery

GFS dashboards are data-first. No decorative images, no stock photography, no clip art.

Context	Rule
Dashboards	Data only — charts, tables, KPIs. No decorative imagery.
Product photos	White background, consistent lighting, no props. Square crop.
Team headshots	Professional only. Solid navy (#092F64) or white background. Square crop, 200×200px min.
Screenshots	2× resolution, crop to content, include browser frame if showing a full page.
Logos (partners)	SVG preferred. On white background. Never stretch or recolor.

Do

Use inline SVG illustrations for empty states (from the Empty States section)
Use Lucide icons for all iconography
Use the GFS globe mark for branding contexts
Screenshot at 2× and compress before embedding

Don’t

Use stock photography anywhere in dashboards
Use clip art, cartoon illustrations, or emoji as visual elements
Embed large raster images — SVG or CSS-only always
Use background images or hero photos on dashboard pages

Voice & Tone

How GFS dashboards speak. Factual, professional, concise. Every label, message, and description follows these rules.

Tone Principles

Principle	Example
State facts, don’t sell	"Revenue increased 12.3% vs last month" — not "Great news! Revenue is up!"
Be direct	"3 orders past due" — not "It looks like some orders might need attention"
No exclamation marks	"Report generated." — not "Report generated!"
No casual language	"Failed to load data." — not "Oops! Something went wrong."
Use active voice	"Export completed" — not "The export has been completed"
Be specific	"NetSuite connection timed out after 30s" — not "Something went wrong"

Button Labels

Label	Use When	Never Use
Save	Persisting a draft or changes	"Save Changes" (redundant)
Submit	Sending for approval or processing	"Send In"
Confirm	Acknowledging a destructive or irreversible action	"Yes" / "OK"
Cancel	Dismissing a modal or abandoning an action	"Never Mind" / "Go Back"
Delete	Permanently removing a record	"Remove" (too soft for permanent actions)
Export	Downloading data as CSV/PDF	"Download" (ambiguous)
Copy	Copying text/table to clipboard	"Copy to Clipboard" (too long)
Retry	Re-attempting a failed operation	"Try Again"
Close	Closing a panel or detail view	"X" without label (needs accessible text)

Error Messages

Scenario	Standard Message
Data fetch failed	"Failed to load data. Check your connection and retry."
NetSuite timeout	"NetSuite connection timed out. Retry or try again later."
No permission	"You don’t have permission to view this. Contact your admin."
Record not found	"Record not found. It may have been deleted or moved."
Validation error	"[Field name] is required." or "[Field name] must be a number."
No results	"No records found. Try adjusting your filters."
Save failed	"Failed to save. Your changes have not been lost — retry."

KPI Label Conventions

Rule	Example
Always uppercase	`Revenue MTD`
Use standard abbreviations	MTD, YTD, QTD, WoW, MoM, YoY
Spell out when ambiguous	"Open Orders" not "OO" — "Past Due" not "PD"
Max 3 words	"Revenue MTD" not "Total Monthly Revenue to Date"
No units in label	Show units in the value: "$124K" not label: "Revenue ($)"

Do

"Report generated successfully."
"3 orders past due."
"No inventory records found."
"Copied to clipboard."

Don’t

"Yay! Your report is ready!"
"Uh oh, looks like some orders need attention!"
"Oops! We couldn’t find any inventory."
"Awesome! Copied!"

Naming Conventions

Consistent naming across every file, class, variable, and page title. No exceptions.

Context	Convention	Example
HTML files	`kebab-case.html`	`customer-dashboard.html`
CSS files	`kebab-case.css`	`gfs-components.css`
JS files	`kebab-case.js`	`gfs-init.js`
CSS classes	`.gfs-` prefix, kebab-case	`.gfs-kpi-strip`
CSS variables	`--` prefix, kebab-case	`--primary-dark`
HTML IDs	kebab-case	`id="revenue-kpi"`
JS variables	camelCase	`orderCount`
JS constants	UPPER_SNAKE	`GFS_COLORS`
JS functions	camelCase, verb-first	`copyTable()`, `formatCurrency()`
Page titles	Page Name — GFS	`<title>Inventory — GFS</title>`
Dashboard files	[subject]-dashboard.html	`ar-aging-dashboard.html`
Report files	[subject]-report.html	`monthly-sales-report.html`
Data attributes	kebab-case	`data-copy-label`, `data-countup`

Page titles always use an em dash (—), not a hyphen (-). Example: Inventory — GFS

Color Palette

Five brand blues, five neutrals, five surfaces, and four semantic status colors. The brand palette stays consistent across light and dark modes.

Brand Blues

Cool Black

--primary-dark

Cobalt Blue

--primary

Tufts Blue

--primary-mid

Jordy Blue

--primary-light

Alice Blue

--primary-bg

Text Colors

Near Black

Header bar title

Eerie Black

--text-heading, --text-body

Steel Blue Grey

--text-secondary

Slate Grey

--text-muted

Muted Grey

--text-faint

Surfaces & Borders

White

--bg-card

Page Background

--bg-page

Sunken

--bg-sunken

Hover

--bg-hover

Active / Border

--bg-active, --border-light

Card Border

--border

Semantic Status — 8 Statuses, 3 Tokens Each

Each status has three tokens: --status (vibrant, for icons/dots), --status-text (darker, for text on bg), --status-bg (light, for backgrounds).

Success

--success

Success Text

--success-text

Success BG

--success-bg

Warning

--warning

Warning Text

--warning-text

Warning BG

--warning-bg

Danger

--danger

Danger Text

--danger-text

Danger BG

--danger-bg

Info

--info

Info Text

--info-text

Info BG

--info-bg

Purple

--purple

Purple Text

--purple-text

Purple BG

--purple-bg

Neutral

--neutral

Neutral Text

--neutral-text

Neutral BG

--neutral-bg

Teal

--teal

Teal Text

--teal-text

Teal BG

--teal-bg

Orange

--orange

Orange Text

--orange-text

Orange BG

--orange-bg

Typography

Inter for all UI text, JetBrains Mono for code. Both open-source via Google Fonts. Renders identically across every OS — no more platform-dependent font differences.

Font Stacks

Body — Inter

'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Loaded via Google Fonts CDN. Weights: 400, 500, 600, 700. Feature settings: cv01, cv02.

Monospace — JetBrains Mono

'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace

Loaded via Google Fonts CDN. Weights: 400, 500, 600. Used for code blocks, hex values, and data.

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Font Features

Feature	CSS	Effect
Alternate glyphs	`font-feature-settings: 'cv01', 'cv02'`	Cleaner a, g, and l letterforms
Tabular numbers	`font-variant-numeric: tabular-nums`	Fixed-width digits — columns align in tables and KPIs
Slashed zero	`font-feature-settings: 'zero'`	Distinguishes 0 from O — use in code/data contexts

Type Scale — Live Samples

Page Title16px / 600 / #111111

Card Heading (h2)15px / 600 / #1F1F1F

Nav Item — Default14px / 400 / #4B5F7A

Nav Item — Active14px / 500 / #1F1F1F

Body text reads like this. Clean, comfortable, and easy to scan at 15px.15px / 400 / #1F1F1F

Section Label13px / 600 / #111111

Caption / Meta text12px / 500 / #6B7280

Table Header / Nav Group11px / 600 / uppercase

$124,50024px / 700 — KPI value

KPI Label11px / 500 / #888888

Element	Size / Weight	Details
Page Title	`16px / 600`	Color #111111, letter-spacing -.2px
Card Heading (h2)	`15px / 600`	Color #1F1F1F, border-bottom 1px #EBEBEB
Section Label	`13px / 600`	Color #111111, regular case
Nav Item	`14px / 400`	Color #4B5F7A, active: 500 / #1F1F1F
Nav Group Label	`11px / 500`	Color #8E8EA0, uppercase, letter-spacing .5px
Body Text	`15px / 400`	Color #1F1F1F, line-height 1.5
Table Cell	`14px / 400`	Color #1F1F1F
Table Header	`11px / 600`	Color #6B7280, uppercase, letter-spacing .5px
Caption / Meta	`12px / 500`	Color #6B7280
Badge / Micro	`10px / 600`	Uppercase optional, border-radius 8px
KPI Label	`11px / 500`	Color #888888, uppercase, letter-spacing .5px
KPI Value	`24px / 700`	Color #092F64, or var(--danger) for negative
Monospace / Skill	`13px / 600`	Font: SF Mono/Fira Code/Consolas

Spacing

4px base grid. All spacing values are multiples of 4. Consistent padding and gaps create visual rhythm.

Scale

4px

Tight gaps, icon spacing

8px

Button/action gap, sidebar nav padding, grid gap (small)

12px

Grid gap, nav item horizontal padding, card gap

16px

Card margin-bottom, KPI padding, sidebar header/footer padding

20px

Card vertical padding, card content indent

24px

Card horizontal padding, main content top padding

32px

Main content side padding

48px

Main content bottom padding

Layout Constants

Token	Value	Usage
Sidebar width	`260px`	Fixed sidebar on desktop
Main max-width	`960px`	Content area cap
Card padding	`20px 24px`	All .card elements
Card margin-bottom	`16px`	Between stacked cards
Grid gap	`12px`	Dashboard grids, card grids
Nav item padding	`8px 12px`	Sidebar navigation items
Nav item min-height	`36px`	Desktop; 44px on touch
KPI card padding	`16px`	Dashboard KPI strip cells
Main content padding	`24px 32px 48px`	main element

Border Radius

Radius Tokens

6px

Buttons, inputs, badges

8px

Nav items, shortcuts, quick-ref

10px

Cards, KPIs (--radius)

12px

Blog posts, brand cards

20px

Filter pills

50%

Avatars, chat bubble

Shadows

GFS uses a flat design. Cards and surfaces have no box-shadow. Shadows are reserved for floating elements only: modals, chat panel, tooltips. When needed, shadows use a navy tint.

Cards

box-shadow: none

Border only

Floating SM

--shadow-md

Dropdowns, org details

Floating LG

0 8px 32px .12

Chat panel, modals

Chat Bubble

0 4px 16px .30

FAB button only

CSS

/* All shadows use navy tint — rgba(9,47,100, X) */
--shadow: none; /* cards, surfaces */
--shadow-md: 0 4px 16px rgba(9,47,100, .08); /* floating elements */
--shadow-lg: 0 8px 32px rgba(9,47,100, .12); /* modals, chat panel */

Components

Live component previews with specs. Every component in the hub is built from these primitives.

Buttons

Variants

Variant	Background	Text	Border	Use
Primary	`#1A5799`	#fff	none	Main CTAs, form submits
Dark	`#111111`	#fff	none	Copy buttons, secondary CTAs
Secondary	`#FFFFFF`	#1F1F1F	1px #E5E5E5	Cancel, alternate actions
Ghost	`transparent`	#1A5799	none	Inline links styled as buttons
Danger	`var(--danger)`	#fff	none	Delete, destructive actions
Success	`var(--success)`	#fff	none	Confirm, notify

CSS

padding: 8px 16px;
border-radius: 6px; /* 20px for pill variant */
font-size: 13px;
font-weight: 600;

Badges & Status Pills

Status Badges

Active Info Pending Overdue Compliance Production Urgent Default

Category Tags (Blog/News)

Company Policy Customer Product Team Ops

CSS

font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 8px; /* 10px for category tags */

Cards

Standard Card

Content sits inside white cards with 1px borders. No shadows. Hover shifts border from #E5E5E5 to #D0D0D0. That's it.

Collapsible Card (collapsed)

Collapsible Card (expanded)

Card body content appears when expanded. The + toggles to −.

Property	Value
Background	`#FFFFFF`
Border	`1px solid #E5E5E5`
Border Radius	`10px`
Shadow	`none`
Padding	`20px 24px` (collapsed: `14px 24px`)
Hover	`border-color: #D0D0D0`
h2 inside	15px / 600 with 1px bottom border #EBEBEB

KPI Cards

Dashboard KPI Strip

Revenue MTD

$124,500

Cases Today

312

Open Orders

47

AR Past Due

$18,200

Data Tables

Standard Table

Name	Role	Email	Status
Michael Levine	CEO	mikelevine@globalfoodsolutions.co	Active
Martin Baker	VP of Sales	martin@globalfoodsolutions.co	Active
Sydney Langhorn	Dir. Food Safety	TBD	Pending

CSS

font-size: 14px; /* table body */
thead th { font-size: 11px; text-transform: uppercase; background: #FAFAFA; }
tbody td { border-bottom: 1px solid #F0F0F0; }
tbody tr:hover { background: #FAFAFA; }

Alert Banners

Four Severity Levels

ℹ Connected to NetSuite for live analytics data.

✓ Report generated and downloaded successfully.

⚠ SQF audit due in 14 days. Contact Sydney to prepare.

✗ AR past due over 90 days: Gold Star Foods — $12,400.

Form Inputs

Text Input, Select, Search

CSS

padding: 8px 14px;
border: 1px solid #E5E5E5;
border-radius: 8px;
font-size: 13px;
:focus { border-color: #468BE6; }

File List Items

Document Row

XLS

Customer Setup Form

Complete form with payment terms and contacts

PDF

W-9 Tax Form

Current W-9 with EIN

Quick Reference Cards

Info Cards

EIN

81-3488877

DUNS

080593910

SQF Certified

Level 2

Food Safety Code for Manufacturing

FDA Registration

—

Active registration on file

KPI Patterns

Standardized KPI card layouts for all dashboards. Every financial, operational, and status dashboard follows these patterns.

Basic KPI Strip

4-Column — Default Dashboard Layout

Revenue MTD

$124,500

Cases Today

312

Open Orders

47

AR Past Due

$18,200

KPI with Trend Indicator

Trend arrows show period-over-period change

Revenue MTD

$124,500

12.3% vs last month

Cases Shipped

1,847

3.1% vs last month

Avg Order Value

$2,649

No change

Past Due AR

$18,200

8.5% worse

KPI with Icon Container

Icon box variant — use for overview/hero dashboards

Revenue MTD

$124,500

12.3%

Cases Today

312

5.2%

Past Due

$18,200

8.5%

Grid Layouts

Layout	CSS	Use Case
3-Column	`repeat(3, minmax(0,1fr))`	Hero KPIs with icon containers
4-Column	`repeat(4, minmax(0,1fr))`	Default dashboard strip
6-Column	`repeat(6, minmax(0,1fr))`	Dense overview strips
Auto-fit	`repeat(auto-fit, minmax(160px, 1fr))`	Responsive KPI grids

Always use minmax(0,1fr) — never plain 1fr. Long KPI values push columns wider with plain 1fr.

KPI Spec

Property	Value
Card padding	`16px` (centered) or `16px 20px` (icon variant)
Value font	`24px / 700` (default) or `20-22px / 700` (icon variant)
Value color	`var(--primary-dark)` or `var(--danger)` for negative
Label font	`11px / 500 / uppercase / letter-spacing .5px`
Label color	`#888888` (var(--text-label))
Trend font	`11px / 600`
Trend up color	`var(--success)` #10B981
Trend down color	`var(--danger)` #EF4444
Trend flat color	`var(--text-muted)` #6B7280
Icon box	`40-44px` square, `10px` radius, semantic bg
Grid gap	`12px`
Mobile (768px)	4-col → 2-col, 6-col → 2-col
Mobile (380px)	All → 1-col

CSS

/* Trend indicator */
.kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; margin-top: 4px;
}
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
.kpi-trend.flat { color: var(--text-muted); }

/* Icon container */
.kpi-icon-box {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

Data Table Standards

Every data table across all GFS dashboards follows these exact patterns. Consistent row heights, alignment, and interaction.

Standard Table

Default data table with formatting rules applied

Customer	Status	Cases ▼	Revenue	Balance
Gold Star Foods	Active	1,247	$87,320	($12,400)
Dawn Foods	Active	834	$54,100	$0
Acme Distribution	Pending	0	$0	—

Formatting Rules

Rule	Spec
Row height (min)	`44px` — comfortable click target
Cell padding	`10px 12px`
Numeric columns	`text-align: right; font-family: var(--font-mono); font-size: 13px`
Negative numbers	Parentheses + `color: var(--danger)` — e.g. `($12,400)`
Currency	Always include `$` prefix, comma-separated thousands
Percentages	One decimal place: `12.3%`
Dates	`May 11, 2026` (full) or `05/11/26` (compact)
Empty cells	Use `—` (em dash), never leave blank
Sortable header	Add `▼` or `▲` after active sort column
First column	`font-weight: 500` — primary identifier
Row hover	`background: #FAFAFA`
Row border	`border-bottom: 1px solid #F0F0F0`
Copy button	Top-right of table card, Dark variant, 11px

Empty Table State

When query returns zero rows

Customer	Status	Revenue
No records found Try adjusting your filters or search terms.

Copy-to-Clipboard Standard

All data tables and text blocks include a copy button. Follow this exact pattern.

Property	Spec
Button style	Dark variant (`bg: #111; color: #fff`), 11-12px font
Button position	Top-right of card, absolutely positioned or inline
Icon	`<i data-lucide="copy">` at 12-14px, left of label
Default label	`Copy` or `Copy Table`
Success label	`Copied!` with `bg: var(--success)`
Success duration	1.5 seconds, then revert
Table copy format	Tab-delimited text (pastes into Excel/Sheets)
Text copy format	Plain text, preserving line breaks

Copy button states

→ → reverts after 1.5s

JS

/* Standard copy-to-clipboard function */
function copyTable(tableEl, btn) {
  const rows = [...tableEl.querySelectorAll('tr')];
  const text = rows.map(r =>
    [...r.cells].map(c => c.textContent.trim()).join('\t')
  ).join('\n');
  navigator.clipboard.writeText(text);
  btn.innerHTML = '<i data-lucide="check"></i> Copied!';
  btn.style.background = 'var(--success)';
  setTimeout(() => {
    btn.innerHTML = '<i data-lucide="copy"></i> Copy';
    btn.style.background = '#111';
    lucide.createIcons();
  }, 1500);
}

Summary / Totals Row

Bold bottom row with column totals

Customer	Cases	Revenue
Gold Star Foods	1,247	$87,320
Dawn Foods	834	$54,100
Total	2,081	$141,420

Grouped Rows

Rows grouped by category with section headers

Item	Cases	Revenue
Cheese (3 items)
Barrel Cheddar 40lb	420	$38,200
Mozzarella Block	310	$22,400
Dairy (2 items)
Heavy Cream 36%	180	$12,600

Expandable Detail Row

Click row to reveal detail panel beneath it

Order	Customer	Total
SO-4821	Gold Star Foods	$12,400
Ship Date May 14, 2026 Items 4 line items Status Pending Fulfillment
SO-4820	Dawn Foods	$8,200

Row Status Highlighting

Entire row tinted for overdue / critical / attention

Order	Due Date	Status	Amount
SO-4821	May 14, 2026	Fulfilled	$12,400
SO-4819	May 8, 2026	Due Tomorrow	$6,200
SO-4815	May 2, 2026	Past Due	$18,400

Action Column

Last column with icon action buttons

Customer	Status	Revenue	Actions
Gold Star Foods	Active	$87,320

Pagination

Below table — count + prev/next controls

Showing 1–25 of 312

…

Density Modes

Compact vs Comfortable (default) vs Spacious

Compact (4px 8px)

Name

Gold Star

Dawn Foods

Sysco NE

Comfortable (default)

Name

Gold Star

Dawn Foods

Sysco NE

Spacious (14px)

Name

Gold Star

Dawn Foods

Sysco NE

Mode	Cell Padding	Font	Use Case
Compact	`4px 8px`	`12px`	50+ rows, data-dense reports, print
Comfortable	`10px 12px`	`14px`	Default for all dashboards
Spacious	`14px`	`14px`	Detail views, <10 rows, executive

Striped Rows & Clickable Rows

CSS

/* Striped — use on 20+ row tables */
table.striped tbody tr:nth-child(even) { background: var(--bg-sunken); }
table.striped tbody tr:nth-child(even):hover { background: var(--bg-hover); }

/* Clickable rows — navigates to detail view */
tr.clickable { cursor: pointer; transition: background .15s; }
tr.clickable:hover { background: var(--primary-bg-hover); }
tr.clickable td:first-child { color: var(--primary); }

Column Alignment Reference

Data Type	Align	Font
Names / text	`left`	Body, 500 weight first col
Currency	`right`	Mono, tabular-nums
Counts / qty	`right`	Mono, tabular-nums
Percentages	`right`	Mono, tabular-nums
Dates	`left`	Body, 12px
Status badges	`left`	Badge component
Email / links	`left`	`color: var(--primary)`
Actions	`right`	Icon buttons, 14px
Checkboxes	`center`	18px checkbox

Data Visualization

Chart standards for all GFS dashboards. Every chart uses the brand blue sequence for series data, with semantic colors reserved for status indicators only.

Chart Color Sequence

Use colors in this exact order for multi-series data. Never skip or reorder.

Series Colors — In Order

#092F64

#1A5799

#468BE6

#93BFEF

#E9F5FF

Order	Color	Token	Use
1st series	`#092F64`	--primary-dark	Primary / dominant data
2nd series	`#1A5799`	--primary	Secondary comparison
3rd series	`#468BE6`	--primary-mid	Tertiary
4th series	`#93BFEF`	--primary-light	Quaternary
5th series	`#E9F5FF`	--primary-bg	Fill / area charts
Positive delta	`#10B981`	--success	Gains, growth, target met
Negative delta	`#EF4444`	--danger	Losses, decline, target missed

Bar Chart

Vertical Bar — Monthly Revenue

Sparkline

Inline KPI Trend — 32px height, no axes

Revenue +12.3%

AR Aging +8.5%

Donut Chart

Category Breakdown — 120px diameter

Cheese — 50%

Dairy — 25%

Frozen — 15%

Other — 10%

Progress / Gauge Bars

USDA Drawdown, Order Fulfillment, Compliance Scores

USDA Drawdown68,400 / 100,000 lbs

Order Fulfillment94%

SQF ScoreBelow Target

Chart Spec

Element	Spec
Axis labels	`11px / 500 / var(--text-muted)` — Inter, tabular-nums
Grid lines	`1px solid var(--border-row)` — dashed for horizontal guides
Bar radius	`3px` top corners
Bar gap	~15px between bars
Tooltip	Dark bg (#1F1F1F), white text, 12px, 6px radius — same as map tooltip
Sparkline	`height: 32px; stroke-width: 1.5; stroke-linecap: round` — no axes
Progress bar height	`8px`, `border-radius: 4px`
Progress bar track	`var(--bg-hover)`
Donut stroke	`stroke-width: 16` on r=50 circle
Legend dot	`10px square, 2px radius`
Chart container	Inside `.ds-card-demo` with standard card padding

Grouped Bar Chart

Month-over-Month Comparison

Stacked Bar Chart

Revenue by Category — Stacked

Horizontal Bar Chart

Top Customers by Revenue — Ranked

Gold Star Foods

$87.3K

Dawn Foods

$54.1K

Sysco Northeast

$38.2K

Ace Endico

$24.8K

Area Chart

Cumulative Revenue — Filled Area

Gauge / Radial Progress

Circular KPI — SQF Score, Fulfillment Rate, Drawdown %

Element	Spec
Gauge size	`100px` default, `80px` compact
Track	`stroke-width: 8; stroke: var(--bg-hover)`
Fill	`stroke-width: 8; stroke-linecap: round`
Fill circumference	`2 × π × r = 251` (r=40). Set `stroke-dasharray: [value] 251`
Color rules	>80%: `--success`, 50-80%: `--primary`, <50%: `--danger`
Center text	`20px / 700` value + `9px` label below
Grouped bar width	Each bar `18px`, gap `2px` between paired bars
Stacked bar	No gap between segments, no border-radius on internal joins
Horizontal bar height	`20px`, track: `var(--bg-hover)`, radius `3px`
Area fill	`--primary-bg` (#E9F5FF) with `--primary` stroke line
Area dots	`r=3`, same color as line stroke

Production Charting — Chart.js

The SVG examples above define the visual spec. For production dashboards, use Chart.js via CDN. It renders to <canvas>, handles responsive sizing, tooltips, and animation automatically.

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JS

/* GFS Chart.js branded defaults — apply once at page load */
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.font.size = 11;
Chart.defaults.color = '#6B7280'; /* axis labels */
Chart.defaults.borderColor = '#F0F0F0'; /* grid lines */
Chart.defaults.plugins.legend.labels.usePointStyle = true;
Chart.defaults.plugins.legend.labels.pointStyleWidth = 8;
Chart.defaults.plugins.tooltip.backgroundColor = '#1F1F1F';
Chart.defaults.plugins.tooltip.titleFont = { weight: 600 };
Chart.defaults.plugins.tooltip.cornerRadius = 6;
Chart.defaults.plugins.tooltip.padding = 8;
Chart.defaults.elements.bar.borderRadius = 3;
Chart.defaults.elements.line.tension = 0.3;
Chart.defaults.elements.point.radius = 3;
Chart.defaults.scale.grid.color = '#F0F0F0';

/* GFS brand color sequence for datasets */
const GFS_COLORS = [
'#092F64', '#1A5799', '#468BE6',
'#93BFEF', '#E9F5FF'
];

Property	GFS Default
Font	Inter, 11px, #6B7280
Grid lines	#F0F0F0 (matches `--border-row`)
Tooltip	#1F1F1F bg, 6px radius, 8px padding
Bar radius	3px top corners
Line tension	0.3 (subtle curve, not angular)
Point radius	3px
Legend	Point style (dots not rectangles)
Color sequence	GFS_COLORS array (5 brand blues)

Number & Date Formatting

Canonical formatting rules for every data type displayed across GFS dashboards. All numeric contexts require font-variant-numeric: tabular-nums.

Currency

Context	Format	Example
Full precision	$ + commas + 2 decimals	`$124,500.00`
Rounded (tables)	$ + commas, no decimals	`$124,500`
Abbreviated (KPIs)	$ + 1 decimal + K/M suffix	`$124.5K` or `$1.2M`
Negative	Parentheses + danger color	`($12,400)`
Zero	$0 (never blank)	`$0`

Quantities & Units

Type	Format	Example
Cases	Number + `cs`	`1,247 cs`
Weight	Number + `lbs`	`68,400 lbs`
Pallets	Number + `plt`	`24 plt`
Temperature	Number + `°F`	`38.5°F`
Percentage	1 decimal (whole = no decimal)	`12.3%` or `100%`
Large numbers	K at 10,000+, M at 1,000,000+	`12.5K` / `1.2M`
Count (plain)	Comma-separated	`1,247`
Empty / no data	Em dash	`—`

Dates & Times

Context	Format	Example
Full date	Mon DD, YYYY	`May 11, 2026`
Compact date	MM/DD/YY	`05/11/26`
ISO date	YYYY-MM-DD	`2026-05-11`
Date range	En dash, shared year	`May 1 – May 31, 2026`
Time	12-hour + AM/PM	`2:30 PM`
Time + zone	12-hour + timezone	`2:30 PM EST`
Relative (recent)	Natural language	`2 hours ago`
Relative (older)	Switch to full date	After 7 days, use `May 4, 2026`

Identifiers

Type	Format	Font	Example
Phone	(XXX) XXX-XXXX	Body	`(631) 254-0001`
EIN	XX-XXXXXXX	Mono	`81-3488877`
Lot number	As-is	Mono	`LOT-2026-0511A`
PO/SO number	As-is from NetSuite	Mono	`PO-4821`
Email	Lowercase, linked	Body	mike@globalfoodsolutions.co

Dashboard Patterns

Interaction patterns used across all GFS dashboards: time filters, data refresh, bulk actions, responsive tables, tooltips, modals, exports, and sorting.

Time Range Selector

Date filter — appears top-right of every dashboard

Property	Spec
Style	Same as filter pills: `5px 12px`, `20px` radius, `12px / 500`
Active state	`bg: var(--primary); color: #fff`
Default options	7 Days, 30 Days, 90 Days, YTD, Custom
Position	Top-right of dashboard header, inline with page title
Custom picker	Two date inputs appearing on "Custom" click

Data Refresh Indicator

Shows data freshness — required on all NetSuite-connected dashboards

Live — Updated 2 min ago

Stale — Updated 15 min ago

Error — Failed to refresh

State	Dot	Text	Threshold
Live	`var(--success)`	var(--text-muted)	< 5 minutes
Stale	`var(--warning)`	var(--warning-text)	5 – 30 minutes
Error	`var(--danger)`	var(--danger-text)	Failed or > 30 min

Bulk Action Toolbar

Appears when table rows are selected

3 selected

Property	Spec
Background	`var(--primary-dark)` #092F64
Position	Sticky top of table card, replaces table header
Left side	Checkbox + count: "3 selected"
Right side	Action buttons: Export, Print, Delete (destructive last, red bg)
Button style	`rgba(255,255,255,.12)` bg, white text, 12px
Destructive button	`rgba(239,68,68,.8)` bg
Transition	Slide down `.2s ease` when first row selected

Responsive Table

Tables on mobile (<768px): horizontal scroll with sticky first column. Never collapse to card layout unless the table has <4 columns.

CSS

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive td:first-child,
.table-responsive th:first-child {
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 1;
  border-right: 1px solid var(--border);
}

Tooltip

Hover tooltips for truncated text, icons, chart data points

Hover me

Tooltip text here

Property	Spec
Background	`#1F1F1F`
Text	`#fff, 11px, 400`
Padding	`5px 10px`
Radius	`5px`
Arrow	`4px` CSS triangle
Offset	`6px` from trigger element
Delay	`300ms` before showing, immediate hide
Max width	`240px`, wrap long text

Modal / Dialog

Confirmation dialog — appears centered with backdrop overlay

Delete 3 orders?

This action cannot be undone. The selected sales orders will be permanently removed from NetSuite.

Property	Spec
Backdrop	`rgba(0,0,0,.3)`
Card	`bg-card, 12px radius, shadow-lg`
Max width	Small: `400px`, Medium: `560px`, Large: `720px`
Padding	`24px`
Title	`16px / 600`
Body	`13px / var(--text-muted)`
Actions	Right-aligned, primary action last, destructive = danger btn
Close	Escape key, backdrop click, or Cancel button

Notification Badge

Count badge on nav items and icons

3

12

Variant	Spec
Count badge	`bg: var(--danger); color: #fff; 9px/700; min-width: 16px; height: 16px; border-radius: 8px`
Dot (no count)	`width: 8px; height: 8px; border-radius: 50%; bg: var(--danger)`
Position	`absolute; top: -4px; right: -6px`
Max count	Display `99+` for counts over 99

Data Export Dropdown

Export button with format options

Export CSV

Export PDF

Copy to Clipboard

Sortable Table Headers

Click column header to sort — active column shows arrow

Customer	Revenue ▼	Cases	Status
Gold Star Foods	$87,320	1,247	Active
Dawn Foods	$54,100	834	Active

State	Spec
Default header	`cursor: pointer; color: var(--text-muted)`
Active sort (asc)	`color: var(--primary)` + `▲` after text
Active sort (desc)	`color: var(--primary)` + `▼` after text
Hover	`color: var(--text-heading)`

Text Wrapping & Overflow

Rules for when text wraps, when it truncates, and how to handle long strings like URLs, lot numbers, and descriptions.

Wrap vs Truncate — Live Examples

Wrapped (default for body text)

Global Food Solutions Customer Onboarding — New Account Setup and Payment Terms Configuration for Northeast Distribution Partners

Truncated (constrained spaces)

Global Food Solutions Customer Onboarding — New Account Setup and Payment Terms Configuration for Northeast Distribution Partners

Multi-Line Clamp (2 lines)

This description wraps to two lines maximum and then truncates with an ellipsis. It's used for card descriptions, timeline post previews, and table cell descriptions where space is limited but context matters more than a single-line truncation would provide.

Word Break — Long Strings Without Spaces

Without word-break (overflows)

LOT-2026-0511A-BONGARDS-BARRELCHEDDAR-40LB-USDA-COMMODITY

With word-break (wraps cleanly)

LOT-2026-0511A-BONGARDS-BARRELCHEDDAR-40LB-USDA-COMMODITY

When to Wrap vs Truncate

Context	Behavior	Why
Card body text	Wrap	Users need full context in cards
Card descriptions (compact)	Clamp at 2 lines	Preserves card height consistency
Table cells (text)	Wrap (default) or truncate with max-width	Depends on column importance
Table cells (names)	Never truncate — let column grow	Names are identifiers, cutting them breaks usability
Table cells (descriptions)	Clamp at 2 lines with tooltip	Keeps rows consistent height
Nav items / sidebar	Truncate single-line	Fixed-width container
Badge text	No wrap — `white-space: nowrap`	Badges are single tokens
KPI labels	No wrap	Must stay on one line
KPI values	No wrap	Numbers should never break mid-digit
URLs / lot numbers / IDs	Break all — `word-break: break-all`	No natural break points in these strings
Email addresses	Break all	Long emails overflow containers
Alert / banner text	Wrap	Alerts need to be fully readable
Tooltip content	Wrap at `max-width: 240px`	Tooltips show full text that was truncated

CSS Reference

CSS

/* Single-line truncation */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line clamp (2 lines) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Break long strings (URLs, lot numbers, IDs) */
.break-all {
  word-break: break-all;
}

/* Break at word boundaries (default for most text) */
.break-word {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* No wrap — badges, KPI labels, KPI values */
.nowrap { white-space: nowrap; }

Wrapped Text Line Heights

Context	line-height	Why
Body text / paragraphs	`1.5`	Comfortable reading
Card descriptions	`1.6`	Slightly more open for scanability
Table cells	`1.4`	Tighter to keep rows compact
Timeline posts	`1.7`	Long-form content needs breathing room
Headings (h1-h3)	`1.2`	Tight — headings shouldn't look loose when they wrap
KPI labels / badges	`1`	Single line, no extra space needed
Code blocks	`1.7`	Code needs vertical space between lines
Alerts	`1.5`	Match body text

Dashboard Layouts

Full-page composition patterns. Every GFS dashboard follows one of these three layouts. Components from the design system snap into these grids.

Layout A — KPI + Table (most common)

Revenue Dashboard, Inventory Overview, Order Status

Dashboard Title

30d Refresh

Metric 1

$124K

Metric 2

312

Metric 3

47

Metric 4

$18K

Data Table

Layout B — Chart + Table Split

Trend Analysis, Forecasting, Vendor Scorecard

Analytics Dashboard Updated 2 min ago

KPI

$248K

KPI

1,847

KPI

+12%

Chart

Detail Table

Layout C — Multi-Card Grid

Overview Dashboards, Daily Health Check, Finance Summary

Overview

Revenue

$124.5K

Orders

47

Top Customers

Alerts

AR past due: $18.2K

SQF audit in 14 days

Layout Grid Rules

Layout	Structure	Best For
A — KPI + Table	4-col KPI strip → full-width table card	Data-heavy: orders, inventory, AR aging
B — Chart + Table	3-col KPI → 3fr chart + 2fr table	Analysis: trends, forecasts, scorecards
C — Multi-Card	2×2 or 3×2 card grid	Overview: daily health, executive summary

Timeline & Blog

The Updates tab uses a vertical timeline layout with compose area, posts, comments, and filter bar. One of the most complex component systems in the hub.

Compose Area

Post Composer

What's happening at GFS?

Share an update, announcement, or note...

Element	CSS
.compose-area	`border-radius: 12px; padding: 20px 24px; border: 1px solid var(--gray-200)`
.compose-area textarea	`min-height: 100px; font-size: 15px; border-radius: 8px`
.post-btn	`padding: 9px 20px; border-radius: 6px; font-size: 13px; font-weight: 600`
.post-btn-primary	`bg: var(--blue); color: #fff`
.post-btn-notify	`bg: var(--green); color: #fff`
.post-btn-outline	`bg: #fff; border: 1px solid var(--gray-300)`

Timeline Post

Blog Post Card

Michael Levine May 11, 2026 Company

Q2 Production Update

Line #2 meal kit production hit 95% efficiency this week. Great work from the team.

Comment (2) Pin Delete

Elena Misoulis • May 9, 2026 POLICY

SQF Audit Prep Reminder

All departments: please complete pre-audit checklists by May 15.

Element	CSS
.timeline	`padding-left: 28px` with `::before` 2px vertical line
.tl-post	`border-radius: 12px; border: 1px solid var(--gray-200)`
.tl-post::before	`10px circle, bg var(--blue), positioned -22px left`
.tl-post.pinned	`border-left: 3px solid var(--gold)`; dot = gold
.tl-title	`16px / 700; color: var(--navy); padding: 0 20px`
.tl-body	`15px / 400; line-height: 1.7; color: var(--gray-700)`
.tl-meta	`12px; flex with author (600) + date (500) + category badge`
.tl-action-btn	`12px / 500; bg: none; hover: bg var(--gray-100)`

Comment Thread

Expanded Comments

MB

Martin Baker2 hours ago

Great numbers. Line #3 should hit the same target next week.

Element	CSS
.tl-comments	`bg: var(--gray-50); border-top: 1px solid var(--gray-100); padding: 12px 20px`
.tl-comment	`flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-100)`
.tl-comment-avatar	`28px circle; font-size: 11px / 700; color: #fff`
.tl-comment-author	`12px / 600`
.tl-comment-date	`11px; color: var(--gray-500); margin-left: 8px`

Filter Bar

Category Filters (pill toggle)

Org Chart

Two views: interactive tree (pan/zoom canvas) and department list (accordion). Both share the same data but render differently.

View Toggle

Segmented Control

CSS

.org-view-toggle { background: var(--gray-100); border-radius: 8px; overflow: hidden; }
.org-view-toggle button.active { background: var(--blue); color: #fff; }

Org Chart Cards (Tree View)

Card Hierarchy

ML

Michael Levine

CEO

Martin Baker

VP of Sales

Richard Gallo

VP of Operations

Ian Lindsay

VP of Logistics

Element	CSS
.oc-card	`bg: #fff; border: 1px solid var(--gray-200); border-radius: 10px; width: 170px; padding: 14px 16px`
.oc-card.oc-ceo	`width: 220px; border: 2px solid var(--blue); background: var(--blue-bg)`
.oc-card.oc-sm	`width: 155px; padding: 10px 12px` (avatar hidden)
.oc-avatar	`38px circle; font-size: 13px / 700; color: #fff`
.oc-name	`13px / 600; color: var(--navy)` (CEO: 15px)
.oc-role	`11px; color: var(--gray-500)`
.oc-line	`width: 2px; background: var(--blue-light)`
.oc-detail (expanded)	`11px; color: var(--gray-600); border-top: 1px solid var(--gray-200)`
.oc-dept-label	`11px / 600; color: #fff; padding: 4px 14px; border-radius: 6px`

Department Accordion

Expandable Department Sections

Sales

4 ▶

MB

Martin Baker

VP of Sales

martin@globalfoodsolutions.co (631) 254-0001

DS

Danielle Scibelli

Dir. Customer Service

Operations

12 ▶

Element	CSS
.dept-section	`bg: #fff; border: 1px solid var(--gray-200); border-radius: 12px`
.dept-header	`padding: 16px 20px; border-left: 4px solid [dept color]`
.dept-count	`bg: var(--gray-100); font-size: 12px / 600; padding: 2px 10px; border-radius: 10px`
.dept-chevron	`15px; rotate(90deg) when .open`
.person-card	`flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gray-100)`
.p-avatar	`44px circle; font-size: 16px / 700; color: #fff`
.p-name	`15px / 600; color: var(--navy)`
.p-title	`13px; color: var(--gray-500)`
.p-contact a	`12px; color: var(--blue)`
.p-tag	`10px / 600; padding: 2px 8px; border-radius: 10px`

Templates & Generators

Brand Center, letter templates, email signature generator, and form-driven email generators. These use specialized layouts distinct from the rest of the hub.

Brand Selector

Choose Brand Identity

Global Food Solutions

Corporate brand

River Street Brands

Consumer brand

Template Type Buttons

Segmented Template Picker

Element	CSS
.brand-card	`border: 2px solid var(--gray-200); border-radius: 12px; padding: 20px`
.brand-card.selected	`border-color: var(--blue); box-shadow: 0 0 0 2px rgba(44,82,130,.2)`
.tpl-type-btn	`padding: 8px 16px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 13px / 500`
.tpl-type-btn.selected	`bg: var(--blue); color: #fff; border-color: var(--blue)`

Letter Template Preview

Live Editable Document

Global Food Solutions, Inc.

131 Heartland Blvd
Edgewood, NY 11717

[Date]

[Recipient Name]
[Company]
[Address]

Dear [Name],

Letter body content goes here. All fields are contenteditable — click to type.

Element	CSS
.tpl-preview	`bg: #fff; border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: var(--shadow-md)`
.tpl-page	`max-width: 700px; padding: 40px 50px; font-family: Georgia, serif; font-size: 13px`
.tpl-header	`border-bottom: 3px solid #1a2744` (RS brand: #2d6a4f)
.tpl-placeholder	`color: #a0aec0; font-style: italic`
[contenteditable]:focus	`border-bottom-color: var(--blue); background: #f7faff`
.tpl-footer	`position: absolute; bottom: 20px; font-size: 10px; color: #999`

Letter Selector Grid

Email Template Picker (Templates tab)

Customer Welcome Email

New customer onboarding with payment instructions

Sales

Vendor Setup Request

Request W-9 and payment info from new vendor

Ops

Signature Generator Output

Email Signature Preview

Michael Levine

Chief Executive Officer

Global Food Solutions, Inc.

131 Heartland Blvd, Edgewood, NY 11717

mikelevine@globalfoodsolutions.co | (631) 254-0001

Element	CSS
.sig-output	`font-family: Arial; font-size: 13px; border: 1px dashed var(--gray-300); border-radius: 6px`
.sig-name	`15px / 700; color: var(--navy)`
.sig-divider	`border-top: 2px solid var(--navy); width: 60px; margin: 8px 0`
.sig-company	`font-weight: 600; color: var(--navy); 13px`
.sig-detail	`12px; color: #555`

Form-Driven Email Generator

gen-form + gen-output pattern

Customer Name Contact Name

Subject: Welcome to Global Food Solutions

Generated email content appears here based on form inputs...

Element	CSS
.gen-form	`display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px`
.gen-form label	`12px / 600; uppercase; letter-spacing: .4px; color: var(--gray-500)`
.gen-form input	`padding: 9px 12px; border-radius: 6px; font-size: 15px`
.gen-output	`bg: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px; font-size: 13px; line-height: 1.7`
.email-template	`bg: var(--gray-50); border-radius: 6px; padding: 16px 20px; font-size: 13px; white-space: pre-wrap`
.placeholder	`background: #fefcbf; padding: 1px 4px; border-radius: 3px; font-weight: 600`

Kanban Board

Admin panel build tracker. Three-column layout with draggable cards and inline actions.

Board Layout

To Do

Employee handbook PDF upload ▶ ✕

PTO calendar visibility

In Progress

NetSuite KPI RESTlet

Done

File split (CSS/JS)

Element	CSS
.kanban-col	`bg: var(--gray-100); border-radius: 8px; padding: 10px; min-height: 150px`
.kanban-card	`bg: #fff; border: 1px solid var(--gray-200); border-radius: 6px; padding: 8px 10px; font-size: 12px`
.kanban-card:hover	`border-color: var(--blue-mid)`
.kb-text	`font-weight: 500; line-height: 1.4`
.kb-actions	`opacity: 0 → 1 on card hover; flex; gap: 2px`
.kb-btn	`bg: none; font-size: 11px; color: var(--gray-500); hover: bg var(--gray-100)`

Checklist

HR Onboarding / Training Checklists

Complete W-4 and I-9 forms
Required by end of first day
Paychex account setup
HR creates account, employee completes profile

Element	CSS
.checklist li	`flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 15px`
checkbox	`width: 18px; height: 18px; accent-color: var(--blue)` (22px on touch)
.check-label.checked	`text-decoration: line-through; color: var(--gray-500)`
.check-sub	`12px; color: var(--gray-500); margin-top: 2px`

Micro Components

Small utility components used throughout the hub — toast notifications, copyable values, keyboard hints, map tooltips, and action buttons.

Toast Notification

Fixed position, bottom-right

Copied to clipboard

Element	CSS
.toast	`position: fixed; bottom: 24px; right: 24px; bg: var(--gray-800); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px / 500; z-index: 200`
.toast (hidden)	`opacity: 0; transform: translateY(8px)`
.toast.show	`opacity: 1; transform: translateY(0); transition: all .2s`

Copyable Value

Click-to-copy with tooltip

EIN: 81-3488877click to copy

Element	CSS
.copyable	`cursor: pointer`
.copyable:hover	`color: var(--blue)`
.copyable::after	`"click to copy"; bg: var(--gray-800); font-size: 10px; border-radius: 3px; opacity: 0 → 1 on hover`

Keyboard Hint

Shortcut indicator

Search Ctrl+K

CSS

.kbd { padding: 1px 6px; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; font-size: 11px; font-family: monospace; }

Map Tooltip

Follows cursor over SVG map states

New York — Active Coverage

Element	CSS
.map-tooltip	`position: fixed; bg: var(--gray-800); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 12px; z-index: 300; pointer-events: none`
.map-state	`transition: opacity .15s; cursor: pointer`
.map-state:hover	`opacity: .8`

Copy Block Button

Full-width copy action

Element	CSS
.copy-block-btn	`bg: #111111; color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 12px / 600`
.copy-block-btn.copied	`bg: var(--green)` — auto-reverts after 2s
.copy-btn	`position: absolute; top: 12px; right: 12px; bg: #fff; border: 1px solid var(--gray-300); font-size: 12px`
.copy-btn.copied	`bg: var(--green); color: #fff; border-color: var(--green)`

Packet Header

Setup packet header with direction badge

Customer Setup Packet

Outbound

Vendor Information Packet

Inbound

Sidebar

260px fixed sidebar with white background. Navigation grouped by category with Lucide icons. Light-background Codex style.

Property	Value
Width	`260px`
Background	`#FFFFFF`
Border Right	`1px solid #EBEBEB`
Position	`fixed`, full height
Nav Item Font	`14px / 400`
Nav Item Radius	`8px`
Nav Item Min Height	`36px`
Hover BG	`#F0F0F0`
Active BG	`#EBEBEB`
Active Color	`#1F1F1F`, weight 500
Group Label	`11px / 500`, #8E8EA0, uppercase
Badge	10px / 600, bg #E9F5FF, color #1A5799
Footer Avatar	32px circle, bg #092F64, initials #fff

CSS

.nav-item {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #4B5F7A;
  min-height: 36px;
}
.nav-item:hover { background: #F0F0F0; }
.nav-item.active { background: #EBEBEB; font-weight: 500; }

Patterns & Conventions

Repeating layout patterns used across all 26 tabs. Use these exact patterns when adding new sections.

Page Header Pattern

Top of every tab section

Company Info

Header bar shows the tab name, auto-updated by goToTab()

HTML

<span class="header-title" id="header-title">Company Info</span>

Search + Filter Bar

Used in: Contacts, News, Skills, Employee Directory

CSS

.tl-filter {
  padding: 5px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  font-size: 12px; font-weight: 500;
}
.tl-filter.active {
  background: #1A5799; color: #fff;
}

Info Grid

Used in: Company Info, Facility, NetSuite, Suppliers

Legal NameGlobal Food Solutions, Inc. EIN81-3488877 Year Est.2003 OwnershipPrivate — 100% Family Owned Address131 Heartland Blvd, Edgewood, NY 11717

CSS

.info-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 6px 16px;
  font-size: 15px;
}

Workflow Steps

Used in: Customer Setup, Vendor Setup

1

Send Packet

→

2

Receive Docs

→

3

NetSuite Setup

→

4

Active

Empty State

Used when no data exists

☰

No items found

Adjust your filters or add a new entry.

Dashboard Two-Column Layout

Quick Actions + Portals pattern (3fr / 2fr split)

Quick Actions (3fr)

Action

Portals (2fr)

Link

Status Board (3-Column)

Used in: Company Calendar status cards

Overdue

Items past their date

Upcoming

Next 90 days

Completed

Past events

Grid Column Patterns

Layout	CSS	Used In
KPI Strip (6 cols)	`repeat(6, minmax(0,1fr))`	Dashboard top
Info Bar (4 cols)	`repeat(4, minmax(0,1fr))`	Dashboard clock/weather strip
Actions + Portals	`3fr 2fr`	Dashboard mid
Calendar	`3fr 2fr`	Calendar view + add form
Two Equal	`minmax(0,1fr) minmax(0,1fr)`	Agents, Suitelets, Values
Auto-fit	`repeat(auto-fit, minmax(200px, 1fr))`	KPI stats, shortcuts

⚠ Critical: Always use minmax(0,1fr) instead of just 1fr for equal columns. Plain 1fr allows content to push columns wider.

Loading States

Skeleton loading — use while fetching data

CSS

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-hover) 25%,
    var(--bg-sunken) 50%, var(--bg-hover) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

Error state — when a data fetch fails

Failed to load data

NetSuite connection timed out. Try again or check your connection.

Design Principles

Do

Use flat design — no shadows on cards or surfaces
Use generous whitespace between sections
Use 1px borders for structure, not color fills
Use regular case for labels ("Quick Actions" not "QUICK ACTIONS")
Keep hover states subtle — border-color or background tint only
Use one accent color (Cobalt Blue) for interactive elements
Use system fonts for performance and native feel
Content is factual — state facts clearly, no selling
Status dots: 5px colored circles, not full badges

Don't

Add box-shadows to cards or containers
Use transform/lift on card hover
Use heavy borders or multiple border colors
Use uppercase text-transform on section headings
Use more than 2 accent colors at once
Add decorative icons where text works
Use colored backgrounds for cards (white only)
Use promotional or persuasive language
Use plain 1fr for equal-width grid columns

Status Workflows

Standard lifecycle states for GFS business objects. Every dashboard must use these exact status names and badge colors.

Sales Order Lifecycle

SO Status Flow

Draft → Pending Approval → Approved → Pending Fulfillment → Partially Fulfilled → Fulfilled → Closed

Purchase Order Lifecycle

PO Status Flow

Pending → Approved → Partially Received → Received → Closed

Work Order / Production

WO Status Flow

Planned → Released → In Progress → Completed → Closed

Status-to-Badge Mapping

Status Concept	Badge Class	Token
Draft / Planned / Inactive / Closed	`ds-badge-default`	--neutral
Pending / Awaiting / Released	`ds-badge-pending`	--warning
Approved / Confirmed / Scheduled	`ds-badge-info`	--info
In Progress / Processing / Building	`ds-badge-orange`	--orange
Partially Complete / Partial Receipt	`ds-badge-teal`	--teal
Active / Complete / Fulfilled / Shipped	`ds-badge-active`	--success
Overdue / Failed / Rejected / Past Due	`ds-badge-danger`	--danger
Compliance / Audit / Certification	`ds-badge-purple`	--purple

Empty State Illustrations

Lightweight SVG illustrations for empty, error, and onboarding states. 48px height, 2-color (primary-light + border), centered with heading + description.

Standard Empty States

No records

Table is empty

No results

Try different filters

All clear

No pending items

No inventory

Warehouse is empty

No messages

Inbox is empty

Connection error

Check your connection

Property	Spec
SVG size	`48px × 48px`
Primary stroke	`var(--primary-light)` #93BFEF
Secondary stroke	`var(--border)` #E5E5E5
Error stroke	`var(--danger)` #EF4444
Stroke width	`1.5px`
Container	`border: 1px dashed var(--border)`

Print & PDF Standards

Rules for printed dashboards, letters, compliance docs, and PDF exports.

CSS

@media print {
  .sidebar, nav, .chat-panel, .copy-btn,
  .search, .theme-toggle, .filter-bar { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .main-wrapper { margin-left: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

Spec	Value
Page margins	`0.75in` all sides
Body font	`12pt` Inter
Footer	"Global Food Solutions, Inc. — Confidential"
Hidden elements	Sidebar, nav, search, copy buttons, theme toggle, filters, chat
Cards	`break-inside: avoid`, no shadow

Dark Mode

Full dark mode via [data-theme="dark"] on the <html> element. Toggled by the user via the theme button in the header. All CSS variables are overridden — no additional classes needed on components.

Token Overrides

Token	Light	Dark
--gray-50 (sunken bg)	`#FAFAFA`	`#111827`
--gray-100 (hover bg)	`#F0F0F0`	`#1F2937`
--gray-200 (borders)	`#E5E5E5`	`#374151`
--gray-300 (hover border)	`#D0D0D0`	`#4B5563`
--gray-500	`#6B7280`	`#9CA3AF`
--gray-600	`#4B5F7A`	`#93BFEF`
--gray-700	`#4B5F7A`	`#D1D5DB`
--gray-800	`#1F1F1F`	`#F3F4F6`
--gray-900	`#092F64`	`#FFFFFF`
--white (card bg)	`#FFFFFF`	`#1F2937`
--shadow	`none`	`0 1px 3px rgba(0,0,0,.4)`

Component Overrides

Component	Dark Override
header	`background: #0a1628`
.sidebar	`background: #111827; border-color: #1F2937`
.sidebar .nav-item:hover	`background: #1F2937`
.sidebar .nav-item.active	`background: rgba(70,139,230,.15)`
.card	`background: #1F2937; border-color: #374151`
thead th	`background: #111827`
tbody td	`border-color: #374151`
.org-card / .oc-card	`background: #1F2937; border-color: #374151`
.tl-post	`background: #2d3748; border-color: #4a5568`
.compose-area	`background: #2d3748; inputs bg: #1a202c`
.kanban-col	`background: #111827`
.kanban-card	`background: #1F2937; border-color: #374151`
.dash-stat / .dash-shortcut	`background: #1F2937; border-color: #374151`
a.email-link	`color: #93BFEF`
.placeholder	`background: #744210; color: #fefcbf`

CSS

/* Dark mode is a CSS-only override — no JS class toggling needed beyond setting data-theme */
[data-theme="dark"] {
  --white: #1F2937; /* cards invert */
  --gray-800: #F3F4F6; /* text inverts */
  --shadow: 0 1px 3px rgba(0,0,0,.4); /* shadows appear in dark */
}

Responsive & Mobile

Three breakpoints plus touch-target and iOS safe area rules. The sidebar becomes a slide-out drawer on mobile.

Breakpoints

Breakpoint	Target	Key Changes
`max-width: 768px`	Tablet & phone	Sidebar → drawer, 2-col grids → 1-col, main padding 12px 14px, hamburger visible
`max-width: 640px`	Small phone	gen-form/sig-form → 1-col, letter-selector → 1-col
`max-width: 380px`	iPhone SE	KPI grid → 1-col, badge hidden, org cards narrower

Mobile Sidebar

State	CSS
Default (hidden)	`transform: translateX(-100%); box-shadow: none`
.sidebar.open	`transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.15)`
.main-wrapper	`margin-left: 0` (sidebar overlay, not push)
.menu-toggle	`display: block` (hamburger ☰)

Touch Targets

@media (pointer: coarse) — larger hit areas

Element	Desktop	Touch
.nav-item	36px min-height	`44px`
.tl-action-btn	auto	`36px; padding: 6px 12px`
.tl-filter	auto	`36px; padding: 6px 14px`
checkbox	18px	`22px`
.dash-shortcut	auto	`52px`
.tpl-type-btn	auto	`40px`
.post-btn	auto	`44px`

iOS Safe Areas

CSS

@supports (padding: env(safe-area-inset-top)) {
header { padding-top: calc(14px + env(safe-area-inset-top)); }
main { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

Key Mobile Adaptations

Component	Desktop	Mobile (768px)
Main padding	24px 32px 48px	`12px 14px 40px`
Card padding	20px 24px	`16px`
Dashboard grids	2-col / 6-col	`1-col`
Info grid	160px / 1fr	`1-col stack`
Org chart	Horizontal tree	`Vertical stack`
Workflow steps	Horizontal flex	`Vertical stack, arrows rotate 90deg`
File list items	Row with button right	`Stack, button self-end`
Compose row	Inline flex	`Column stack, post-btn 100% width`
Table font	14px	`12px`
Global search	Visible	`display: none`

Print Styles

Rule	Behavior
Hidden elements	sidebar, nav, copy buttons, search, theme toggle, shortcuts, checkboxes, generators, signatures
.main-wrapper	`margin-left: 0`
main	`max-width: 100%; padding: 10px 20px`
.card	`break-inside: avoid; box-shadow: none; border: 1px solid #ddd; bg: #fff`
body	`background: #fff`
Brand center	Selector/actions hidden; preview borderless

Motion & Transitions

Subtle, functional animations. Nothing decorative. Three speed tiers based on interaction type.

Transition Timings

Speed	Duration	Used By
Fast	`.1s`	File list hover, kanban card hover
Standard	`.15s`	Card border-color, button hover, nav hover, link color, copy-btn, map state opacity, focus ring, email-link, toast
Medium	`.2s`	Sidebar nav background, brand card hover, collapsible expand, dept chevron rotate, card h2 margin/padding, dept-body slide, org-detail slide, toast opacity
Slow	`.3s`	Sidebar drawer transform (mobile)

Keyframe Animations

Name	CSS	Used By
cardExpand	`from { opacity: 0 } to { opacity: 1 }` — .2s ease	Collapsible card body reveal
slideDown	`from { opacity: 0; translateY(-8px) } to { opacity: 1; translateY(0) }` — .2s ease	Org detail panel, dept body expand

Hover State Catalog

Element	Hover Effect
.card	`border-color: #D0D0D0` (subtle border shift only)
.nav-item	`background: #F0F0F0; color: #1F1F1F`
.dash-stat	`transform: translateY(-2px); box-shadow: var(--shadow-md)`
.dash-shortcut	`border-color: var(--blue); background: #f7faff; translateY(-1px)`
.brand-card	`border-color: var(--blue); translateY(-2px)`
.org-card	`border-color: var(--blue); translateY(-2px); box-shadow: var(--shadow-md)`
.oc-card	`border-color: var(--blue); translateY(-2px)`
.kanban-card	`border-color: var(--blue-mid)` + actions opacity 0→1
.tl-post	`box-shadow: var(--shadow-md)`
.file-list li	`background: var(--gray-50)`
tbody tr	`background: #FAFAFA`
.letter-btn	`border-color: var(--blue); background: #ebf4ff`
.tl-filter	`border-color: var(--blue); color: var(--blue)`
.tl-action-btn	`background: var(--gray-100); color: var(--gray-800)`
.copyable	`color: var(--blue)` + ::after tooltip opacity 1
.global-search input:focus	`bg: #fff; border-color: #468BE6; width: 280px; box-shadow: 0 0 0 2px rgba(70,139,230,.15)`

ℹ Rule: Card hover should never add box-shadow. Only border-color shifts (except dash-stat and org-card which lift slightly for affordance). Timeline posts gain shadow on hover because they're interactive objects, not containers.

Accessibility

WCAG 2.1 AA contrast ratios for all text/background combinations. GFS standards require a minimum 4.5:1 for body text and 3:1 for large text (18px+ bold or 24px+).

Core Text Contrast Ratios

Combination	Ratio	WCAG
#1F1F1F on #FFFFFF	`16.3:1`	AAA
#1F1F1F on #F7F7F8	`14.9:1`	AAA
#4B5F7A on #FFFFFF	`5.8:1`	AA
#6B7280 on #FFFFFF	`4.6:1`	AA
#8E8EA0 on #FFFFFF	`3.2:1`	AA Large
#888888 on #FFFFFF	`3.5:1`	AA Large
#FFFFFF on #092F64	`11.5:1`	AAA
#FFFFFF on #1A5799	`6.6:1`	AA

Status Color Contrast (text on bg)

Status	Text on Background	Ratio	WCAG
Success	#065F46 on #ECFDF5	`7.6:1`	AAA
Warning	#92400E on #FFFBEB	`7.1:1`	AAA
Danger	#991B1B on #FEF2F2	`7.8:1`	AAA
Info	#1A5799 on #E9F5FF	`5.8:1`	AA
Purple	#7C3AED on #F5F3FF	`5.9:1`	AA
Neutral	#4B5563 on #F3F4F6	`7.5:1`	AAA
Teal	#0D9488 on #F0FDFA	`4.6:1`	AA
Orange	#EA580C on #FFF7ED	`4.9:1`	AA

Interactive Element Requirements

Requirement	Spec
Focus ring	`outline: 2px solid var(--primary-mid); outline-offset: 2px`
Focus ring (dark bg)	`outline: 2px solid #FFFFFF; outline-offset: 2px`
Min touch target (mobile)	`44px × 44px` — per WCAG 2.5.8
Min click target (desktop)	`36px × 36px`
Disabled state opacity	`opacity: .4; cursor: not-allowed`
Color-only indicators	Never — always pair with text, icon, or pattern
Keyboard navigation	All interactive elements must be focusable via Tab

Usage Guidelines

Do

Use --text-body or --text-heading for primary content
Use --text-muted (4.6:1) for secondary labels at 12px+
Add visible focus rings on all interactive elements
Ensure 44px minimum touch targets on mobile
Pair status colors with text labels or icons
Test with keyboard-only navigation

Don't

Use --text-faint (#8E8EA0, 3.2:1) for text smaller than 18px bold
Use --text-label (#888, 3.5:1) for critical information
Rely on color alone to communicate status — add text or icons
Remove focus outlines without providing visible alternatives
Use placeholder text as the only label for form fields
Create click targets smaller than 36px on desktop

Icon Standard

Lucide Icons is the official GFS icon library. Flat, 2px stroke, consistent geometry. Loaded via CDN — no build step needed. MIT licensed, free for commercial use.

CDN Setup

HTML

<script src="https://unpkg.com/lucide@latest"></script>


<script>lucide.createIcons();</script>

Usage

<i data-lucide="package"></i>


<i data-lucide="truck" style="width:18px;height:18px"></i>


<span style="color: var(--success)">
<i data-lucide="check-circle"></i> Approved
</span>

Size Standards

Context	Size	Stroke	Example
Inline with body text	`16px`	2px	Body text
Navigation items	`18px`	2px	Dashboard
KPI cards / buttons	`20px`	2px
Empty states / hero	`32px`	1.5px
Alert banners	`16px`	2px

GFS Icon Map — v8.0 Expanded (10 Categories, 100+ Icons)

Standard icons for every GFS business concept. Always use these exact Lucide icon names. No freelancing.

Food Safety & Compliance

SQF / QC

Temperature

Recall

Lot Trace

HACCP

Certification

Expiration

Hold

Release

Corrective

Allergen

Inspection

Manufacturing & Production

Production

BOM

Work Order

Line / Machine

Batch

Yield

Waste

Raw Material

Finished Good

Packaging

Efficiency

Throughput

Logistics & Distribution

Delivery

Route

Pickup

Receiving

Pallet

Cold Chain

Freight

Tracking

ETA

Carrier

Inbound

Outbound

Product & Inventory

Item / SKU

Barcode

Label

Spec Sheet

Ingredients

Nutrition

Case Pack

Shelf Life

Storage

Weight

Sales & CRM

Prospect

Quote

Contract

Commission

Territory

Pipeline

Renewal

Broker

Margin

Discount

Reporting & Analytics

Dashboard

Summary

Detail

Drill-Down

Snapshot

Trend

Comparison

Forecast

Variance

Benchmark

KPI & Metrics

Target

Actual

Delta

Threshold

Anomaly

Correlation

Distribution

Funnel

Score

Gauge

Security & Access

Locked

Unlocked

Permission

Role

Audit Log

2FA

API Key

Hidden

Denied

Session

Finance & Accounting

Journal Entry

GL Account

Reconciled

Accrual

Budget

Expense

Reimbursement

Tax

Write-Off

Payment

USDA & Commodity

Commodity

Allocation

Entitlement

Drawdown

Bracket

Certified

Inspection

Grading

Complete Icon Map Reference — v8.0

Category	Concept	Lucide Name	Usage
Food Safety & Compliance (12)
	SQF / QC	`shield-check`	Quality control, SQF audit
	Temperature	`thermometer`	Cold chain, storage temp
	Recall	`alert-octagon`	Food safety recall
	Lot Trace	`scan-line`	Lot traceability
	HACCP	`clipboard-check`	Hazard analysis
	Certification	`badge-check`	SQF, organic, kosher
	Expiration	`timer`	Shelf life, best-by dates
	Hold	`hand`	QC hold, quarantine
	Release	`circle-check`	QC release, approved
	Corrective Action	`wrench`	CAPA, corrective action
	Allergen	`wheat`	Allergen flags, warnings
	Inspection	`microscope`	USDA inspection, lab
Manufacturing (12)
	Production	`factory`	Work orders, lines
	BOM	`layers`	Bill of materials
	Work Order	`clipboard-list`	WO lists, production
	Line / Machine	`cog`	Production line
	Batch	`flask-conical`	Batch runs
	Yield	`target`	Production yield %
	Waste	`trash-2`	Waste tracking
	Raw Material	`box`	Ingredients, components
	Finished Good	`package-check`	Completed assemblies
	Packaging	`gift`	Packaging materials
	Efficiency	`gauge`	OEE, line efficiency
	Throughput	`zap`	Cases/hour, speed
Logistics (12)
	Delivery	`truck`	Outbound shipments
	Route	`route`	Route planning
	Pickup	`package`	Customer pickup
	Receiving	`warehouse`	Inbound receiving
	Pallet	`container`	Pallet counts
	Cold Chain	`snowflake`	Refrigerated, frozen
	Freight	`ship`	LTL, FTL shipping
	Tracking	`map-pin`	Shipment tracking
	ETA	`clock`	Expected arrival
	Carrier	`contact`	Carrier/driver info
	Inbound	`arrow-down-to-line`	PO receipts
	Outbound	`arrow-up-from-line`	SO fulfillment
Sales & CRM (10)
	Prospect	`user-plus`	New lead
	Quote	`file-signature`	Price quotes
	Contract	`handshake`	Agreements, terms
	Commission	`percent`	Broker commissions
	Territory	`map`	Sales territory
	Pipeline	`git-branch`	Sales pipeline
	Renewal	`repeat`	Contract renewal
	Broker	`users`	Broker partners
	Margin	`calculator`	Profit margin
	Discount	`badge-percent`	Pricing discounts
Security (10)
	Locked	`lock`	Restricted access
	Unlocked	`unlock`	Access granted
	Permission	`shield`	Role permissions
	Role	`user-cog`	User role assignment
	Audit Log	`scroll-text`	Change history
	2FA	`fingerprint`	Two-factor auth
	API Key	`key`	API credentials
	Hidden	`eye-off`	Sensitive data masked
	Denied	`ban`	Access denied
	Session	`log-in`	Login, session
Finance (10)
	Journal Entry	`book-open`	JE, GL posting
	GL Account	`landmark`	Chart of accounts
	Reconciled	`check-square`	Bank rec, matched
	Budget	`wallet`	Budget vs actual
	Expense	`receipt`	Expense reports
	Tax	`percent`	Tax calculations
	Write-Off	`x`	Bad debt, write-offs
	Payment	`credit-card`	AP/AR payments
USDA & Commodity (8)
	Commodity	`scale`	USDA commodity
	Allocation	`slice`	Commodity allocation
	Entitlement	`award`	Annual entitlement
	Drawdown	`arrow-down-circle`	Monthly drawdown
	Bracket	`git-merge`	Rate bracket
	Certified	`badge-check`	USDA certified
	Grading	`star`	USDA grading

Icon in Context

Buttons with Icons

Alert Banners with Lucide Icons

Connected to NetSuite for live analytics data.

Report generated and downloaded successfully.

SQF audit due in 14 days. Contact Sydney to prepare.

AR past due over 90 days: Gold Star Foods — $12,400.

Sidebar Nav with Icons (Standard)

KPI Card with Icon Container

Revenue MTD

$124,500

Cases Today

312

AR Past Due

$18,200

CSS

/* Default icon styling */
i[data-lucide] {
  width: 16px; /* default inline size */
  height: 16px;
  stroke-width: 2;
  vertical-align: text-bottom;
  flex-shrink: 0;
}

/* Icon container box — KPI cards, hero sections */
.icon-box {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

Icon Usage Rules

Do

Use Lucide icons exclusively — no mixing libraries
Let icons inherit currentColor from parent
Use standard sizes: 16px inline, 18px nav, 20px KPI, 32px empty
Keep stroke-width at 2px (1.5px for 32px+ icons)
Pair icons with text labels — no icon-only buttons without tooltips
Use icon containers (colored bg box) in KPI cards
Use flex-shrink: 0 on icons in flex layouts

Don't

Mix Lucide with Font Awesome, Material, or other libraries
Use icons without text labels (always pair icon + text in sidebar nav)
Hardcode icon colors — always use CSS variables or currentColor
Use filled/solid variants — GFS uses outline stroke icons only
Make icons larger than 32px (use illustrations instead)
Use decorative icons that don't add meaning
Use emoji in place of icons in production dashboards

Legacy: Text-Based Indicators

These text-based patterns remain valid and preferred in dense data contexts where icons add visual noise.

Still valid — use when icons would be too heavy

Context	Approach	Example
File type badges	3-letter text badge	XLS PDF
Status dots	5px colored circles	Active
Collapsible toggle	+/− character	+
Agent/Skill badges	2-3 letter badge	NS

Map & Geography Standards

Territory maps, delivery zones, and broker coverage overlays. All maps use inline SVG with brand-consistent colors.

Territory Color Palette

Broker Territory Colors

GFS Direct

Broker A

Broker B

Broker C

Unassigned

Element	Spec
State fill (assigned)	Brand blue sequence (#092F64 → #93BFEF)
State fill (unassigned)	`#D0D0D0`
State stroke	`#FFFFFF` at 0.5px
State hover	`opacity: 0.8`
Tooltip	Same as map tooltip: dark bg, white text, 12px, 6px radius
Container	`max-width: 960px` with `viewBox` scaling
Legend	Horizontal flex, 14px color squares with 3px radius
Map territory colors	Use chart color sequence — never use semantic status colors for territories

Favicon & Meta Standards

Required meta tags, favicon, and Open Graph settings for every GFS page. These ensure correct display when bookmarked, shared in Slack, or pinned to home screen.

Favicon

32×32 Icon Mark on Navy Background

32px & 16px renders

Required Meta Block

HTML

<meta name="theme-color" content="#092F64">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="GFS Hub">
<meta property="og:title" content="GFS Dashboard">
<meta property="og:description" content="Global Food Solutions internal dashboard">
<meta property="og:type" content="website">

Email Template Standards

HTML email rendering rules. Email clients strip CSS variables, so all values must be inline hex. Maximum width 600px, table-based layout.

Element	Email-Safe Spec
Font	`font-family: Arial, Helvetica, sans-serif`
Max width	`600px`, centered
Body text	`14px / 1.6 / #1F1F1F`
Header bar	`background: #092F64; padding: 20px 24px; color: #fff`
CTA button	`background: #1A5799; color: #fff; padding: 12px 24px; border-radius: 6px`
Footer	`font-size: 11px; color: #6B7280; border-top: 1px solid #E5E5E5`
Footer text	Company name, address, confidentiality notice
Links	`color: #1A5799; text-decoration: underline`
Signature divider	`border-top: 2px solid #092F64; width: 60px`

Email clients do not support CSS variables, var(--primary), Google Fonts, or Flexbox/Grid. All email styles must be inline with hardcoded hex values.

Document Confidentiality

Three classification levels for GFS documents. Every generated report, export, and compliance document must carry the appropriate marking.

Classification Badges

Public Internal Use Only Confidential

Level	Badge	Use	Marking
Public	`ds-badge-active`	Marketing, public-facing docs	No special marking required
Internal	`ds-badge-info`	Dashboards, operational reports, hub pages	Footer: "Internal Use Only"
Confidential	`ds-badge-danger`	Financial data, customer PII, legal, USDA allocations	Header badge + footer + watermark

Confidential Watermark

CSS watermark overlay for confidential documents

CONFIDENTIAL

Document content sits on top of the watermark. The watermark uses rgba(239,68,68,.06) — barely visible but present when printed.

Recommended Library Stack

Opinionated picks — one library per capability. All CDN-loadable, no build step. If it's not on this list, you probably don't need it.

Capability	Library	Size	CDN
Fonts	Inter + JetBrains Mono	~43KB	`fonts.googleapis.com`
Icons	Lucide	~65KB	`unpkg.com/lucide@latest`
Charts	Chart.js	~67KB	`cdn.jsdelivr.net/npm/chart.js`
KPI Animation	CountUp.js	~4KB	`cdn.jsdelivr.net/npm/countup.js@2`
PDF Export	html2pdf.js	~14KB	`cdn.jsdelivr.net/npm/html2pdf.js`
Tooltips	Native Popover API	0KB	Browser-native
Modals	Native <dialog>	0KB	Browser-native
Transitions	CSS transitions + View Transitions API	0KB	Browser-native

Use

Browser-native APIs first — they're free, fast, and maintained forever
Chart.js for all chart types — already branded with GFS defaults
CountUp.js for KPI number animations on page load
html2pdf.js when users need "Export PDF" functionality
CSS transitions for all hover/state animations

Don't add

GSAP, anime.js — CSS transitions cover 95% of dashboard needs
Three.js, deck.gl — overkill for food distribution data
Tabulator, AG Grid — hand-built tables work fine at our data scale
Lottie — requires After Effects assets we don't produce
Multiple libraries for the same job — one pick per capability

CountUp.js — KPI Number Animation

Makes KPI values count up from zero on page load. One line per number. Use on every dashboard's KPI strip.

HTML

<script src="https://cdn.jsdelivr.net/npm/countup.js@2/dist/countUp.umd.min.js"></script>

JS

/* Animate a KPI value */
new countUp.CountUp('revenue-kpi', 124500, {
  prefix: '$',
  separator: ',',
  duration: 1.5, /* seconds */
  useEasing: true
}).start();

/* Percentage */
new countUp.CountUp('fulfillment-kpi', 94, {
  suffix: '%',
  duration: 1.2
}).start();

Option	GFS Default
Duration	`1.5s` for currency, `1.2s` for counts
Easing	`true` — decelerates at end
Separator	`,` (comma thousands)
Prefix	`$` for currency, none for counts
Suffix	`%` for percentages, `cs` for cases, `lbs` for weight
Decimals	`0` for rounded, `1` for abbreviated (124.5K)

html2pdf.js — One-Line PDF Export

JS

/* Export any element to PDF */
html2pdf()
  .set({
    margin: [0.5, 0.5, 0.75, 0.5],
    filename: 'GFS-Report.pdf',
    image: { type: 'jpeg', quality: 0.95 },
    html2canvas: { scale: 2 },
    jsPDF: { format: 'letter' }
  })
  .from(document.getElementById('dashboard'))
  .save();

Browser-Native CSS Patterns

Zero-library, zero-cost performance and interaction patterns built into modern browsers. Use these before reaching for any JS library.

content-visibility (7x render performance)

CSS

/* Skip rendering off-screen table rows — massive perf gain on long lists */
tbody tr {
content-visibility: auto;
contain-intrinsic-size: auto 44px; /* estimated row height */
}

Native <dialog> (replaces modal libraries)

HTML + CSS

<dialog id="confirm">
  <h3>Delete 3 orders?</h3>
  <button onclick="confirm.close()">Cancel</button>
  <button onclick="deleteOrders()">Delete</button>
</dialog>

/* Frosted glass backdrop */
dialog::backdrop { backdrop-filter: blur(4px); background: rgba(0,0,0,.3); }

/* Open it */
document.getElementById('confirm').showModal();

Container Queries (component-level responsive)

CSS

/* Card switches between table and stacked layout based on ITS OWN width */
.card { container-type: inline-size; }

@container (max-width: 400px) {
.card table { display: none; }
.card .card-view { display: block; }
}

:has() Selector (parent-aware styling)

CSS

/* Auto-highlight rows with danger badges — no JS class toggling */
tr:has(.ds-badge-danger) {
background: var(--danger-bg);
}

/* KPI grid adjusts columns based on child count */
.kpi-grid:has(> :nth-child(5)) {
grid-template-columns: repeat(5, minmax(0,1fr));
}

CSS Nesting (30% less CSS)

CSS

/* Before: flat selectors */
.card { ... }
.card h2 { ... }
.card:hover { ... }

/* After: nested (all modern browsers) */
.card {
  background: var(--bg-card);
  & h2 { font-size: 15px; font-weight: 600; }
  &:hover { border-color: var(--border-hover); }
}

Quick Reference

Feature	What it replaces	Browser Support
`content-visibility: auto`	Virtual scrolling libraries	Chrome, Edge, Firefox 125+
`<dialog>` + `::backdrop`	SweetAlert2, custom modals	All modern browsers
`container queries`	JS resize observers	All modern browsers
`:has()`	JS class toggling for parent styling	All modern browsers
`CSS nesting`	Sass/SCSS preprocessor	All modern browsers
`popover` attribute	Tippy.js, Popper.js	All modern browsers
`@layer`	!important specificity wars	All modern browsers
`color-mix()`	Sass color functions	All modern browsers

Build Boilerplate

Starter template for every new GFS dashboard. Copy this entire block as your starting point. All design tokens, Lucide icons, and responsive meta tags are pre-loaded.

Pre-Build Checklist

Run through this before starting any new dashboard.

10-second preflight

1 Copy the correct template (Starter or Page Shell)
2 Set <title>Page Name — GFS</title>
3 Add gfs-components.css + gfs-init.js
4 Build content using .gfs- classes and var(--token) colors
5 Use Lucide icons from the Icon Map — no freelancing
6 Format numbers with GFS.format — currency, dates, cases, weight
7 Add data-copyable to every data table
8 Right-align numeric columns with .num class
9 Test at 768px and 480px breakpoints
10 Verify Voice & Tone — no exclamation marks, no casual copy

Which Template to Copy

Template	Use When	Includes
Starter HTML (below)	Simple single-page dashboards, reports, standalone tools	Tokens + body reset only — no sidebar, no header
Page Shell (below)	Full dashboard apps with navigation	Sidebar + header + main + mobile toggle + content zones

Starter HTML (Simple)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Title — GFS</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@latest"></script> <style> :root { /* Brand */ --primary: #1A5799; --primary-dark: #092F64; --primary-mid: #468BE6; --primary-light: #93BFEF; --primary-bg: #E9F5FF; /* Surfaces */ --bg-page: #F7F7F8; --bg-card: #FFFFFF; --bg-sunken: #FAFAFA; --bg-hover: #F0F0F0; --bg-active: #EBEBEB; /* Text */ --text-heading: #1F1F1F; --text-body: #1F1F1F; --text-secondary: #4B5F7A; --text-muted: #6B7280; --text-faint: #8E8EA0; --text-label: #888888; /* Borders */ --border: #E5E5E5; --border-light: #EBEBEB; --border-row: #F0F0F0; /* Status */ /* Status — 3 tokens each */ --success: #10B981; --success-text: #065F46; --success-bg: #ECFDF5; --warning: #F59E0B; --warning-text: #92400E; --warning-bg: #FFFBEB; --danger: #EF4444; --danger-text: #991B1B; --danger-bg: #FEF2F2; --purple: #8B5CF6; --purple-text: #7C3AED; --purple-bg: #F5F3FF; /* Layout */ --radius: 10px; --radius-sm: 8px; --radius-lg: 12px; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg-page); color: var(--text-body); line-height: 1.5; font-size: 15px; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv01', 'cv02'; } </style> </head> <body>  <script>lucide.createIcons();</script> </body> </html>

Page Anatomy

Every GFS dashboard has 5 zones. This is the skeleton — no exceptions.

Dashboard zones with pixel measurements

Logo

Nav

Active

Item

User

Page Title

30d Refresh

KPI

$124K

KPI

312

KPI

47

KPI

$18K

Content Area

Sidebar: 260px fixed Header: 56px sticky Main: max-width 1080px, 20px 32px 48px padding KPI strip: always first in content

Content Stacking Order

Order	Zone	Required
1	KPI Strip — 3-6 column grid at top of content	Every dashboard
2	Filters / Time Range — if the page has user-controlled filters	Optional
3	Primary Content — chart, table, or card grid	Every dashboard
4	Secondary Content — additional tables, detail cards	Optional
5	Footer / Confidentiality — if page is printed or exported	Print only

Header Bar Pattern

The header always has: title (left), controls (right). Controls include time range, data refresh, and action buttons.

Complete header with all standard controls

Inventory Dashboard

Updated 2 min ago

Position	Element	Required
Left	Page title (`16px/600, #111, margin-right:auto`)	Always
Center-right	Data refresh indicator (dot + timestamp)	If data-connected
Right	Time range pills (7d, 30d, 90d, YTD)	If time-filterable
Far right	Action button (Export, Print, etc.)	If exportable

Breadcrumbs

Use when navigating to detail views from a list

Dashboard / Inventory / Item Detail

Property	Spec
Font	`12px / 400`
Link color	`var(--primary)`
Current page	`var(--text-heading), font-weight: 500` — not a link
Separator	`/` in `var(--text-faint)`
Position	Inside `<main>`, above KPI strip, `padding: 8px 0`
When to use	Detail views only (Item Detail, Customer Detail). Not on top-level pages.

Page Loading Sequence

What the user sees from page load to data render.

Step	What Renders	Duration
1. Shell	Sidebar + header + empty main area — instant from HTML	0ms
2. Skeletons	KPI skeletons + table skeleton in main area — CSS animation	0ms
3. Icons	`lucide.createIcons()` replaces `<i>` tags with SVGs	~50ms
4. Data arrives	Replace skeletons with real KPI values + table rows	~500-2000ms
5. CountUp	KPI numbers animate from 0 to final value	1.5s
6. Charts	Chart.js renders after data is available	~200ms after data

The sidebar and header must render instantly from static HTML — never wait for JS or data. Skeletons go in the content area only. This gives users instant orientation even on slow connections.

Mobile Sidebar Toggle

At <768px, sidebar becomes an overlay drawer. Header shows a hamburger button.

HTML

<button class="menu-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">
<i data-lucide="menu" style="width:20px;height:20px"></i>
</button>

CSS

.menu-toggle { display:none; background:none; border:none; cursor:pointer; color:var(--text-secondary); }

@media (max-width: 768px) {
  .menu-toggle { display:block; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .main-wrapper { margin-left: 0; }
  header { padding: 0 16px; }
  main { padding: 12px 16px 40px; }
}

Page Shell — Complete Template

Copy this entire block as your starting point for any sidebar dashboard. Includes header with controls, sidebar with nav groups, mobile toggle, and content area with KPI skeletons.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title — GFS</title> <style> * { margin:0; padding:0; box-sizing:border-box; } body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:#F7F7F8; color:#1F1F1F; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } /* ═══ LAYOUT ═══ */ .app-layout { display:flex; min-height:100vh; } .sidebar { width:260px; background:#fff; border-right:1px solid #E5E5E5; position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:100; } .sidebar-header { height:56px; padding:0 16px; display:flex; align-items:center; border-bottom:1px solid #E5E5E5; flex-shrink:0; } .sidebar-logo { display:flex; align-items:center; gap:10px; } .sidebar-logo-text { font-size:13px; font-weight:700; color:#092F64; letter-spacing:-.2px; } .sidebar-logo-sub { font-size:9px; font-weight:500; color:#6B7280; text-transform:uppercase; letter-spacing:.5px; margin-top:1px; } .sidebar-nav { flex:1; padding:8px; overflow-y:auto; } .nav-group { margin-bottom:12px; } .nav-group-label { font-size:11px; font-weight:500; color:#8E8EA0; text-transform:uppercase; letter-spacing:.5px; padding:6px 12px 4px; } .nav-item { display:flex; align-items:center; padding:8px 12px; border-radius:8px; font-size:14px; font-weight:400; color:#4B5F7A; cursor:pointer; border:none; background:none; width:100%; text-align:left; min-height:36px; transition:background .2s; } .nav-item:hover { background:#F0F0F0; color:#1F1F1F; } .nav-item.active { background:#EBEBEB; color:#1F1F1F; font-weight:500; } .main-wrapper { margin-left:260px; flex:1; } header { background:#fff; height:56px; padding:0 32px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #E5E5E5; position:sticky; top:0; z-index:90; } .header-title { font-size:16px; font-weight:600; color:#111; margin-right:auto; } main { max-width:1080px; margin:0 auto; padding:20px 32px 48px; } </style> </head> <body> <div class="app-layout">  <aside class="sidebar"> <div class="sidebar-header"> <div class="sidebar-logo">  <svg width="24" height="24" viewBox="0 0 32 32" fill="none"> <rect width="32" height="32" rx="8" fill="#092F64"/> <circle cx="16" cy="16" r="8" stroke="#93BFEF" stroke-width="1.3"/> <ellipse cx="16" cy="16" rx="13" ry="4" transform="rotate(-20 16 16)" stroke="#FFFFFF" stroke-width="1.1" stroke-linecap="round"/> <ellipse cx="16" cy="16" rx="13" ry="4" transform="rotate(-50 16 16)" stroke="#468BE6" stroke-width="1.1" stroke-linecap="round"/> </svg> <div> <div class="sidebar-logo-text">Global Food Solutions</div> <div class="sidebar-logo-sub">Corporate Hub</div> </div> </div> </div> <div class="sidebar-nav"> <div class="nav-group"> <button class="nav-item active">Dashboard</button> </div> <div class="nav-group"> <div class="nav-group-label">Section</div> <button class="nav-item">Page Name</button> </div> </div> </aside>  <div class="main-wrapper"> <header> <button class="menu-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')"><i data-lucide="menu"></i></button> <span class="header-title">Page Title</span>  </header> <main>      </main> </div> </div> </body> </html>

Element	Spec
Sidebar width	`260px` fixed, full height
Sidebar + Header height	`56px` each — borders must align
All borders	`1px solid #E5E5E5` — same color everywhere
Header padding	`0 32px` — no vertical padding (height controls centering)
Sidebar header padding	`0 16px`
Main content	`max-width: 1080px; padding: 20px 32px 48px`
Logo icon	24px globe mark — navy rect + Jordy Blue circle + 2 orbital ellipses
Logo text	`13px/700` navy + `9px/500` muted uppercase
Safe areas (mobile only)	`@media (max-width:768px)` — never apply on desktop

GFS Utility Files

Two files give you every component pre-styled and every utility function ready to use.

HTML

<link rel="stylesheet" href="css/gfs-components.css">


<script src="js/gfs-init.js"></script>

JS

/* gfs-init.js auto-initializes. Use utilities like: */
GFS.format.currency(124500) // "$124,500"
GFS.format.currency(-12400) // "($12,400)"
GFS.format.percent(94) // "94%"
GFS.format.cases(1247) // "1,247 cs"
GFS.format.weight(68400) // "68,400 lbs"
GFS.format.date('2026-05-11') // "May 11, 2026"
GFS.badge('success', 'Active') // badge HTML with dot
GFS.badge('danger', 'Past Due') // danger badge HTML

File	Size	Provides
`css/gfs-components.css`	~4KB	Cards, KPIs, tables, buttons, badges, alerts, inputs, filters, empty states, skeleton, progress, toast
`js/gfs-init.js`	~5KB	GFS.format, GFS.badge(), GFS.copyTable(), Chart.js defaults, [data-copyable], [data-countup], dark mode

CDN Dependencies

Load these CDN resources before the utility files.

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">


<script src="https://unpkg.com/lucide@latest"></script>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Resource	CDN	Size	Required
Inter (font)	Google Fonts	~25KB	Always
JetBrains Mono	Google Fonts	~18KB	Always
Lucide Icons	unpkg	~65KB	Always
Chart.js	jsDelivr	~67KB	Only if charts

Build Checklist

Verify before shipping any new dashboard.

CSS Variables Reference

Complete list of CSS custom properties defined in :root of css/styles.css.

:root

/* Brand Colors */
--navy: #092F64; /* Cool Black */
--blue: #1A5799; /* Cobalt Blue — primary */
--blue-mid: #468BE6; /* Tufts Blue — focus rings */
--blue-light: #93BFEF; /* Jordy Blue — accents */
--blue-bg: #E9F5FF; /* Alice Blue — badges, tints */

/* Semantic — 8 statuses, 3 tokens each */
--success: #10B981; --success-text: #065F46; --success-bg: #ECFDF5;
--warning: #F59E0B; --warning-text: #92400E; --warning-bg: #FFFBEB;
--danger: #EF4444; --danger-text: #991B1B; --danger-bg: #FEF2F2;
--info: #468BE6; --info-text: #1A5799; --info-bg: #E9F5FF;
--purple: #8B5CF6; --purple-text: #7C3AED; --purple-bg: #F5F3FF;
--neutral: #6B7280; --neutral-text: #4B5563; --neutral-bg: #F3F4F6;
--teal: #14B8A6; --teal-text: #0D9488; --teal-bg: #F0FDFA;
--orange: #F97316; --orange-text: #EA580C; --orange-bg: #FFF7ED;

/* Text & Neutrals */
--black: #1F1F1F; /* Eerie Black — headings, body */
--gray-50: #FAFAFA; /* Sunken surfaces, table header */
--gray-100: #F0F0F0; /* Hover backgrounds */
--gray-200: #E5E5E5; /* Card borders, dividers */
--gray-300: #D0D0D0; /* Hover borders, input borders */
--gray-500: #6B7280; /* Slate Grey — labels */
--gray-600: #4B5F7A; /* Steel Blue Grey — subheadings */
--gray-800: #1F1F1F;
--gray-900: #092F64;
--white: #FFFFFF;

/* Shadows */
--shadow: none; /* cards — FLAT, no shadow */
--shadow-md: 0 4px 16px rgba(9,47,100,.08);

/* Layout */
--radius: 10px;
--sidebar-width: 260px;

/* Typography */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

File Structure

Project

GFS Setup Packets 2026/
├── index.html /* HTML shell — ~3,580 lines, 26 tabs */
├── css/
│ └── styles.css /* All CSS — ~1,420 lines */
├── js/
│ ├── app.js /* Main JS — ~2,420 lines */
│ └── nav.js /* Navigation + org chart — 156 lines */
├── design-system.html /* This file */
├── getting-here.html /* Visitor directions */
├── who-to-call.html /* Phone contacts (production floor) */
├── Documents/ /* PDFs, floor plans, facility docs */
├── Customer Setup Packet/
└── Vendor Information Packet/

File Structure Standard

Standard folder layout for any GFS dashboard project.

Project

my-dashboard/
├── index.html /* Dashboard page */
├── css/
│ └── gfs-components.css /* Pre-built component classes */
├── js/
│ └── gfs-init.js /* Utilities, auto-init, formatters */
└── GFS-HEADER-STANDARD.md /* Header reference (do not deploy) */

Rule	Detail
Root HTML file	Always `index.html` or `[name]-dashboard.html`
CSS folder	`css/` — only `gfs-components.css` + any page-specific styles
JS folder	`js/` — only `gfs-init.js` + any page-specific scripts
No assets folder	All images are inline SVG. No raster image assets.
No node_modules	All dependencies loaded via CDN. No npm, no build step.

Glossary

Standard GFS terminology. Always use these exact abbreviations and spellings.

Business Terms

Abbreviation	Full Name	Usage Note
`SO`	Sales Order	Never "sale order" or "sales orders" in labels
`PO`	Purchase Order
`WO`	Work Order	Production context
`AR`	Accounts Receivable	Money owed TO us
`AP`	Accounts Payable	Money WE owe
`BOM`	Bill of Materials	Assembly/production context
`NS`	NetSuite	ERP system
`SQF`	Safe Quality Food	Food safety certification
`USDA`	U.S. Department of Agriculture	Commodity program context
`CME`	Chicago Mercantile Exchange	Cheese pricing reference
`QC`	Quality Control

Time & Measurement

Abbreviation	Meaning
`MTD`	Month to Date
`YTD`	Year to Date
`QTD`	Quarter to Date
`WoW`	Week over Week
`MoM`	Month over Month
`YoY`	Year over Year
`cs`	Cases (unit)
`lbs`	Pounds (weight)
`plt`	Pallets
`°F`	Degrees Fahrenheit

Changelog

Version history of the GFS Design System.

Version	Date	Changes
v8.0	May 2026	Icon expansion: 100+ icons across 10 categories (Food Safety, Manufacturing, Logistics, Product, Sales, Reporting, KPI, Security, Finance, USDA). 10 new table patterns (totals, grouped, expandable, row highlighting, actions, pagination, density, striped, clickable, alignment). Dark mode for design system page.
v7.0	May 2026	Enterprise readiness: Voice & Tone, Naming Conventions, Imagery Guidelines, Glossary, Changelog, File Structure Standard.
v6.0	May 2026	Production kit: gfs-init.js + gfs-components.css, WCAG AAA contrast fix, 3C Double Ring globe, Buddy mascot, 480px breakpoint, dark mode toggle, CountUp.js + html2pdf.js, Recommended Stack, Browser-Native CSS.
v5.0	May 2026	Major expansion: 11 new sections (Charts, Formatting, Workflows, Empty States, Print, Maps, Favicon, Email, Confidentiality, Dashboard Patterns, Layouts). Lucide Icons standard, Inter + JetBrains Mono fonts, 8 semantic statuses with 3-token system, navy hero, dropdown nav, section auto-numbering, blue-family category tags, Chart.js branded config.
v4.0	May 2026	Initial design system: Colors, Typography, Spacing, Shadows, Core Components, KPI Cards, Data Tables, Timeline, Org Chart, Templates, Kanban, Micro Components, Sidebar, Patterns, Dark Mode, Responsive, Motion, CSS Variables.