---
title: "Dialog design system"
variant: extended
source: https://www.askdialog.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/askdialog-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dialog · Design System

> Editorial calm, energized by a warm AI glow

**Theme:** light · **Industry:** ai · **Source:** https://www.askdialog.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dialog pairs a restrained, editorial layout with a vivid orange-to-rose hero gradient and polished AI product previews. Serif headlines, generous pale space, and pill-shaped actions make the sales technology feel approachable.

## North star

Let an editorial serif headline and generous pale space frame the product, using warm orange only as a focused cue.

## Overview

The page balances a near-white #f7f7f7 canvas with a dramatic opening gradient that moves through orange, peach, and muted rose. Orange is reserved for primary actions and small highlights, while black anchors typography and a later analytics section. Large Hedvig serif display headlines bring editorial character; Inter keeps navigation, body copy, and interface labels crisp and compact. The hero centers its message and simulator input over a broad, soft-edged color field, then transitions into product imagery, brand tiles, and spacious white feature panels. Content alternates between centered introductions and two-column demonstrations, with rounded media and cards softening the technical subject matter. The dark insights band creates a deliberate contrast before the light FAQ and footer. Borders are faint, shadows restrained, and whitespace does most of the grouping work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f7f7f7` | `--color-gallery-mist` | surface | Main page canvas and the pale background behind most product and FAQ sections. |
| Soft Porcelain | `#ffffff` | `--color-soft-porcelain` | surface | Feature panels, input field, light CTA buttons, and white text or navigation over the hero. |
| Dialog Orange | `#ff9752` | `--color-dialog-orange` | accent | Primary pill buttons, simulator action, and small training badges. |
| Quiet Graphite | `#666666` | `--color-quiet-graphite` | neutral | Muted navigation, supporting copy, and secondary link text. |
| True Ink | `#000000` | `--color-true-ink` | semantic | Headings and body text on light backgrounds, plus the compact black product-demo card. |
| Night Panel | `#141414` | `--color-night-panel` | surface | Full-width dark conversation-insights section. |
| Footer Ash | `#7f7f7f` | `--color-footer-ash` | neutral | Low-emphasis footer and supporting text. |
| Silver Type | `#959595` | `--color-silver-type` | neutral | Subdued supporting text and interface labels. |
| Faint Rule | `#f0f0f0` | `--color-faint-rule` | semantic | Subtle navigation and component hairlines. |
| Muted Silver | `#b2b2b2` | `--color-muted-silver` | neutral | Low-contrast supporting text, most apparent in product-interface details. |
| Mist Gradient | `#dedede` | `--color-mist-gradient` | neutral | Pale end of a measured decorative gradient, not a defining page surface. |
| Gradient Charcoal | `#181818` | `--color-gradient-charcoal` | neutral | Dark end of a measured decorative gradient, rather than a main section color. |
| Vivid Tangerine | `#ff7f36` | `--color-vivid-tangerine` | accent | Orange stop in the hero and decorative section gradient. |
| Peach Ember | `#fa965f` | `--color-peach-ember` | accent | Warm middle stop in the hero and decorative section gradient. |
| Rose Haze | `#dfb8b5` | `--color-rose-haze` | brand | Muted rose gradient stop that softens the hero glow toward its pale edge. |
| Charcoal Copy | `#4b4b4b` | `--color-charcoal-copy` | neutral | Secondary navigation and supporting text where black would feel too strong. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Gallery Mist) · `--color-surface` → `#ffffff` (Soft Porcelain) · `--color-surface-2` → `#141414` (Night Panel) · `--color-surface-3` → `#000000` (True Ink) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#666666` (Quiet Graphite) · `--color-text-subtle` → `#7f7f7f` (Footer Ash) · `--color-border` → `#f0f0f0` (Faint Rule) · `--color-accent` → `#ff9752` (Dialog Orange) · `--color-accent-2` → `#ff7f36` (Vivid Tangerine) · `--color-accent-3` → `#fa965f` (Peach Ember) · `--color-on-accent` → `#ffffff` (Soft Porcelain)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#141414` | 1.14:1 | fail |
| `#666666` | `#f7f7f7` | 5.36:1 | AA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#141414` | 3.21:1 | AA-large |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#7f7f7f` | `#f7f7f7` | 3.74:1 | AA-large |
| `#7f7f7f` | `#ffffff` | 4:1 | AA-large |
| `#7f7f7f` | `#141414` | 4.6:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.1) 15.6%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.9) 100%)`
- `linear-gradient(to top, rgb(255, 127, 54) 0%, rgb(250, 150, 95) 40%, rgb(223, 184, 181) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, buttons, labels, and compact interface text. | Inter |
| Hedvig Letters Serif | `--font-display` | webfont | 400 | Display, H1, and H2 editorial headlines. | Cormorant Garamond |
| Hedvig Letters Sans | `--font-hedvig-letters-sans` | webfont | 400 | H3 headings and occasional secondary display text. | Inter |

- **Inter:** Use measured 400–600 weights; keep interface copy clean, compact, and mostly untransformed.
- **Hedvig Letters Serif:** Regular weight; large headlines use tight negative tracking and natural sentence case.
- **Hedvig Letters Sans:** Regular weight with slightly tight tracking; use sparingly to distinguish smaller feature headings.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.2 | -0.03em | — | Hedvig Letters Serif | Large centered hero headline. |
| h1 | 48px | 400 | 1.2 | -0.025em | — | Hedvig Letters Serif | Primary page and feature-section headlines. |
| h2 | 42px | 400 | 1.2 | -0.03em | — | Hedvig Letters Serif | Major section titles, including FAQ and insights. |
| h3 | 26px | 400 | 1.2 | -0.02em | — | Hedvig Letters Sans | Feature headings within product explanations. |
| h4 | 20px | 600 | 1.4 | -0.025em | — | Inter | Compact emphasized headings and card titles. |
| body | 14px | 400 | 1.63 | 0 | — | Inter | Supporting descriptions and explanatory copy. |
| caption | 13px | 400 | 1.38 | 0 | — | Inter | Small metadata and product-interface notes. |
| button | 14px | 500 | 1.43 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 14px | 500 | 1.43 | -0.02em | — | Inter | Header navigation and language control. |
| link | 14px | 400 | 1.4 | -0.02em | — | Inter | Inline and footer links. |
| code | 12px | 400 | 1.33 | 0 | — | Fragment Mono | Small monospace labels and training badges. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 px.
- Section rhythm 112px · element gap 20px · card padding — · max content width 736px.

The page uses a spacious single-page flow within a measured 736px content max width for core copy, while hero media and color fields extend broadly. Centered hero and section introductions alternate with two-column product explanations and a multi-column integrations area. Sections have generous vertical separation, with a measured 112px section rhythm and 20px element gap. The overall density is low: concise copy, broad margins, and large visual panels carry the story.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `16px` · media `8px` · badge `9999px` · nav `12px` · xs `8px` · sm `12px` · md `16px` · lg `24px` · xl `40px` · 2xl `48px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 10px 30px 0px`
- Shadow `sm` (button, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `xl` (section): `rgb(245, 178, 152) 0px -144px 32px -288px, rgb(218, 199, 255) 0px 144px 32px -288px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 2px`
- Shadow `hairline` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 30px 80px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface favors flat surfaces, faint #f0f0f0 rules, and contrast between light panels and dark bands over heavy card shadows. Rounded cards and media establish grouping; subtle shadows appear on selected controls and demonstration panels. Keep layering restrained so the gradient and product previews remain prominent.

## Imagery

Product screenshots and simulated shopping conversations are the main visuals, set inside rounded, uncluttered panels. A horizontal strip of customer imagery and brand marks adds photographic color between product sections. The hero relies on an oversized orange-peach-rose gradient field rather than a literal illustration; the analytics section uses a dark, dimensional interface graphic.

## Components

### Hero simulator

Centered store URL input and orange simulator action sit beneath the headline; use a white pill-shaped field and concise supporting proof text.

### Primary action

Orange #ff9752 pill button with white Inter medium text; used for simulator, demo, and learn-more actions.

### Product preview panel

Large rounded white or dark container for shopping assistant previews, with screenshots and interface content kept visually contained.

### Customer strip

Horizontal run of rounded photographic brand tiles separating the hero demonstration from the agent-building section.

### Integration tiles

Light, evenly spaced logo tiles for commerce platforms beneath a centered section heading.

### FAQ accordion

Centered light section with stacked white question rows, compact text, and simple plus controls.

### Insights band

Full-width #141414 section pairing a serif title and light copy with a dark analytics visualization.

### Measured component styles

- **Primary button** (“Learn more”): background #ff9752 · text #ffffff · radius 3.35544e+07px · padding 10px 20px · 500 14px Inter
- **Secondary button** (“Book a demo”): background #ffffff · text #000000 · radius 3.35544e+07px · padding 14px 24px · 500 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“G2”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Inter
- **Input**: transparent background · text #000000 · radius 28px · padding 0px 20px · 500 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“BigCommerce”): background #fafafa · text #000000 · border 1px solid #f2f2f2 · radius 16px · padding 0px · 400 16px Inter
- **Badge** (“Train”): background #fff4ed · text #ff9752 · border 1px solid #ffd5ba · radius 3.35544e+07px · padding 4px 16px · 400 12px Fragment Mono
- **Navigation item** (“Product Tour Agentic Commerce Customers ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #f7f7f7 as the primary canvas.
- Reserve orange for focused actions and gradient highlights.
- Use a refined serif for large editorial headlines.
- Keep body and interface copy in crisp Inter.
- Alternate centered storytelling with product-led split layouts.
- Use rounded panels and generous whitespace to group content.

## Don't

- Do not fill every section with saturated color.
- Do not use heavy borders or pronounced card shadows.
- Do not crowd product previews with decorative elements.
- Do not replace the editorial headlines with generic bold sans-serif.
- Do not use orange as a large flat section background.
- Do not compress the vertical rhythm into a dense dashboard.

## Agent prompt

Build a new page in Dialog’s style: start with a spacious #f7f7f7 canvas, a restrained header, and a centered editorial hero. Set large headlines in Hedvig Letters Serif (or Cormorant Garamond), with Inter for navigation, body copy, and controls. Use #ff9752 for pill-shaped primary actions and small emphasis only. A broad orange-to-peach-to-rose gradient may frame the hero, but keep later sections mostly pale and uncluttered. Alternate centered introductions with two-column product demonstrations and rounded preview panels. Use customer imagery or platform marks as concise visual proof. Add a contrasting #141414 feature band when useful, then return to a quiet FAQ and footer. Favor faint rules, modest shadows, generous section spacing, and a clear hierarchy over decorative density.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and simulator over a broad gradient field, followed by a full-width product preview. | store URL entry, simulator CTA, social proof | gradient hero, pill input, orange CTA, serif headline |
| 2 | how-it-works | Centered white rounded panel with a diagram beneath a concise headline. | explain the agent model, show training-to-deployment flow | white panel, serif title, diagram, brand-image strip |
| 3 | feature-split | Left-aligned introduction above a large two-column product panel. | highlight conversion benefit, offer learn-more path | serif heading, rounded white panel, orange action |
| 4 | feature-split | Copy and product conversation preview arranged as a two-column feature panel. | answer product questions, compare and recommend items | rounded white panel, chat preview, orange action |
| 5 | integrations | Centered introduction above a row of platform logo tiles. | communicate compatibility, reassure no custom development | logo tiles, light surface, centered serif title |
| 6 | feature-split | Dark section with introductory copy, analytics visualization, and a row of outcomes. | turn conversations into insights, link to learn more | #141414 band, light typography, analytics graphic |
| 7 | faq | Centered title and subtitle above a narrow stack of accordion rows. | expand answers, resolve purchase questions | light canvas, white question rows, plus controls |
| 8 | footer | Compact CTA followed by a fine divider and multi-column footer links. | book a demo, browse product and company links | orange pill CTA, subtle divider, multi-column links |

## Source CSS custom properties (selected)

```css
--background: #f7f7f7;
--foreground: #000;
--accent: #ff9752;
--accent-soft: #ffac47;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/askdialog-com