---
name: Readwise Reader
description: "Worth including as a prime example of how to balance literary aesthetics with modern SaaS functional design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1F1F1F"
  tertiary: "#478CD0"
  neutral: "#808080"
  bg-soft: "#F5F5F5"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 50px
    lineHeight: 1.125
    fontWeight: 800
    letterSpacing: "-0.22px"
  h2:
    fontFamily: humanist-sans
    fontSize: 28.8px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A clean, typographically-driven platform for revisiting and learning from reading highlights.

*A personal library assistant that reminds you of the best things you've read.*

## Colors

High-contrast monochrome base with a single functional blue for actions and links.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1F1F1F`)** — uses `ink` token
- **Accent (`#478CD0`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Transitional serif for headlines to evoke a literary and educational feel.
- Humanist sans for body text to maintain high readability and a modern aesthetic.
- Generous line-height for comfortable reading of long-form content.

## Layout

Centered single-column layout with alternating image-text sections.

*Rhythm:* Consistent 4px base grid with generous padding (24px-35px) for content blocks.

## Elevation & Depth

- Borders: Subtle 1px borders used primarily for navigation underlines and input states.

## Shapes

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

## Components

- **button:** Solid blue fill with white text, rounded corners, or outline style with dark borders.
- **card:** Used primarily within product screenshots to show nested interface elements.
- **chip:** Small rounded tags with distinct background colors for categorization.
- **input:** Standard form fields with subtle borders and clear focus states.
- **hero:** Large centered headline, supporting subtext, and a primary call-to-action button.

## Do's and Don'ts

**Don't:**
- don't use a dark background for the main interface — screenshot shows a predominantly white background.
- don't use monospace fonts for body text — screenshot shows a humanist sans-serif for readability.
- don't use neon or overly bright accent colors — screenshot shows a functional, muted blue (#478CD0).
- don't use complex gradients on primary buttons — screenshot shows solid color fills.
- don't use high-contrast drop shadows on cards — screenshot shows a clean, border-based or flat UI.
- don't use condensed or decorative fonts for headlines — screenshot uses a clear transitional serif.

---

## System Prompt (paste into AI agent)

```
Readwise is a productivity tool for readers, focusing on memory and knowledge retention through spaced repetition. The design DNA is a clean, minimalist aesthetic that prioritizes readability. The core color palette is monochrome: white backgrounds (#FFFFFF) with near-black ink (#1F1F1F), accented by a functional blue (#478CD0). Typography is a refined mix of transitional-serif for headlines (evoking literature) and humanist-sans for body text (ensuring legibility). Critical design constraints: don't use dark mode or dark backgrounds, don't use neon or high-chroma accent colors, and don't use complex gradients or busy background patterns. The layout is spacious and centered, focusing the user's attention on the content and the value of their reading highlights.
```