# Evidence · Design system migration spec

> Source: https://evidence.dev  ·  Curated by OpenDesign  ·  en

> Worth including as an excellent example of developer-focused SaaS design that balances technical credibility with approachable, clean UI that appeals to both technical and business stakeholders.

## 1. Identity DNA

Evidence is built for developers who build with data, treating dashboards not as finished artifacts but as living code. The design system is a modern documentation site for an analytics tool, where technical credibility and professional clarity are the same thing.

**One-liner:** Business intelligence platform that treats data dashboards as code, combining developer workflows with clean, professional UI.
**Keywords:** analytics · developer · version control · data products
**Analogy:** A modern documentation site for a developer-focused analytics tool

## 2. Color

The palette is a study in restraint, built on a foundation of clean neutral grays and white surfaces. A single, precise blue accent emerges from this quiet field to mark interactive elements, a chromatic anchor for the entire interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9FAFB` | card background |
| `--bg-quiet` | `#F3F4F6` | quiet area |
| `--ink` | `#111827` | body text |
| `--ink-soft` | `#4B5563` | secondary text |
| `--muted` | `#6B7280` | placeholder |
| `--accent` | `#1D4ED8` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** Neutral grays with a single blue accent for technical precision

The principle is technical precision: color is used sparingly and purposefully, never for decoration.

## 3. Typography

Typography carries the system's voice, pairing a transitional serif for hero headlines with a humanist sans-serif for all other reading. This combination balances the gravitas of a report with the clarity of a terminal, using Geist as the primary family.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 500 | -1.5px | Hero headlines |
| heading | 36px | 1.1 | 500 | -0.9px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Main body text |
| caption | 14px | 1.4 | 400 | 0px | Secondary text and UI labels |
| micro | 12px | 1.3 | 500 | 0.4px | Badge and navigation text |

**Type rules:**
- 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

## 4. Spacing

A consistent 4px base grid establishes the foundational rhythm, creating order that is felt rather than seen.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 px
- **Rhythm:** Consistent 4px base grid with generous vertical spacing between sections

## 5. Surfaces

Depth is communicated through restraint, using subtle 1px borders and a triptych of minimal shadows rather than dramatic elevation. White card surfaces are defined more by their containment than by heavy effects.

- **Radius:** sm 4px · md 6px · lg 8px · pill 9999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid #E5E7EB

## 6. Layout

The layout skeleton is a centered column of generous whitespace, beginning with a large, focused hero. This primary column then unfolds into multi-column feature grids, maintaining clear visual hierarchy through padding and alignment.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with generous horizontal padding and clear visual hierarchy

## 7. Motion & Interaction

Motion is understated, serving as functional punctuation rather than spectacle. Smooth 200-300ms transitions for hover states and opacity changes maintain a professional tone while providing essential feedback.

- **Durations:** micro 200ms · small 300ms · medium 700ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and opacity transitions on hover states
  - Subtle fade-in for modal and dropdown appearances

- **Hover:** Smooth 200ms color transitions with opacity changes
- **Click:** Immediate visual feedback with standard button press states
- **Transition:** All CSS transitions use 0.3s duration with standard easing curve
- **Keyboard:** Standard focus ring visibility on interactive elements

## 8. Voice & Don'ts

The voice is that of a confident technical partner: professional, direct, and devoid of marketing abstraction. It uses clear, action-oriented headlines and imperative CTAs, avoiding casual language and unframed jargon.

- **Tone:** Professional, technical, and confident
- **Headline style:** Clear, concise, and action-oriented with strong typographic hierarchy
- **CTA style:** Direct and imperative using verbs like 'Get started' and 'Book a demo'
- **Avoid:** Overly casual or conversational language / Technical jargon without context / Excessive exclamation marks / Vague or abstract value propositions

### Don'ts
- ❌ Don't use dark mode — screenshot shows light background with dark text (#FFFFFF bg, #111827 ink)
- ❌ Don't use heavy drop shadows — screenshot shows subtle 1px borders and minimal elevation
- ❌ Don't use decorative serif fonts for body — screenshot uses sans-serif for all readable text
- ❌ Don't use multi-color accents — screenshot shows single blue accent (#1D4ED8) with neutral grays
- ❌ Don't use rounded rectangles for buttons — screenshot uses pill-shaped buttons with full radius
- ❌ Don't use uppercase text everywhere — screenshot reserves uppercase for micro labels only
- ❌ Don't use gradient backgrounds on primary content — screenshot shows flat white surfaces

This system deliberately forgoes dark mode, decorative serifs, and gradient backgrounds, committing fully to a light, legible, and professional core.

## System Prompt (paste into AI tool)

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