# Lindy · Design system migration spec

> Source: https://www.lindy.ai  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern SaaS landing page that balances professional restraint with clear, bold typography and strategic color accents to build trust and drive conversion.

## 1. Identity DNA

The design system for Lindy is built to embody its core analogy: a world-class executive assistant that handles your daily tasks. Every visual decision serves a function of professional clarity and efficient support, creating a system that works so you don't have to. It is a digital architecture of trust and automation.

**One-liner:** An AI-powered note-taking and scheduling assistant for busy professionals.
**Keywords:** professional · efficient · assistant · automated · trustworthy
**Analogy:** A world-class executive assistant that handles your daily tasks so you can focus on what matters.

## 2. Color

The color system establishes professional clarity with a warm off-white canvas that provides a softer, more approachable foundation than stark white. Strategic use of deep navy and a vibrant blue accent creates a hierarchy that guides the eye without shouting.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCF9F8` | main background |
| `--ink` | `#0F1E2E` | body text |
| `--muted` | `#474A55` | placeholder |
| `--accent` | `#2A66FF` | single accent |
| `--line` | `rgba(0, 0, 0, 0.08)` | divider |

**Color principle:** Professional clarity with a warm off-white canvas and strategic blue/gold accents.

The principle is one of restrained contrast, where every color serves a clear, functional purpose in the interface.

## 3. Typography

Typographic choices balance modern authority with approachable warmth. Headlines use a structured grotesque-sans in bold weights for decisive statements, while body text relies on the clean humanist forms of Manrope for sustained readability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 500 | -1.44px | Hero headline |
| h2 | 48px | 1.05 | 500 | -0.96px | Section headings |
| body | 16px | 1.5 | 500 | -0.16px | General body text and UI labels |
| body-lg | 20px | 1.5 | 500 | -0.2px | Subheadings and feature descriptions |

**Type rules:**
- Headlines use tight tracking and sentence-case capitalization.
- Body text maintains a consistent 1.5 line-height for readability.
- Bold weight (500) is standard for most text, with 700 reserved for accents.

## 4. Spacing

The layout breathes with a consistent 64px vertical rhythm that organizes major content sections, establishing a calm, measured pace for the user's journey.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 64px vertical rhythm for major sections, with 24px gutters for grid elements.

## 5. Surfaces

Surfaces are defined by subtle depth and precise separation. Thin borders and carefully calibrated shadows lift interactive cards from the canvas, creating a layered but orderly space.

- **Radius:** sm 8px · md 12px · lg 24px · pill 1440px
- **Shadows:**
  - rgba(0, 0, 0, 0.15) 0px 1px 10px 0px
  - rgba(20, 21, 26, 0.05) 0px 1px 2px 0px
- **Borders:** Thin 1px borders using a subtle rgba(0, 0, 0, 0.08) for card separation.

## 6. Layout

The layout skeleton begins with a centered, single-column hero for focused messaging, which then opens into a spacious 12-column grid to present features and information in an organized, digestible format.

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

**Skeleton:** Centered single-column hero flowing into a 12-column grid for features.

## 7. Motion & Interaction

Motion is employed as a tool for feedback and spatial awareness, not decoration. Transitions are fast and smooth, providing immediate confirmation of interaction while maintaining a professional, efficient cadence.

- **Durations:** micro 220ms · small 300ms · medium 450ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
- **Patterns:**
  - Smooth transitions for hover states on buttons and links (0.2s).
  - Transform-based movement for interactive elements (0.45s).
  - Subtle opacity fades for content reveals (0.3s).

- **Hover:** Subtle background color changes or shadow elevations on interactive elements.
- **Click:** Immediate feedback with slight scale or color shifts.
- **Transition:** Standardized 0.2s for color and background-color transitions.
- **Keyboard:** Logical tab order following the visual flow of the page.

## 8. Voice & Don'ts

The editorial voice is professional, helpful, and efficient, mirroring the persona of the AI assistant itself. Headlines are direct and benefit-oriented, while calls to action are clear and action-focused.

- **Tone:** Professional, helpful, and efficient.
- **Headline style:** Direct and benefit-oriented, using sentence-case with a touch of color for emphasis.
- **CTA style:** Clear and action-oriented, like 'Try for free'.
- **Avoid:** Jargon / Aggressive sales language / Vague promises / Overly casual slang

### Don'ts
- ❌ Don't use a pure white (#FFFFFF) background — screenshot shows a warm off-white (#FCF9F8) instead.
- ❌ Don't use heavy black (#000000) for text — screenshot uses a deep navy (#0F1E2E) instead.
- ❌ Don't use sharp corners on all elements — screenshot uses rounded rectangles and pill shapes (up to 1440px radius) instead.
- ❌ Don't use thin, light-weight typography for headlines — screenshot uses bold (500-700 weight) grotesque-sans fonts instead.
- ❌ Don't use a multi-colored or busy background pattern — screenshot maintains a clean, mostly monochromatic background with a single accent color instead.
- ❌ Don't use small, cramped spacing — screenshot utilizes generous 64px section padding and clear 24px gutters instead.

The system deliberately avoids jargon, aggressive sales language, and vague promises, grounding its communication in tangible utility.

## System Prompt (paste into AI tool)

```
Lindy is a premium AI productivity tool for professionals, presented on a warm off-white (#FCF9F8) canvas. The design DNA centers on a deep navy (#0F1E2E) for primary text and a vibrant blue (#2A66FF) as the dominant accent, with secondary gold highlights. Typography relies on a clean, modern humanist-sans (Manrope) for body text and a slightly more structured grotesque-sans for headlines, with heavy use of 500-700 weight. The layout is spacious and centered, prioritizing clarity. Key critical donts: never use pure white for the main background, avoid sharp corners on primary UI elements, and never use thin or low-contrast text for headlines. The voice is professional and helpful, focusing on the core value proposition of saving time through automation.
```