SWAGTRON SHOPIFY DESIGN SYSTEM

Colour tokens LIVE

The complete palette. There is no secondary brand colour — Concept's identity is near-black ink on white, with a single warm highlight and a small set of semantic states.

Semantic state pairs

Contrast matrix — computed

Typography LIVE

Inter throughout — headings and body share one family. The −3% letter-spacing on headings is load-bearing: it is what makes the store read as Concept rather than as generic Inter. Sentence case everywhere; the only all-caps in the system is the SWAGTRON wordmark. Inter is embedded in this file as woff2, because the artifact sandbox blocks external font requests.

Weights in use

Heading scale — per-section setting

Spacing & layout LIVE

The theme exposes section padding as a 0–120px slider in steps of 4. Design to that grid or the Shopify build will not match. Page canvas maxes at 1900px.

Shape & elevation LIVE

Buttons are fully rounded pills with a 2px border at 100% opacity and zero shadow. Cards carry a 10%-opacity shadow, no border, left-aligned text. Getting shadow wrong on a button is the fastest way to make a mock look un-Concept.

Elevation

Buttons — every state LIVE

Default is white text on ink with a 2px ink border. Hover is a straight invert. The state board below pins each state open so you can read them side by side; the row beneath it is live, so you can hover and tab through.

Primary — pinned states

Variants — live, hover them

Sizes

Inputs & form controls

Slightly rounded, 6px. These serve the email-signup section, the contact form, the sweepstakes entry placeholder, and the account templates in Batch 9.

Quantity, swatches, choices

Focus ring — light and dark SPEC on dark

The focus blue clears AA comfortably on white. On the ink surface it lands at 3.1:1 — passing the 3:1 non-text threshold by a hair. Rather than live on that margin, every interactive element on a dark or overlay surface gets a 2px white offset halo outside the blue ring. This is a design decision layered on the live token, not a token change.

Badges, labels & rating

The GIVEAWAY label is the one custom piece here. The theme drives product labels off the metafield theme.label plus a label background colour, so a giveaway badge is a real, buildable mechanism — not a mock-only flourish.

Rating

Product card — the primitive everything reuses

Card style, left-aligned text, no border, 10%-opacity shadow. Hover swaps to a second image with a crossfade and 1.1× zoom over 300ms, reveals the discount badge, and lifts the card. Hover the cards below — all three behaviours are live.

GIVEAWAY

−25%

Quick add

4.6

UrbanCruise E-Bike

$1,199.00$1,599.00

NEW

UrbanCruise — Night Build

$1,449.00

Campaign voice — dark tile, VISCERAL · KINETIC · RAW

SOLD OUT

GlideX Pro

$424.00

Back in stock soon

Heading highlight system — 7 styles + 5 scribbles LIVE names SPEC rendering

The theme names seven highlight styles and five scribble variants, plus an animated highlighted_reveal. The names and the Splitting.js character engine are confirmed from live source; the per-style keyframes were not isolatable, so the rendering below is drawn from the style names and is a design proposal. This is open question 2 in the spec.

Icon set SPEC

Single-weight line icons at 1.6px stroke, 24px box, round caps and joins — sized to the mobile-dock and header targets. Drawn as inline SVG so nothing depends on an external request.

Motion tokens LIVE

Read directly from the live theme's CSS custom properties. Nine motion families drive the whole store; the durations and easings below are the ones every one of them uses.

Live demos

Standard Section Token Set — "STS" LIVE

Every one of the theme's sections exposes this same block of settings. Model each section card with it, and only call out tokens that go beyond it. This is what makes the design system decompose cleanly into the Shopify editor.

/* every Concept section exposes these */
color_text            · text colour
color_background      · solid background
gradient_background   · overrides solid when set
color_highlight       · heading highlight fill
gradient_highlight    · gradient variant of the above
color_overlay         · media overlay colour
overlay_opacity       0–100%
padding_top           0–120px, step 4
padding_bottom        0–120px, step 4
divider               · top/bottom rule toggle
full_width            · edge-to-edge toggle
rounded               · rounded-corner toggle
heading size          title-sm | title-md | title-lg | title-xl
tracking-heading      -0.03em
heading tag           h1 | h2 | h3 | h4 | h5 | h6 | p

Companion asset folder

