Developer Platform
Brand System v10.0 -- Tools Ecosystem
Tools
Ecosystem
Ecosystem
Every library, framework, and resource -- cataloged, linked, and ready to use.
The definitive reference for every open-source tool the GFS design system integrates, references, or plans to adopt. When someone asks "what can I use to build X?" -- this page answers it.
Integrated
Referenced
Planned
Brand Tools
02Ecosystem Overview
9
Integrated (Live)
10
Referenced
7
Future Planned
6
Brand Tools
6
Icon Libraries
Every tool listed here has been evaluated for license compatibility, bundle size, CDN availability, and alignment with GFS infrastructure constraints. Tools are organized by integration status: actively shipped, referenced for design decisions, planned for future phases, or reserved for brand/marketing asset generation.
03Integrated Tools
These tools are loaded, used, and actively maintained in production GFS design system pages. Each has a verified CDN link, a known license, and a designated GFS page that demonstrates its use.
6.6K stars
Pure CSS data visualization framework. Renders charts entirely with HTML tables and CSS -- zero JavaScript, fully accessible, print-friendly. Powers all static chart examples in the GFS system.
<!-- Charts.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
Collection of 60 dot-matrix loading animations built with pure CSS. Provides the signature GFS loader pattern -- grid-based, industrial, and perfectly on-brand for food supply infrastructure.
<!-- dot-matrix-animations (inline CSS, no CDN needed) -->
<!-- Copy patterns from repo directly -->
8K stars
Lightweight particle animation engine for backgrounds and hero sections. Creates ambient network-node effects, supply chain flow visualizations, and interactive data particle fields.
<!-- tsparticles -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@2/tsparticles.bundle.min.js"></script>
23K stars
Creative coding library for generative art, data visualization sketches, and interactive canvas experiments. Powers GFS generative pattern backgrounds and procedural brand textures.
<!-- p5.js -->
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
29K stars
Interactive HTML5 canvas library with object model, SVG-to-canvas, and JSON serialization. Powers the GFS label designer -- drag-and-drop product label creation with live preview.
<!-- fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric@5/dist/fabric.min.js"></script>
Apache 2.0
Image-to-dot-matrix converter. Transforms product photos and brand assets into the signature GFS dot-matrix aesthetic -- pixel-grid rendering for industrial display and print applications.
<!-- .matrix (standalone tool, run locally) -->
<!-- See dot-matrix-tool.html for inline implementation -->
OFL
Variable typeface optimized for screens. The primary GFS display and body font -- used across all pages for headings, body copy, UI labels, and data tables. Supports optical sizing from 14 to 32px.
<!-- Inter (Google Fonts) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
OFL
Monospaced typeface from IBM's Plex family. The GFS system font for data displays, code snippets, token references, system metadata, and industrial-grade labeling. Supports italic and 7 weights.
<!-- IBM Plex Mono (Google Fonts) -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
ISC
Community-maintained fork of Feather Icons with 1500+ icons. The referenced icon set for GFS -- consistent stroke width, clean geometry, and full SVG source for every glyph.
<!-- Lucide Icons -->
<script src="https://cdn.jsdelivr.net/npm/lucide@0.344.0/dist/umd/lucide.min.js"></script>
04Referenced & Recommended
These tools are not bundled or loaded in GFS pages, but they inform our design decisions, token structures, component patterns, and utility class strategies. They are reference material for designers and developers.
| Tool | Stars | License | GFS Usage |
|---|---|---|---|
| shadcn/ui | 115K | MIT | Component pattern reference. Informed GFS's semantic token naming, composable component architecture, and the copy-paste-own philosophy instead of npm dependency. |
| Tailwind CSS | 85K | MIT | Utility class reference. GFS spacing scale, color naming conventions, and responsive breakpoint system are mapped 1:1 against Tailwind's design decisions. |
| Tabler | 39K | MIT | Dashboard UI kit reference. Layout patterns, data table structures, and metric card designs were benchmarked against Tabler's admin templates. |
| DaisyUI | 35K | MIT | Tailwind component patterns. Theme switching approach (CSS custom properties + data attributes) directly influenced GFS dark mode implementation. |
| Flowbite | 8K | MIT | 400+ interactive Tailwind components. Referenced for form patterns, dropdown behaviors, and modal interaction models. |
| Preline | 5K | MIT | 300+ pre-built UI sections. Page-level layout patterns (hero, pricing, feature grids) used as composition references for GFS marketing pages. |
| Bootstrap | 171K | MIT | Classic responsive framework. Grid system proportions and breakpoint values cross-referenced during GFS responsive spec development. |
| dotlottie-web | 1K | MIT | Lottie animation player for web. Evaluated for loading states and micro-interactions; .lottie format reduces animation payload vs. raw JSON. |
| Rough.js | 20K | MIT | Hand-drawn style graphics library. Referenced for casual/informal chart styles in internal presentations and culture pages. |
| canvas-sketch | 5K | MIT | Generative art framework with export tools. Evaluated as alternative to p5.js for print-resolution pattern generation and poster artwork. |
05Future Integrations
These tools are approved for future integration. Each has been license-reviewed and architecturally validated. They will be added as GFS expands into 3D, high-performance 2D rendering, and React-based portals.
100K stars
3D graphics library for WebGL. Planned for facility walkthroughs, interactive globe visualizations showing supply routes, and 3D product packaging previews.
28K stars
React renderer for three.js. Will power declarative 3D scenes in future React portal builds -- facility maps, interactive product configurators, and data-driven 3D dashboards.
8K stars
Useful helpers for react-three-fiber. Provides pre-built cameras, controls, loaders, and abstractions that accelerate 3D scene development without writing boilerplate WebGL code.
45K stars
High-performance 2D WebGL renderer. Planned for large-scale interactive maps showing facility locations, fleet routes, and real-time supply chain node visualization at 60fps.
25K stars
Production-ready animation library for React. Will handle page transitions, layout animations, and gesture-driven interactions in future React portal builds.
3.3K stars
Converts images to Braille patterns and ASCII art. Planned for terminal-style product displays, CLI tool branding, and industrial-aesthetic image treatments in print materials.
Video-to-dot-matrix effect pipeline. Planned for converting facility walkthrough videos into the GFS dot-matrix visual language for social media and presentation use.
06Brand & Marketing Tools
Tools for generating brand assets, social media cards, Open Graph images, and marketing collateral. These are build-time or design-time tools -- not shipped to end users.
| Tool | License | What It Does | GFS Use Case |
|---|---|---|---|
| fabriziosalmi/brandkit | MIT | Generates full brand asset packs from a logo file -- favicons, social banners, color palettes, typography specimens, and brand guidelines PDFs. | Auto-generate GFS brand kit deliverables for partners and vendors. One logo input, complete asset pack output. |
| og-social-cards | MIT | Dynamic Open Graph image generator. Creates social preview cards with customizable templates, text overlays, and brand colors. | Generate OG images for every GFS design system page so links shared on Slack/LinkedIn render with branded previews. |
| fmcardgen | MIT | Social media card generator from markdown front matter. Batch-generates cards from structured data files. | Batch-produce social cards for GFS product announcements, blog posts, and changelog entries from markdown source. |
| tcardgen | Apache 2.0 | Twitter Card / OGP image generator written in Go. Renders text onto template images with font control. | CLI pipeline for generating Twitter cards from GFS article titles and descriptions during build process. |
| social-post-maker | MIT | React-based social post builder with live preview. Supports multiple platforms and aspect ratios. | Internal marketing tool for GFS social media team to create on-brand posts with correct dimensions and typography. |
| casa | MIT | AI-assisted brand case study generator. Structures case studies with problem/solution/result framework and visual layouts. | Generate customer case studies for GFS sales materials -- structured narratives from raw project data and outcomes. |
07Icon Libraries
Available icon sets evaluated for GFS use. Lucide is the primary set; others are available for specialized needs. All support SVG inline, sprite sheets, and CDN loading.
| Library | Icons | License | CDN | Notes |
|---|---|---|---|---|
| Lucide | 1,500+ | ISC | cdn.jsdelivr.net/npm/lucide@0.344.0 | Primary GFS icon set. Clean 24x24 grid, 2px stroke. |
| Tabler Icons | 4,500+ | MIT | cdn.jsdelivr.net/npm/@tabler/icons@latest | Largest consistent stroke set. Use for data-heavy UIs. |
| Heroicons | 300+ | MIT | cdn.jsdelivr.net/npm/heroicons@latest | By Tailwind team. Outline + solid + mini variants. |
| Phosphor Icons | 6,000+ | MIT | cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1 | 6 weight variants per icon. Flexible for any density. |
| Simple Icons | 3,000+ | CC0 | cdn.jsdelivr.net/npm/simple-icons@latest | Brand logos only. Use for partner/vendor logos. |
| GFS Custom Icons | 90 | Proprietary | standards.html (inline SVG) | Our own library. Food industry, supply chain, cold chain. |
Icon Count Comparison
08CDN Quick Reference
Every CDN link used across the GFS design system, ready to copy into any new page. All links point to jsDelivr for consistent performance and caching behavior.
<!-- Charts.css -- Pure CSS charts -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
<!-- tsparticles -- Particle backgrounds -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@2/tsparticles.bundle.min.js"></script>
<!-- p5.js -- Generative art / creative coding -->
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
<!-- fabric.js -- Canvas label designer -->
<script src="https://cdn.jsdelivr.net/npm/fabric@5/dist/fabric.min.js"></script>
<!-- Lucide Icons -- 1500+ SVG icons -->
<script src="https://cdn.jsdelivr.net/npm/lucide@0.344.0/dist/umd/lucide.min.js"></script>
<!-- dotLottie Player -- Lottie animation playback -->
<script src="https://cdn.jsdelivr.net/npm/@dotlottie/player-component@2/dist/dotlottie-player.mjs" type="module"></script>
<!-- Inter -- Display/body typography -->
<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:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
<!-- IBM Plex Mono -- Data/system typography -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Tabler Icons -- 4500+ stroke icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<!-- Phosphor Icons -- 6000+ flexible-weight icons -->
<script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1"></script>
09Compatibility Matrix
Not every tool works in every environment. This matrix maps each tool against GFS build targets so developers know what is safe to use where. Green means fully supported, red means incompatible, yellow means partial support with caveats.
| Tool | Static HTML | NetSuite Suitelets | Email Templates | React Portals | Mobile App |
|---|---|---|---|---|---|
| Charts.css | YES | INLINE ONLY | NO | YES | NO |
| tsparticles | YES | NO | NO | YES | WEBVIEW |
| p5.js | YES | NO | NO | YES | WEBVIEW |
| fabric.js | YES | TOO HEAVY | NO | YES | NO |
| Lucide Icons | YES | YES | SVG INLINE | YES | YES |
| Inter / Plex Mono | YES | YES | WEB SAFE FALLBACK | YES | YES |
| dotLottie | YES | NO | NO | YES | YES |
| three.js | YES | NO | NO | YES | YES |
| react-three-fiber | NO | NO | NO | YES | YES |
| pixi.js | YES | NO | NO | YES | YES |
| Motion (Framer) | NO | NO | NO | YES | YES |
| shadcn/ui | NO | NO | NO | YES | YES |
Static HTML
Our current primary system. Single-file HTML pages with inline styles. Full CDN access. No build step. Maximum compatibility.
NetSuite Suitelets
Server-rendered HTML within NetSuite's SuiteScript framework. External CDN access limited. Heavy JS libraries blocked by payload constraints.
Email Templates
Inline CSS only. No JavaScript. No external stylesheets. No web fonts (use system fallbacks). Render across Outlook, Gmail, Apple Mail.
React Portals
Future React-based applications. Full npm ecosystem access. Supports all tools including react-three-fiber, shadcn components, and Motion.
Mobile App
React Native or WebView-based. Lottie native support. WebGL available for 3D. Heavy canvas libraries need WebView wrapper.
10Decision Guide
Quick-reference lookup. Find your use case, get the tool recommendation and the GFS page that demonstrates it.
| I Need To... | Use This | See Example | Status |
|---|---|---|---|
| Add a chart to a static page | Charts.css | tables-charts.html | LIVE |
| Show a loading animation | dot-matrix-animations | animations.html | LIVE |
| Create particle backgrounds | tsparticles | particles.html | LIVE |
| Generate procedural patterns | p5.js | generative-art.html | LIVE |
| Build a label designer | fabric.js | label-designer.html | LIVE |
| Convert images to dot-matrix | .matrix concept | dot-matrix-tool.html | LIVE |
| Add icons to a page | Lucide Icons | standards.html | LIVE |
| Build a 3D facility walkthrough | three.js + drei | -- | PLANNED |
| Render a supply chain map at scale | pixi.js | -- | PLANNED |
| Animate React page transitions | Motion (Framer) | -- | PLANNED |
| Generate social media preview cards | og-social-cards / fmcardgen | -- | BRAND TOOL |
| Create a brand asset pack | brandkit | -- | BRAND TOOL |
| Build hand-drawn style charts | Rough.js | -- | REFERENCE |
| Add Lottie animations | dotlottie-web | lottie.html | REFERENCE |
| Reference a dashboard layout pattern | Tabler + shadcn/ui | -- | REFERENCE |
| Use 4500+ icons in a data dashboard | Tabler Icons | -- | REFERENCE |
11GFS Photo Resizer (Python Tool)
Internal Python tool for batch-resizing product photos into 4 standardized variants across all 8 GFS brands. A browser-based version is also available at photo-resizer.html.
| Property | Detail |
|---|---|
| Tool Location | Dropbox/GFS x Claude AI/Claude_Photo Resizer/ |
| Requirements | Python 3 + Pillow (pip install Pillow) |
| Usage | Drop photos in input/{brand}/, run python resize.py |
| Output | 4 variants per photo in output/{brand}/{itemcode}/ |
| Supported Formats | JPG, PNG, TIFF, BMP, WebP |
| Features | Auto-trim whitespace, background replacement, center-crop vs fit-on-canvas, brand-specific rules |
| Brand Folders | 8 brand folders pre-configured (Right Start Foods, Power Up Foods, Melt Mates, Global Food Solutions, Alfresco Italian, Branson's Roadhouse, Harvest Promise, Tijuana Tortilla) |
Output Variants
| Variant | Dimensions | Use Case | Filename |
|---|---|---|---|
| 1x1 | 1800 x 1800 | Instagram, social media | {itemcode}_1x1.jpg |
| 4x3 | 1800 x 1350 | Product catalog | {itemcode}_4x3.jpg |
| 3x2 | 1800 x 1200 | Website hero | {itemcode}_3x2.jpg |
| spec | 1200 x 800 | Spec sheets, documents | {itemcode}_spec.jpg |
Browser Version
Python + Browser tools produce identical output
The browser version at photo-resizer.html replicates this tool using the Canvas API. For progressive JPEG encoding or automated pipelines, use the Python version.