---
name: Amie
description: "A prime example of a modern, human-centric SaaS design that balances professionalism with approachability through clean typography and thoughtful spacing."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#5C5C5C"
  tertiary: "#11A8FF"
  neutral: "#A0A0A0"
  line: "rgba(205, 205, 205, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 600
    letterSpacing: "-0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.75
    fontWeight: 400
    letterSpacing: "-0.003px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A friendly, AI-powered productivity app that keeps your schedule and notes effortlessly organized.

*A clean, modern workspace that feels like a helpful friend rather than a complex tool.*

## Colors

A clean, high-contrast palette with a single vibrant blue accent, ensuring readability and a professional yet approachable feel.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#5C5C5C`)** — uses `ink-soft` token
- **Accent (`#11A8FF`)** — uses `accent` token
- **Muted (`#A0A0A0`)** — uses `muted` token
- **Borders (`rgba(205, 205, 205, 1)`)** — uses `line` token

## Typography

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

## Layout

A centered, wide container with a narrow, readable text column and a sidebar-heavy product UI layout.

*Rhythm:* A base-4 system that uses generous padding (12px, 20px, 28px) to create an airy, uncluttered feel.

## Elevation & Depth

- rgba(0, 0, 0, 0.06) 0px 0px 0px 1px
- rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px
- rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px
- Borders: Subtle 1px solid borders using rgba(205, 205, 205, 1) for soft delineation.

## Shapes

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

## Components

- **button:** Pill-shaped primary buttons with a vibrant blue background and white text; secondary buttons are white with a subtle border.
- **card:** Clean, white surfaces with subtle shadows and rounded corners, often used for showcasing product interfaces.
- **chip:** Not prominently visible in this view.
- **input:** Not prominently visible in this view.
- **hero:** A bold, oversized headline paired with a highlighted accent phrase, two primary actions, and a large product screenshot.

## Do's and Don'ts

**Don't:**
- Don't use dark, moody backgrounds — the screenshot shows a predominantly white and airy background.
- Don't use heavy, decorative serif fonts for headlines — the screenshot shows a clean, humanist sans-serif.
- Don't use multiple competing vibrant accent colors — the screenshot primarily uses one bright blue accent.
- Don't use sharp, boxy corners for buttons — the screenshot shows heavily rounded, pill-shaped buttons.
- Don't use thick, heavy borders to separate sections — the screenshot uses subtle, light grey lines.
- Don't overcrowd the interface with dense text blocks — the screenshot maintains generous whitespace and spacing.
- Don't use a muted, monochromatic palette without any color — the screenshot relies on a clear blue accent.

---

## System Prompt (paste into AI agent)

```
This site is a modern SaaS productivity app with a clean, friendly, and approachable design. The primary brand color is a vibrant blue (#11A8FF) against a white background, with black and grey text. It uses a clean humanist-sans typeface (Inter) for high readability. The layout is spacious, using generous padding and a wide container to create an airy feel. Key interactions use smooth, subtle transitions. Critical donts: do not use dark backgrounds, do not use decorative serifs, and do not overcrowd the interface with complex elements or multiple bright accent colors.
```