---
name: Pi
description: "The site effectively balances a premium, sophisticated feel with a warm, approachable humanistic design, making it an excellent example of emotional AI branding."
version: alpha

colors:
  background: "#FFF4E6"
  primary: "#1A4631"
  line: "rgba(26,70,49,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 68px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.92px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 0.95
    fontWeight: 400
    letterSpacing: "-1.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.56px"

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

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

---

## Overview

A premium, emotionally intelligent AI companion with a warm, humanistic design.

*A warm, thoughtful companion in a calm, refined space.*

## Colors

A restrained, warm palette dominated by deep forest green on a soft peach/cream background, relying on colorful photography for vibrancy.

- **Background (`#FFF4E6`)** — uses `bg` token
- **Primary text (`#1A4631`)** — uses `ink` token
- **Borders (`rgba(26,70,49,1.0)`)** — uses `line` token

## Typography

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

- Use transitional-serif for large expressive headlines and italics
- Use humanist-sans for body copy and UI elements
- Maintain tight tracking on large display text

## Layout

Centered content with a narrow paragraph width for readability

*Rhythm:* Generous vertical spacing to create a calm, airy feel

## Elevation & Depth

- Borders: Soft, subtle borders matching the deep green ink color

## Shapes

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

## Components

- **button:** Pill-shaped dark green buttons with white text
- **card:** Image-heavy cards with rounded corners and a text pill overlay at the bottom
- **chip:** Text labels inside rounded pill shapes
- **input:** Clean, simple inputs with subtle borders
- **hero:** Massive centered typography with a large serif wordmark above

## Do's and Don'ts

**Don't:**
- don't use a dark background — screenshot shows a warm cream/peach background instead
- don't use neon or highly saturated accent colors — screenshot shows deep green and muted tones instead
- don't use a purely geometric or monospace font — screenshot shows a serif display and humanist sans body instead
- don't use sharp corners on cards — screenshot shows 24px rounded corners instead
- don't use dense, text-heavy layouts — screenshot shows large amounts of whitespace instead
- don't use aggressive drop shadows — screenshot shows flat, clean surfaces instead

---

## System Prompt (paste into AI agent)

```
This is a premium, emotionally intelligent AI companion. The design is warm, calm, and humanistic. It uses a deep forest green (#1A4631) for text and interactive elements against a soft peach/cream (#FFF4E6) background. Typography features a transitional-serif for expressive headlines and a humanist-sans for body text. Layout is centered and spacious, with generous whitespace. Cards use vibrant, colorful photography with rounded corners. Critical donts: Don't use a dark mode or dark background. Don't use harsh, neon accent colors. Don't use sharp corners or aggressive drop shadows. Don't use cold, corporate typography or language.
```