# Character.AI · Design system migration spec

> Source: https://character.ai  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The design language of Character.AI functions like a modern chat application interface, prioritizing simplicity and ease of onboarding over decorative flourish. Its identity is built on a foundation of clarity and approachability, positioning the platform as a clean, accessible space for conversational engagement.

**One-liner:** A minimalist, friendly AI platform focused on character-based conversations with a low-friction sign-up flow.
**Keywords:** conversational AI · characters · playful · accessible
**Analogy:** A clean, modern chat application interface that prioritizes simplicity and ease of onboarding.

## 2. Color

The palette is strictly neutral and subdued, built on a foundation of off-white and dark charcoal. High-contrast dark elements are reserved for primary actions, ensuring a clear visual hierarchy without relying on saturated accent colors.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f4f4f5` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--ink` | `#26272b` | body text |
| `--ink-soft` | `#585962` | secondary text |
| `--muted` | `#6b7280` | placeholder |
| `--muted-soft` | `#e4e4e7` | weak hint |
| `--line` | `rgba(212, 212, 218, 1)` | divider |

**Color principle:** Neutral and subdued palette with high-contrast dark elements for primary actions.

The principle is restraint, using contrast and value, not hue, to guide the eye.

## 3. Typography

The typographic system employs clean, modern sans-serif fonts, balancing geometric and humanist qualities for both impact and readability. Headings are set with tight negative letter-spacing for a compact, modern feel, while body text maintains a standard line-height for comfortable reading.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.1 | 700 | -0.72px | Headlines and hero text |
| body | 16px | 1.5 | 400 | 0px | Body text and buttons |

**Type rules:**
- 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.

## 4. Spacing

A consistent 4px grid establishes the foundational rhythm, creating uniform spacing for all padding and gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid system with consistent spacing for padding and gaps.

## 5. Surfaces

Depth is conveyed through subtle, layered elevation rather than heavy visual weight. Surfaces are defined by soft, diffuse shadows and fine, 1-pixel borders that separate elements without creating harsh divisions.

- **Radius:** sm 4px · md 12px · lg 30px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 4px 6px -1px
  - rgba(0, 0, 0, 0.1) 0px 2px 4px -2px
- **Borders:** 1px solid #d4d4da

## 6. Layout

The layout skeleton is a centered, focused arrangement built around a single primary action. A floating white card is layered over a large hero backdrop, creating a clear, immersive entry point for the user.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy favors subtlety and function over spectacle. All transitions are executed with a consistent, smooth 250ms duration, providing feedback and polish without demanding attention.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle 250ms transitions on all interactive elements.
  - Smooth background image scaling or fading.
  - Clean hover states on buttons and links.

- **Hover:** Subtle background color change or opacity shift on primary buttons.
- **Click:** Immediate feedback with a slight scale or color change.
- **Transition:** All interactive properties transition smoothly over 250ms.
- **Keyboard:** Standard focus rings for accessibility on all interactive elements.

## 8. Voice & Don'ts

The editorial voice is inviting, simple, and encouraging, matching the interface's low-friction aesthetic. Copy is direct and benefit-oriented, using clear, action-oriented language that avoids technical jargon or formal tone.

- **Tone:** Inviting, simple, and encouraging.
- **Headline style:** Direct and benefit-oriented with a focus on scale and speed.
- **CTA style:** Clear, action-oriented buttons (e.g., 'Sign Up to Chat', 'Continue with Google').
- **Avoid:** Technical jargon / Formal or overly corporate language / Long-winded explanations

### Don'ts
- ❌ 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.

The system deliberately avoids complex multi-column grids, decorative typography, and high-saturation colors in favor of a calm, monochromatic focus.

## System Prompt (paste into AI tool)

```
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.
```
