380+ Variables
Surface, text, border, radius, spacing. All structured, all bound.
ShopFront — The design + code system for ecommerce
Ecommerce design and code, governed as one system.
The source of truth for how ecommerce UI is built, changed, and kept aligned — across design, code, and AI.
- Tokens enforced, not suggested
- Components instantiated, not redrawn
- Design + code in parity — by default
- Shopify is one output — not the system
Live component instance
This isn't a
design of a card.
It's the card.
Toggle properties. Change the ratio. Every control maps to a real component property enforced by the system — the same one a designer uses in Figma and a developer reads in code.
Tokens aren't styling. They're control.
New
+4
Product Name
A short description about the product.
$50
231 in stock
Component
Cards / Product Card Master
imageRatio
Boolean props
onSale
showWishlist
show_quick_add
show_variant_options
show_rating
show_vendor
show_description
show_sku
show_price
show_availability
show_compare
Shopify is an output, not the system
Tokens define the system.
Shopify is one way it ships.
ShopFront tokens exist independently of any tool. For Shopify projects, they map directly to theme scheme variables — so design decisions land in code without a translation layer. For anything else, the same tokens resolve cleanly to the next target.
For design teams
Work once. Ship anywhere the system supports.
Every token — surface, text, border, radius, spacing — is system-owned. When you change it, every output changes with it. No per-project reconciliation.
For development teams
Handoff without interpretation.
Naming is structural, not decorative. A developer reads a token and knows the role, the scheme slot, and the behavior — without asking. Fewer rounds. Fewer interpretation errors.
Push the system anywhere
One source of truth.
Many targets.
The system lives independent of any tool. Push its tokens, components, and rules into whatever surface your team works in — or into new ones as you adopt them.
Figma
Variables, components, and section masters — pushed via the ShopFront plugin, bound to live tokens, never detached.
Shopify
Tokens mapped to theme scheme variables and settings. No translation layer between design and what ships.
Your code repo
React component library with typed props and bound CSS vars. Drop into your app, storefront, or admin — governed by the same system.
Other design tools
Token output is tool-agnostic. Sync to Sketch, Penpot, Framer, or whatever the team moves to next — the system doesn't move with the tool.
AI + agentic tools
Exposed via CLI and MCP server. Claude, Cursor, and your own agents generate UI inside the system's constraints — not outside them.
The system isn't locked to a vendor. It's locked to your brand, your rules, and your token definitions — portable forward.
What most projects skip
The foundation
every team cuts
when the clock starts.
Variable setup. Metaobject schemas. Token-to-scheme mapping. Component documentation. These are the first things descoped on a Shopify build — and the reason inconsistency shows up six months later.
ShopFront ships with this layer already solved. The project starts above the floor most teams never reach.
✓
Variable setup
Surface roles, state tokens, and scheme variables — structured and named from day one.
✓
Metaobject mapping
Schema definitions and section mappings — the silent complexity that burns hours per project.
✓
Token → scheme output
Every design decision maps to a Shopify theme setting. No translation step.
✓
Component documentation
Usage rules and variant logic included. Not deferred to whoever has time.
What's inside the system
Every layer
of the stack —
governed.
Variables, tokens, components, blocks, sections, templates. Each layer answers to the same rules. Change one; everything downstream stays in alignment.
Most design systems drift. This one enforces alignment.
Token → scheme mapping
Token
Scheme
Surface/Canvas/primary
→
background_1
Text & Icon/primary
→
color_scheme.text
Surface/Buttons/primary
→
button_label
Border/Controls/focus
→
color_scheme.accent
Settings/Radius/Button
→
input_border_radius
Design decisions map to Shopify theme settings
Design Tokens
Semantic roles that resolve cleanly to any supported target.
131 Components in code
Atoms, molecules, and blocks — React parity of the Figma file, same tokens and prop names.
Section Masters
Page-level layouts with governed grid, padding, and content swap.
Block Architecture
Content and media compositions with surface variants.
Theme Templates
Dawn, Horizon, Broadcast — each built from the same system.
One system. Every stage.
From wireframe
to production UI.
Start with structure. Apply tokens. The same components move from sketch to shipped — no rebuild, no translation step, no drift between what was designed and what gets built.
Wireframe in under a minute. Final design in about an hour. Same system, top to bottom.
Every element is tied to a governed variable, style, or component — not a one-off design decision.
Two audiences. One system.
Whether you build stores
or you are the store.
Same foundation. Different leverage. Licensed separately for agencies and brands.
Tools change. Your system shouldn't.
For agencies
Stop rebuilding a system for every client.
- Start every project above the foundation most teams never reach
- Ship more work without growing headcount
- Purchase client licenses directly through us
- New designers operate inside guided structure from day one
- Productize your offer — retainers around a real system
- Cut premature redesigns and design debt out of the cycle
Agency partners are approved via contract. Once approved, purchase a license per project or brand directly through us.
Apply for agency partnership →
For brands
Own how every partner touches your brand.
- Every vendor and team operates inside the same system constraints
- Token enforcement keeps brand intact as the org scales
- Design maps cleanly to Shopify — fewer errors, fewer rounds
- Pivot without triggering a full redesign
- Direct control over AI-generated output — no free-form drift
- Tool-agnostic — ready for headless, migration, or the next platform
Brands can purchase a license directly — no approval process required.
Buy a license →
New — self-serve access
Spin up on-brand landing pages in Figma — with AI, inside the system.
Design teams work directly against the ShopFront library. AI assembles the page inside the system's constraints — tokens, components, section masters — not outside them. Output maps cleanly to Shopify sections.
- AI-speed assembly — brief to frame in minutes, no free-form drift
- Every component stays wired to the live system — nothing detached
- Change a token once, every page downstream updates
- Precision control at every layer — brand, block, component
- Native Shopify sections out — no builder lock-in, no retrofit
ROI Calculator
What does it cost
to not run on a system?
Enter your numbers. See what drift, rework, and tool-by-tool fixes actually cost across design, development, and ongoing usage.
01
Design
ShopFront saves ~50 hrs / project
$125/hr
6
02
Development
Better specs save ~25 hrs / project
$150/hr
03
System maintenance
~12 hrs / month staying in sync
$125/hr
Design savings
$30,000
Development savings
$13,500
System maintenance
$12,000
Total annual value
$55,500
License cost
Per project
Est. net return (yr 1)
$55,500+
Conservative estimates across design, dev, and system overhead. Excludes QA savings, revision cycles, consistency at scale, and the foundational work — variable setup, metaobject schemas, token mapping — most projects never finish. Those are the costs of not running on a system.
Get access →
The right foundation
on day one.
ShopFront gives design and development teams the structure to move fast, stay aligned, and build across Shopify — and beyond — without drifting from the system.