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

# Doo · Design System

> Quiet clarity for getting things done

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

Doo presents a task-reminder app through a restrained white canvas, calm typography, and prominent Apple-device imagery. Long, spacious feature sections explain the product workflow and capabilities without interrupting the visual flow.

## North star

Keep the page quiet and spacious so real product screens—not decorative UI—carry the visual interest.

## Overview

The visual strategy is deliberately quiet: a white canvas dominates, with charcoal headings and muted gray navigation and body copy doing most of the work. Pale blue and soft gray appear sparingly on rounded task cards, while stronger colors are largely contained in app screenshots and device imagery rather than used as site-wide brand accents. Avenir Next gives the page a clean, humanist sans-serif voice; large, regular-weight headings use tight negative tracking, while small uppercase labels distinguish feature categories. The centered hero leads into a product image, then a long sequence of editorial feature explanations and device demonstrations. Generous vertical gaps keep each story distinct. Content generally sits within a centered, constrained column, with occasional wider media and multi-column feature layouts. The overall effect is product-led and calm, not promotional through color or decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and background behind the hero, feature stories, and device imagery. |
| Quiet Slate | `#6e6d7a` | `--color-quiet-slate` | neutral | Muted navigation and supporting text, including secondary labels and app-card copy. |
| Mist Hairline | `#edeef3` | `--color-mist-hairline` | semantic | Subtle border color for quiet separators and fine UI boundaries. |
| Soft Charcoal | `#383938` | `--color-soft-charcoal` | neutral | Primary heading and body-text color, providing contrast without harsh black. |
| Task Blue | `#e7efff` | `--color-task-blue` | surface | Pale blue task-card surface shown in the workflow demonstration. |
| Cloud Gray | `#f7f7f7` | `--color-cloud-gray` | surface | Light gray product-card surface; keep it contained to card-like UI. |
| Near Black | `#111111` | `--color-near-black` | neutral | Minor text and fine details; not the page’s primary text treatment. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e7efff` (Task Blue) · `--color-surface-2` → `#f7f7f7` (Cloud Gray) · `--color-text` → `#383938` (Soft Charcoal) · `--color-text-muted` → `#6e6d7a` (Quiet Slate) · `--color-border` → `#edeef3` (Mist Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#383938` | `#ffffff` | 11.6:1 | AAA |
| `#383938` | `#e7efff` | 10.05:1 | AAA |
| `#383938` | `#f7f7f7` | 10.83:1 | AAA |
| `#6e6d7a` | `#ffffff` | 5.08:1 | AA |
| `#6e6d7a` | `#e7efff` | 4.4:1 | AA-large |
| `#6e6d7a` | `#f7f7f7` | 4.74:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Avenir Next | `--font-body` | system | 400, 600 | All page typography: display and section headings, body copy, navigation, and uppercase feature labels. | Nunito Sans |

- **Avenir Next:** Use regular weight as the default, with measured 600 weight for emphasis. Display and h1 headings use tight negative tracking; eyebrow labels are uppercase and letter-spaced.

### Type scale — Perfect Fifth (ratio ≈ 1.494, base 19.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 65px | 400 | 1.2 | -0.04em | — | Avenir Next | Large hero-style display heading when an oversized statement is needed. |
| h1 | 39px | 400 | 1.2 | -0.04em | — | Avenir Next | Main hero headline and prominent page-level title. |
| h2 | 29.5px | 400 | 1 | 0 | — | Avenir Next | Feature-section headings such as “Made for speed.” |
| body | 19.5px | 400 | 1.8 | 0 | — | Avenir Next | Supporting feature descriptions and longer explanatory copy. |
| caption | 16.5px | 400 | 1.8 | 0 | — | Avenir Next | Small descriptive text accompanying imagery or cards. |
| nav | 13px | 400 | 1.8 | 0 | — | Avenir Next | Header links and compact navigation labels. |
| eyebrow | 13px | 400 | 1 | 0.1em | uppercase | Avenir Next | Small uppercase feature category above a section heading. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 20, 26, 30, 33, 39, 49, 52, 78, 104, 108, 130 px.
- Section rhythm 130px · element gap — · card padding — · max content width 1267px.

Use a centered content area capped at the measured 1267px page width, with text often aligned to the start of a narrower editorial column. The first viewport has a minimal top navigation, a centered hero, and a large product image below. Continue with widely separated feature stories, alternating text and device imagery; use occasional multi-column groups for workflow cards or privacy content. The measured section gap is 130px, and the page density is spacious. Avoid adding decorative bands: sections share the white canvas.

## Shape & elevation

