CURATED · OPEN · FREE

Umami

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

01

Identity DNA

A clean, minimalist dashboard for website analytics.

02

Color

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

03

Typography

humanist-sans · monospace

• display63px · 800
• heading42px · 700
• body14px · 400
• small11px · 400

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.

04

Spacing

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

05

Surfaces

1px solid rgba(0, 0, 0, 0.05)

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

06

Layout

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

07

Motion & Interaction

Smooth color and background-color transitions on hover and focus. · Opacity fade-ins for dynamic content like charts.

Color and background-color changes on hover for interactive elements like buttons and links. · Subtle background-color changes on click.

08

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.

09

Voice & Don'ts

• Tone Direct, confident, and helpful, emphasizing simplicity and privacy.
• Headlines Bold, large, and concise statements that highlight the core value proposition.
• CTAs Clear and action-oriented, using phrases like 'Get started for free'.

• 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.
• Avoid: Using complex jargon or overly technical language.
• Avoid: Being overly promotional or using hype words.
• Avoid: Using a playful or overly casual tone.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko