# Amie · Design system migration spec

> Source: https://amie.so  ·  Curated by OpenDesign  ·  en

> A prime example of a modern, human-centric SaaS design that balances professionalism with approachability through clean typography and thoughtful spacing.

## 1. Identity DNA

Amie's design system is built like a well-calibrated productivity tool disguised as a friendly companion. It pairs the precision of a high-contrast, ink-on-white canvas with the approachability of a single vibrant blue accent, creating an interface that feels both trustworthy and welcoming.

**One-liner:** A friendly, AI-powered productivity app that keeps your schedule and notes effortlessly organized.
**Keywords:** productive · integrated · clean · intelligent · friendly
**Analogy:** A clean, modern workspace that feels like a helpful friend rather than a complex tool.

## 2. Color

The palette is deliberately restrained: a pure white ground for clarity, dark ink for legibility, and a single vibrant blue reserved for primary actions. This economy of color directs focus without visual noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#5C5C5C` | secondary text |
| `--muted` | `#A0A0A0` | placeholder |
| `--accent` | `#11A8FF` | single accent |
| `--line` | `rgba(205, 205, 205, 1)` | divider |

**Color principle:** A clean, high-contrast palette with a single vibrant blue accent, ensuring readability and a professional yet approachable feel.

The core principle is clarity through restraint—a high-contrast foundation with one purposeful accent.

## 3. Typography

The typographic voice is defined by a clean geometric sans-serif, used with tight line heights and negative tracking for display text to create a compact, confident feel. Hierarchy is established through deliberate shifts in weight and size, not decorative variation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 700 | -0.5px | Main hero headlines |
| heading | 20px | 1.4 | 600 | -0.2px | Section headings |
| body | 16px | 1.75 | 400 | -0.003px | Primary text content |
| small | 14px | 1.4 | 400 | 0 | Secondary text and UI labels |

## 4. Spacing

A consistent 4px base grid underpins the entire system, creating a reliable vertical rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 48 / 64 / 96 px
- **Rhythm:** A base-4 system that uses generous padding (12px, 20px, 28px) to create an airy, uncluttered feel.

## 5. Surfaces

Depth is communicated subtly through soft, diffuse shadows and fine 1px borders. These elements provide just enough separation between cards and surfaces without breaking the clean, flat aesthetic.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 0px 0px 1px
  - rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px
  - rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px
- **Borders:** Subtle 1px solid borders using rgba(205, 205, 205, 1) for soft delineation.

## 6. Layout

The layout skeleton is a centered single-column composition, anchored by a prominent full-width hero section. This focused structure prioritizes content and a large app mockup, using generous whitespace to frame each element.

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

**Skeleton:** A centered, wide container with a narrow, readable text column and a sidebar-heavy product UI layout.

## 7. Motion & Interaction

Motion is applied with surgical subtlety—smooth fades and immediate button feedback that reinforce the interface's polished, responsive character. The philosophy is to guide attention, not to decorate.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for color, background-color, and border-color on interactive elements.

- **Hover:** Subtle changes in background color or text color, often with a pointer cursor.
- **Click:** Standard button press behavior.
- **Transition:** A global 'all' transition is applied, with specific 150ms easing for color and property changes.
- **Keyboard:** Standard focus management, though not explicitly visible in the static screenshots.

## 8. Voice & Don'ts

The editorial voice is confident, helpful, and approachable, using short, punchy headlines with a clear value proposition. It communicates directly with action-oriented verbs, avoiding aggressive sales language and unnecessary jargon.

- **Tone:** Friendly, confident, and straightforward, avoiding overly technical jargon.
- **Headline style:** Bold and direct, often using a highlighted accent phrase to draw attention.
- **CTA style:** Action-oriented and inviting, using clear phrases like 'Get started'.
- **Avoid:** Corporate stiffness / Complex technical language / Aggressive sales tactics

### Don'ts
- ❌ Don't use dark, moody backgrounds — the screenshot shows a predominantly white and airy background.
- ❌ Don't use heavy, decorative serif fonts for headlines — the screenshot shows a clean, humanist sans-serif.
- ❌ Don't use multiple competing vibrant accent colors — the screenshot primarily uses one bright blue accent.
- ❌ Don't use sharp, boxy corners for buttons — the screenshot shows heavily rounded, pill-shaped buttons.
- ❌ Don't use thick, heavy borders to separate sections — the screenshot uses subtle, light grey lines.
- ❌ Don't overcrowd the interface with dense text blocks — the screenshot maintains generous whitespace and spacing.
- ❌ Don't use a muted, monochromatic palette without any color — the screenshot relies on a clear blue accent.

The system deliberately avoids dark backgrounds, heavy shadows, serif type, and multiple accent colors to preserve its clean, high-trust foundation.

## System Prompt (paste into AI tool)

```
This site is a modern SaaS productivity app with a clean, friendly, and approachable design. The primary brand color is a vibrant blue (#11A8FF) against a white background, with black and grey text. It uses a clean humanist-sans typeface (Inter) for high readability. The layout is spacious, using generous padding and a wide container to create an airy feel. Key interactions use smooth, subtle transitions. Critical donts: do not use dark backgrounds, do not use decorative serifs, and do not overcrowd the interface with complex elements or multiple bright accent colors.
```
