Metabase
A clean, open-source analytics interface built on a white canvas with a single confident brand blue (#509ee3) as its only loud color. The system reads as trustworthy developer-friendly SaaS — Lato typography throughout, soft pale-blue tinted hero bands, light bordered feature cards, and real product dashboard chrome shown directly inside the marketing flow. Brand voltage comes almost entirely from the blue accent and from embedded product UI (charts, dashboards, query results) rather than from decorative imagery.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
h1
30px · 700 · 1.2
The quick brown fox jumps
h2
36px · 700 · 1.111
The quick brown fox jumps
h3
20px · 700 · 1.4
The quick brown fox jumps
h4
14px · 700 · 1.571
The quick brown fox jumps
body
14px · 400 · 1.857
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| xsm | 10px | |
| sm | 12px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 28px | |
| xxxl | 32px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| lg | 12px | |
| xl | 16px | |
| xxl | 24px | |
| xxxl | 36px | |
| full | 9999px |
FAQ
- What colors does Metabase use?
- Metabase's core palette includes #ffffff, #509ee3, #1c6bb0, #12436e, #28609f. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Metabase DESIGN.md.
- What font does Metabase use?
- Metabase's primary typeface is Lato. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Metabase design system?
- A clean, open-source analytics interface built on a white canvas with a single confident brand blue (#509ee3) as its only loud color. The system reads as trustworthy developer-friendly SaaS — Lato ty…