ShopForge / Design System

Sell more.
Every pixel counts.

A conversion-obsessed e-commerce design system. Bold red urgency, Syne display type that commands attention, and every component optimized to move product.

Syne 800 Red #F43F5E Light Default Pill Radius Conversion-First
Color Tokens
Conversion red with clean white surfaces — urgency without noise.
accent
accent-hover
accent-dim
alpha
success
warning
danger
info
bg-base
blush white
bg-surface
white
bg-elevated
blush tint
text-primary
near black
Typography
Syne 800 for impact headings — Manrope for readable body copy.
display / 40px / 800
Flash Sale
h1 / 30px / 800
Summer Collection
h2 / 22px / 700
Bestsellers This Week
h3 / 17px / 700
Wireless Noise-Cancelling Headphones
body / 14px / 400
Premium 40-hour battery, adaptive ANC, and a folding design that fits any lifestyle. Trusted by over 2 million customers worldwide with a 4.8-star average rating.
small / 12px / 400
Free shipping on orders over $50 · 30-day returns · 2-year warranty
caption / 11px mono
SKU: SF-WH-ANCP-BLK · IN STOCK: 142 units · ETA: 2 business days
Buttons
Pill-shaped, bold — every button optimized for clicks.
Product Badges
Stock, status, and promotional labels.
SALE −40% NEW Bestseller In Stock Only 3 Left Sold Out
Form Inputs
Checkout, search, and product management forms.
$
Shown on product page and in search results.
KPI Cards
Store performance at a glance.
Revenue Today💰
$18,420
↑ 34% vs yesterday
Orders Today🛒
247
↑ 28% vs yesterday
Conversion Rate🎯
4.2%
↑ 0.8pp vs last week
Avg Order Value📈
$74.60
↓ 3% vs last week
Products Table
Inventory management with pricing and stock status.
ProductCategoryPriceSale PriceStockStatusActions
ANC Pro Headphones
SKU: SF-WH-001-BLK
Electronics $249.00 $149.00 142 In Stock
Linen Summer Dress
SKU: SF-AP-DRS-WHT
Apparel $89.00 $53.40 8 Only 8 Left
Ceramic Pour-Over Set
SKU: SF-HM-CPO-WHT
Home $64.00 310 Bestseller
Trail Runner V3
SKU: SF-SP-TRV3-RED
Sports $140.00 $84.00 0 Sold Out
Product Cards
Storefront cards — conversion-optimized with badges and quick-add.
🎧
−40%
AudioTech
ANC Pro Headphones
40hr battery · Adaptive noise cancelling · Foldable design
👗
Only 8 left
Maison Libre
Linen Summer Dress
100% Belgian linen · Relaxed fit · 4 colors available
Bestseller
Craft & Clay
Ceramic Pour-Over Set
Handmade ceramic · Includes filters · Gift-ready packaging
Cart Panel
Order summary with qty controls and checkout CTA.
Your Cart
3 items
🎧
ANC Pro Headphones
Black · 1× $149.00
1
$149
👗
Linen Summer Dress
White / M · 1× $53.40
1
$53
Ceramic Pour-Over Set
White · 1× $64.00
1
$64
ForgeAI
Your AI-powered store growth and merchandising co-pilot.
🛍
ForgeAI
Active — Store Connected
GPT-4.1
Good morning! Your store is trending up +34% today. The ANC Pro Headphones flash sale is outperforming — 47 units sold in 2 hours. I've noticed the Linen Dress has only 8 units left. Want me to draft an urgency email campaign for it?
ForgeAI · 9:14 AM
Yes! Draft the email and also suggest 3 products to upsell alongside the headphones.
You · 9:15 AM
📧 Email drafted — Subject: "Only 8 left — your size is going fast 👗". Open rate prediction: 38% (vs 24% avg).

🔝 Headphone upsells: (1) ANC Carrying Case +$29, (2) USB-C Cable Pack +$19, (3) Ear Cushion Replacement +$24. Average attach rate for these: 31%.
ForgeAI · 9:15 AM
Theme Compare
Light mode for shoppers — dark mode for merchant dashboards.
☀️ Light Mode (Default)
--bg-base: #FFF8F8
--accent: #F43F5E
--text: #10030A
Font: Syne 800
🌙 Dark Mode
--bg-base: #0D0408
--accent: #FB7185
--text: #FFF0F2
Font: Syne 800
CSS Token Export
Complete ShopForge design token set.
/* ShopForge Design System v1.0 — Light Theme */
/* Backgrounds */
--bg-base: #FFF8F8;
--bg-surface: #FFFFFF;
--bg-elevated: #FFF0F2;

/* Accent — Conversion Red */
--accent: #F43F5E;
--accent-hover: #E11D48;
--accent-dim: rgba(244,63,94,0.09);

/* Typography */
--font-heading: 'Syne'; /* weight 800 */
--font-body: 'Manrope';
--font-mono: 'DM Mono';
/* Radius */
--radius-btn: 100px; /* pill */
SHOPFORGE DESIGN SYSTEM v1.0 · STUDIOFLOW.TOP · BUILT WITH ❤ BY APTOCODE