DS CONFIGURATOR
Workspace

Typography ▾
Font Families 3 roles ▾
Heading Settings/Font/heading
300
400
500
600
700
800
900
Body Settings/Font/body
300
400
500
600
700
800
Accent Settings/Font/accent
Type Styles H1 48px · Body 16px ▾

Token groups stack as accordions — expand only the roles you are editing.

Color ▾
Primary #6366F1 ▾
Ramp 500
Secondary #8B5CF6 ▾
Ramp 500
Accent #EC4899 ▾
Ramp 500
Neutrals #737373 ▾
Ramp 500
Type colors — ▾

Primary, secondary, and link each map to one step on Neutrals or Primary / Secondary / Accent — no separate hex. Pick a ramp, then a swatch.

Primary text
Secondary text
Link
Focus — ▾

Maps to Figma Surfaces/Status/focus and preview / export token --sf-surface-status-focus. Same ramp UI as type colors. Sets --pv-focus as the global focus color.

Status / focus
Surfaces — ▾

One ramp step per row (Neutrals or Primary / Secondary / Accent). Sets --pv-surface (page), --pv-surface-card (raised / cards), --pv-preview-chrome (preview gutter). Does not set --pv-surface-alt or --pv-preview-shell.

Page
Raised
Chrome
Buttons — ▾

Filled primary/secondary (fill, hover, text & icon), outline (text + border), and disabled map to ramp steps. Live preview uses --pv-btn-* (falls back to brand ramps if unset).

Primary
Fill
Hover
Text & icon
Secondary
Fill
Hover
Text & icon
Outline
Text
Text hover
Border
Border hover
Disabled
Fill
Label
Disabled preview
Shape & type
Radius
Type style
Controls — ▾

Fields and search use DS Field–style tokens (--pv-ctrl-*) and shared input corner radius (--pv-r-input). Selected maps to Figma Surfaces/Status/selected (controls surface + border selected). Unset rows fall back to surfaces and type ramps.

Colors
Surface
Fill
Fill · disabled
Border
Default
Hover
Disabled
Text
Value
Placeholder
Disabled
Radius

Corner radius for text fields and search. Same token as Radius → Input (--pv-r-input).

Corner radius
px
Sale — ▾

Three ramps for merchandising accents. Defaults lean Primary / Secondary / Neutral — tune seeds so Secondary reads green if you use that convention. Sets --pv-sale-primary, --pv-sale-secondary, --pv-sale-neutral (product sale tag + PDP % badge). Use the hex field to pin an exact color; choosing a ramp chip again uses the ramp.

Primary
Secondary
Neutral
Badges — ▾

Solid, tint, neutral, and Sale (semantic promo) badges each use a background and label ramp step. Tokens --pv-badge-* feed the strip below, the hero badge row, product New tags, Out of stock pills, the header cart count, and the grid Sale pill (via --pv-badge-sale-*, falling back to Color → Sale ramps).

Solid · fill
Solid · label
Tint · fill
Tint · label
Neutral · fill
Neutral · label
Sale · fill
Sale · label
Review stars — ▾

Star active is the filled-star color—think of it like choosing Primary for a key accent: any ramp step or a State token (same seeds as States below). Star inactive is usually a Neutral step so empty stars read as a quiet track, but you can point it at Primary, Accent, or State instead if you want a more distinct “empty” star. Matches Figma Review Stars in Colors.

★★★★★
States ▾

Four semantic state seeds (UI feedback). Each row is one state; the ramp under it is tint → on-tint for that hue.

SuccessGreen
WarningAmber
ErrorRed
InfoBlue
Web compliance WCAG ▾

When enabled, only text preview tokens are nudged for contrast on surfaces (brand fills/links stay on-ramp so the UI does not wash to charcoal). Use Snap on a row to move a specific ramp step to the nearest passing color.

Card Styling ▾

General theme defaults for cards in this preview. Per-card controls below—or component specs and designer choice—can override.

Radius 8 values ▾
Category / Collection Cards PLP tiles ▾

Layout, ratio, and spacing for category/collection tiles will bind here to the same tokens used in Figma and code.

Product Cards D:12px · M:8px ▾

Changes apply to the product grid in the preview →

Radius
Desktop
Mobile
Media corners
Top
Bottom
Content inset
Desktop
Mobile
Product Card Variants Swatches · layout ▾

Variant strip density, overflow, and grid vs rail behaviors will be configured here against product card component props.

Offer Cards Promo ▾

Offer / promotion card surfaces and CTAs will map to governed tokens when this block is wired.

Testimonial Cards Quote · layout ▾

Testimonial and overlay variants (spacing contract, surface, media) will be exposed here to match the testimonial component sets.

Article Cards Editorial ▾

Article / blog card typography, image ratio, and meta rows will bind here.

Content Cards D:24px · M:16px ▾

Changes apply to the hero / split block in the preview →

Radius
Desktop
Mobile
Media corners
Top
Bottom
Content inset
Desktop
Mobile
B2B Content Cards Trade ▾

B2B content card layout (thumbnail split, dual CTAs) will use the same token keys as the B2B content card block in code.

Video UGC Cards Reels · embed ▾

Aspect ratio, play affordance, and caption treatment for UGC / video cards will bind to media and control tokens.

Miscellaneous Cards Catch-all ▾

One-off or composite card patterns that still need governed defaults can land here until they graduate to a named type.

Grid ▾
Spacing System Base 4px · 12 steps ▾
Base value
base
Section Spacing Inherits page margins ▾
Sections inherit page margins by default. XL overrides add extra breathing room for hero and feature sections.
Desktop
Top / Bottom
px
Top / Bottom XL
px
Left / Right
px
Left / Right XL
px
Mobile
Top / Bottom
px
Top / Bottom XL
px
Left / Right
px
Left / Right XL
px
Product Grid ▾
Grid 12 col · 24px gutter ▾
Desktop
px
col
px
px
Mobile
col
px
px
ShopFront DS° — v2.1
Live Preview
Scheme 1
Scheme 2
New Collection — Spring 2026
Designed for the way you live
Every piece is built to last — from the stitching to the hardware. Ethically sourced, thoughtfully made.
New
Footwear
Classic Low Trainer
★★★★★ 4.8 (124)
$128 $160
Out of stock
Outerwear
Insulated Field Jacket
★★★★★ 4.3 (67)
$245
Sale
Accessories
Canvas Tote Bag
★★★★★ 4.9 (203)
$48 $64

“Shipping was fast and the quality beat the photos. This is my second order—everything feels built to last.”

Morgan Reid
Verified buyer · Portland
Footwear
Classic Low Trainer
★★★★★ 4.8 124 reviews
$128.00 $160.00 20% off
Color — Midnight
Size
1
Free shipping on orders over $100 · Easy returns
Secure checkout
30-day returns
Ships same day
Members only
Early access & 10% off
Join the list for new arrivals, exclusive drops, and insider pricing before anyone else.