01Sandbox DirectoryJump to Any Builder
Every GFS design token and component pattern, live and configurable. Tweak controls, see instant results, copy production-ready HTML.
02Button BuilderVariant / Size / Icon / Live Preview
Configure any GFS button variant. Controls update the live preview and output instantly. Click Copy to grab production HTML.
Live Preview
■ Buttons use IBM Plex Mono, uppercase, .06em tracking. Never use border-radius above 2px.
03Color MixerPick / Adjust Opacity / Card Preview
Select any GFS palette color, adjust its opacity, and see it applied to a live card preview. Click any value to copy.
Primary Blues
Neutrals
Semantic
Revenue
$1.84/lb
+12.4% vs prior
Name
Cobalt
HEX
#092F64
RGB
rgb(9, 47, 100)
CSS Var
var(--cobalt)
With Alpha
rgba(9, 47, 100, 1)
■ Click any value row to copy. Opacity slider generates the rgba() string for production use.
04Card BuilderHeader / Content / Badge / Metric
Compose GFS-styled cards with optional header, badge, metric value, and body content. Produces flat, borderless, Attio-style cards.
Live Preview
■ Cards use flat 1px borders, no shadows, no border-radius above 2px. Follows Attio-style spacing.
05Badge GeneratorText / Color / Outline / Live Preview
Generate GFS status badges from the system palette. Preview updates in real time.
Live Preview
■ Badges: IBM Plex Mono, 10px, uppercase, 2px 8px padding, radius-sm.
06Table GeneratorRows / Columns / Editable Data
Set row and column count, then type data directly into cells. Generates a complete demo-table with GFS styling.
■ Tables use demo-table class: collapse borders, mono headers, 2px cobalt header border.
07Spacing Visualizersp-1 through sp-24 / Pixel Values
Drag the slider to select a spacing token. The box preview, pixel value, and CSS variable update in real time.
Applied to Card Padding
Shipment #SHP-20947
Origin: Bongards, MN. Destination: Edgewood, NY. 42,240 lb barrel cheddar via reefer.
Last updated 2 hours ago
CSS: padding: var(--sp-4); /* 16px */
■ GFS uses an 8px spacing grid. sp-1 (4px) is half-step for tight UI, sp-8 (32px) for major section breaks.
08Typography PreviewFont / Weight / Size / Live Render
Type any text, pick a font family, adjust weight and size. The preview renders instantly at all type scale steps.
Characters: 0
Words: 0
Custom Size Preview
Custom Size
Full Type Scale
■ Display/Headlines: Inter 700-900. Body/UI: Inter 400-600. Data/Labels: IBM Plex Mono 400-700.
09Grid Layout Builder2-6 Columns / Gap Control
Pick column count and gap size. The grid renders with colored boxes. Copy the CSS class for production use.
■ Always use minmax(0,1fr) instead of plain 1fr for equal-width columns.
10Icon Search616 Icons / Click to Copy SVG
Search the full GFS icon library. Click any icon to copy its SVG markup. All icons render at 24x24 with 1.5px stroke.
Showing 616 of 616 icons
■ All GFS icons: 24x24 viewBox, 1.5px stroke, currentColor, round caps and joins.
11Wallet Card BuilderApple Wallet-Style / Card Types
Generate Apple Wallet-inspired cards for shipments, certifications, employee badges, and event passes.
Live Preview
■ Wallet cards use gradient backgrounds derived from the GFS blue palette. Barcode is decorative brand DNA.