# Umami · Design system migration spec

> Source: https://umami.is  ·  Curated by OpenDesign  ·  en

> This site is a great example of a clean, restrained SaaS design that uses a single accent color and generous spacing to create a professional and trustworthy feel.

## 1. Identity DNA

The Umami design system operates like a clean, minimalist dashboard: every element serves a clear analytical purpose against a neutral field. Its identity is defined by restraint, using a single accent color and generous whitespace to direct focus to the data that matters. The system prioritizes clarity and trust, positioning itself as a straightforward, open-source alternative in a complex market.

**One-liner:** Umami is a simple, privacy-focused, open-source web analytics alternative to Google Analytics.
**Keywords:** analytics · simplicity · open-source · developer-friendly · privacy-focused
**Analogy:** A clean, minimalist dashboard for website analytics.

## 2. Color

The palette is built on a foundation of stark contrast, using a clean white background and near-black text for maximum legibility. A single, vibrant blue accent is reserved exclusively for primary actions and interactive states, creating a clear and unambiguous visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#fafafa` | card background |
| `--ink` | `#202020` | body text |
| `--ink-soft` | `#838383` | secondary text |
| `--muted` | `#838383` | placeholder |
| `--accent` | `#3366FF` | single accent |
| `--line` | `rgba(0, 0, 0, 0.05)` | divider |

**Color principle:** A clean, high-contrast palette using a single blue accent color for primary actions against a neutral white background.

The principle is disciplined restraint, using color not for decoration but as a direct signal for function.

## 3. Typography

The typographic voice is set by a humanist sans-serif, chosen for its approachable clarity and technical precision. A bold weight for display headings and a regular weight for body text establish a clear hierarchy that supports, rather than distracts from, the content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 63px | 1.0 | 800 | -1.575px | Main hero heading |
| heading | 42px | 1.0 | 700 | -1.05px | Section headings |
| body | 14px | 1.43 | 400 | 0 | Body text and UI elements |
| small | 11.375px | 1.54 | 400 | 0 | Small UI labels |

**Type rules:**
- Display headings are set in a bold humanist sans-serif with tight letter-spacing.
- Body text uses a regular weight humanist sans-serif for readability.
- Monospaced font is used for code snippets in documentation.

## 4. Spacing

All spatial relationships are governed by a precise 7px base unit, creating a consistent and measurable rhythm throughout the interface.

- **Base unit:** 7px
- **Scale:** 7 / 10.5 / 14 / 21 / 28 / 35 / 56 / 70 / 100 px
- **Rhythm:** The spacing scale is based on a 7px base unit.

## 5. Surfaces

Depth is communicated through a graduated scale of subtle, monochromatic shadows applied selectively to elevated surfaces. This approach, paired with a hairline border, defines layers without visual noise, keeping the interface flat and functional.

- **Radius:** sm 3.35544px · md 7.35px · lg 9.45px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
  - rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
  - rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
  - rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
  - rgba(0, 0, 0, 0.15) 0px 10px 40px 0px
- **Borders:** 1px solid rgba(0, 0, 0, 0.05)

## 6. Layout

The layout begins with a focused, single-column hero that makes a direct value proposition. It then transitions into a structured, multi-column grid to present features and content in an organized, scannable manner.

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

**Skeleton:** A single-column layout for the hero, transitioning to a multi-column grid for features and content sections.

## 7. Motion & Interaction

Motion in the Umami system is purely functional, used to acknowledge interaction and indicate state change. All transitions are brief and smooth, providing subtle feedback for actions like hovers and focus, or gentle opacity fades for loading dynamic content.

- **Durations:** micro 150ms · small 200ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover and focus.
  - Opacity fade-ins for dynamic content like charts.

- **Hover:** Color and background-color changes on hover for interactive elements like buttons and links.
- **Click:** Subtle background-color changes on click.
- **Transition:** All interactive properties use a 0.2s or 0.15s cubic-bezier transition.
- **Keyboard:** Focusable elements have visible outlines for keyboard navigation.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and helpful, matching the interface's clarity. Language is concise and action-oriented, avoiding technical jargon and promotional hype to maintain a professional, trustworthy tone.

- **Tone:** Direct, confident, and helpful, emphasizing simplicity and privacy.
- **Headline style:** Bold, large, and concise statements that highlight the core value proposition.
- **CTA style:** Clear and action-oriented, using phrases like 'Get started for free'.
- **Avoid:** Using complex jargon or overly technical language. / Being overly promotional or using hype words. / Using a playful or overly casual tone.

### Don'ts
- ❌ Don't use a dark background — the screenshot shows a predominantly white (#ffffff) background.
- ❌ Don't use multiple accent colors — the screenshot shows only a single blue (#3366FF) accent.
- ❌ Don't use rounded corners with a radius greater than 9.45px — the screenshot shows conservative rounding.
- ❌ Don't use drop shadows on all elements — the screenshot shows shadows only on specific components like cards.
- ❌ Don't use a serif font for headings — the screenshot shows a humanist sans-serif for all headings.
- ❌ Don't use a small, cramped layout — the screenshot shows generous white space and padding.
- ❌ Don't use a dense, information-heavy hero section — the screenshot shows a clear, focused headline and a single CTA.
- ❌ Don't use a dark mode theme — the screenshot shows a light theme.

The system deliberately avoids dark mode, multiple accent colors, and complex typography to preserve its core identity of focused simplicity.

## System Prompt (paste into AI tool)

```
Umami is a simple, open-source web analytics tool positioned as a privacy-focused alternative to complex solutions. The design uses a clean white (#ffffff) background with a primary blue (#3366FF) accent for CTAs. Typography is humanist-sans, with a bold 63px display font and a regular 14px body font. Layout is spacious with a 1280px container. Critical donts: Don't use dark mode, don't add multiple accent colors, and don't use a serif font for headings. The overall feel is restrained, professional, and focused on clarity.
```