# Meilisearch · Design system migration spec

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

> Exemplifies a modern developer-focused SaaS aesthetic with a strong balance of bold typography and sophisticated dark-mode color work.

## 1. Identity DNA

Meilisearch's visual system is engineered to feel less like an interface and more like infrastructure—something developers can integrate as smoothly as a native feature. The identity DNA is built on a foundation of speed, integration, and developer-centric clarity, mirroring the product's core promise.

**One-liner:** The open-source search engine for developers who want to build fast, relevant search experiences.
**Keywords:** Search · Developer · AI · Integration · Fast
**Analogy:** A developer-friendly search engine infrastructure that feels as smooth and fast as a native feature.

## 2. Color

The color system operates on a principle of **Dark Mode with High-Chroma Accents**, using a deep purple (#0E0021) as the foundational canvas. Vibrant pink (#D00064) and crisp white provide the high-contrast accents necessary for both readability and visual hierarchy against this nocturnal base.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0E0021` | main background |
| `--bg-soft` | `rgba(255,255,255,0.05)` | card background |
| `--bg-quiet` | `rgba(33,0,75,0.9)` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255,255,255,0.6)` | secondary text |
| `--muted` | `rgba(208,208,208,1.0)` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.5)` | weak hint |
| `--accent` | `#D00064` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Dark Mode with High-Chroma Accents

This palette ensures that the interface recedes, allowing content and interactive elements to command attention through strategic luminance.

## 3. Typography

Typography is bifurcated for distinct roles: a **geometric-sans** for display headlines establishes a bold, modern aesthetic, while a **humanist-sans** for body text ensures high readability at smaller sizes. Monospace is reserved for code blocks, clearly marking developer-focused content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.1 | 700 | -0.5px | Main hero headlines and large section headers. |
| h2 | 32px | 1.2 | 600 | -0.25px | Section headers and secondary prominent titles. |
| body | 16px | 1.5 | 400 | 0px | Standard paragraph text and UI copy. |
| small | 14px | 1.4 | 400 | 0px | Secondary text, captions, and fine print. |

**Type rules:**
- Use geometric-sans for display to maintain a bold, modern aesthetic.
- Use humanist-sans for body text to ensure high readability at smaller sizes.
- Use monospace for code blocks to clearly distinguish developer-focused content.
- Maintain generous line-heights for readability against dark backgrounds.

## 4. Spacing

Spacing follows an 8px vertical rhythm, creating a consistent and predictable grid for all content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px vertical rhythm with 24px gutters for standard content spacing, expanding to 96px for major section breaks.

## 5. Surfaces

Surfaces are defined by subtle depth and translucency. Cards and overlays use frosted, semi-transparent dark backgrounds with generous rounded corners (16px radius), bordered by a fine, low-opacity white line to delineate edges without harshness.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 32px 68px 0px rgba(0, 0, 0, 0.3)
- **Borders:** 1px solid rgba(255, 255, 255, 0.1) for cards, with optional 2px accents.

## 6. Layout

The layout skeleton is a centered, single-column flow for primary marketing narratives, expanding into multi-column grids for feature showcases. This structure prioritizes clear, linear storytelling before branching into detailed exploration.

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

**Skeleton:** Standard centered single-column flow for marketing, expanding to multi-column for feature grids.

## 7. Motion & Interaction

Motion is treated as functional feedback, not decoration. The philosophy employs fast, fluid transitions (0.15s–0.3s) using a standard cubic-bezier curve to affirm interactions without lag.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on interactive elements.
  - Subtle transforms (scale/translate) on hover for buttons and cards.
  - Fading transitions for content reveals and state changes.

- **Hover:** Smooth transition of color, background-color, and border-color.
- **Click:** Subtle scale-down effect or immediate color shift for feedback.
- **Transition:** Standard 0.15s to 0.3s cubic-bezier(0.4, 0, 0.2, 1) for all interactive properties.
- **Keyboard:** Visible focus outlines using white or accent colors to maintain accessibility on dark backgrounds.

## 8. Voice & Don'ts

The editorial voice is confident, developer-centric, and slightly playful, favoring bold, direct headlines and clear, action-oriented CTAs.

- **Tone:** Confident, developer-centric, and slightly playful.
- **Headline style:** Bold, direct, and benefit-driven, often using strong verbs.
- **CTA style:** Clear and action-oriented, like 'Get started' or 'Request a demo'.
- **Avoid:** Corporate buzzwords / Overly formal or stiff language / Passive voice

### Don'ts
- ❌ don't use bright neon greens — screenshot shows a deep purple and pink gradient palette instead
- ❌ don't use serif fonts for headlines — screenshot shows bold geometric-sans for display text
- ❌ don't use sharp, boxy corners — screenshot shows generously rounded corners (16px and pill) on all cards and buttons
- ❌ don't use white backgrounds — screenshot shows a deep dark mode with subtle translucent overlays
- ❌ don't use thin, delicate weights for emphasis — screenshot shows heavy weights (600-700) for all important text
- ❌ don't use cramped spacing — screenshot shows wide padding (96px) and generous gaps (24px) between sections

The system deliberately avoids sharp corners, light backgrounds, and thin font weights, rejecting visual tension in favor of smooth, approachable density.

## System Prompt (paste into AI tool)

```
Design a SaaS landing page for a developer search tool. Use a dark mode aesthetic with a deep purple (#0E0021) base and vibrant pink (#D00064) accents. Typography should be bold geometric-sans for headlines and humanist-sans for body. Use pill-shaped buttons, generous rounded corners (16px+), and subtle translucent card backgrounds. Ensure high contrast for readability and smooth, 0.15s cubic-bezier transitions for all interactive states. Avoid sharp corners, light backgrounds, and thin font weights.
```