# Getdooapp · Design system migration spec

> Source: https://getdooapp.com  ·  Curated by OpenDesign  ·  en

> A textbook example of clean, modern product landing page design that prioritizes whitespace and clear typography to communicate a calm, organized brand identity.

## 1. Identity DNA

The design system for Getdoo is constructed like a well-organized digital notebook, where each element has a purpose and place. It achieves a state of productive calm through restraint, relying on a single deep violet accent to guide attention across generous white space.

**One-liner:** A minimal reminders app for building better habits, presented through clean typography and high-fidelity device mockups.
**Keywords:** Productivity · Reminders · Simplicity · Cards · Habits
**Analogy:** A calm, organized digital notebook for your daily tasks.

## 2. Color

The palette is a study in controlled contrast, anchored by a clean white canvas and a soft, muted dark gray for body text. A single deep violet accent provides a deliberate point of emphasis for primary actions, ensuring visual hierarchy without clutter.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--bg-quiet` | `#E7EFF5` | quiet area |
| `--ink` | `#383938` | body text |
| `--ink-soft` | `#6E6D7A` | secondary text |
| `--muted` | `#6E6D7A` | placeholder |
| `--accent` | `#5550CA` | single accent |
| `--line` | `rgba(110,109,122,1.0)` | divider |

**Color principle:** Clean white backgrounds with a single deep violet accent and muted slate text.

Color is used as a functional guide, not a decorative element, maintaining the system's focused and uncluttered appearance.

## 3. Typography

Typography employs a humanist sans-serif category, set in a strict, light font weight to preserve an airy and open texture. Headlines are set tight with negative letter spacing for a modern, precise feel, while body text maintains clear legibility.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 65px | 1.1 | 400 | -2.6px | Main hero headline |
| heading | 39px | 1.2 | 400 | -1.56px | Section headers |
| body | 16px | 1.5 | 400 | 0px | Main body text |

**Type rules:**
- Use negative letter spacing for headlines to create a tight, modern feel.
- Maintain a strict 400 font weight throughout to preserve a light, airy appearance.
- Ensure generous vertical whitespace between headings and paragraphs.

## 4. Spacing

The vertical rhythm is defined by generous spacing, with large padding blocks separating major sections to create clear visual breaks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with large padding blocks (130px) between major sections.

## 5. Surfaces

Surfaces are intentionally flat and depthless, with no drop shadows applied to components like buttons. Divisions between sections are marked only by subtle, one-pixel top borders.

- **Radius:** sm 4px · md 8px · lg 30px · pill 39px
- **Borders:** Subtle top borders (1px solid #6E6D7A) for section dividers.

## 6. Layout

The layout follows a single-column, centered skeleton that focuses the user's journey downward through a clear narrative. Generous side margins frame the content, which is anchored by high-quality device mockups.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single-column centered layout with generous margins and high-quality device mockups.

## 7. Motion & Interaction

Motion is restrained and purposeful, focusing on subtle opacity and transform transitions to confirm interactivity. All transitions use a consistent, smooth timing to avoid jarring the user and maintain a calm experience.

- **Durations:** micro 200ms · small 250ms · medium 1000ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Opacity and transform transitions on interactive elements.
  - Smooth transitions for hover states on navigation links.

- **Hover:** Subtle opacity or color transitions on links and buttons.
- **Click:** Minimal visual feedback beyond standard pointer cursor.
- **Transition:** Consistent use of 0.25s ease-in-out for most transitions.
- **Keyboard:** Standard focus management for navigation.

## 8. Voice & Don'ts

The editorial voice is encouraging and helpful, using short, direct phrases that focus on user benefits. This tone is paired with a strict visual discipline to avoid clutter and competing calls to action.

- **Tone:** Encouraging, helpful, and slightly casual.
- **Headline style:** Short, direct, and benefit-oriented phrases.
- **CTA style:** Simple, action-oriented verbs like 'Download'.
- **Avoid:** Avoid overly technical jargon. / Avoid aggressive or loud marketing language. / Avoid cluttered layouts with multiple competing CTAs.

### Don'ts
- ❌ Don't use heavy drop shadows on buttons — screenshot shows flat, solid pill buttons.
- ❌ Don't use all-caps for body text — screenshot shows sentence case for features and navigation.
- ❌ Don't use a dark background for the primary interface — screenshot shows a clean white (#FFFFFF) background.
- ❌ Don't use high-contrast black text — screenshot uses a softer dark gray (#383938) for primary ink.
- ❌ Don't use complex grids for content presentation — screenshot shows a simple, single-column centered layout.
- ❌ Don't use a wide variety of colors — screenshot restricts the palette to white, gray, and a single violet accent.

The system deliberately avoids dark mode, heavy shadows, and complex grids to uphold its core principles of simplicity and focus.

## System Prompt (paste into AI tool)

```
This is a minimalist productivity app landing page. The primary background is pure white (#FFFFFF) with text in a soft dark gray (#383938) and a single deep violet (#5550CA) accent for the call-to-action button. The typography is a humanist-sans category (Avenir Next/Nunito Sans) with light weights and negative letter spacing for headlines. Key design rules include: use pill-shaped buttons, maintain generous vertical whitespace, and rely on high-fidelity device mockups for visual interest. Do not use dark mode, heavy shadows, or cluttered layouts. Keep the interface light, calm, and focused on the product's core value proposition of habit-building through reminders.
```