---
name: Evidence
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#111827"
  secondary: "#4B5563"
  tertiary: "#1D4ED8"
  neutral: "#6B7280"
  bg-soft: "#F9FAFB"
  bg-quiet: "#F3F4F6"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.9px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  micro:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "0.4px"

rounded:
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

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

---

## Overview

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

*A modern documentation site for a developer-focused analytics tool*

## Colors

Neutral grays with a single blue accent for technical precision

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#111827`)** — uses `ink` token
- **Secondary text (`#4B5563`)** — uses `ink-soft` token
- **Accent (`#1D4ED8`)** — uses `accent` token
- **Muted (`#6B7280`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** 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

## Layout

Centered content with generous horizontal padding and clear visual hierarchy

*Rhythm:* Consistent 4px base grid with generous vertical spacing between sections

## Elevation & Depth

- 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

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 8px
- `pill`: 9999px

## Components

- **button:** Rounded pill shapes with high contrast; black filled primary, white bordered secondary
- **card:** White backgrounds with subtle shadows and 1px borders
- **chip:** Small pill-shaped tags with uppercase micro text
- **input:** Clean bordered fields with subtle shadows
- **hero:** Large centered headline with secondary subtitle and dual CTA buttons

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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