CURATED · OPEN · FREE

Metabase

Open source analytics platform that answers questions with AI.

databi

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://www.metabase.com

📦 Browse pack contents →

Identity DNA

open-sourceanalyticsAI-powereddata

A clean, data-driven dashboard

Color

#509EE3Accent

#222C3EInk

#5A6072Ink soft

#FFFFFFBG

#F0F8FFBG soft

#FAFBFEBG quiet

#8D93A5Muted

rgba(90, 96, 114, 0.15)Line

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

Typography

humanist-sans · monospace

display48px · 700
h140px · 700
h228px · 700
body16px · 400
small14px · 400

Spacing

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

Consistent 8px base unit with 4px micro spacing.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(90, 96, 114, 0.15)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard centered container with clear section dividers.

Motion & Interaction

150msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Fade-in on scroll · Button hover transitions

Subtle background color change or shadow elevation on interactive elements. · Immediate visual feedback.

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.

Voice & Don'ts

Tone Professional, clear, and helpful.
Headlines Direct, benefit-oriented, and bold.
CTAs Action-oriented verbs like 'Try' and 'Deploy'.

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.
Avoid: Overly technical jargon in main copy
Avoid: Aggressive sales language

Inside the pack — real screenshots

Metabase — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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