# Mem · Design system migration spec

> Source: https://get.mem.ai  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a clean, warm, and approachable SaaS landing page that uses AI as a core value proposition.

## 1. Identity DNA

The system is built on the analogy of an elegant, warm digital notebook that anticipates your needs. This foundation of AI-first knowledge management guides every decision toward a minimalist, approachable, and warm interface.

**One-liner:** A clean, warm, and intelligent SaaS landing page for a personal AI-powered note-taking application.
**Keywords:** AI-first · knowledge management · minimalist · warm · approachable
**Analogy:** An elegant, warm digital notebook that anticipates your needs.

## 2. Color

The palette is defined by a warm cream background paired with deep navy typography, establishing a calm, readable core. Vibrant accents in orange, blue, and red provide interactive and decorative highlights without disturbing the primary calm.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCF8F1` | main background |
| `--ink` | `#100F31` | body text |
| `--muted` | `#707070` | placeholder |
| `--line` | `rgba(16, 15, 49, 0.15)` | divider |

**Color principle:** Warm off-white background paired with deep navy typography for a calm, readable experience.

The principle is to maintain a warm, readable experience through careful contrast and restrained use of vibrant color.

## 3. Typography

The typographic voice is established by a lighter-weight humanist-sans, creating a friendly and approachable tone. The scale is applied systematically to the main hero headline, section headings, and body text, ensuring clear hierarchy.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -3.2px | Main hero headline |
| heading | 32px | 1.2 | 400 | -1.28px | Section headings |
| body | 16px | 1.35 | 400 | 0px | Body text and UI elements |

## 4. Spacing

A consistent vertical rhythm is built on a 4px base, creating order through generous padding and predictable alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical rhythm driven by 4px base and generous padding.

## 5. Surfaces

Depth is communicated subtly, avoiding heavy drop shadows in favor of implied layers and soft circular containers. Primary interactive elements are defined by a consistent 1px solid border.

- **Radius:** sm 4px · md 8px · lg 60px · pill 100px
- **Shadows:**
  - none
- **Borders:** 1px solid #100F31 on primary interactive elements

## 6. Layout

The layout is structured around a centered container with generous padding, providing a clean and spacious grid. The hero section employs an asymmetric, split layout, creating visual interest while maintaining balance.

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

**Skeleton:** Centered container with asymmetric hero layout.

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, understated CSS transitions that enhance the interface's calm and refined feel. Interaction feedback is immediate and subtle, ensuring responsiveness without distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - smooth transitions

- **Hover:** Subtle opacity or color shift on hover.
- **Click:** Immediate visual feedback.
- **Transition:** CSS transitions applied globally.
- **Keyboard:** Standard focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is helpful, friendly, and confident, using direct, benefit-oriented headlines. The copy avoids overly technical jargon and aggressive sales language, favoring clear, action-oriented labels.

- **Tone:** Helpful, friendly, and confident.
- **Headline style:** Direct and benefit-oriented, e.g., 'One place for everything on your mind'.
- **CTA style:** Clear action-oriented labels like 'Download Mem' and 'Watch the video'.
- **Avoid:** overly technical jargon / aggressive sales language / complex metaphors

### Don'ts
- ❌ Don't use a white background — the screenshot shows a warm cream (#FCF8F1) background.
- ❌ Don't use a bright primary blue for buttons — the screenshot shows outline buttons with navy borders.
- ❌ Don't use a heavy sans-serif for headlines — the screenshot uses a lighter-weight humanist-sans.
- ❌ Don't use sharp corners on containers — the screenshot shows pill-shaped buttons and circular image elements.
- ❌ Don't use a dark mode as the primary interface — the screenshot clearly shows a light theme.
- ❌ Don't use centered text for long headlines — the screenshot shows left-aligned hero text.

The system deliberately avoids white backgrounds, harsh primary blues, heavy sans-serifs, sharp corners, dark mode, and centered long headlines to preserve its warm, approachable identity.

## System Prompt (paste into AI tool)

```
Mem is a clean, warm, and AI-focused SaaS application for personal knowledge management. It uses a light cream background (#FCF8F1) paired with deep navy (#100F31) typography for a calm, readable experience. The design relies on a humanist-sans font family with generous spacing and pill-shaped UI components. Critical design rules: avoid white backgrounds, avoid harsh primary blue buttons, and use left-aligned, benefit-oriented headlines instead of centered text. The overall aesthetic is minimalist, friendly, and focused on clarity and ease of use.
```