Overview
Design commerce pages that feel curated, calm, and trustworthy through restraint. The user should feel like they are browsing a thoughtful showroom, not being pushed through a retail funnel.
Curated Supply
Discover curated, well-designed products. Premium tech, homeware and lifestyle essentials that blend form, function and quiet luxury.
4.0
10
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Curated Supply Home design analysis
Design commerce pages that feel curated, calm, and trustworthy through restraint. The user should feel like they are browsing a thoughtful showroom, not being pushed through a retail funnel.
Image Direction
Use isolated products with lots of empty space. Product imagery should feel crisp, quietly premium, and mostly free from dramatic staging. The interface should behave like a gallery wall around the object, not compete with it.
Colors
Keep the palette almost entirely neutral: pale gray for the field, white for cards, black for anchors, and medium gray for metadata. Any color should appear only as tiny status or freshness signals.
Typography
Use a straightforward sans with moderate scale and soft weight. Headlines should feel neat and centered, while metadata stays understated. The typography should never feel luxury-branded or shouty.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Soft Gallery Commerce
A soft neutral commerce gallery built from pale-gray fields, airy product cards, and quiet filter pills.
calm, quiet, and showroom-like with nearly no aggressive contrast
Primary mode: lightcurated commercecatalog marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
calm, quiet, and showroom-like with nearly no aggressive contrast
Density
2
Variance
1
Motion
1
Signals
pale gray background · white product tiles · quiet gray chips · centered hero composition
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Paper Gray
#F2F2F2
Ink
#141414
Gallery White
#FFFFFF
Soft Mist
#EBEBEB
Mid Gray
#737373
Update Green
#31C96A
Usage rules
Keep almost everything neutral so product photography carries the color interest.
Use black sparingly for headline authority and final CTA text.
Let gray shifts, not shadow, separate layers.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
10px
md
16px
lg
24px
section
88px
Token Radii
Corner radii tokens with a live surface sample.
sm
10px
md
16px
lg
24px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Geist Variable
clean, neutral, and contemporary
Body
Geist
quiet catalog copy
Mono
Geist Mono
lightweight metadata and utility use
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
2.5rem/—
Display
H2
1.75rem/—
H2
Body
1rem/—
Body
Caption
0.875rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep headlines centered, neutral, and free of decorative weight. · Let metadata stay small and gray instead of loud or colorful. · Use mono only where tiny utility distinction helps.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
120ms-220ms
Easing
cubic-bezier(.2,.8,.2,1)
Spring
stiffness 110, damping 20
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 120ms-220ms |
easing | cubic-bezier(.2,.8,.2,1) |
spring | stiffness 110, damping 20 |
Layout Principles
Center the hero and keep it visually lighter than the catalog grid beneath it.
Use broad horizontal card rows with lots of white image field inside each tile.
Let filters read like quiet assistive controls rather than dominant navigation.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FFFFFF
Text
#141414
Border
0px none transparent
Radius
999px
Padding
12px 20px
Min height
40px
Buttons secondary
Base Attributes
Background
#EBEBEB
Text
#141414
Border
1px solid #E1E1E1
Radius
999px
Padding
10px 18px
Min height
36px
Cards product
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#141414
Border
0px none transparent
Radius
24px
Padding
16px
Navigation chip
OverviewFeaturesDocs
Base Attributes
Background
#EBEBEB
Text
#737373
Radius
999px
Active text
#141414
Item padding
8px 14px
Inputs email
Base Attributes
Background
#FFFFFF
Text
#141414
Border
0px none transparent
Radius
999px
Padding
12px 16px
Min height
40px
Placeholder
#737373
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -isolated product cutout
- -clean product photography
- -minimal brand mark
Subject patterns
- -single product on white
- -calm lifestyle-neutral composition
- -clear silhouette-first imagery
Composition logic
- -Give each product lots of empty space inside its card.
- -Let imagery stay centered and uncluttered.
Treatment rules
- -Prefer cutout or lightly staged objects over dramatic scenes.
- -Keep surfaces matte and bright.
Generation cues
- -minimal curated product gallery
- -soft gray ecommerce showroom
Avoid
- -No flash-sale stickers.
- -No aggressive luxury gradients or dark metallic backgrounds.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not add loud sale colors, badges, or urgency chrome.
- -Do not crowd the grid with tiny shadowed cards.
- -Do not turn the system into a glossy luxury-black storefront.