GFS Design System — Composable UI Blocks

01Block PhilosophyComposable / Copy-Paste / Theme-Aware

Blocks are pre-composed combinations of components that solve common UI needs. Copy the HTML, customize the data, ship faster. Every block uses semantic tokens so it automatically adapts to themes.

Unlike raw components (buttons, inputs, badges), blocks are higher-level assemblies that represent real interface patterns: a stat card, a page header, a filter panel. They sit between components and full pages in the abstraction hierarchy.

How It Works

          1. Browse blocks below

          2. Click "Copy HTML" on any block

          3. Paste into your page

          4. Replace placeholder data

          5. It inherits your theme automatically

          Key principle: Blocks reference var(--primary), var(--card), etc. — never raw colors like #092F64. This means dark mode, custom themes, and future palette changes are free.

02Data Blocks6 Blocks / Stat, Metric, Trend, Compare, Status, Data Point

Stat Card --card, --card-foreground, --muted-foreground

△

Total Revenue

$1.24M

+12.5% vs last month

Metric Ring --primary, --chart-1

Fulfillment Rate

Trend Card --card, --primary

Weekly Orders

2,847

+8.3%

Comparison Card --muted, --accent

$42.8K

This Month

VS

$38.2K

Last Month

Status Card --muted-foreground

Shipment #GFS-4821 delivered to warehouse

2m ago

View

Data Point --foreground, --muted-foreground

Temp 34.2 °F

03Layout Blocks4 Blocks / Header, Section, Grid, Split

Section Header --primary, --muted-foreground, --border

04 Inventory Status Last synced: 2m ago

Card Grid --card, --border

Active Orders

24 orders in transit

Pending Review

7 items need approval

Completed

142 orders this month

Split Layout --card, --muted, --border

Main content area (wider) — detail view, form, data table

Sidebar (narrower) — filters, metadata, actions

04Form Blocks4 Blocks / Field, Search, Action Bar, Filter Panel

Form Field --input, --ring, --foreground, --destructive

Supplier Name

Required. Must match NetSuite vendor record.

PO Number

PO number already exists in system.

Search Bar --input, --ring

⌕ Active 2026 247 results

Action Bar --muted, --primary, --border

05List Blocks4 Blocks / Activity, Data Row, Notification, File

Activity Item --ring, --card-foreground, --muted-foreground

14:32

PO #4821 approved by Michael Levine

View

14:18

Shipment delivered to Warehouse B

Track

13:45

Temperature alert on Route GFS-NE-7

Details

Data Row --primary, --card, --accent, --muted-foreground

ML

Michael Levine

Sales Rep / Commodity Cheese

Active ⋮

BC

Bongards Creameries

Vendor / Barrel Cheddar

Preferred ⋮

Notification Item --accent, --card-foreground, --primary

⚠

Price alert: CME Block +$0.03

Barrel cheddar benchmark moved above $1.85/lb threshold.

3m

✓

PO #4819 received

Bongards shipment confirmed at dock 7.

1h

File Item --muted, --card-foreground, --ring, --destructive

📄

GFS-Quote-2026-0517.pdf

2.4 MB · May 17, 2026

Download Delete

📊

Pricing-Matrix-Q2.xlsx

840 KB · May 12, 2026

Download Delete

06Navigation Blocks3 Blocks / Sidebar Nav, Tab Bar, Breadcrumb

Tab Bar --primary, --border

Overview

Orders

History

Settings