# postery.com — Design System

## 1. Visual Theme & Atmosphere
Postery is a premium art print e-commerce brand built around a mathematically derived typography scale and two carefully chosen typefaces: TTRamillas (a contemporary serif) for editorial headings and Moderat (a geometric grotesque) for body and UI. The near-white canvas with a single lemon-yellow feature colour (`rgb(250, 249, 161)`) creates a gallery-white atmosphere — neutral enough to let artwork shine, with just enough warmth to feel curated rather than clinical. This is gallery aesthetics meeting Scandinavian e-commerce.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Background | `rgb(255, 255, 255)` | Gallery white canvas |
| Feature/accent | `rgb(250, 249, 161)` | Lemon yellow — highlight panels |

Extremely restrained palette — near-monochrome with a single warm-yellow accent. Any product photography provides additional colour. The yellow is warm but not aggressive, fitting for art-forward e-commerce.

## 3. Typography Rules
- **Editorial headings**: TTRamillas serif — 500 weight, fluid scale. h1 computed to ~32px from the CSS `pow()`-based formula.
- **Body/UI**: Moderat — system-ui fallback chain. Clean, neutral, invisible.
- **Scale system**: CSS custom property math: `pow(1.2, n)` applied to `0.875rem` base — a proper modular type scale (Major Third, 1.2 ratio).
- The mathematical scale ensures harmonious heading hierarchy from h1 to h6.
- TTRamillas carries all editorial weight; Moderat handles everything functional.

## 4. Component Stylings
- **Radius**: 24px (standard UI elements), 3.75px (image borders — deliberately un-rounded for art), 50% (avatars/chips), 12px (mid-tier).
- **Shadows**: Dramatic single shadow: `rgba(0,0,0,0.3) 0px 30px 70px`. Used for modal-scale elevation — deep and cinematic.
- Art/image containers use near-zero radius (3.75px) — honouring the prints.
- Interactive UI uses 24px radius — modern and friendly.

## 5. Layout Principles
- Gallery-style image grids — prints as primary content.
- TTRamillas headlines at computed h1 size (~32px) anchor editorial sections.
- Lemon yellow panels draw attention to promotions or featured categories.
- Modular type scale ensures consistent rhythm between content levels.

## 6. Depth & Elevation
One dramatic elevation layer: `30px 70px rgba(0,0,0,0.3)`. Applied to modals, feature overlays, or floating panels. No mid-tier shadow. Binary depth: flat or dramatically elevated.

## 7. Do's and Don'ts
**Do:**
- Trust the modular type scale — use CSS `pow()` variables for all heading sizes
- Apply near-zero radius (3.75px) to art/image containers
- Use the lemon yellow accent for promotional callouts, not UI states

**Don't:**
- Use TTRamillas for body text — it's editorial only
- Add additional accent colours — the yellow's rarity is its power
- Apply the `30px 70px` shadow to anything below modal/featured-panel scale

## 8. Responsive Behavior
The modular type scale compresses naturally on mobile — the `pow()` formula maintains proportions. Art grids reflow to 2-col or 1-col. Yellow accent panels remain full-width.

## 9. Agent Prompt Guide
> Reproduce postery.com style: gallery white canvas, TTRamillas 500 serif for editorial headings, Moderat grotesque for UI/body. Lemon yellow `rgb(250,249,161)` single accent. Radius 24px (UI) / 3.75px (art containers). Dramatic single shadow `0 30px 70px rgba(0,0,0,0.3)` for elevated elements. Modular type scale 1.2 ratio.

*Generated by Sparkbites — extracted from live CSS analysis*