---
name: Umami
description: "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."
version: alpha

colors:
  background: "#ffffff"
  primary: "#202020"
  secondary: "#838383"
  tertiary: "#3366FF"
  neutral: "#838383"
  bg-soft: "#fafafa"
  line: "rgba(0, 0, 0, 0.05)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 63px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-1.575px"
  heading:
    fontFamily: humanist-sans
    fontSize: 42px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.05px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 11.375px
    lineHeight: 1.54
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 3.35544px
  md: 7.35px
  lg: 9.45px
  pill: 9999px

spacing:
  xs: 7px
  sm: 10.5px
  md: 14px
  lg: 21px
  xl: 28px
  2xl: 35px
  3xl: 56px

---

## Overview

Umami is a simple, privacy-focused, open-source web analytics alternative to Google Analytics.

*A clean, minimalist dashboard for website analytics.*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#202020`)** — uses `ink` token
- **Secondary text (`#838383`)** — uses `ink-soft` token
- **Accent (`#3366FF`)** — uses `accent` token
- **Muted (`#838383`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.05)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* The spacing scale is based on a 7px base unit.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 3.35544px
- `md`: 7.35px
- `lg`: 9.45px
- `pill`: 9999px

## Components

- **button:** A blue, rounded-rectangle button with white text for primary actions.
- **card:** A white card with a subtle border and a light shadow, used to display UI mockups.
- **chip:** Small, rounded badges used to display percentage changes in metrics.
- **input:** A standard text input with a subtle border.
- **hero:** A large, centered hero section with a bold headline, subtitle, and a primary call-to-action button, followed by a UI mockup.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```