# Gleap · Design system migration spec

> Source: https://gleap.io  ·  Curated by OpenDesign  ·  en

> Excellent example of restrained, professional SaaS design that prioritizes clarity and readability over visual complexity.

## 1. Identity DNA

Gleap’s design system treats the interface as a professional team member: competent, integrated, and never louder than the work it supports. The visual language is built around restraint and clarity, mirroring the product’s promise of AI agents that handle tasks without fanfare.

**One-liner:** AI agents that automate support, feedback, and development tasks
**Keywords:** AI support · self-driving development · productivity · SaaS
**Analogy:** A professional, capable AI team member integrated into your workflow

## 2. Color

The palette is built on warm neutrals—off-whites and soft grays—that create a calm, stable environment. High contrast is reserved for text against these backgrounds, ensuring readability without visual noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F6F3` | main background |
| `--bg-soft` | `#EDEDE8` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#353535` | body text |
| `--ink-soft` | `#292929` | secondary text |
| `--muted` | `rgba(53,53,53,0.5)` | placeholder |
| `--muted-soft` | `rgba(41,41,41,0.7)` | weak hint |
| `--line` | `rgba(53,53,53,0.12)` | divider |

**Color principle:** Warm neutrals with high contrast for clarity

Color is used sparingly and functionally, never decoratively.

## 3. Typography

The typography uses a humanist sans-serif for its approachable yet professional character, reinforcing the product's blend of automation and human-centric design. A tight letter-spacing on large display text creates a confident, modern feel, while the 16px base keeps body copy grounded.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display-lg | 64px | 1.1 | 400 | -0.64px | Main hero headline |
| display-sm | 32px | 1.3 | 400 | -0.45px | Section headlines |
| body-lg | 22px | 1.35 | 400 | 0 | Hero body text |
| body | 16px | 1.5 | 400 | 0 | Default body text |
| caption | 14px | 1.5 | 400 | 0 | Small text and labels |

**Type rules:**
- Use humanist sans-serif for all text
- Maintain tight letter-spacing on large display text
- Keep body text at 16px base for readability

## 4. Spacing

Spacing follows a consistent 4px base grid, with vertical rhythm emphasized through generous padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 18 / 24 / 32 / 60 / 84 px
- **Rhythm:** Consistent 4px base grid with generous vertical spacing

## 5. Surfaces

Surfaces are defined by subtle depth, using soft shadows to suggest elevation without creating visual weight. Borders are minimal—a light, semi-transparent stroke is enough to define edges where necessary.

- **Radius:** sm 6px · md 12px · lg 200px · pill 999px
- **Shadows:**
  - 0px 18px 55px 0px rgba(16,24,40,0.12)
  - 0px 1px 3px 0px rgba(0,0,0,0.15)
  - 0px 0px 20px 0px rgba(0,0,0,0.1)
- **Borders:** 1px solid rgba(53,53,53,0.12)

## 6. Layout

The primary layout is a centered single-column flow for focused reading, which then expands into a wide grid for comparative sections like pricing. This structure guides the user naturally from one piece of information to the next.

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

**Skeleton:** Centered single-column layout for content, wide grid for pricing cards

## 7. Motion & Interaction

Motion is applied with purpose, not decoration. Smooth opacity and background-color transitions on hover, along with transform transitions for interactive elements, provide immediate feedback without distracting from the content.

- **Durations:** micro 200ms · small 200ms · medium 200ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and background-color transitions on hover
  - Transform transitions for interactive elements

- **Hover:** Subtle background color changes and opacity adjustments
- **Click:** Immediate visual feedback with no delay
- **Transition:** All properties transition smoothly over 0.2s
- **Keyboard:** Standard focus states for accessibility

## 8. Voice & Don'ts

The editorial voice is professional and clear, using benefit-focused statements with periods. It avoids jargon and casual phrasing, maintaining a confident tone that states what the product does.

- **Tone:** Professional yet approachable, confident in AI capabilities
- **Headline style:** Clear, benefit-focused statements with period punctuation
- **CTA style:** Action-oriented with clear value proposition (e.g., 'Start 14-day free trial')
- **Avoid:** Technical jargon / Overly casual language / Unclear value propositions

### Don'ts
- ❌ Don't use neon or saturated accent colors — screenshot shows muted, warm neutrals only
- ❌ Don't use serif fonts — screenshot shows consistent humanist sans-serif throughout
- ❌ Don't create heavy visual hierarchy with color — screenshot uses weight and size, not color
- ❌ Don't add decorative borders or heavy shadows — screenshot uses subtle borders and minimal shadows
- ❌ Don't use complex gradients — screenshot shows flat, warm background colors
- ❌ Don't overcrowd the layout — screenshot maintains generous whitespace and breathing room

The system deliberately avoids neon accents, decorative gradients, and complex visual hierarchies, committing to a flat, readable, and spacious interface.

## System Prompt (paste into AI tool)

```
Gleap.io is a SaaS platform offering AI-powered support and development tools. The design uses a warm, neutral palette with #F6F6F3 as the primary background, #353535 for primary text, and #EDEDE8 for subtle contrast. Typography is humanist sans-serif (Switzer) with tight letter-spacing on large display text (64px). Key elements: pill-shaped buttons with dark backgrounds for primary actions, generous 84px vertical padding, and a clean centered layout. Critical donts: never use neon colors, never use serif fonts, never overcrowd the layout with decorative elements. The design prioritizes clarity and professionalism over visual complexity.
```