[Design] Refresh visual system and theme style guide

[hta218]

Context

Naturélle 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 Naturélle as a beauty / wellness / skincare / organic premium commerce 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 Naturélle
• Core component states for buttons, inputs, cards, badges, and navigation
• Notes explaining why the system fits Naturélle'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 Naturélle's positioning: soft premium beauty UX, ingredient/routine storytelling, trust/reviews, and subscription-ready PDP.
• A short handoff summary is posted as an issue comment.

Metadata

• Theme: Naturélle
• Track: Theme Refresh
• Priority: High
• Milestone: July-2026

[mira-weaverse]

Daily GitHub triage: @imsinhp, this issue has had no update for 44 days and missed the milestone July-2026 on 2026-07-31. This matters now because the unresolved '[Design] Refresh visual system and theme style guide' work can affect production reliability. Please share the current status, blocker, or PR link and confirm the next delivery step.

[mira-weaverse]

@imsinhp this visual-system work has had no update for 7 days, and the July-2026 milestone deadline of 2026-08-07 has been missed. This matters now because typography, color, spacing, component states, and mobile rules are shared prerequisites for the follow-up Naturelle page designs and development handoff.

Please share the current Figma status, any blocker, and the style-guide link or next concrete delivery date.