● Reckoneerhow it works
Reckoneer / Stage 5
Stage 5CaptureAutomatic

Style Guide Extraction

Stage 5 synthesizes everything captured in Stages 2–4 into a coherent design system. Rather than raw extracted values, it produces an organized, named style guide.

Output includes: a primary color palette (background, surface, text, accent colors with hex values), a typography scale (heading sizes and weights, body size, font families), a spacing scale (the base unit and derived multiples), border and shadow definitions, and recurring component patterns (card styles, button styles, nav patterns).

This style guide is written as a SHOPIFY-THEME-SPEC.md to the docs folder. It becomes the design specification that Stage 6 (Claude Design) and Stage 7 (Theme Build) work from.

Terms
Design system

A collection of reusable design decisions — colors, typography, spacing, components — documented and organized so they can be applied consistently across an entire site.

AnalogyA brand style guide for a site. Instead of making every design decision from scratch each time, you refer to the system: 'use the primary blue', 'use the H2 size', 'use the card component'.
OriginSystem: from Greek 'systema' (organized whole). Design system: an organized collection of decisions that work together as a whole.
Color palette

The defined set of colors used in a design, typically including: background color, surface color (cards, panels), primary text, secondary text, and one or more accent colors.

AnalogyA painter's chosen set of paint tubes for a project. Not every color that exists — just the specific ones selected to work together for this piece.
OriginPalette: from French 'palette' (small shovel), the board painters hold their paint on. In design: the curated set of colors for a project.
Typography scale

A defined set of font sizes and weights used consistently across a site: typically H1 through H4 headings, a body size, a small/caption size, and their corresponding font weights.

AnalogySheet music notation for text. Just as music has defined note sizes and values, a typography scale defines exactly how big and bold each level of text should be.
OriginTypography: from Greek 'typos' (impression) + 'graphia' (writing). Scale: from Latin 'scala' (ladder, steps). A ladder of defined, stepped sizes.