IronShield Army | Design System | v2.0 | April 2026

Forged tokens.
Resin-detailed UI.

Reference library and cheat-sheet for styling ironshieldarmy.com. Every token has a CSS variable, an exact value, a clear purpose, and a ready-to-paste snippet.

Body: Inter Display: Inter Bold 700 Accent: #C6682D Base grid: 4px Page width: 1200px

00 How to use

Reading the cheat sheet

Every token below is also a real CSS custom property loaded globally at assets/ironshield-ds-tokens.css. Reference it by variable name in any Liquid section or snippet no imports needed.

/* In any section.liquid or snippet */
.my-hero-title {
  font-family: var(--ish-font-display);   /* Inter Bold 700 */
  font-size:   var(--ish-text-display);   /* fluid clamp(2rem, 1.3rem + 2.8vw, 3.5rem) */
  color:       var(--ish-fg);
  letter-spacing: var(--ish-ls-wide);
}

.my-hero-cta {
  background:  var(--ish-accent);
  color:       var(--ish-fg-inverse);
  padding:     var(--ish-space-3) var(--ish-space-8);
  border-radius: var(--ish-radius-md);
  transition:  background var(--ish-motion-base) var(--ish-ease-standard);
}

Or use pre-built component classes (.ish-btn, .ish-chip, .ish-card) that already compose the tokens correctly see section 08 Components.

01 Color

Copper on forge

Copper #C6682D does every bit of persuasion CTAs, sale, links, focus, active filter. Neutrals structure. The three fantasy surfaces (parchment, mystic, forge) give dramatic blocks their mood.

Brand

Accent (copper)
--ish-accent
#C6682D | rgb(198, 104, 45)
Use for: Primary CTAs, sale price, active filter chips, link hover, focus rings, section kickers, brand strokes. Never for: body text, backgrounds larger than a badge.
Accent 600
--ish-accent-600
#A7551F
Use for: Hover state of copper CTA/link. Never for: default-state anything always pair with --ish-accent as the resting color.
Accent 300
--ish-accent-300
rgba(198,104,45,0.35)
Use for: Soft focus-ring halo, hover glow around inputs, copper tint over images. Part of --ish-focus-ring.
Accent 100
--ish-accent-100
rgba(198,104,45,0.10)
Use for: Subtle card hover tint, quantity-button hover, inline code background. Never full backgrounds too weak.
Blue
--ish-blue
#334FB4
Use for: Secondary badges (New), secondary dynamic-checkout button, informational banners. Never for: primary CTAs that's always copper.
Blue Dark | Mystic
--ish-blue-dark
#172351
Use for: "Rare" tier badge, deep-indigo hero panels, arcane-themed section backgrounds.

Foreground / text

FG primary
--ish-fg
#121212
Use for: Body text, headings (default), icon fills. Contrast vs white = 17.1:1 (WCAG AAA).
FG 75
--ish-fg-75
rgba(18,18,18,0.75)
Use for: Secondary body text, shipping note on PDP, footer links. Contrast vs white = 9.6:1.
FG 55
--ish-fg-55
rgba(18,18,18,0.55)
Use for: Captions, vendor label, meta info, placeholder text. Minimum for legible body copy.
FG 10
--ish-fg-10
rgba(18,18,18,0.10)
Use for: Hair borders, ornamental dividers, section separators. Part of --ish-border-hair.
FG inverse
--ish-fg-inverse
#FFFFFF
Use for: Text on dark surfaces (forge, mystic, copper buttons). Always paired with one of the dark surfaces.

Surfaces / background

BG primary
--ish-bg
#FFFFFF
Default page background. 90% of screen real estate.
BG alt
--ish-bg-alt
#F5F5F5
Use for: Card backgrounds, subtle section separators, skeleton loading states.
Parchment
--ish-bg-parchment
#F7F0E4
Use for: Trust row on PDP, DM-tip callouts, lore/rules cards, printable-feel blocks. Warm paper aesthetic.
Mystic
--ish-bg-mystic
#172351
Use for: Deep-arcane hero panels, mystery-box callouts, indigo/spellcaster-themed collection headers.
Forge
--ish-bg-forge
#0F0E0D
Use for: Drama blocks homepage hero, footer, announcement bar. Near-black avoids pure #000 harshness.