Ships alongside this sheet as swagtron-concept-batch0-assets.zip. Upload the folder to the SWAGTRON design session and reference every image by filename. External URLs will silently fail — the sandbox blocks them.

brand/swagtron-wordmark-black.png

product/urbancruise-profile-transparent.png

product/urbancruise-hero-square-black-bg.jpg

product/urbancruise-hero-white-bg.jpg

product/urbancruise-base-plate.jpg

banners/campaign-banner-1.jpg

banners/campaign-banner-3.jpg

creators/austin/SWAGTRON-27.jpg

creators/austin/SWAGTRON-118.jpg

The raw token block

Copy this into any downstream surface — a SWAGTRON design prompt, a CLAUDE.md, a theme file, a Tailwind or shadcn config. It is library-agnostic and maps onto CSS custom properties without rework.

:root{
  /* — Color ————————————————————————————————— */
  --color-ink:              #171717;  /* text · button fill · drawer text · overlay base */
  --color-bg:               #ffffff;  /* page background · drawer/panel background */
  --color-image-surface:    #fafafa;  /* media placeholder · image backing */
  --color-highlight:        #ffddbf;  /* text-highlight · accent fills */
  --color-focus:            #0b61cd;  /* keyboard focus ring */
  --color-shadow-accent:    #a8e8e2;  /* decorative shadow accent ONLY */
  --color-sale:             #e11d48;  /* sale price · sale/urgency tag bg (white text) */
  --color-rating:           #f59e0b;  /* star rating amber */
  --color-success:          #4d7c0f;
  --color-success-bg:       #f7fee7;
  --color-error:            #be123c;
  --color-error-bg:         #fff1f2;
  --color-info:             #b45309;
  --color-info-bg:          #fffbeb;

  /* — Typography ———————————————————————————— */
  --font-heading-family:    'Inter', system-ui, -apple-system, sans-serif;
  --font-body-family:       'Inter', system-ui, -apple-system, sans-serif;
  --font-heading-weight:    700;
  --font-body-weight:       400;
  --font-nav-weight:        500;   /* navigation · buttons · product titles */
  --font-body-size:         16px;
  --line-height-heading:    1.0;
  --line-height-body:       1.2;
  --tracking-heading:       -0.03em;   /* −3% — never drop this */

  /* heading size scale (per-section setting: title-sm / md / lg / xl) */
  --title-sm:  1.5rem;    /* 24px */
  --title-md:  2.25rem;   /* 36px */
  --title-lg:  3.25rem;   /* 52px */
  --title-xl:  4.5rem;    /* 72px */

  /* — Spacing ——————————————————————————————— */
  /* theme section padding scale: 0–120px, step 4 */
  --space-0:0px;   --space-1:4px;   --space-2:8px;   --space-3:12px;
  --space-4:16px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-30:120px;

  /* — Layout ———————————————————————————————— */
  --page-max-width:         1900px;   /* theme max content width */
  --container-narrow:       1200px;

  /* — Shape ————————————————————————————————— */
  --radius-button:          9999px;   /* fully rounded / pill */
  --radius-input:           6px;      /* slightly rounded */
  --radius-card:            12px;     /* cards · swatches · content blocks */
  --radius-badge:           4px;
  --border-button:          2px;      /* 2px @ 100% opacity */

  /* — Elevation ————————————————————————————— */
  --shadow-button:          none;                          /* buttons: ZERO shadow */
  --shadow-card:            0 4px 16px rgba(23,23,23,.10);  /* 10% opacity */
  --shadow-card-hover:      0 10px 28px rgba(23,23,23,.14);

  /* — Motion ———————————————————————————————— */
  --duration-medium:        200ms;
  --duration-default:       300ms;
  --duration-long:          500ms;
  --duration-extra-long:    600ms;
  --duration-slow:          800ms;
  --duration-extended:      3s;
  --ease-out-slow:          cubic-bezier(0, 0, 0.3, 1);
  --cubic-out:              cubic-bezier(0.5, 1, 0.89, 1);
  --stagger-step:           75ms;   /* calc(var(--animation-order) * 75ms) */
  --duration-marquee:       1.5s;
}

SWAGTRON SHOPIFY DESIGN SYSTEM · Batch 0 canonical token sheet · generated 2026-07-27 · tokens from the live v6.0.0 store, 2026-07-13 · motion from the live theme CSS · self-contained, zero external requests.