---
name: Vouchatlas
description: "Worth including as an excellent example of a clean, functional data visualization interface that prioritizes legibility and information density over decorative aesthetics."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#18181B"
  secondary: "#71717A"
  tertiary: "#DC2626"
  neutral: "#E4E4E7"
  bg-soft: "#F4F4F5"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "-0.4px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

An interactive map visualizing crowdsourced travel safety and infrastructure data.

*A crowdsourced travel safety atlas for digital nomads.*

## Colors

Neutral foundation with data-driven color highlights.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#18181B`)** — uses `ink` token
- **Secondary text (`#71717A`)** — uses `ink-soft` token
- **Accent (`#DC2626`)** — uses `accent` token
- **Muted (`#E4E4E7`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

## Layout

Split layout with a dominant map visualization on the left and a data sidebar on the right.

*Rhythm:* Consistent 4px base system.

## Elevation & Depth

- rgba(0,0,0,0.1) 0px 1px 3px 0px
- rgba(0,0,0,0.1) 0px 1px 2px -1px
- Borders: Subtle 1px borders and soft shadows define boundaries.

## Shapes

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

## Components

- **button:** Minimal pill-shaped buttons with subtle borders and hover transitions.
- **card:** Clean cards with subtle shadows and tight padding.
- **chip:** Small tag-like elements for data status.
- **input:** Standard text inputs with rounded borders.
- **hero:** Full-width section centered around an interactive map visualization.

## Do's and Don'ts

**Don't:**
- Don't use decorative fonts — screenshot shows clean, legible sans-serif typography.
- Don't add heavy drop shadows — screenshot shows subtle, soft box-shadows.
- Don't use bright, unvalidated accent colors — screenshot shows functional reds and oranges for data.
- Don't use complex gradients — screenshot shows flat colors and simple linear scales.
- Don't overcrowd the UI — screenshot shows generous white space and a focused layout.
- Don't use rounded corners excessively — screenshot shows mostly sharp or slightly rounded edges.

---

## System Prompt (paste into AI agent)

```
VouchAtlas is a crowdsourced travel safety and infrastructure visualization tool. Its design relies on a clean, neutral palette of white (#FFFFFF) and light grays (#F4F4F5, #E4E4E7) with dark text (#18181B). Data is communicated through functional colors like red (#DC2626) and orange (#EA580C), rather than decorative accents. The typography is a clean humanist-sans-serif, optimized for legibility across different data densities. The layout is dominated by an interactive map, with a supporting sidebar for detailed data. Critical constraints include avoiding decorative elements, maintaining high data-to-ink ratio, and ensuring clear color contrast for data visualization. Do not use rounded corners excessively, do not add heavy shadows, and do not use complex gradients.
```