---
name: Metabase
description: "Worth including as a prime example of a clean, professional, and highly functional SaaS/Developer Tool design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#222C3E"
  secondary: "#5A6072"
  tertiary: "#509EE3"
  neutral: "#8D93A5"
  bg-soft: "#F0F8FF"
  bg-quiet: "#FAFBFE"
  muted-soft: "#4C5773"
  line: "rgba(90, 96, 114, 0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0"
  h2:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Open source analytics platform that answers questions with AI.

*A clean, data-driven dashboard*

## Colors

Clean, data-focused with a strong primary blue accent on a white background.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#222C3E`)** — uses `ink` token
- **Secondary text (`#5A6072`)** — uses `ink-soft` token
- **Accent (`#509EE3`)** — uses `accent` token
- **Muted (`#8D93A5`)** — uses `muted` token
- **Borders (`rgba(90, 96, 114, 0.15)`)** — uses `line` token

## Typography

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

## Layout

Standard centered container with clear section dividers.

*Rhythm:* Consistent 8px base unit with 4px micro spacing.

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Primary buttons use the accent blue with rounded corners (8px). Secondary buttons are outlined.
- **card:** Clean white cards with subtle borders and soft shadows.
- **chip:** Not explicitly seen, but similar UI elements have a soft, pill-shaped appearance.
- **input:** Clean, bordered text inputs.
- **hero:** Large headline and subhead with two prominent call-to-action buttons.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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