CURATED · OPEN · FREE

Evidence

Business intelligence platform that treats data dashboards as code, combining developer workflows with clean, professional UI.

databi
Evidence screenshot
↓ Download design system (9 MB)Open in OpenDesign

Visit: https://evidence.dev

📦 Browse pack contents →

01

Identity DNA

analyticsdeveloperversion controldata products

A modern documentation site for a developer-focused analytics tool

02

Color

#1D4ED8Accent
#111827Ink
#4B5563Ink soft
#FFFFFFBG
#F9FAFBBG soft
#F3F4F6BG quiet
#6B7280Muted
rgba(229, 231, 235, 1)Line

Neutral grays with a single blue accent for technical precision

03

Typography

transitional-serif · humanist-sans · geometric-sans

Use letter-spacing 0.4px for uppercase micro text · Use letter-spacing -1.5px for large display headlines · Maintain 1.5 line-height for body text at 16px · Use weight 600 for emphasis within body text · Use weight 500 for interactive elements

04

Spacing

4px
8px
12px
16px
20px
24px
32px
48px
64px

Consistent 4px base grid with generous vertical spacing between sections

05

Surfaces

sm · 4px
md · 6px
lg · 8px
pill · 9999px

1px solid #E5E7EB

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered content with generous horizontal padding and clear visual hierarchy

07

Motion & Interaction

200msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and opacity transitions on hover states · Subtle fade-in for modal and dropdown appearances

Smooth 200ms color transitions with opacity changes · Immediate visual feedback with standard button press states

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Evidence — 桌面首屏（hero）
桌面首屏（hero）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Evidence — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Evidence.dev is a developer-focused analytics platform presenting business intelligence as code. The design uses a clean white background (#FFFFFF) with primary black text (#111827) and a single blue accent (#1D4ED8). Typography combines a transitional serif for hero headlines with a humanist sans for body text, using Geist as the primary font family. The layout features generous whitespace, centered content, and subtle card elevation through light borders. Key critical donts: never use dark mode, avoid heavy shadows or gradients on content areas, and never use decorative fonts for technical content. The interface prioritizes readability and professional credibility for a technical audience building data products.

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