01 Snippet Library Quick Reference & Navigation

Every reusable code block, color value, SVG icon, and template in one place. Click Copy on any snippet to put its code on your clipboard.

15 Sections 120+ Snippets 1-Click Copy

02 Colors 03 Typography 04 Buttons 05 Inputs 06 Badges 07 Cards 08 Tables 09 Layout 10 Icons 11 Brand 12 Headers 13 Contact 14 Variables 15 Allergens 16 NetSuite

02 Color Values 18 Brand Colors — Click to Copy Hex or Variable

Primary Blues

Cobalt

#092F64

var(--cobalt)

#092F64
var(--cobalt)
/* Primary text, headings, CTAs */

Navy

#1A5799

var(--navy)

#1A5799
var(--navy)
/* Hover states, secondary emphasis */

Tufts

#468BE6

var(--tufts)

#468BE6
var(--tufts)
/* Interactive elements, links, focus rings */

Jordy

#93BFEF

var(--jordy)

#93BFEF
var(--jordy)
/* Selected states, accents */

Alice

#E9F5FF

var(--alice)

#E9F5FF
var(--alice)
/* Light backgrounds, tints */

Ice

#F4F9FF

var(--ice)

#F4F9FF
var(--ice)
/* Subtle backgrounds */

Neutrals

Black

#1F1F1F

var(--black)

#1F1F1F
var(--black)
/* Primary body text */

Graphite

#4B5F7A

var(--graphite)

#4B5F7A
var(--graphite)
/* Secondary body text */

Slate

#6B7280

var(--slate)

#6B7280
var(--slate)
/* Tertiary text, labels */

Steel

#9CA3AF

var(--steel)

#9CA3AF
var(--steel)
/* Placeholder text */

Silver

#D9E1EA

var(--silver)

#D9E1EA
var(--silver)
/* Borders, dividers */

Fog

#F0F2F5

var(--fog)

#F0F2F5
var(--fog)
/* Subtle backgrounds */

Semantic

Success

#0F766E

var(--success)

#0F766E
var(--success)
/* Delivered, passed, positive */

Warning

#B45309

var(--warning)

#B45309
var(--warning)
/* Pending, expiring, caution */

Error

#DC2626

var(--error)

#DC2626
var(--error)
/* Alert, failed, negative */

■ All 18 brand colors. Click the swatch to copy hex, or use the Copy button for full reference.

03 Typography Snippets Headings, Body, Mono, Labels

H1 — Page Title

Page Title

<h1 style="font-family:'Inter',sans-serif;font-size:40px;font-weight:900;color:var(--cobalt);letter-spacing:-.02em;line-height:1.1;">Page Title</h1>

H2 — Section Title

Section Title

<h2 style="font-family:'Inter',sans-serif;font-size:32px;font-weight:800;color:var(--cobalt);letter-spacing:-.015em;line-height:1.15;">Section Title</h2>

H3 — Card Title

Card Title

<h3 style="font-family:'Inter',sans-serif;font-size:24px;font-weight:700;color:var(--cobalt);line-height:1.2;">Card Title</h3>

H4 — Subsection

Subsection Title

<h4 style="font-family:'Inter',sans-serif;font-size:20px;font-weight:700;color:var(--cobalt);line-height:1.3;">Subsection Title</h4>

Body Text

Body text uses Inter at weight 400 with generous line-height for readability. Color is graphite for softer contrast.

<p style="font-family:'Inter',sans-serif;font-size:15px;font-weight:400;color:var(--graphite);line-height:1.7;">Body text content here.</p>

Small Body

Small body text for secondary content areas, captions, and supplementary information.

<p style="font-family:'Inter',sans-serif;font-size:13px;font-weight:400;color:var(--graphite);line-height:1.6;">Small body text.</p>

Mono / Data Text

GFS-2026-05-00058

<span style="font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--cobalt);font-weight:500;">GFS-2026-05-00058</span>

Label / Uppercase Mono

Section Label

<span class="label">Section Label</span>

/* CSS: */
.label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}

■ Inter for display/body, IBM Plex Mono for data/labels. Never use paid fonts.

04 Button Snippets Primary, Secondary, Ghost, Small, Icon, Group

Primary Button

