DS CONFIGURATOR
Workspace

Sync to Figma
2 · Token Authority — who wins on token values?
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 ▾
Core Color ▾
Primary #6366F1 ▾
Ramp 500
Secondary #8B5CF6 ▾
Ramp 500
Accent #EC4899 ▾
Ramp 500
Neutrals #737373 ▾
Ramp 500
Type colors — ▾

Primary, secondary, accent text, and link each map to one step on Neutrals or Primary / Secondary / Accent — no separate hex. Pick a ramp, then a swatch. Accent text drives preview / export --sf-text-accent (e.g. eyebrow labels).

Primary text
Secondary text
Accent text
Link
Surfaces — ▾

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

Page
Raised
Color ▾
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
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.

Buttons ▾
Primary ▾
Fill
Hover
Text & icon
Text & icon hover
Brand ▾
Fill
Hover
Text & icon
Text & icon hover
Outline ▾

The checkered chip on Fill / Fill hover / Outline fill (disabled) means transparent — border-only outline on default state when you want no fill.

Text
Text hover
Fill
Fill hover
Border
Border hover
Disabled ▾
Fill
Outline fill
Label
Shape & type ▾
Radius
Type style
Controls ▾
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.

Control color
Colors
Surface
Fill
Fill · disabled
Status
Selected
Border
Default
Hover
Focus
Disabled
Text
Value
Placeholder
Disabled
Control radius

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

Corner radius
px
Card Styling ▾
Radius 8 values ▾
Content Cards D:24px · M:16px ▾

Sets global spacing and corners for hero, split, and editorial content cards. Specialized patterns below inherit these tokens until you add overrides (booleans, density, media).

Radius
Desktop
Mobile
Media corners
Top
Bottom
Content inset
Desktop
Mobile

Fine-tuning

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.

Category / Collection Cards ▾

Global defaults only: this rail writes semantic --sf-* tokens on :root for every category / collection tile. Per-component choices (Filled vs Transparent, border mode, paddings per instance, media ratio inside a block) live on each component in the design system inspector and in Figma—not here. Colors use the Neutrals ramp below (matches Type / Surfaces swatches).

Corners, surface & density D:4px · M:2px ▾
Radius
Desktop
Mobile
Surface fill
Mode
Fill color
Outline
Border
Border color
Hover border
Content density
Inset & gap
Media ratio
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
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.