Untitled Design SystemLegacy format

### Spacing

Base unit 4px. {spacing.xxs} 4 · {spacing.xs} 8 · {spacing.sm} 12 · {spacing.md} 16 · {spacing.lg} 24 · {spacing.xl} 32 · {spacing.xxl} 48 · {spacing.section} 88px between major bands. Card padding {spacing.lg}–{spacing.xl}.

### Grid & Container

• Max content width ~1180px centered.

• Hero: 5/7 or 6/6 split — offer text left, large medal photography (obverse + reverse pair) right.

• Product grids: 4-up desktop, 2-up tablet, 1-up mobile.

• Multi-step order form: single centered column, max 640px.

• Compositions lean symmetric and centered; the brand is formal, not asymmetric-editorial.

### Whitespace Philosophy

Print-catalog pacing: generous outer margins, clear band separation on the cream canvas, dense trust-information clusters (specs tables, guarantee rows) allowed inside cards. Pattern backgrounds must never fight text — keep pattern opacity low and text containers clean.

| Token | Value | Use |

|---|---|---|

| {rounded.xs} | 3px | Badges, price plates |

| {rounded.sm} | 5px | Buttons, inputs |

| {rounded.md} | 8px | Cards, banners |

| {rounded.lg} | 12px | Large media containers |

| {rounded.pill} | 9999px | Rare; step indicators |

Signature shapes: the circle (logo roundel, guarantee seals/rosettes, hologram stickers, coin capsules) and the thin-ruled rectangle (certificates). Round guarantee seals are scalloped rosettes in red/cream. Photography: medals always shown as obverse+reverse pairs on white or on burgundy; packaging shots on warm dark interiors.

### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Burger nav; hero stacks (offer text → medal photo → CTA); product grid 1-up; guarantee seals 2×2; sticky bottom CTA bar with price + «ОФОРМИТЬ ЗАКАЗ» |

| Tablet | 768–1024px | Product grid 2-up; hero 6/6 keeps side-by-side; seals 4-up tightened |

| Desktop | 1024–1440px | Full layout, 4-up product grid, 1180px container |

### Touch & Legibility

• Primary CTA min height 48px; inputs 48px; tap targets ≥ 44px — non-negotiable for the 45+ audience.

• Body text ≥ 16px on mobile; prices remain the largest element on screen.

• Sticky mobile order bar (white, hairline top, price + red CTA) on product landings.

• Medal photography scales proportionally; obverse+reverse pair may stack on the smallest screens.

1. Reference components by YAML key ({component.series-banner}, {component.guarantee-seal-row}).

2. Use {token.refs} everywhere; never inline hex in mockups.

3. States documented: default and active/pressed/focused only.

4. Display = Lazurski 400; UI = Geologica; prices = Geologica 800. The split is unbreakable.

5. The color trinity is cream + copper-red + bronze/gold. Series navy/teal exist only inside {component.series-banner} contexts.

6. When in doubt about emphasis: larger Lazurski or bolder price — never a new color.

• Success/info semantic colors are not defined by the brand book; {colors.error} reuses copper-light (#b6252f). Extend cautiously if forms need success states (suggest muted green #4f7d4f, to be approved).

• The brand book's own HEX values contain misprints (duplicated #9b092d for dark/light copper, swapped RGB/HEX in gold lights); this kit uses corrected values verified against CMYK and rendered swatches.

• Animation/motion language is not specified by the brand (suggest restrained fades and 200–250ms eases; no bounces).

• Dark mode does not exist for this brand and should not be invented.

• Logo/monogram/griffin/pattern source assets (SVG/PNG) and the woff2 font files live in the project repo; they are referenced but not embedded in this kit.

• Print carriers (certificates, folders, envelopes) follow the same tokens but with production details (holograms Ø20/15mm, foil, embossing) out of scope here.