<button class="btn btn-primary">Primary Action</button>

Secondary Button

<button class="btn btn-secondary">Secondary</button>

Ghost Button

<button class="btn btn-ghost">Ghost</button>

Small Button

<button class="btn btn-primary btn-sm">Small</button>

Button Group

<div class="flex gap-3">
  <button class="btn btn-primary">Save</button>
  <button class="btn btn-ghost">Cancel</button>
</div>

Icon Button

<button class="btn btn-secondary btn-icon">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="12" y1="5" x2="12" y2="19"/>
    <line x1="5" y1="12" x2="19" y2="12"/>
  </svg>
</button>

■ Buttons use IBM Plex Mono, uppercase, letter-spacing .06em. No border-radius above 2px.

05 Input Snippets Text, Select, Textarea, Search, Controls, Form Group

Text Input

<input class="input" placeholder="Enter value...">

Select Dropdown

<select class="input select">
  <option>Choose option...</option>
  <option>Barrel Cheddar</option>
  <option>Mixed Vegetables</option>
</select>

Textarea

<textarea class="input textarea" placeholder="Enter description..."></textarea>

Search Input

<div style="position:relative;">
  <svg style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--steel);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
    <path d="m21 21-4.35-4.35"/>
  </svg>
  <input class="input" placeholder="Search..." style="padding-left:36px;">
</div>

Checkbox & Radio

Checked

Selected

<!-- Checkbox -->
<div class="flex items-center gap-2">
  <div class="check-box checked"></div>
  <span>Checked</span>
</div>

<!-- Radio -->
<div class="flex items-center gap-2">
  <div class="radio-dot checked"></div>
  <span>Selected</span>
</div>

Form Group

Field Label

Helper text goes here

<div class="form-group">
  <label class="form-label">Field Label</label>
  <input class="input" placeholder="Enter value...">
  <div class="form-hint">Helper text goes here</div>
</div>

■ Inputs use Inter body font. Focus state: tufts border + alice box-shadow.

06 Badge & Status Snippets Badges, Status Dots, Tags, Counts

Blue Badge

In Transit

<span class="badge badge-blue">In Transit</span>

Green Badge

Delivered

<span class="badge badge-green">Delivered</span>

Yellow Badge

Pending

<span class="badge badge-yellow">Pending</span>

Red Badge

Alert

<span class="badge badge-red">Alert</span>

Status — Live

Live

<div class="status-indicator">
  <div class="status-dot status-dot-green pulse"></div>
  <span class="status-label">Live</span>
</div>

Status — Offline

Offline

<div class="status-indicator">
  <div class="status-dot status-dot-gray"></div>
  <span class="status-label">Offline</span>
</div>

Badge with Count

Shipments 24

<span class="badge badge-blue" style="display:inline-flex;align-items:center;gap:6px;">
  Shipments
  <span style="background:var(--navy);color:white;padding:0 5px;border-radius:2px;font-size:9px;">24</span>
</span>

Tag / Pill

Dairy x

<span class="tag">Dairy <span class="tag-close">x</span></span>

■ Badges use IBM Plex Mono 10px uppercase. Status dots are 8px circles with optional pulse animation.

07 Card Snippets Basic, Header, KPI, Stat

Basic Card

Card content goes here. Use 1px solid silver borders, no shadows, no border-radius above 8px.

<div style="border:1px solid var(--silver);padding:var(--sp-5);background:var(--white);">
  <p>Card content goes here.</p>
</div>

Card with Header

Card Title

Card body content.

<div style="border:1px solid var(--silver);">
  <div style="padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--cobalt);">Card Title</div>
  <div style="padding:var(--sp-4);">Card body content.</div>
</div>

KPI Card

Active Shipments

128

+12% vs last week

<div class="kpi">
  <div class="kpi-label">Active Shipments</div>
  <div class="kpi-val">128</div>
  <div class="kpi-delta kpi-up">+12% vs last week</div>
</div>

Stat Card with Sparkline

Revenue

$1.2M

+8.4% MTD

