[Design] Refresh visual system and theme style guide

[hta218]

Context

Maison needs a refreshed premium visual system before dev starts implementing the new theme direction. This task should build on the design audit and premium positioning task.

Goal

Create a clear visual system for Maison as a luxury fashion / editorial / premium boutique Hydrogen theme.

Scope

Define the core visual design system:

• Typography hierarchy for headings, body, captions, labels, product information, and editorial copy
• Color palette with primary, secondary, background, surface, border, sale/error/success, and muted states
• Button styles and states: primary, secondary, link, disabled, loading
• Form/input styles: text fields, selects, checkboxes, quantity controls, validation states
• Product card styles: image ratio, hover behavior, badges, pricing, vendor/title hierarchy, swatches
• Section spacing rules for desktop/tablet/mobile
• Header/footer visual treatment
• Radius, shadow, border, and divider rules
• Mobile visual rules and safe spacing

Deliverables

• Figma style guide for Maison
• Core component states for buttons, inputs, cards, badges, and navigation
• Notes explaining why the system fits Maison's premium positioning
• Before/after notes against the current design

Non-goals

• Do not implement code in this task.
• Do not redesign every page here; this defines the shared system used by follow-up page designs.

Acceptance criteria

• Figma style guide link is added to this issue.
• Typography, color, spacing, button, form, and product card styles are defined.
• Desktop and mobile rules are covered.
• Component states are included.
• Design direction clearly supports Maison's luxury/editorial positioning.
• A short handoff summary is posted as an issue comment.

Metadata

• Theme: Maison
• Track: Theme Refresh
• Priority: High
• Milestone: July-2026