---
name: Reflect
description: "This site is a great example of a premium, dark-mode SaaS design that uses a single accent color and cosmic visuals to convey intelligence and calm."
version: alpha

colors:
  background: "#060317"
  primary: "#F4F0FF"
  secondary: "#EFEDED"
  tertiary: "#6D48FF"
  neutral: "#9B93BF"
  bg-soft: "#0A0520"
  bg-quiet: "#030014"
  muted-soft: "#6E6891"
  line: "rgba(239, 237, 253, 0.15)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  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"

rounded:
  sm: 5px
  md: 8px
  lg: 16px
  pill: 999px

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

---

## Overview

An AI-powered note-taking app designed to mirror how the human brain connects ideas.

*A calm, cosmic brain that connects ideas.*

## Colors

Deep cosmic purples create a calm, focused environment for thinking.

- **Background (`#060317`)** — uses `bg` token
- **Primary text (`#F4F0FF`)** — uses `ink` token
- **Secondary text (`#EFEDED`)** — uses `ink-soft` token
- **Accent (`#6D48FF`)** — uses `accent` token
- **Muted (`#9B93BF`)** — uses `muted` token
- **Borders (`rgba(239, 237, 253, 0.15)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Hero text uses Inter V or a similar humanist-sans at weight 500.
- UI text uses Inter V at weight 400.
- Line height is generous (1.4-1.5) for readability.
- Letter spacing is tight for display, neutral for body.

## Layout

A centered, narrow-column layout with generous whitespace and a cosmic, radial-gradient background.

*Rhythm:* Vertical spacing uses a consistent scale based on a 4px grid.

## Elevation & Depth

- inset 0 0 24px rgba(255, 255, 255, 0.06)
- 0 -7px 11px 0 rgba(164, 143, 255, 0.12) inset
- Borders: Subtle, low-opacity white or light purple borders (rgba(239, 237, 253, 0.6)) are used for cards and containers.

## Shapes

- `sm`: 5px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped or slightly rounded buttons with solid backgrounds (e.g., 'Start free trial') or subtle borders.
- **card:** Dark, semi-transparent cards with subtle inner glows (inset box-shadows) and thin borders.
- **chip:** Small, pill-shaped badges with subtle borders or backgrounds (e.g., 'Take notes using AI').
- **input:** Dark, rounded input fields with subtle borders and placeholder text.
- **hero:** A large, centered headline over a cosmic, radial-gradient visual (like a black hole or nebula), followed by a subheadline and a product screenshot.

## Do's and Don'ts

**Don't:**
- Don't use a light theme — the screenshot shows a deep, cosmic dark mode.
- Don't use sharp, rectangular buttons — the screenshot shows rounded, pill-shaped buttons.
- Don't use a saturated, multi-color palette — the screenshot shows a monochromatic purple palette with subtle gradients.
- Don't use large, blocky text — the screenshot shows refined, medium-weight geometric sans-serif for headlines.
- Don't use heavy drop shadows — the screenshot shows subtle, inset glows and thin borders for depth.
- Don't create a cluttered layout — the screenshot shows generous whitespace and a clean, centered column structure.

---

## System Prompt (paste into AI agent)

```
This is a premium, AI-powered note-taking SaaS called Reflect. The design DNA is 'cosmic calm'—a very dark, near-black purple background (#060317) with a single accent color of electric purple (#6D48FF) used for gradients and active states. Typography is clean and modern, using a humanist-sans (Inter V) for body and display text, with medium weight for headlines. Key critical don'ts: never use a light background, never use sharp-cornered UI elements, and never use a busy, multi-color palette. The layout is centered and spacious, with cards and components using subtle, inset glows and thin borders for definition.
```