---
name: Raindrop
description: "This site is an excellent example of a clean, modern SaaS landing page that effectively uses whitespace and subtle visual cues to convey trust and usability."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A1A1A"
  secondary: "#333333"
  tertiary: "#0B7ED0"
  neutral: "#808080"
  bg-soft: "#EFFAF7"
  bg-quiet: "#FEF1F0"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: system-ui
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: system-ui
    fontSize: 36px
    lineHeight: 1.4
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: system-ui
    fontSize: 18px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: system-ui
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

An all-in-one bookmark manager designed for creatives and built for coders

*A digital filing cabinet for the modern web*

## Colors

Clean white surfaces with a primary blue accent and muted dark text

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#0B7ED0`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** system-ui
- **Body:** system-ui
- **Mono:** monospace

- Use system-ui or Segoe UI for a native, clean look
- Headlines are tight, clean, and slightly bold
- Maintain high contrast for readability against white backgrounds

## Layout

Split hero layout with copy on the left and overlapping product screenshots on the right, using organic background blobs for visual interest

*Rhythm:* Generous vertical padding (50px) in hero sections, with a consistent 30px horizontal padding

## Elevation & Depth

- 0px 12px 24px rgba(0, 0, 0, 0.1)
- 0px 2px 4px rgba(0, 0, 0, 0.1)
- 0px 0px 0px 0.5px rgba(0, 0, 0, 0.15)
- Borders: 1px solid rgba(0,0,0,0.1) for containers and inputs

## Shapes

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

## Components

- **button:** Primary buttons are filled with a bright blue and rounded with a small radius; secondary buttons are transparent text links
- **card:** Soft shadow and light border for containers and feature cards
- **chip:** Rounded pill-shaped tags with a soft background (like the 'New: AI Assistant' pill)
- **input:** Clean, minimal inputs with subtle borders and 4px radius
- **hero:** Large bold display text on the left, multi-layered product screenshots on the right, set against a white background with colorful abstract organic shapes

## Do's and Don'ts

**Don't:**
- Don't use dark mode as the primary background — screenshot shows a predominantly white background
- Don't use harsh neon accents — screenshot uses a clean, bright blue (#0B7ED0)
- Don't use heavy, ornate serif fonts — screenshot uses clean, native system fonts
- Don't make the layout rigidly boxy — screenshot incorporates organic, soft background blobs
- Don't clutter the interface with too many borders — screenshot uses whitespace and subtle shadows
- Don't use a dark primary text color — screenshot uses a softer, slightly less harsh dark gray (#1A1A1A)

---

## System Prompt (paste into AI agent)

```
Raindrop.io is a professional, intuitive bookmark manager with a clean, spacious layout. Its design DNA relies on a white background, soft organic background shapes, and a primary blue accent (#0B7ED0) to guide the user's eye. Typography uses native system fonts for maximum performance and readability. Key donts include: avoiding dark mode as the default, avoiding harsh neon colors, and keeping the layout breathable rather than cluttered. The overall feel is calm, refined, and highly functional.
```