Semantic

Sale
--ish-sale
#C6682D
Alias of --ish-accent. Sale price, sale badges, discount chips.
Star
--ish-star
#FFAD00
Judge.me review stars only. Don't repurpose users read the color as "rating".
Success
--ish-success
#27AE60
Cart notification success, "in stock" marker, form confirmation toasts.
Error
--ish-error
#C0392B
Form validation errors, "out of stock" flag, destructive action warnings.
Warning
--ish-warning
#E67E22
"Only 3 left" low-stock ping, pre-order ETA banners. Visually between accent and error.

02 Typography

Inter - one font, many weights.

Inter Bold 700 is reserved for brand moments hero H1, section openers, product titles on PDP. Inter carries 90% of text. Use font-display: swap (Google Fonts handles this) to avoid FOIT.

Families

--ish-font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;         /* hero H1, brand marks */
--ish-font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;   /* 90% of text */
--ish-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;    /* code, specs */

Scale

Inter Display
name --ish-text-display
family Inter / Bold (700)
size clamp(2rem, 1.3rem + 2.8vw, 3.5rem)
letter-sp 0.06em (--ish-ls-wide)
line-ht 1.1 (--ish-lh-tight)
use for Hero H1, homepage mega-title, landing pages
Inter H1
name --ish-text-heading
family Inter / Bold (700)
size clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem)
letter-sp 0.04em
line-ht 1.1
use for Section opener, PDP product title, collection hero
Inter H2 heading
name --ish-text-3xl
family Inter / Semi Bold (700)
size 2rem | 32px
letter-sp normal
line-ht 1.15
use for Secondary section titles, modal headers, cart summary
Inter H3 subheading
name --ish-text-2xl
family Inter / Semi Bold (700)
size 1.5rem | 24px
line-ht 1.3
use for Card titles, accordion headers, filter group labels
Inter H4 | lg
name --ish-text-lg
family Inter / Semi Bold (700)
size 1.125rem | 18px
use for PDP price, cart line item titles, hero subtitle
Body text. Product descriptions, blog posts, general reading. Line-height 1.5 gives comfortable flow, max 65ch for scannability. This is the workhorse of the system 70% of text on the site.
name --ish-text-base
family Inter / Regular (400)
size 1rem | 16px
line-ht 1.5 (--ish-lh-normal)
max-width 65ch for long-form reading
use for Body text, descriptions, form values, navigation
Small | sm | 14px for meta, secondary buttons, filter labels
name --ish-text-sm
size 0.875rem | 14px
weight 500 medium
use for Chip labels, form helper text, breadcrumbs, price compare
Caption | xs | 12px for vendor label, captions, timestamps, price taxes
name --ish-text-xs
size 0.75rem | 12px
weight 400 regular
use for Vendor tag, timestamp, fine print, legal disclaimer
Forged for legends | kicker
name section kicker
size 0.8125rem | 13px
weight 600 semi-bold
letter-sp 0.18em (--ish-ls-widest)
transform uppercase
color --ish-accent
use for Every section opener, PDP vendor, PDP category eyebrow

03 Spacing

4-point grid

All spacing lands on multiples of 4px. Predictable, easy to remember, plays nicely with Shopify's page-width units.

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px

Usage rules

--ish-space-1 | 4px
Icon-to-label gap inside a chip. Gap between tight inline elements. Never as section padding.
--ish-space-2 | 8px
Gap between button icon and label. Gap between chip and chip. Small component inner padding.
--ish-space-3 | 12px
Vertical rhythm between stacked small elements (price + compare, label + value).
--ish-space-4 | 16px
Default component padding. Card inner padding, form group gap, trust-row item padding.
--ish-space-6 | 24px
Grid gap between product cards. Modal padding. Gap between form sections.
--ish-space-8 | 32px
Vertical gap between major on-page sections. CTA padding-x on large buttons.
--ish-space-12 | 48px
Hero-to-content gap on mobile. Full-section vertical rhythm on narrow viewports.
--ish-space-16 | 64px
Section padding-top/bottom on tablet+. Hero padding on mobile.
--ish-space-20 | 80px
Section padding on desktop. Hero padding-top on desktop. Footer padding.