<div class="kpi">
  <div class="kpi-label">Revenue</div>
  <div class="kpi-val">$1.2M</div>
  <div class="kpi-delta kpi-up">+8.4% MTD</div>
  <div class="sparkline">
    <div class="spark-bar" style="height:40%;"></div>
    <div class="spark-bar" style="height:55%;"></div>
    <div class="spark-bar" style="height:35%;"></div>
    <div class="spark-bar" style="height:70%;"></div>
    <div class="spark-bar" style="height:60%;"></div>
    <div class="spark-bar" style="height:80%;"></div>
    <div class="spark-bar" style="height:90%;"></div>
  </div>
</div>

■ Cards use flat 1px silver borders. No shadows. No border-radius above 8px.

08 Table Snippets Basic, Striped, Sortable

Basic Data Table

ID	Origin	Destination	Status
GFS-2026-001	Wisconsin	Toronto, CA	In Transit
GFS-2026-002	California	Chicago, IL	Delivered
GFS-2026-003	Idaho	New York, NY	Pending

<table class="demo-table">
  <thead>
    <tr><th>ID</th><th>Origin</th><th>Destination</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <td class="mono" style="font-size:var(--text-xs);">GFS-2026-001</td>
      <td>Wisconsin</td>
      <td>Toronto, CA</td>
      <td><span class="badge badge-blue">In Transit</span></td>
    </tr>
  </tbody>
</table>

Striped Table

Product	Quantity	Unit Price	Total
Barrel Cheddar	40,000 lbs	$2.14/lb	$85,600
Mixed Vegetables	25,000 lbs	$0.82/lb	$20,500
Frozen Pancakes	12,000 cs	$18.50/cs	$222,000

<table class="demo-table" style="border:1px solid var(--silver);">
  <thead>
    <tr><th>Product</th><th>Quantity</th><th>Unit Price</th><th>Total</th></tr>
  </thead>
  <tbody>
    <tr><td>Barrel Cheddar</td><td class="mono">40,000 lbs</td><td class="mono">$2.14/lb</td><td class="mono">$85,600</td></tr>
    <tr style="background:var(--ice);"><td>Mixed Vegetables</td><td class="mono">25,000 lbs</td><td class="mono">$0.82/lb</td><td class="mono">$20,500</td></tr>
  </tbody>
</table>
/* Alternate rows: style="background:var(--ice);" on even/odd tr */

Sortable Table Header

ID ▲	Date ▼	Amount	Status
INV-001	2026-05-18	$12,400	Paid

<th style="cursor:pointer;user-select:none;">
  Column Name <span style="opacity:.5;">&#9650;</span>
</th>
<!-- ▲ = ascending, ▼ = descending -->

■ Tables use .demo-table class. Headers: IBM Plex Mono, uppercase, cobalt 2px bottom border. Rows hover to ice.

09 Layout Snippets Grids, Sections, Hero, Footer

2-Column Grid

Col 1

Col 2

<div class="g2">
  <div>Column 1</div>
  <div>Column 2</div>
</div>
/* grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; */

3-Column Grid

1

2

3

<div class="g3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

4-Column Grid

1

2

3

4

<div class="g4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
</div>

Section Structure

.s-head
.s-body
.s-note

<div class="s" id="s-unique-id">
  <div class="s-head">
    <span class="s-num">01</span>
    <span class="s-title">Section Title</span>
    <span class="s-meta">Description</span>
  </div>
  <div class="s-body">
    <!-- Content -->
  </div>
  <div class="s-note">■ Footer note</div>
</div>

Hero Section

Global Food Solutions

Hero Title

Tagline goes here

<div class="hero-section">
  <div class="hero-left">
    <div class="hero-eyebrow"><span></span> Global Food Solutions</div>
    <h1 class="hero-title">Hero Title</h1>
    <div class="hero-tagline">Tagline goes here</div>
    <p class="hero-desc">Description text.</p>
  </div>
  <div class="hero-right">
    <!-- Globe or visual -->
  </div>
</div>

Footer

            ← Back to Hub · GFS v10.0 · Edgewood, NY
          

<div style="text-align:center;padding:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);border-top:1px solid var(--silver);margin-top:32px;">
  <a href="index.html" style="color:var(--tufts);text-decoration:none;">&larr; Back to Hub</a>
  &middot; GFS Design System v10.0
  &middot; Global Food Solutions, Inc.
  &middot; Edgewood, NY
