Dialog

Dialog

Preview image. Unlock full-res

Neutral showroom with one warm price tag. Every surface is a different tone of off-white; the orange CTA is the only color in the room.

Industryecommerce
Palette
#f69251
#181825
#484758
#242433
#000000
#636363
#949494
#8b8b8b
#f7f7f7
#ffffff
#fad7c1
#c97b84

Dialog feels like a high-end retail floor plan rendered in digital form — neutral, airy, and unhurried, with one warm accent that acts like a price tag sticker on white linen. The #f7f7f7 near-white background and pure white cards create a surface hierarchy so subtle it reads as continuous space rather than layered depth. PP Radio Grotesk Light at 50-70px is the defining move: a geometric grotesque rendered at its lightest weight makes large headlines feel handwritten on paper rather than stamped — zero aggression, maximum presence. The single orange #f69251 appears exclusively on CTAs, pulling attention the way a sale tag pops in a neutral showroom. Pill-shaped buttons (28px radius) float against square-cornered containers, the only soft shape in an otherwise rectilinear system. Use PP Radio Grotesk Light (weight 400) exclusively for headings at 32px+; never substitute Inter for headlines at large sizes Apply #f69251 only to primary CTA buttons — never to text, icons, decorative shapes, or backgrounds Set all buttons to border-radius 28px (pill shape) regardless of button width; this is the only rounded UI element in the system Maintain #f7f7f7 as the page background and #ffffff for all card surfaces — the 2-tone near-white surface system defines the visual plane Use Inter at -0.01em to -0.02em letter-spacing for body and nav text — never at default or positive tracking Set card shadows to rgba(24,24,37,0.12) 0px 2px 3px -2px — single low-offset shadow, never stacked high-elevation shadows Give testimonial and feature cards border-radius 24px with 24px internal padding — do not use smaller radii for large containers Do not use #f69251 for more than one element category (CTAs only) — introducing orange to icons, text, or decoration breaks the single-accent discipline Do not apply border-radius less than 24px to card containers — 8px or 12px radii belong to inner UI chips, not layout-level cards Do not use bold or heavy weights (600+) with PP Radio Grotesk — the light grotesque loses its identity at high weight Do not introduce colored section backgrounds (blue, green, purple bands) — section variation comes from #f7f7f7 vs #ffffff swaps only Do not use drop shadows larger than 8px blur or opacity above 0.12 — the elevation system is deliberately flush with the page plane Do not crop or bleed photography to page edges on interior pages — photography lives inside 24px-radius card containers only Do not set input fields to a rounded border-radius — inputs use 0px or minimal radius to contrast with the pill button system

More like this