Skip to content
Library

Dialog. Neutral showroom with one warm price tag.

  • Commerce
  • Light theme
  • 12 colors
  • 5 typefaces

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.

Screenshot of Dialog
Captured from askdialog.com on October 11, 2026

Dialog design system

Dialog

Brand1

  • Primary CTA buttons, 'Book a demo' pill — warm orange against near-white backgrounds signals action without urgency, echoing the palette of premium retail labels

Accent2

  • Decorative SVG fills, illustration accent highlights

  • Semantic accent — appears in hover or highlight states on certain interactive elements

Neutrals9

  • Headings, icon fills, primary text — used at full weight for maximum legibility

  • Body text, borders — near-black with a barely perceptible blue undertone, softer than pure black for long-form reading

  • Dark surface backgrounds, card overlays in dark sections

  • Secondary body text, descriptive copy, meta information

  • Supporting body text, nav labels, secondary labels

  • Tertiary text, icon strokes, faint borders

  • Placeholder text, muted links, disabled states

  • Page background, section fills — the dominant surface of the entire site

  • Card surfaces, nav background, button fill for ghost variant

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Carbon on Tangerine Tag

9.15 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.