</div>

■ Always use minmax(0,1fr) — never plain 1fr. Grids collapse to 1 column below 768px.

10 SVG Icon Snippets 20 Most-Used Icons — One-Click Copy

Truck

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 3h15v13H1z"/><path d="M16 8h4l3 4v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>

Snowflake

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 7l-5 5-5-5M17 17l-5-5-5 5M2 12h20M7 7l5 5 5-5"/></svg>

Globe

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>

Chart

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>

Box

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>

Thermometer

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>

Shield

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>

Check

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>

Alert

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>

Info

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>

Phone

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.81.32 1.6.58 2.36a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.76.26 1.55.46 2.36.58A2 2 0 0 1 22 16.92z"/></svg>

Email

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>

Calendar

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>

Clock

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>

User

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>

Search

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>

Filter

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>

Download

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>

Upload

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>

Settings

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>

■ Icons: 24x24 viewBox, stroke-based, 1.5px weight, round caps/joins. Color via currentColor.

11 Brand Elements Logo, Watermark, Brackets, Barcode, Signal, Progress

GFS Logo / Monogram

GFS

Global Food Solutions

<div style="text-align:center;">
  <div style="font-size:40px;font-weight:900;letter-spacing:.15em;color:var(--cobalt);">GFS</div>
  <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin-top:8px;">Global Food Solutions</div>
</div>

Dot-Matrix Watermark

Watermark Active

/* Dot-matrix watermark CSS */
.page::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle, var(--cobalt) 0.5px, transparent 0.5px);
  background-size: 32px 32px;
  opacity: 0.012;
  pointer-events: none;
  z-index: -1;
}

Corner Brackets

Bracketed

<div class="bracket">
  <!-- Content -->
</div>

/* CSS: */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--cobalt);
  border-style: solid;
  pointer-events: none;
}
.bracket::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.bracket::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

Barcode Accent

<div style="display:flex;gap:1px;height:28px;opacity:.4;">
  <div style="width:2px;background:var(--cobalt);"></div>
  <div style="width:1px;background:var(--cobalt);"></div>
  <div style="width:3px;background:var(--cobalt);"></div>
  <div style="width:1px;background:var(--cobalt);"></div>
  <div style="width:2px;background:var(--cobalt);"></div>
  <div style="width:1px;background:var(--cobalt);"></div>
  <div style="width:4px;background:var(--cobalt);"></div>
  <div style="width:1px;background:var(--cobalt);"></div>
  <div style="width:2px;background:var(--cobalt);"></div>
  <div style="width:1px;background:var(--cobalt);"></div>
  <div style="width:3px;background:var(--cobalt);"></div>
  <div style="width:1px;background:var(--cobalt);"></div>
</div>

Signal Squares

<div style="display:flex;gap:3px;align-items:flex-end;">
  <div style="width:4px;height:4px;background:var(--tufts);"></div>
  <div style="width:4px;height:8px;background:var(--tufts);"></div>
  <div style="width:4px;height:12px;background:var(--tufts);"></div>
  <div style="width:4px;height:16px;background:var(--tufts);"></div>
  <div style="width:4px;height:20px;background:var(--cobalt);"></div>
</div>

Reading Progress Bar

Progress bar sits below topbar

<div class="reading-progress" id="readingProgress2-x0"></div>

/* CSS: */
.reading-progress {
  position: fixed;
  top: 42px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cobalt), var(--tufts));
  z-index: 90;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(0);
}

/* JS: */
window.addEventListener('scroll', () => {
  const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  document.getElementById('readingProgress').style.transform = `scaleX(${pct})`;
});

■ Every GFS document should include at least one brand element. Corner brackets and dot-matrix are the most common.

12 Document Headers Topbar, Hero, Footer, Full Template

Standard Topbar

 ← Hub -- Page Title
v10.0

<div class="topbar">
  <div class="topbar-l">
    <span class="dot-live"></span>
    <a href="index.html" style="color:inherit;text-decoration:none;">&larr; Hub</a>
    <span style="opacity:.4">&mdash;</span>
    <span>Page Title</span>
  </div>
  <div class="topbar-r">
    <input type="text" placeholder="Search sections..." oninput="searchSections(this.value)" style="background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:inherit;font:inherit;padding:3px 10px;border-radius:2px;width:160px;outline:none;">
    <span>v10.0</span>
    <button class="topbar-btn" onclick="toggleTheme()">◔ Mode</button>
  </div>