04 Radius

Sharp or pill nothing in between

Cards, buttons, inputs stay sharp (md, 4px). Chips and variant pills go full pill (999px). No soft random rounds.

--ish-radius-0
Product images, theme-level hero images
--ish-radius-sm | 2
Badges, savings chips, micro-labels
--ish-radius-md | 4
Default. Buttons, inputs, modals, cards, quantity selector
--ish-radius-lg | 8
Feature cards, popover, dropdown menu
--ish-radius-xl | 14
Hero pills, dialog container, image mask on illustrations
--ish-radius-pill | 999
Filter chips, class chips, variant pills, tag pills, avatar

05 Shadows

Four-step elevation, copper focus

Subtle elevation the products carry the drama. Focus rings are always copper-based, never neutral.

--ish-shadow-xsInset on menu items, subtle definition
--ish-shadow-smAnnouncement bar, small alerts
--ish-shadow-mdSticky ATC bar, cards at rest, dropdowns
--ish-shadow-lgModals, drawers, flyout cart
--ish-shadow-glowInput focus halo (soft ring)
--ish-focus-ringButton/link focus (dual ring, AA)

06 Motion

Fast, predictable, respects reduced-motion

Three timing steps, two easings. Nothing over 320ms. Always wrap with @media (prefers-reduced-motion: reduce).

--ish-motion-fast 120ms Button press / micro (transform, active state)
--ish-motion-base 180ms Default. Hover, color change, background swap, chip state
--ish-motion-slow 320ms Drawer slide-in, sticky ATC reveal, modal open, image hover zoom
--ish-ease-standard cubic-bezier(0.2, 0, 0, 1) Default ease. Natural deceleration without overshoot.
--ish-ease-emphasis cubic-bezier(0.3, 0, 0, 1.15) Small overshoot for emphasis. Use sparingly on pop-ins, success states. 
/* Standard usage */
.my-button {
  transition:
    background var(--ish-motion-base) var(--ish-ease-standard),
    transform  var(--ish-motion-fast) var(--ish-ease-standard);
}

/* Always include */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

07 Layout

Breakpoints & containers

Mobile-first. Main content maxes at 1200px, centered, with fluid gutters.

Breakpoints

Mobile
< 750px
Single-column stack. Cards full-width. Tap targets 44px.
Tablet
750px 989px
23 col grids. Collection banner side-by-side. Sticky headers.
Desktop
990px 1199px
4-col product grid. Full nav. Hover states active.
Wide
1200px
Page width capped. Extra padding, larger hero illustrations.

Container

--ish-page-width:  1200px;              /* max content width */
--ish-page-gutter: clamp(16px, 4vw, 40px); /* horizontal padding */
--ish-grid-gap:    20px;                /* product card gap */

/* Standard wrapper */
.page {
  max-width: var(--ish-page-width);
  margin: 0 auto;
  padding: 0 var(--ish-page-gutter);
}

Z-index stack

--ish-z-base 1 Default flow elements
--ish-z-header 50 Sticky header
--ish-z-dropdown 100 Nav dropdown, filter dropdown
--ish-z-sticky-atc 200 Sticky ATC bar on PDP
--ish-z-overlay 900 Backdrop behind modal / drawer
--ish-z-modal 1000 Modal content, cart drawer
--ish-z-toast 1100 Toast / cart notification always on top

08 Components

Drop-in atoms

Pre-composed classes prefixed .ish-*. Copy the HTML snippet directly into any Liquid section.

Buttons .ish-btn + variant + size

<!-- Primary  |  copper solid -->
<button class="ish-btn ish-btn--primary">Add to cart</button>

<!-- Ghost  |  outlined -->
<button class="ish-btn ish-btn--ghost">Read more</button>

<!-- Forge  |  gradient hero CTA -->
<button class="ish-btn ish-btn--forge ish-btn--lg">FORGE YOUR ARMY</button>

