# Metabase · Design system migration spec

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

> Worth including as a prime example of a clean, professional, and highly functional SaaS/Developer Tool design.

## 1. Identity DNA

The Metabase design system is a clean, data-driven dashboard: a precise instrument panel where information clarity is the primary structural principle. Its identity is built on the keywords **open-source**, **analytics**, **AI-powered**, and **data**, forming the logical foundation for every decision from color to component.

**One-liner:** Open source analytics platform that answers questions with AI.
**Keywords:** open-source · analytics · AI-powered · data
**Analogy:** A clean, data-driven dashboard

## 2. Color

The color system is clean and data-focused, employing a strong primary blue accent against a white background. This creates a high-clarity canvas where data visualizations and interactive elements can reside without visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F0F8FF` | card background |
| `--bg-quiet` | `#FAFBFE` | quiet area |
| `--ink` | `#222C3E` | body text |
| `--ink-soft` | `#5A6072` | secondary text |
| `--muted` | `#8D93A5` | placeholder |
| `--muted-soft` | `#4C5773` | weak hint |
| `--accent` | `#509EE3` | single accent |
| `--line` | `rgba(90, 96, 114, 0.15)` | divider |

**Color principle:** Clean, data-focused with a strong primary blue accent on a white background.

The overarching principle is to let the data and its analysis be the focus, with the palette serving as a professional, neutral framework.

## 3. Typography

Typography is handled by the Lato humanist-sans-serif family, chosen for its clean, professional character and excellent legibility across screen sizes. The type scale progresses from hero headlines to secondary text, establishing a clear hierarchy for data-driven content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 700 | -0.5px | Hero headline |
| h1 | 40px | 1.2 | 700 | 0 | Main section headlines |
| h2 | 28px | 1.3 | 700 | 0 | Subsection headlines |
| body | 16px | 1.5 | 400 | 0 | General text |
| small | 14px | 1.4 | 400 | 0 | Secondary text |

## 4. Spacing

Spacing follows a consistent 8px base unit, with a 4px micro unit for fine adjustments, creating a measured and reliable rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 px
- **Rhythm:** Consistent 8px base unit with 4px micro spacing.

## 5. Surfaces

Surface treatment relies on soft, diffuse shadows to create subtle depth and hierarchy, avoiding hard edges. Borders are consistently thin and light, using a translucent neutral to define cards and inputs without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 2px rgba(16, 24, 40, 0.05)
  - 0 16px 28px -6px rgba(24, 39, 75, 0.12)
  - 0 32px 88px -4px rgba(24, 39, 75, 0.14)
- **Borders:** 1px solid rgba(90, 96, 114, 0.15)

## 6. Layout

The layout skeleton is a standard centered container, providing a stable and familiar framework. Clear section dividers and ample white space are used to partition content and maintain an open, airy feel.

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

**Skeleton:** Standard centered container with clear section dividers.

## 7. Motion & Interaction

Motion is minimal and functional, used primarily to provide subtle feedback during interaction. Hover states and transitions employ smooth, gentle animations that confirm user actions without becoming distracting.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade-in on scroll
  - Button hover transitions

- **Hover:** Subtle background color change or shadow elevation on interactive elements.
- **Click:** Immediate visual feedback.
- **Transition:** Smooth transitions for hover and state changes.
- **Keyboard:** Standard focus outlines.

## 8. Voice & Don'ts

The editorial voice is professional, clear, and helpful, favoring direct, benefit-oriented headlines and action-oriented calls to action like 'Try' and 'Deploy'. It avoids overly technical jargon in main copy and aggressive sales language to maintain a tone of reliable expertise.

- **Tone:** Professional, clear, and helpful.
- **Headline style:** Direct, benefit-oriented, and bold.
- **CTA style:** Action-oriented verbs like 'Try' and 'Deploy'.
- **Avoid:** Overly technical jargon in main copy / Aggressive sales language

### Don'ts
- ❌ Don't use a dark mode theme — the screenshot shows a bright, light-themed interface.
- ❌ Don't use high-contrast neon colors — the palette is dominated by soft blues and neutrals.
- ❌ Don't use sharp, 90-degree corners on cards or buttons — the screenshot shows rounded corners.
- ❌ Don't use thin, elegant serifs for the primary body text — the font is a clean humanist-sans.
- ❌ Don't use large, dense blocks of text without ample white space — the layout is open and airy.
- ❌ Don't use complex gradients as primary backgrounds — the backgrounds are mostly solid white or very subtle light blue.
- ❌ Don't use a playful or whimsical illustration style — the visuals are clean, functional, and professional.

This system deliberately avoids a dark mode theme, high-contrast neon colors, and complex gradients, as these are seen as antithetical to its core principle of clear, focused data presentation.

## System Prompt (paste into AI tool)

```
Metabase is an open-source analytics platform targeting developers and data teams. The design is clean, professional, and data-focused. Key colors are a bright primary blue accent (#509EE3) on a clean white background (#FFFFFF) with neutral text tones (#222C3E, #5A6072). The typography is based on the Lato humanist-sans-serif family. Critical donts: Avoid dark mode, use of high-contrast neon colors, and sharp corners. The design prioritizes clarity, readability, and a sense of professional reliability.
```