</div>

Hero Section (Full)

--- Global Food Solutions ---

Page Title

v10.0 -- Edgewood, NY

<div class="hero-section">
  <div class="hero-left">
    <div class="hero-eyebrow"><span></span> Global Food Solutions</div>
    <h1 class="hero-title">Page Title</h1>
    <div class="hero-tagline">Food supply systems built for scale.</div>
    <p class="hero-desc">Description paragraph.</p>
    <div class="hero-pillars">
      <span>Precise</span><span>Global</span><span>Fresh</span><span>Reliable</span><span>Intelligent</span>
    </div>
  </div>
  <div class="hero-right">
    <div class="hero-meta">
      <div class="hero-meta-title">System Info</div>
      <strong>Version</strong> 9.0<br>
      <strong>Updated</strong> May 2026<br>
      <strong>Location</strong> Edgewood, NY<br>
    </div>
    <div class="globe">
      <div class="globe-ring"></div>
      <div class="globe-ring"></div>
      <div class="globe-ring"></div>
      <div class="globe-ring"></div>
      <div class="globe-ring"></div>
      <div class="globe-dot"></div>
      <div class="globe-dot"></div>
      <div class="globe-dot"></div>
    </div>
  </div>
</div>

Standard Footer

<div style="text-align:center;padding:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);border-top:1px solid var(--silver);margin-top:32px;">
  <a href="index.html" style="color:var(--tufts);text-decoration:none;">&larr; Back to Hub</a>
  &middot; GFS Design System v10.0
  &middot; Global Food Solutions, Inc.
  &middot; Edgewood, NY
</div>

Complete Page Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GFS Design System &mdash; [PAGE TITLE]</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=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="shared.css">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<div class="topbar">
  <div class="topbar-l">
    <span class="dot-live"></span>
    <a href="index.html" style="color:inherit;text-decoration:none;">&larr; Hub</a>
    <span style="opacity:.4">&mdash;</span>
    <span>[PAGE TITLE]</span>
  </div>
  <div class="topbar-r">
    <input type="text" placeholder="Search sections..." oninput="searchSections(this.value)" style="background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:inherit;font:inherit;padding:3px 10px;border-radius:2px;width:160px;outline:none;">
    <span>v10.0</span>
    <button class="topbar-btn" onclick="toggleTheme()">◔ Mode</button>
  </div>
</div>
<div class="page">

<div class="s" id="s-example">
  <div class="s-head">
    <span class="s-num">01</span>
    <span class="s-title">Section Title</span>
    <span class="s-meta">Description</span>
  </div>
  <div class="s-body">
    <!-- Content -->
  </div>
  <div class="s-note">&#9632; Footer note</div>
</div>

</div>
<div style="text-align:center;padding:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);border-top:1px solid var(--silver);margin-top:32px;">
  <a href="index.html" style="color:var(--tufts);text-decoration:none;">&larr; Back to Hub</a> &middot; GFS Design System v10.0 &middot; Global Food Solutions, Inc. &middot; Edgewood, NY
</div>
<script>
function toggleTheme(){document.documentElement.setAttribute('data-theme',document.documentElement.getAttribute('data-theme')==='dark'?'':'dark');}
function searchSections(q){q=q.toLowerCase().trim();document.querySelectorAll('.s,section.s').forEach(s=>{if(!q){s.style.display='';return;}s.style.display=(s.textContent||'').toLowerCase().includes(q)?'':'none';});}
</script>
</body>
</html>

■ Every page: shared.css + print.css + Google Fonts + topbar + footer + dark mode toggle + section search.

13 Address & Contact HQ, PA Facility, Phone/Email, CEO Signature

HQ Full Address

Global Food Solutions, Inc.

            131 Heartland Blvd
Edgewood, NY 11717
United States
          

Global Food Solutions, Inc.
131 Heartland Blvd
Edgewood, NY 11717
United States

PA Facility Address

GFS — Hermitage Facility

            2500 Freeland Road
