Mock Q · Theme settings — colors & typography

Two axes, twenty-five coherent combinations.

Color and typography are independent settings. Five schemes × five systems = twenty-five outputs that all hit AA contrast and look intentional. Token names are shared across schemes so the component CSS doesn't fork — every component reads var(--paper), var(--ink), var(--brand), var(--accent), regardless of which scheme is active. Typography works the same way through var(--font-heading), var(--font-body), var(--font-mono), var(--font-editorial).

Five color schemes by merchant archetype.

Named for the buyer, not the colors — a Theme Store browser picks "Forge" because their shop is heavy industrial, not because they want oxide red. Each scheme defines ten tokens covering surface, text, rules, brand identity, accent action, and the three semantic colors (ok, warn, danger) used for stock pills, form validation, and warranty badges.

Five typography systems as four-face stacks.

Each system defines four roles: heading (display + section), body (paragraph + UI), mono (specs, SKUs, code, technical metadata), and editorial italic (the one-italic-moment-per-page accent). All five systems are free Google Fonts, all self-hostable, all support the weight range the components need.

Sample combinations — different brand voices, same components.

Four of the more distinct pairings rendered as page snippets, demonstrating that the underlying component library reads correctly across each. Same buttons, same pills, same card layout — the merchant's brand voice changes, the structural decisions don't.

What the buyer sees in the theme editor.

Two settings panels under "Theme settings" — one for colors, one for typography — each with a preset picker, an advanced disclosure for individual overrides, and a live contrast warning when a custom combination drops below WCAG AA. The preset is the merchant's primary control; advanced is one tap away when they need it.

The preview panel re-renders in real time as the merchant changes the scheme dropdown. The contrast checker runs on save and flags any individual override that drops below AA, with a one-tap "revert this color" link. Section-by-section assignment is the third setting — most merchants won't touch it (default applies one scheme everywhere), but power users get the Skeleton/Horizon pattern of mixing schemes by section.

The CSS token system and the settings schema.

The component CSS reads from a shared token namespace; the active scheme rewrites those tokens. No --foundry-paper or --studio-ink in component code — only --paper and --ink, set by whichever scheme class is active on the section root.

CSS token contract — every component reads these, every scheme writes these:

/* Surface */
--paper          main background
--paper-soft     card backgrounds, alternating rows
--rule           primary horizontal/vertical rules
--rule-soft      subtle dividers, table row separators

/* Text */
--ink            primary text, headings
--ink-soft       secondary text, labels

/* Identity */
--brand          brand color · nav active, large titles, link
--accent         action color · primary CTA, key emphasis

/* Semantic */
--safety         warning state · amber pills, caution callouts
--ok             success state · in-stock, confirmed, valid
--danger         error state · out of stock, form errors

Scheme application — Skeleton's color_scheme_group setting writes these to a per-section root class:

/* assets/scheme-tokens.css — one rule per scheme */
.color-scheme-foundry {
  --paper: #F4F2EC;
  --ink: #0F1115;
  --brand: #003D79;
  --accent: #E2410E;
  --safety: #F2C200;
  --ok: #1F7A3A;
  /* ... etc */
}

.color-scheme-studio {
  --paper: #F5F5F7;
  --ink: #08090C;
  --brand: #0040FF;
  --accent: #FF3D00;
  /* ... etc */
}

/* Components are scheme-blind: */
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
}

Typography contract — same pattern, four roles:

.type-plex {
  --font-heading: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-editorial: 'Instrument Serif', Georgia, serif;
}

.type-industrial {
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-editorial: 'Fraunces', Georgia, serif;
}

Shopify settings_schema.json — the two settings panels:

[
  {
    "name": "Color schemes",
    "settings": [
      {
        "type": "color_scheme_group",
        "id": "color_schemes",
        "definition": [
          { "type": "color", "id": "paper", "label": "Surface" },
          { "type": "color", "id": "ink", "label": "Text" },
          { "type": "color", "id": "brand", "label": "Brand" },
          { "type": "color", "id": "accent", "label": "Accent" }
          /* ... safety, ok, danger, rules */
        ],
        "role": { "text": "ink", "background": { "solid": "paper" } }
      }
    ]
  },
  {
    "name": "Typography",
    "settings": [
      {
        "type": "select",
        "id": "type_system",
        "label": "Typography system",
        "options": [
          { "value": "plex", "label": "Plex System (default)" },
          { "value": "inter", "label": "Inter Stack" },
          { "value": "geist", "label": "Geist Series" },
          { "value": "industrial", "label": "Industrial" },
          { "value": "workhorse", "label": "Workhorse" }
        ],
        "default": "plex"
      },
      {
        "type": "font_picker",
        "id": "type_heading_override",
        "label": "Heading font (override)",
        "info": "Leave default to use the typography system above"
      }
      /* ... body / mono / editorial override pickers */
    ]
  }
]

Renders to — section root gets two classes from theme settings:

<section class="color-scheme-{{ section.settings.color_scheme }}
                          type-{{ settings.type_system }}">
  {% comment %} every component inside reads tokens, not literals {% endcomment %}
</section>