✨ Every order includes a free small pour
URB Design System — v0.2 · Editorial gallery

Sherbet, swirl,
super-rounded.

Pastel pink #FFB5C8 is the hero. Sherbet companions keep it colorful without competing with product. Display is Space Grotesk; editorial accents are Fraunces italic. All cards at 32px, fluid psychedelic graphics contained by rigorous grid.

Pink #FFB5C8Cream #FFF8F3Charcoal #1A1A1EFraunces Italic
Tokens

Color — Sherbet pastels

60% neutrals, 30% pink scale, 10% sherbet pops. Pink never for body text on cream — use --pink-deep #E85D8A or charcoal for 4.5:1. New: Coral joins the palette for orbit pieces.

Pink
#FFB5C8
Pink Deep
#E85D8A
Cream
#FFF8F3
Mint
#B8E6D5
Butter
#FFE9A8
Lilac
#D9C7F0
Peach
#FFC9A8
Coral
#FF9B8A
Charcoal
#1A1A1E
Usage: Pink
Blobs, borders, pill backgrounds, large surfaces. Never body text on cream.
OK: charcoal on pink • pink-deep on cream
Usage: Sherbet
Gradient stops, swirl accents, category pills. Max 2 per card.
Contrast check
Charcoal on cream 15.2:1 ✓
Pink-deep on cream 4.7:1 ✓
Pink on cream 1.6:1 ✗ (decorative only)
Type

Typography — Editorial gallery

Display: Space Grotesk (geometric, slightly rounded). Editorial accent: Fraunces italic for key display words. Body/UI: Instrument Sans (humanist, highly legible). Tight display tracking, generous body line-height.

Display / Hero — Space Grotesk Bold + Fraunces italic accent
Resin,
Remixed.
68px / 0.9 / -0.04em — "Remixed." is Fraunces 700 italic
Section — Numbered editorial header
01 / Collection
The pastel lab drop.
Body is Instrument Sans 15/16px, 150% line-height, 400-500 weight.
Scale
Aa44px / Display
Aa32px / H1
Aa26px / Fraunces italic
Aa — Instrument Sans 15px / body15px
Usage rule: Use Fraunces italic only for 1–2 words per headline (the emotional word). Never for body or UI.
Shape

Shape — Super-rounded + airy

Resin is pillowy. Cards at 32px, inputs at 16px, buttons pill. Generous whitespace (luxury air) with dense color inside cards.

Card — 32px
shadow: 0 12 40 / 8%
Inner — 24px
nested cards, images
Pill — 999px
Button — pill
All CTAs pill
Icons

Icons — Inline SVG, 1.4px stroke

All icons are inline SVG via Icon.astro. No emoji, no Unicode glyphs. 1.4px stroke for UI icons, filled for stars.

heart
arrow-up-right
arrow-right
star
eye
check
menu
close
Components

Components

Buttons — pill, 4 variants
h-11 pill, 14px semibold, focus:ring-pink-deep
Product Card — links to /product/[slug]
New
One-of-one

Small Jar

Hand-poured · Pastel lab edition

$25
Enquire
New
One-of-one

Large Jar

Hand-poured · Pastel lab edition

$35
Enquire
Bestseller
One-of-one

Single Large Coaster

Hand-poured · Pastel lab edition

$10
Enquire
Cards use Icon for heart/eye/arrow — no Unicode. Hover lifts + deepens shadow. Active nav state on Collection when on product pages.
Swirl Backgrounds — 3 variants, animated
Hero
Card
CTA — dark
Motion: swirl-drift 18s infinite, pauses off-screen via IntersectionObserver, disabled under prefers-reduced-motion.
Nav — mobile overlay
Mobile: hamburger toggles a full-width overlay with big editorial links (Collection 01 · Process · System). aria-expanded, Escape-to-close, click-outside-to-close, body scroll lock. Desktop: active-page underline on Collection (incl. product pages) and System.
Product detail — /product/[slug]
Rich layout: large swirl visual, title with Fraunces italic, price, palette/category pill, Enquire CTA, specs (dimensions/materials/care/weight), and 3 related products (same palette → same category → rest). getStaticPaths from src/lib/products.ts.

Motion — Max swirl, but calm

Full fluid psychedelic without nausea: slow drift (18-22s), soft morph (12s), no fast spins. Pauses when off-screen. Respects reduced-motion. Grain overlay for tactile depth.

swirl-drift
translate + rotate + scale, 18s
blob-morph
border-radius morph, 12s
Perf
IO pause, one animated layer per viewport