Hermitage, PA 16148
United States
          

GFS — Hermitage Facility
2500 Freeland Road
Hermitage, PA 16148
United States

Phone / Email

Phone (877) 728-5550
Email info@GlobalFoodSolutions.co
Web globalfoodsolutions.co

Phone: (877) 728-5550
Email: info@GlobalFoodSolutions.co
Web: globalfoodsolutions.co

CEO Signature Block

Michael Levine

Chief Executive Officer

Global Food Solutions, Inc.

(877) 728-5550 | info@GlobalFoodSolutions.co

<div style="border-top:2px solid var(--cobalt);padding-top:12px;max-width:280px;">
  <div style="font-weight:700;color:var(--cobalt);font-size:15px;">Michael Levine</div>
  <div style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);letter-spacing:.06em;text-transform:uppercase;">Chief Executive Officer</div>
  <div style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--graphite);margin-top:8px;">Global Food Solutions, Inc.</div>
  <div style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--graphite);">(877) 728-5550 | info@GlobalFoodSolutions.co</div>
</div>

■ HQ: Edgewood, NY 11717. Phone: (877) 728-5550. Never use Chicago or (312).

14 CSS Variable Sets Colors, Spacing, Typography, Dark Mode

All Color Variables

:root {
  --cobalt: #092F64;
  --navy: #1A5799;
  --tufts: #468BE6;
  --jordy: #93BFEF;
  --alice: #E9F5FF;
  --ice: #F4F9FF;
  --midnight: #051B3A;
  --black: #1F1F1F;
  --charcoal: #2D2D2D;
  --graphite: #4B5F7A;
  --slate: #6B7280;
  --steel: #9CA3AF;
  --silver: #D9E1EA;
  --fog: #F0F2F5;
  --white: #FFFFFF;
  --success: #0F766E;
  --success-bg: #F0FDF4;
  --warning: #B45309;
  --warning-bg: #FFFBEB;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --info: #1A5799;
  --info-bg: #E9F5FF;
}

All Spacing Variables

:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;   /* default padding */
  --sp-5: 20px;
  --sp-6: 24px;   /* section gaps */
  --sp-8: 32px;   /* major breaks */
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
}

All Typography Variables

:root {
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;
  --text-6xl: 72px;
  --text-7xl: 96px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}
/* Fonts */
/* Display/Headlines: Inter, weight 700-900 */
/* Body/UI: Inter, weight 400-600 */
/* Data/Labels: IBM Plex Mono, weight 400-700 */

Dark Mode Override Set

[data-theme="dark"] {
  --cobalt: #93BFEF;
  --navy: #468BE6;
  --tufts: #6BA3ED;
  --jordy: #1A5799;
  --alice: #0A1929;
  --ice: #0D1F33;
  --midnight: #F4F9FF;
  --black: #F0F2F5;
  --charcoal: #E5E7EB;
  --graphite: #9CA3AF;
  --slate: #6B7280;
  --steel: #4B5F7A;
  --silver: #2D2D2D;
  --fog: #1A1A1A;
  --white: #111111;
  --success: #34D399;
  --success-bg: #0A1F15;
  --warning: #FBBF24;
  --warning-bg: #1F1A0A;
  --error: #F87171;
  --error-bg: #1F0A0A;
  --info: #6BA3ED;
  --info-bg: #0A1929;
}

/* Toggle dark mode via JS: */
document.documentElement.setAttribute('data-theme', 'dark');

■ All colors use CSS variables. Dark mode inverts automatically when data-theme="dark" is set on html.

15 Allergen Statements Contains Milk, 9-Allergen Check, Gluten-Free, Nutrition Facts

Contains: Milk

            CONTAINS: MILK
          

<div style="font-family:'IBM Plex Mono',monospace;font-size:13px;padding:12px 16px;border:1px solid var(--warning);background:var(--warning-bg);color:var(--warning);">
  <strong>CONTAINS: MILK</strong>
</div>

9-Allergen Check Template

X Milk   O Eggs   O Fish   O Shellfish   O Tree Nuts
O Peanuts   X Wheat   O Soybeans   O Sesame

