Character.AI DESIGN.md

1. Visual Theme & Atmosphere

Character.AI's iOS app exists to do one thing exceptionally well: let you have a believable, immersive conversation with an AI persona. Every design decision flows from that. The canvas is a near-black neutral (#0F0F10) — dark-first, so nothing competes with the conversation for attention. The signature screen is the chat: you open a character and you're greeted by a single circular character avatar (a soft radial gradient — blue or lilac), the character's name and one-line description centered beneath it ("Aria — A curious starship navigator · by @lumen"), and then the dialogue itself flowing upward as a stream of message bubbles. The first AI message is the character's greeting — its in-character hello.

The defining component is the asymmetric chat bubble. AI messages and user messages are deliberately set in very close grey tones (#1C1C1F for the AI, #26262A for the user) — Character.AI does not color-code speakers with a bright "user blue." Instead, the speaker is signaled by a single tucked corner: the AI bubble has a sharp 4pt top-left corner (the "tail" pointing back at the avatar) with the other three corners at 18pt; the user bubble mirrors it with a sharp 4pt top-right corner. This subtle, almost typographic differentiation keeps the screen calm and book-like, which is the point — you're meant to feel like you're reading a story you're co-writing. Inside bubbles, roleplay actions wrapped in asterisks (*she looks up from the charts*) render as muted-italic secondary text — a Character.AI signature that makes narration feel different from speech.

The single brand accent is a calm, confident blue (#3A7BFD). It is rationed hard: it appears on the send button (a filled circle in the composer), primary CTAs ("Start chat", "Create a Character"), links, and the active tab — and never as a bubble fill. A secondary lilac (#9D7BFF) appears only as an alternate avatar gradient, giving characters subtle visual variety without introducing a second UI color. Supporting surfaces are the Discover grid of character cards (avatar + name + short description + chat-count), the typing indicator (three dimming dots in an AI-shaped bubble), and the persona/creation flow.

Typography is a geometric, slightly futuristic sans for identity — Sora (its open, technical letterforms feel right for an AI product) — used for the wordmark, screen titles, character names, and buttons; paired with Inter for message text and descriptions, where reading comfort over long conversations is paramount. Weights stay in the 400/500/600/700 band. Geometry is soft and quiet: bubbles at 18pt (with the 4pt tuck), cards at 16pt, avatars are circles, buttons are full pills. The overall feeling is focused, immersive, intelligent, and unobtrusive — a dark room where the only thing lit is the conversation.

Key Characteristics:

• Near-black canvas (#0F0F10) — dark-first; nothing competes with the conversation
• The chat IS the product — circular character avatar + centered greeting + upward message stream
• Asymmetric bubbles — AI vs user differentiated by a 4pt tucked corner, NOT by color
• AI bubble #1C1C1F / user bubble #26262A — deliberately close greys, calm and book-like
• Italic *roleplay actions* rendered as muted secondary text — a Character.AI signature
• One rationed accent blue #3A7BFD — send button, CTAs, links, active tab; never a bubble
• Lilac #9D7BFF as an alternate avatar gradient only — variety without a second UI color
• Character greeting — the first AI message is the persona's in-character hello
• Typing indicator — three dimming dots in an AI-shaped (4pt-tuck) bubble
• Discover grid — character cards: avatar + name + one-line description + chat-count
• Sora (wordmark/titles/names/buttons) + Inter (message text/descriptions)
• Soft quiet geometry — 18pt bubbles, 16pt cards, circular avatars, 500pt pill buttons

2. Color Palette & Roles

Primary (Interactive)

• Accent Blue (#3A7BFD): The single brand accent — send button, primary CTAs, links, active tab, selection. Rationed; never a bubble fill.
• Accent Pressed (#2E63D6): Pressed state of blue surfaces.
• Accent Soft (#1B2A4A): Tinted secondary-button background (text #9FC0FF).
• Lilac (#9D7BFF): Alternate character-avatar gradient end; not a UI control color.

Canvas & Surfaces (Dark — primary)

• Canvas (#0F0F10): Primary dark canvas — near-black neutral, not pure black.
• Surface 1 (#161618): Sheets, settings rows, elevated panels.
• AI Bubble (#1C1C1F): Assistant message bubble fill, typing-indicator bubble.
• User Bubble (#26262A): User message bubble fill, also Surface 3 / pressed.
• Surface 2 (#1E1E21): Composer field, character-card background.
• Divider (#2A2A2E): Hairline dividers, bubble borders, header underline.

Light Mode

Character.AI is dark-first. A light theme exists; pair these (the accent stays identical).

Text

• Text Primary (#ECECEE dark / #16161A light): Message text, names, primary content.
• Text Secondary (#9A9AA2 dark / #66666E light): Descriptions, italic roleplay actions, metadata.
• Text Tertiary (#66666E dark / #9A9AA6 light): Timestamps, "by @creator", placeholders, typing dots.
• On-Accent (#FFFFFF): Text/icon on blue fills.
• Link (#3A7BFD): Inline links and "@creator" mentions when tappable.

Semantic

• Success (#4ED99A): "Character saved", positive confirmation.
• Error (#FF6B6B): Generation error, message-failed retry, form errors.
• Warning (#FFB454): Content/safety notices (used sparingly, never near bubbles as accent).
• Selection (rgba(58,123,253,0.20)): Highlighted/selected text or row.

3. Typography Rules

Font Family

• Wordmark / Titles / Names / Buttons: Sora (by Jonathan Barnbrook / Soulcraft, Google Fonts, SIL OFL) — a geometric sans with open counters and a subtly technical character that suits an AI product; approximates Character.AI's clean modern brand type.
• Message Text / Descriptions / Body: Inter (by Rasmus Andersson, SIL OFL) — engineered for screen legibility over long reading sessions; correct for multi-paragraph AI replies and bios.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Character.AI's production app uses a clean geometric/system pairing; Sora + Inter is the closest free, well-hinted match.

Hierarchy

Principles

• Two-font system: Sora carries identity (wordmark, titles, names, buttons); Inter carries reading comfort (all message text, descriptions, long body). Never set message text in Sora.
• Weights 400/500/600/700 only — no thin, no black.
• Roleplay actions are italic + secondary: any *…* span renders Inter 15pt italic in Text Secondary #9A9AA2. This is a load-bearing Character.AI signature — it separates narration from speech.
• Generous message line-height (1.5): AI replies are long; comfortable leading prevents fatigue.
• Quiet meta: "by @creator · N chats" stays at 11pt Text Tertiary — present, never competing with the name.
• Dynamic Type: display, titles, names, message text, body scale; tab labels and meta stay fixed.

4. Component Stylings

Buttons

Primary Button (Start chat / Send / Continue)

• Shape: Full pill, 500pt corner radius (send = 40pt circle)
• Background: #3A7BFD (Accent Blue)
• Text/Icon: #FFFFFF
• Padding: 13pt vertical, 26pt horizontal
• Font: Sora 15pt weight 600
• Pressed: background #2E63D6 + scale 0.98

Soft Button (Create a Character / secondary CTA)

• Background: #1B2A4A (Accent Soft tint)
• Text: #9FC0FF
• Shape: pill 500pt
• Padding: 13pt / 26pt
• Pressed: background #22315A

Outline Button (Edit persona / tertiary)

• Background: transparent
• Text: #ECECEE
• Border: 1pt #2A2A2E
• Shape: pill 500pt
• Padding: 12pt / 22pt
• Pressed: background #1E1E21

Text Button (New chat / inline action)

• Background: none
• Text: #3A7BFD, Sora 14pt weight 600
• No underline
• Pressed: opacity 0.7

Send Button (composer)

• 40pt circle, #3A7BFD, up-arrow glyph 18pt #FFFFFF, stroke 2.4pt
• Disabled (empty field): #26262A fill, #66666E glyph
• Pressed: #2E63D6 + scale 0.94

Chat Bubble (the core atom)

AI Bubble

• Background: #1C1C1F
• Border: 1pt #2A2A2E
• Text: Inter 15pt #ECECEE, line-height 1.5
• Corner radius: 4pt top-left, 18pt top-right, 18pt bottom-right, 18pt bottom-left (the 4pt tuck points back at the avatar)
• Padding: 11pt vertical, 14pt horizontal
• Max width: 86% of content width
• Leading: 26pt circular character avatar, 9pt gap, top-aligned
• Roleplay spans (*…*): Inter 15pt italic #9A9AA2

User Bubble

• Background: #26262A
• Border: none
• Text: Inter 15pt #ECECEE
• Corner radius: 18pt top-left, 4pt top-right, 18pt bottom-right, 18pt bottom-left (mirrored tuck)
• Padding: 11pt / 14pt
• Aligned to trailing edge; no avatar
• Max width: 86%

Typing Indicator

• An AI-shaped bubble (#1C1C1F, 1pt #2A2A2E, 4pt-tuck) with three 6pt dots #66666E
• Dots animate opacity 1 → 0.4 in sequence (see Motion)

Message Group

• 12pt vertical gap between messages
• Consecutive same-speaker messages: 4pt gap, avatar shown only on the first

Character Avatar

• Circular, radial gradient
• Default (blue): radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0)
• Alternate (lilac): radial-gradient(circle at 36% 30%, #C7A8FF, #9D7BFF 55%, #6A47C9)
• Sizes: 64pt (greeting), 40pt (chat header), 48pt (Discover card), 26pt (per-message)
• Real character art (when present) fills the circle; gradient is the fallback/placeholder
• The single warm focal point on an otherwise neutral screen

Character Card (Discover)

• Shape: rounded rect, 16pt corner radius
• Background: #1E1E21, 1pt #2A2A2E border
• Padding: 16pt; internal gap 8pt
• Contents (vertical): 48pt avatar · name (Sora 15pt w600 #ECECEE) · description (Inter 13pt #9A9AA2, 2 lines max) · footer row (chat-bubble glyph 11pt + "2.4M chats" Inter 11pt #66666E)
• Grid: 2-up on phone, 12pt gap
• Pressed: background #26262A + scale 0.99

Navigation

Chat Header

• Height: 48pt + safe area
• Leading: back chevron 18pt #ECECEE
• 40pt character avatar + name (Sora 17pt w600) + sub ("by @lumen · 2.4M chats" Inter 11pt #9A9AA2)
• Trailing: ⋮ overflow (new chat, persona, restart, share) 18pt #9A9AA2
• Underline: 0.5pt #2A2A2E
• Background: canvas (no blur needed; chat scrolls under cleanly)

Bottom Tab Bar

• Height: 60pt + safe area
• Background: #0F0F10 with 0.5pt top border #2A2A2E
• Tabs (4): Discover · Chats · Create · Profile
• Icon: 23pt
• Active: icon + label #3A7BFD Sora 10pt w600
• Inactive: #66666E
• No tint pill — accent color is the active signal

Input Fields

Composer

• Height: 44pt pill, #1E1E21, 1pt #2A2A2E
• Placeholder: "Message {Character}…" Inter 14pt #66666E
• Padding: 0 / 16pt; multiline expands up to ~5 lines then scrolls
• Trailing: 40pt blue send circle (disabled grey when empty)
• Focus: 1pt #3A7BFD border

Persona / Search Field

• Height: 44pt, #1E1E21, 12pt radius (search) or auto-grow (persona editor)
• Leading magnifier 16pt #9A9AA2; placeholder Inter 14pt #66666E

Distinctive Components

Asymmetric Tuck Bubble — the signature: speaker identity comes from a single 4pt corner, not color.

Roleplay Action Styling — *…* rendered italic + secondary; narration visually distinct from speech.

Character Greeting Header — every chat opens with avatar + name + one-line description + the persona's in-character first message.

Typing Indicator — three sequentially-dimming dots inside an AI-shaped bubble.

Character Card — the Discover unit: avatar, name, one-line hook, chat-count social proof.

Persona / Definition Editor — long-form auto-grow text area where users author a character's voice (Sora label, Inter body, accent-blue save).

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 9, 11, 12, 14, 16, 18, 24, 32, 40, 48, 64
• Message-to-message gap: 12pt (4pt within a same-speaker group)
• Bubble padding: 11pt vertical / 14pt horizontal
• Screen side inset: 14–16pt

Grid & Container

• iPhone: single chat column, 14pt side insets; Discover = 2-up card grid (12pt gap)
• Bubble max-width: 86% of content width
• iPad: chat max-width 720pt centered; Discover = 3–4-up grid
• No multi-column chat — the conversation is a single focused stream

Whitespace Philosophy

• The conversation owns the screen: chrome is minimal (thin header, thin tab bar) so the message stream dominates
• Calm bubble rhythm: 12pt between messages, generous 1.5 line-height — long AI replies stay readable
• The avatar is the only warmth: one gradient circle per screen; everything else is neutral grey
• Greeting centered, dialogue left/right: the opening is a centered "title card"; the conversation then flows asymmetrically

Border Radius Scale

• Square (0pt): full-bleed dividers
• Tuck (4pt): the speaker-side bubble corner; small chips
• Subtle (8pt): inline tags, small affordances
• Standard (12pt): search field, sheet sub-elements
• Card (16pt): Discover character cards
• Bubble (18pt): the three non-tucked bubble corners
• Pill (500pt): all buttons, composer field
• Circle (50%): avatars, send button, tab hit areas

6. Depth & Elevation

Character.AI is flat and quiet — elevation is barely-there; the conversation, not shadow, carries focus.

Shadow Philosophy: Character.AI uses essentially no drop shadows. The AI bubble's 1pt border is the only "edge" treatment — it separates the assistant's words from the near-black canvas without adding visual noise. User bubbles need no border (the lighter grey #26262A lifts off the canvas on its own). Sheets get a soft upward shadow only so they read as dismissible layers. The design philosophy is flat, focused, and out of the way — depth would distract from the conversation.

Motion

• Message send: user bubble appears with a 120ms fade + 8pt upward slide; list auto-scrolls to bottom 250ms ease-out
• AI streaming: text streams token-by-token into the AI bubble; the bubble height grows smoothly (no layout jump); a subtle caret/cursor blinks at the tail while streaming
• Typing indicator: three dots each animate opacity 1 → 0.4 → 1 on a 1.2s loop, staggered 0.16s apart
• Greeting entrance: avatar fades+scales (0.92 → 1.0) 260ms ease-out, then name and description fade in 120ms later; the greeting bubble slides up 200ms
• Bubble tap (long-press): scale 0.98 + reveal context actions (Copy, Retry, Rate) in a 150ms fade
• Tab switch: icon+label tint cross-dissolves to blue 180ms; no pill slide
• Card press: scale 0.99 + 80ms ease-out
• Sheet present: bottom sheet slides up 320ms ease-out; scrim fades in parallel
• Stop generation: send button morphs to a stop square 150ms while streaming; reverts on completion
• Haptics: light selection on send, soft tick on tab switch, light impact on long-press actions; none during streaming (it would buzz continuously)

7. Do's and Don'ts

Do

• Make the chat the centerpiece — circular avatar, centered greeting, upward message stream on a near-black canvas
• Differentiate AI vs user by the 4pt tucked corner, NOT by color
• Keep AI #1C1C1F and user #26262A as close, calm greys
• Render *roleplay actions* as muted-italic secondary text — it's a load-bearing signature
• Ration accent blue #3A7BFD to the send button, CTAs, links, and active tab — never a bubble
• Use the character avatar gradient (blue or lilac) as the single warm focal point per screen
• Open every chat with the persona's in-character greeting
• Show the typing indicator as three dimming dots in an AI-shaped bubble
• Use Sora for identity (titles, names, buttons), Inter for all message text
• Stream AI replies token-by-token with smooth height growth and a blinking tail caret
• Keep chrome minimal — thin header, thin tab bar

Don't

• Don't color-code speakers with a bright "user blue" bubble — the tuck does the work
• Don't use the accent blue as any bubble fill (it breaks the calm reading surface)
• Don't render roleplay *actions* as plain body text — they must be italic + secondary
• Don't set message text in Sora — Inter carries long-read comfort
• Don't add drop shadows to bubbles — the AI 1pt border is the only edge treatment
• Don't tint the whole active tab (pill/label block) — the accent color is enough
• Don't make the character description louder than the name on cards
• Don't use pure black for the canvas — #0F0F10 near-black keeps bubbles legible
• Don't buzz haptics during streaming — it would be continuous and annoying
• Don't introduce a second UI accent — lilac is an avatar gradient only, not a control color
• Don't crowd the greeting — it's a centered, breathing "title card" before dialogue begins

8. Responsive Behavior

Device Sizes

Dynamic Type

• Display, titles, greeting/header/card names, message text, body: full scale
• Tab labels, "by @creator · N chats" meta, typing dots: FIXED (layout-sensitive)
• Message text scales generously; bubble grows with it (max-width % constant)

Orientation

• Chat supports rotation; bubbles reflow to the wider max-width
• iPad landscape uses a list + conversation split
• Persona editor rotates freely

Touch Targets

• Send button: 40pt circle (≥ 44pt hit via padding)
• Bubble long-press: full bubble is the target
• Tab icon: 23pt glyph, 48pt hit
• Header back / overflow: 30pt glyph, 44pt hit
• Character card: full card tappable (→ chat)

Safe Area Handling

• Top: header respects Dynamic Island / notch
• Bottom: composer + home indicator respected; messages scroll clear of the composer
• Keyboard: composer rises with keyboard; message list scrolls above it; greeting stays scrolled out cleanly
• Sides: 14–16pt content inset

9. Agent Prompt Guide

Quick Color Reference

• Canvas: #0F0F10 dark / #FFFFFF light (near-black, not pure black)
• Surface 1 / 2: #161618 / #1E1E21
• AI bubble / user bubble: #1C1C1F / #26262A
• Divider / bubble border: #2A2A2E
• Text primary / secondary / tertiary: #ECECEE / #9A9AA2 / #66666E
• Accent blue: #3A7BFD (pressed #2E63D6, soft #1B2A4A)
• Lilac (avatar gradient only): #9D7BFF
• On-accent text: #FFFFFF
• Success / Error: #4ED99A / #FF6B6B

Example Component Prompts

• "Build the Character.AI chat screen in SwiftUI: near-black #0F0F10 canvas. Header (48pt): back chevron, 40pt circular avatar with radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0), name Sora 17pt w600 #ECECEE, sub 'by @lumen · 2.4M chats' Inter 11pt #9A9AA2, trailing ⋮. Greeting block (centered): 64pt avatar, name Sora 20pt w600, one-line description Inter 13pt #66666E. Then the message stream with 12pt gaps."

• "Create the Character.AI AI bubble: background #1C1C1F, 1pt #2A2A2E border, text Inter 15pt #ECECEE line-height 1.5, padding 11/14pt, max-width 86%. Corner radii: top-left 4pt, the other three 18pt (the 4pt tuck points back at a 26pt leading circular avatar with 9pt gap). Any *…* span renders Inter 15pt italic #9A9AA2."

• "Create the Character.AI user bubble: background #26262A, no border, text Inter 15pt #ECECEE, padding 11/14pt, max-width 86%, trailing-aligned, no avatar. Corner radii: top-right 4pt, the other three 18pt (mirrored tuck). Do NOT use the accent blue as the fill."

• "Build the Character.AI typing indicator: an AI-shaped bubble (#1C1C1F, 1pt #2A2A2E, top-left 4pt / others 18pt) containing three 6pt #66666E dots; each dot animates opacity 1 → 0.4 → 1 on a 1.2s loop, staggered 0.16s apart."

• "Render a Character.AI Discover card: 16pt radius, #1E1E21 bg, 1pt #2A2A2E border, 16pt padding, 8pt internal gap. Vertical: 48pt circular avatar (blue or lilac radial gradient), name Sora 15pt w600 #ECECEE, description Inter 13pt #9A9AA2 (2 lines max), footer = chat-bubble glyph 11pt + '2.4M chats' Inter 11pt #66666E. 2-up grid, 12pt gap. Press: scale 0.99 + bg #26262A."

• "Build the Character.AI composer: 44pt pill #1E1E21 + 1pt #2A2A2E, placeholder 'Message Aria…' Inter 14pt #66666E, auto-grow to ~5 lines. Trailing 40pt circle send button: #3A7BFD with white up-arrow when text present, #26262A/#66666E when empty. While streaming, morph the send circle to a stop square over 150ms."

Iteration Guide

1. The chat is the product — near-black #0F0F10 canvas, circular avatar, centered greeting, upward stream
2. AI vs user is the 4pt tucked corner, NOT color — keep #1C1C1F and #26262A close and calm
3. *Roleplay actions* MUST render italic + secondary #9A9AA2 — load-bearing signature
4. Accent blue #3A7BFD is rationed: send button, CTAs, links, active tab — never a bubble fill
5. The avatar gradient (blue default, lilac alt) is the only warmth — lilac is NOT a UI control color
6. Every chat opens with the persona's in-character greeting under a centered name + description
7. Type is two-font: Sora for identity (titles/names/buttons), Inter for all message text/descriptions
8. Stream AI replies token-by-token with smooth height growth + a blinking tail caret; no haptics while streaming
9. Chrome is minimal — thin header, thin tab bar; no drop shadows (AI 1pt border is the only edge)
10. Canvas is near-black #0F0F10, not pure black; bubbles read calmly against it