---
name: Character.AI
description: "This site is worth including as a prime example of a modern, minimalist AI product interface that prioritizes user onboarding through a clean and friendly design."
version: alpha

colors:
  background: "#f4f4f5"
  primary: "#26272b"
  secondary: "#585962"
  neutral: "#6b7280"
  bg-soft: "#ffffff"
  muted-soft: "#e4e4e7"
  line: "rgba(212, 212, 218, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.72px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A minimalist, friendly AI platform focused on character-based conversations with a low-friction sign-up flow.

*A clean, modern chat application interface that prioritizes simplicity and ease of onboarding.*

## Colors

Neutral and subdued palette with high-contrast dark elements for primary actions.

- **Background (`#f4f4f5`)** — uses `bg` token
- **Primary text (`#26272b`)** — uses `ink` token
- **Secondary text (`#585962`)** — uses `ink-soft` token
- **Muted (`#6b7280`)** — uses `muted` token
- **Borders (`rgba(212, 212, 218, 1)`)** — uses `line` token

## Typography

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

- Headings use a tight negative letter-spacing for impact.
- Body text maintains standard line-height for readability.
- Font weights are strictly limited to 400, 500, 600, and 700.

## Layout

Centered card layout with a large hero image as the backdrop for the sign-up form.

*Rhythm:* Standard 4px grid system with consistent spacing for padding and gaps.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 4px 6px -1px
- rgba(0, 0, 0, 0.1) 0px 2px 4px -2px
- Borders: 1px solid #d4d4da

## Shapes

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

## Components

- **button:** Large, rounded buttons with high contrast (black or white) and centered text.
- **card:** Floating white card with subtle shadow, used for the main sign-up form.
- **chip:** Simple text link with underline on hover, used for footer navigation.
- **input:** Clean input field with rounded corners and a subtle border.
- **hero:** A split layout with a large animated/illustrated background and a floating white card for conversion.

## Do's and Don'ts

**Don't:**
- don't use complex multi-column grids — screenshot shows a simple, focused single-column or split layout.
- don't use a wide variety of colors — screenshot shows a neutral palette with black and white as the primary contrast.
- don't use ornate or decorative fonts — screenshot shows clean, modern sans-serif typography.
- don't use heavy, dark backgrounds for the main interface — screenshot shows a light, airy aesthetic.
- don't use small, cramped buttons — screenshot shows large, touch-friendly buttons with ample padding.
- don't use aggressive or high-saturation accent colors — screenshot shows a calm, monochromatic UI.

---

## System Prompt (paste into AI agent)

```
Character.ai is a conversational AI platform with a clean, modern, and friendly UI. The design uses a neutral palette of off-white (#f4f4f5) and dark gray (#26272b) for high contrast. Typography consists of clean sans-serif fonts (humanist and geometric) with tight letter-spacing on headings. Critical don'ts: do not use complex layouts or grids, do not use high-saturation accent colors, and do not use decorative or ornate fonts. The interface is minimalist, focusing on ease of onboarding and simple, direct interactions.
```