<!-- FDA Big 9 Allergen Checklist -->
<table style="font-family:'IBM Plex Mono',monospace;font-size:11px;">
  <tr><td>[ ] Milk</td><td>[ ] Eggs</td><td>[ ] Fish</td></tr>
  <tr><td>[ ] Shellfish</td><td>[ ] Tree Nuts</td><td>[ ] Peanuts</td></tr>
  <tr><td>[ ] Wheat</td><td>[ ] Soybeans</td><td>[ ] Sesame</td></tr>
</table>
<!-- Mark with [X] for present allergens -->

Gluten-Free Declaration

            GLUTEN FREE — Contains less than 20 ppm gluten per FDA 21 CFR 101.91
          

<div style="font-family:'IBM Plex Mono',monospace;font-size:13px;padding:12px 16px;border:1px solid var(--success);background:var(--success-bg);color:var(--success);">
  <strong>GLUTEN FREE</strong> &mdash; Contains less than 20 ppm gluten per FDA 21 CFR 101.91
</div>

Nutrition Facts Panel

Nutrition Facts
Serving Size 1 oz (28g)
Calories110
% Daily Value*
Total Fat 9g12%
Saturated Fat 6g30%
Protein 7g

<div style="border:2px solid var(--black);padding:12px;max-width:260px;font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.6;">
  <div style="font-size:24px;font-weight:900;border-bottom:1px solid var(--black);">Nutrition Facts</div>
  <div style="font-size:9px;border-bottom:8px solid var(--black);padding:2px 0;">Serving Size 1 oz (28g)</div>
  <div style="display:flex;justify-content:space-between;border-bottom:1px solid var(--black);padding:2px 0;">
    <span><strong>Calories</strong></span>
    <span style="font-size:17px;font-weight:900;">110</span>
  </div>
  <div style="text-align:right;font-size:9px;border-bottom:1px solid var(--black);">% Daily Value*</div>
  <div style="display:flex;justify-content:space-between;border-bottom:1px solid var(--silver);padding:1px 0;">
    <span><strong>Total Fat</strong> 9g</span><span><strong>12%</strong></span>
  </div>
  <!-- Add more rows as needed -->
</div>

■ FDA Big 9 allergens: Milk, Eggs, Fish, Shellfish, Tree Nuts, Peanuts, Wheat, Soybeans, Sesame.

16 NetSuite Snippets SuiteScript Button, Dashboard KPI, Record Field, Status Set

SuiteScript Button

<button class="btn btn-primary btn-sm" style="display:inline-flex;align-items:center;gap:6px;">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12"/>
  </svg>
  Submit Record
</button>

Dashboard KPI Card

Open POs

47

+5 this week

AR Balance

$786K

-$12K vs prior

<div class="kpi-grid">
  <div class="kpi">
    <div class="kpi-label">Open POs</div>
    <div class="kpi-val">47</div>
    <div class="kpi-delta kpi-up">+5 this week</div>
  </div>
  <div class="kpi">
    <div class="kpi-label">AR Balance</div>
    <div class="kpi-val">$786K</div>
    <div class="kpi-delta kpi-down">-$12K vs prior</div>
  </div>
</div>

Record Field Layout

Record Details

Vendor

Department

<div style="border:1px solid var(--silver);">
  <div style="padding:12px 16px;border-bottom:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--cobalt);letter-spacing:.06em;text-transform:uppercase;">Record Details</div>
  <div style="padding:16px;">
    <div class="g2" style="gap:16px;">
      <div class="form-group">
        <label class="form-label">Vendor</label>
        <input class="input" value="Bongards Creameries" readonly style="background:var(--fog);">
      </div>
      <div class="form-group">
        <label class="form-label">Department</label>
        <input class="input" value="Dairy" readonly style="background:var(--fog);">
      </div>
    </div>
  </div>
</div>

Status Badge Set

Approved Pending Approval Open Rejected Closed

<!-- NetSuite Record Statuses -->
<span class="badge badge-green">Approved</span>
<span class="badge badge-yellow">Pending Approval</span>
<span class="badge badge-blue">Open</span>
<span class="badge badge-red">Rejected</span>
<span class="badge badge-gray">Closed</span>

■ On NetSuite POs, "brand" maps to the department field. Use comments (not messages) for record notes.