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

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