- Radius: card `30px` · link `9999px` · xs `30px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The page is predominantly flat, with no measured shadows. Separate content through white space rather than raised panels or colored section bands. Card examples use rounded corners—measured at 30px—with pale fills and no visible borders. Keep hairlines subtle and reserve layered depth for the supplied device mockups.

## Imagery

Product imagery is the main visual feature: large, carefully isolated Mac, iPhone, and Apple Watch mockups demonstrate real app screens. Keep device frames and screen content legible, with generous white space around them and occasional wide, full-bleed device arrangements. Workflow examples use simple pastel task cards. Treat vivid colors seen in the hero screenshot as imagery content, not as a general site palette.

## Components

### Top navigation

Compact header with the Doo mark at left and Overview, Features, Support, and Download links aligned at right; navigation uses muted slate.

### Centered hero

Centered headline, short supporting line, and a purple pill-shaped Download CTA, followed by a large device composition.

### Feature story

Small uppercase eyebrow, regular-weight heading, and concise muted description, paired with product imagery and ample surrounding white space.

### Workflow cards

Three visual task steps, including a pale blue task card (#e7efff) and light gray card (#f7f7f7); measured card radius is 30px.

### Device showcase

Large isolated Mac, iPhone, or watch screens demonstrate actual app interactions; media can span wider than its accompanying copy.

### Feature list

Closing feature overview uses a clear heading, compact link, and concise feature descriptions in a two-column arrangement.

### Measured component styles

- **Link** (“Download”): transparent background · text #ffffff · radius 39px · padding 19.5px 39px · 600 13px Avenir Next
- **Card** (“Clean the bathroom”): background #e7efff · text #6e6d7a · radius 30px · padding 0px · 400 16.25px Avenir Next
- **Navigation item** (“Doo Overview Features Support Download”): transparent background · text #6e6d7a · radius 0px · padding 0px · 400 13px Avenir Next

## Do

- Keep the page canvas white and uncluttered.
- Use Avenir Next or a close humanist sans-serif substitute.
- Reserve the strongest color for genuine product imagery and the CTA.
- Give feature stories generous vertical separation.
- Use short uppercase eyebrows above feature headings.
- Show real app screens inside device mockups.

## Don't

- Do not introduce broad colored section backgrounds.
- Do not use heavy shadows or thick decorative borders.
- Do not make every feature card look like a raised panel.
- Do not use saturated illustration colors as global brand accents.
- Do not crowd the hero with supporting details.
- Do not use bold, all-caps styling for large headings.

## Agent prompt

Build a new Doo-style page with a quiet, product-first visual system. Use Gallery White (#ffffff) as the canvas and Soft Charcoal (#383938) for primary headings; use Quiet Slate (#6e6d7a) for navigation and secondary copy. Keep Mist Hairline (#edeef3) subtle, and reserve Task Blue (#e7efff) and Cloud Gray (#f7f7f7) for small UI or card surfaces. Set type in Avenir Next or a close humanist sans-serif, with regular-weight, tightly tracked headings and small uppercase feature eyebrows. Center the page in a constrained content area, leave generous gaps between feature stories, and alternate concise copy with large, authentic device mockups. Keep the hero simple: headline, supporting sentence, Download pill, then product imagery. Avoid gradients, heavy shadows, decorative bands, and unnecessary UI chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting text above CTA and large product media. | single primary CTA, product value proposition | centered typography, pill download button, device mockup |
| 2 | product-showcase | Large centered product image on a white field. | show product in context | isolated device composition, white space |
| 3 | testimonials | Three compact editorial columns with press marks and short quotations. | social proof | press logos, short quote copy |
| 4 | other | Small award graphics centered as a sparse visual row. | recognition signals | award badges, white canvas |
| 5 | how-it-works | Left-aligned heading above three visual task-step columns. | three-step explanation, progressive task flow | uppercase eyebrow, rounded pastel cards, step captions |
| 6 | product-showcase | Feature copy followed by large, floating phone imagery. | demonstrate interaction | editorial text block, angled phone mockups |
| 7 | feature-split | Feature heading and paragraph paired with a row of three phone screens. | show creation workflow | uppercase eyebrow, three device states |
| 8 | feature-split | Copy block followed by a large, angled phone image. | explain sharing, show collaborative list | short feature copy, phone mockup |
| 9 | product-showcase | Large isolated iPhone imagery within a white visual field. | illustrate collaboration | angled device mockup, minimal background |
| 10 | feature-split | Feature copy followed by a prominent angled phone screen. | explain customization | uppercase eyebrow, device screenshot |
| 11 | feature-split | Left-aligned copy above a wide horizontal watch showcase. | show glanceable information | watch mockups, wide product image |
| 12 | feature-split | Text and bullet content alongside a two-column product visual. | privacy reassurance, explain data handling | privacy copy, security imagery, rounded panels |
| 13 | feature-grid | Section heading and feature link lead into two columns of concise feature items. | scan feature set, link to all features | two-column list, small feature icons |

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