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

# Ditto · Design System

> Product copy, built on a clear visual system

**Theme:** light · **Industry:** saas · **Source:** https://www.dittowords.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._

Ditto pairs a warm, near-white canvas and oversized typography with vivid color accents and black contrast sections. Product interface imagery and modular storytelling make a complex content platform feel direct, structured, and approachable.

## North star

Let oversized, precise typography and generous warm-neutral space carry the story, using bright accents only to mark key ideas and actions.

## Overview

The page uses a warm near-white canvas (#f7f5f3) as its continuous backdrop, giving black typography a softer setting than pure white. Large, centered hero copy leads the first screen; a bright yellow highlight isolates the key phrase, while rounded black and blue CTAs provide clear action contrast. ABC Social carries the system with clean sans-serif forms, compact navigation, and confident display scale. The layout alternates centered statements and product demonstrations with broad, spacious intervals, then shifts into a black platform showcase, an orange proof-points band, and a dark closing/footer area. Product UI captures and a small isometric system illustration supply visual detail; their vivid greens, purples, and blues belong to product media rather than the core brand palette. Pills, restrained hairlines, and mostly flat surfaces keep the page crisp and approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#f7f5f3` | `--color-warm-paper` | surface | Main page canvas and light text on black sections; keeps the long page soft rather than stark. |
| Anchor Ink | `#000000` | `--color-anchor-ink` | brand | Primary type, pill CTAs, product showcase band, closing CTA, and footer. |
| Quiet Taupe | `#6a6559` | `--color-quiet-taupe` | neutral | Muted supporting copy, secondary navigation, and understated text links. |
| Soft Divider | `#dddbd6` | `--color-soft-divider` | semantic | Subtle borders and hairlines around media or controls; not a prominent section color. |
| Signal Tangerine | `#ff6137` | `--color-signal-tangerine` | accent | Full-width customer-results band and vivid system-illustration paths. |
| Highlight Yellow | `#ffdd33` | `--color-highlight-yellow` | accent | Hero phrase highlight and the platform-showcase CTA; reserve for focal emphasis. |
| Action Blue | `#1345eb` | `--color-action-blue` | accent | A high-contrast demo CTA and a small interface accent. |
| Muted Silver | `#b9b8b6` | `--color-muted-silver` | neutral | Minor measured text tone; use only for low-priority supporting text where visible. |
| Clay Trace | `#b46449` | `--color-clay-trace` | semantic | Sparse measured border color, not a defining brand surface; avoid broad use. |

### Semantic aliases

`--color-canvas` → `#f7f5f3` (Warm Paper) · `--color-surface` → `#000000` (Anchor Ink) · `--color-text` → `#000000` (Anchor Ink) · `--color-text-muted` → `#6a6559` (Quiet Taupe) · `--color-text-subtle` → `#f7f5f3` (Warm Paper) · `--color-border` → `#dddbd6` (Soft Divider) · `--color-accent` → `#ff6137` (Signal Tangerine) · `--color-accent-2` → `#ffdd33` (Highlight Yellow) · `--color-accent-3` → `#1345eb` (Action Blue) · `--color-on-accent` → `#000000` (Anchor Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f5f3` | 19.31:1 | AAA |
| `#6a6559` | `#f7f5f3` | 5.34:1 | AA |
| `#6a6559` | `#000000` | 3.62:1 | AA-large |
| `#f7f5f3` | `#000000` | 19.31:1 | AAA |
| `#ff6137` | `#f7f5f3` | 2.75:1 | fail |
| `#ff6137` | `#000000` | 7.02:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Social | `--font-body` | webfont | 300, 700, 400 | Primary family for display, headings, body copy, navigation, and controls. | Inter |
| ABC Social Extended | `--font-abc-social-extended` | webfont | 700 | Small measured share of typography, likely reserved for selective emphatic display treatment. | Space Grotesk |

- **ABC Social:** Use regular-to-bold weights; display and headings are tightly tracked, while labels and navigation are bold without uppercase styling.
- **ABC Social Extended:** Measured only at bold weight; keep use limited and avoid making it a competing body face.

### Type scale — Augmented Fourth (ratio ≈ 1.378, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 89.5px | 400 | 1 | -0.024em | — | ABC Social | Oversized hero headline and highlighted key phrase. |
| h1 | 48px | 700 | 1 | -0.02em | — | ABC Social | Primary page or major section headline. |
| h2 | 45px | 700 | 1.1 | 0 | — | ABC Social | Centered statements and prominent section titles. |
| h3 | 26px | 300 | 1.2 | -0.014em | — | ABC Social | Feature headings and supporting product-story titles. |
| h4 | 25px | 400 | 1.2 | -0.01em | — | ABC Social | Secondary feature and interface-adjacent headings. |
| body | 18px | 400 | 1 | 0 | — | ABC Social | Explanatory paragraphs beneath headlines and feature titles. |
| caption | 16px | 700 | 1 | 0.008em | — | ABC Social | Compact labels, proof-point details, and emphasized small copy. |
| nav | 16px | 700 | 1 | 0.008em | — | ABC Social | Top-level navigation labels and compact controls. |

OpenType features in use: `"ss07"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 5, 6, 8, 9, 10, 14, 15, 16, 20, 24, 28, 30, 40, 50, 60 px.
- Section rhythm 100px · element gap 8px · card padding 5px · max content width 792px.

The page is a long, spacious single-column narrative, punctuated by full-width color bands and a two-column black product showcase. The measured content max width is 792px; keep copy blocks constrained while allowing section backgrounds and select media to bleed wider. Hero and statement sections center their text, while later feature sections alternate text and interface media. The measured spacing system is generous, with a 100px section gap and 8px element gap. Most sections share the same canvas, so rhythm comes from scale, alignment, media, and color changes rather than boxed cards.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `24px` · nav `9999px` · link `9999px` · xs `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)` on interactive elements.

The visual system is mostly flat: broad color fields and typography define hierarchy, not stacked cards or pronounced shadows. Use restrained borders and hairlines where product media or controls need separation. Buttons are pill-shaped; product media may have rounded corners, while the hero highlight remains a simple flat rectangle.

## Imagery

The page favors product UI screenshots, partner marks, and an isometric system illustration over lifestyle photography. Interface captures sit in framed panels with vivid colored accents, while the hero illustration is a compact geometric path-and-node diagram. Keep screenshots legible and crop them like product evidence; allow strong colors inside media without promoting them to global brand colors.

## Components

### Pill CTAs

Compact, bold ABC Social labels in fully rounded controls. Use black with light text for the primary action, yellow for showcase emphasis, and blue for the demo action.

### Hero highlight

A flat #ffdd33 rectangular highlight sits directly behind a short, bold phrase within the oversized centered headline.

### Product showcase

A black section pairs centered light headline text and a yellow CTA with a dense, colorful montage of product imagery.

### Feature rows

Feature copy and interface imagery alternate sides on the warm canvas, with small colored markers and compact supporting text.

### Proof-points band

A full-width #ff6137 section combines concise customer messaging, bold metrics, and testimonial quotations in a multi-column arrangement.

### Footer signup

The black footer combines grouped navigation links, a newsletter input with a light pill treatment, a large wordmark, and fine-print details.

### Measured component styles

- **Primary button** (“See the full Ditto platform”): background #ffdd33 · text #000000 · radius 1000px · padding 15px 20px · 700 16px ABC Social
- **Secondary button** (“Get a Demo”): background #1345eb · text #f7f5f3 · radius 1000px · padding 15px 20px · 700 16px ABC Social
- **Link** (“Get Started Free”): transparent background · text #6a6559 · radius 1000px · padding 15px 20px · 700 16px ABC Social
- **Input**: background #ffffff · text #000000 · radius 28px · padding 0px 20px · 400 16px ABC Social
- **Card** (“one source of truth.”): background #ffdd33 · text #000000 · radius 0px · padding 0px 10px · 700 89.6px ABC Social
- **Navigation item** (“Product Solutions Resources Enterprise P”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ABC Social

## Do

- Use #f7f5f3 as the dominant page canvas.
- Set headlines in ABC Social with confident scale and tight tracking.
- Highlight only a short key phrase in #ffdd33.
- Use black pill CTAs for the primary action.
- Alternate concise copy with clear product evidence.
- Reserve full-width color fields for meaningful section transitions.

## Don't

- Do not introduce gradients or decorative shadows as a new visual theme.
- Do not use bright product-screenshot colors as global brand colors.
- Do not crowd the hero or feature sections with extra content.
- Do not turn every content block into a bordered card.
- Do not use uppercase labels as the default typographic style.
- Do not scatter accent colors without a clear hierarchy.

## Agent prompt

Build a new Ditto-style SaaS page using #f7f5f3 Warm Paper as the main canvas, #000000 Anchor Ink for typography and dark sections, and #6a6559 Quiet Taupe for secondary copy. Use ABC Social or a close sans-serif substitute, with oversized, tightly tracked headlines and restrained body copy. Create clear, spacious sections with centered headline moments, alternating text-and-product-media rows, and occasional full-width bands. Use #ffdd33 Highlight Yellow sparingly for a key phrase or CTA, #ff6137 Signal Tangerine for one meaningful feature or proof band, and #1345eb Action Blue only for a standout action. Keep surfaces mostly flat, buttons pill-shaped, and product imagery vivid but contained within its own frames. Favor crisp hierarchy and generous breathing room over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large centered headline and subcopy, with CTA pair and small product-context details. | primary demo action, secondary signup link, value proposition | oversized type, yellow phrase highlight, pill CTAs, warm canvas |
| 2 | logo-cloud | Single horizontal strip of customer logos beneath the hero. | social proof, brand recognition | logo row, light canvas, compact trust label |
| 3 | other | Centered statement headline followed by a short explanatory paragraph. | problem framing, solution introduction | centered typography, open whitespace |
| 4 | how-it-works | Full-width visual demonstration with two centered step titles. | process explanation, visual storytelling | isometric illustration, short step labels, open canvas |
| 5 | other | Single centered headline with generous surrounding whitespace. | benefit framing, transition | bold statement, minimal composition |
| 6 | product-showcase | Black two-column section with centered heading, CTA, and product-media montage. | platform overview, explore product | black field, light heading, yellow CTA, media collage |
| 7 | feature-split | Left-aligned feature copy paired with product interface media. | feature explanation, show supporting interface | colored marker, product screenshot, warm canvas |
| 8 | feature-split | Alternating media-and-copy row with a left-right split. | feature explanation, cross-tool consistency | interface screenshot, colored marker, feature heading |
| 9 | feature-split | Copy and analytics-style product media arranged in a split row. | feedback loop, show system improvement | analytics screenshot, colored marker, alternating alignment |
| 10 | feature-split | Alternating interface media and feature copy in a spacious row. | decision tracking, governance explanation | product screenshot, colored marker, warm canvas |
| 11 | feature-split | Feature copy and translation-oriented interface media in a split row. | localization workflow, handoff explanation | interface screenshot, colored marker, alternating alignment |
| 12 | stats | Full-width orange band with a compact intro, three metrics, and quotations. | quantified proof, customer validation | #ff6137 field, large numeric type, testimonial quotes |
| 13 | cta | Centered headline and supporting copy with two actions on black. | final conversion, demo request | black background, light type, blue and light CTAs |
| 14 | footer | Black multi-column footer with link groups, signup form, large wordmark, and legal details. | newsletter signup, site navigation, legal information | column link lists, pill input, large wordmark, light-on-dark text |

## Source CSS custom properties (selected)

```css
--shadow-lift: 0 10px 12px #e0ddd9;
--shadow-hero: 0 3px 6px #0000000f;
--shadow-dropdown: 0 4px 8px #0000003d;
--shadow-outline: 0 0 0 1px #0000001a,0 1px 3px #0000001a;
--shadow-embossed: 0 2px 3px #00000040,inset -4px -4px 4px #00000040,inset 3px 4px 4px #ffffff40;
```

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