<!-- Full-width, e.g. ATC on PDP -->
<button class="ish-btn ish-btn--forge ish-btn--lg ish-btn--block">Add to cart</button>

Rule: one primary per section. Forge variant only on hero + final PDP CTA. Never two forge buttons side by side.

Chips (filter/class) .ish-chip

Fighter Ranger Paladin Barbarian Wizard / Sorcerer Monster 
<a class="ish-chip" href="/collections/all?filter.p.m.custom.class=Fighter">Fighter</a>
<a class="ish-chip ish-chip--active" href="...">Paladin</a>

Badges .ish-badge + variant

Sale New Rare DM Pick 30% Limited 
<span class="ish-badge ish-badge--sale">Sale</span>
<span class="ish-badge ish-badge--new">New</span>
<span class="ish-badge ish-badge--rare">Rare</span>     /* mystic indigo bg */
<span class="ish-badge ish-badge--outline">Limited</span>

Rule: maximum one badge per product card. Use outline for contextual tags (limited, bundle), solid for status (sale, new).

Price .ish-price

12.90
8.90 12.90 31% 
<!-- Regular -->
<div class="ish-price">
  <span class="ish-price__value">12.90</span>
</div>

<!-- On sale -->
<div class="ish-price">
  <span class="ish-price__value ish-price__value--sale">8.90</span>
  <span class="ish-price__compare">12.90</span>
  <span class="ish-price__savings">31%</span>
</div>

Input .ish-input

<input class="ish-input" type="email" placeholder="...">

Variant pill (scale) 40px radius-pill

Selected state = solid --ish-fg bg. Disabled = 50% opacity + line-through.

Quantity selector

Trust row parchment bg, copper dots

Handcrafted in Poland 12K/14K resin detail Free EU shipping 49+ 4,005+ DMs served Ships in 57 days 
<div class="ish-trust-row">
  <span class="ish-trust-row__item">Handcrafted in Poland</span>
  <span class="ish-trust-row__item">12K/14K resin detail</span>
  <span class="ish-trust-row__item">Free EU shipping 49+</span>
  ...
</div>

Where: PDP between Judge.me stars and ATC button. Homepage below announcement bar. Never duplicate on the same page.

Announcement bar .ish-announce

FREE SHIPPING EU 49+ | LIMITED 30% OFF | MYSTERY BONUSES

Ornamental divider .ish-divider

VII | Volumes of the Codex

Product card .ish-card

Sale
Leopold
Paladin | 32mm
8.90 12.90
DM Pick
Zelitha
Ranger | 32mm
15.50

09 Accessibility

Non-negotiable rules

Every component passes WCAG 2.1 AA. When in doubt, test with keyboard only.

4.57
Accent on white
ratio 4.57 : 1 | AA
OK for large text & UI components. Not safe for body copy <18px. Pair copper with white/forge never on gray.
17.1
FG on white
ratio 17.1 : 1 | AAA
Safe for all text sizes. Default body text combo.
18.5
White on Forge
ratio 18.5 : 1 | AAA
Hero, footer. Perfect readability.

Checklist

  • Every interactive element has a visible :focus-visible state using --ish-focus-ring.
  • Minimum tap target = 4444px (WCAG 2.5.5). Chips (36px) are OK only when spaced 8px.
  • All motion wrapped in @media (prefers-reduced-motion: reduce) disable block.
  • Color is never the only signal sale price also gets font-weight: 600 + "31%" chip.
  • Images have alt that describes the figure, not "product" or "image".
  • Form fields have visible labels (not just placeholder).

10 Principles

When in doubt

  1. 01Function beats decoration. Fantasy comes from the product imagery, not the UI chrome.
  2. 02Inter carries everything. Weight 700 stays special hero H1, section openers only.
  3. 03Copper, not gold. #C6682D. Feels forged, not gilded.
  4. 04One accent per screen area. No accent-on-accent collisions.
  5. 05Motion 320ms. Always respect reduced-motion.
  6. 06No new tokens inline. Extend the token file never hardcode copper in a new section.
  7. 074-point grid or bust. Every margin/padding is a multiple of 4px.