---
version: alpha
name: Character.ai
description: Achromatic near-black design system with a custom geometric sans-serif, soft pill-and-rect radius grammar, and atmospheric dark imagery — companion AI framed as a cinematic stage rather than a software product.

colors:
  # Primary canvas
  background: "#f4f4f5"           # Off-white page shell
  surface: "#ffffff"              # Pure white modal + card surface
  surface-dark: "#1a1a1f"        # Deep near-black hero canvas
  surface-mid: "#26272b"         # Secondary dark surface

  # Ink
  ink: "#202024"                  # Near-black primary text
  ink-secondary: "#585962"        # Mid-gray secondary text / footer links
  ink-muted: "#6b7280"            # Tertiary text and placeholder
  ink-inverted: "#fafafa"         # Text on dark surfaces

  # Brand accent — the sole chromatic presence is the CTA fill
  primary: "#202024"              # Near-black as primary CTA (dark-on-light)
  on-primary: "#fafafa"           # Near-white text on primary CTA

  # Interaction states
  surface-hover: "#ececee"        # was rgba(236,236,238,0.725) — flattened over white — Google format requires hex
  link-hover: "#26272b"           # Color-shift destination for footer links
  text-hover: "#313238"           # Hover tone for body links

  # Borders
  border: "#d9d9df"               # Subtle light border (button outlined variant)
  border-input: "#c1c1c1"         # Input / textarea border
  border-bottom: "#d4d4da"        # Hairline bottom border

  # Shadows
  shadow-soft: "#808080"          # was rgb(128,128,128) — soft glow shadow — Google format requires hex

  # Focus ring (Tailwind default, rarely surfaced)
  focus-ring: "#3b82f6"           # was rgb(59,130,246) — Tailwind ring — Google format requires hex

typography:
  display:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.11
    letterSpacing: -0.72px
  heading-section:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sub:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-large:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 100
    lineHeight: 1.33
    letterSpacing: 0px
  label:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  label-medium:
    fontFamily: "atHauss, ui-sans-serif, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 2px
  sm: 12px
  md: 24px
  lg: 30px
  pill: 9999px

components:
  # Top navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 40px

  # Primary CTA — filled near-black pill
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 10px 16px
  button-primary-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: 10px 16px

  # Outlined secondary — ghost with border
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    padding: 10px 16px
  button-secondary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 10px 16px

  # Social auth buttons (Google, Apple, email) — rounded rect, dark fill or outlined
  button-auth-filled:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  button-auth-outlined:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.border-input}"
    borderWidth: 1px
    padding: 12px 16px
  button-auth-outlined-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px

  # Modal / dialog card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  # Input / text area
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    borderColor: "{colors.border-input}"
    borderWidth: 1px
    padding: 10px 12px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    rounded: "{rounded.xs}"
    padding: 10px 12px

  # Badge / chip
  badge:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 3px 10px
---

# Character.ai Design System

## Overview

Character.ai's visual language is built around atmospheric restraint and theatrical contrast. The product page opens not with interface chrome but with a full-bleed cinematic illustration — a solitary Victorian figure on a foggy London bridge, rendered in deep midnight blues and steely grays. Against this stage, a bright white modal floats like a spotlight, housing the minimal sign-up flow. The design is binary: near-total darkness outside the card, near-total light inside it. Nothing else competes for attention.

The palette is deliberately achromatic. Where most AI consumer products reach for purple, teal, or gradient drama to signal intelligence and warmth, Character.ai uses `{colors.primary}` — a near-black that reads as the absence of brand color — as its sole CTA fill. The logic is cinematic, not corporate: characters speak for themselves; the shell should not. `{colors.ink-secondary}` handles all secondary information (footer links, sub-labels) with a cool mid-gray that feels neutral and professional without venturing into warmth. The only color that appears is Tailwind's default blue ring, visible only on keyboard navigation — a system affordance, not a brand statement.

The proprietary typeface `atHauss` (a custom geometric sans-serif with rounded apertures, close in feel to Geist or Plus Jakarta Sans) unifies the entire surface. At display scale it runs at 36px semi-bold with tight negative tracking (`-0.72px`), giving headlines a confident, modern density without resorting to display-weight exaggeration. At body and UI scale it shifts to weight 400 with relaxed spacing, comfortable for both reading and tapping. There is no serif, no mono, no decorative companion face — the single-typeface system keeps the experience stripped to essentials.

**Key Characteristics:**
- Full-bleed atmospheric photography/illustration as the hero — the page is a stage, not a landing page
- Achromatic palette: near-black `{colors.ink}` and near-white `{colors.on-primary}` do all the heavy lifting
- Custom `atHauss` geometric sans-serif at a single weight range — confident and utilitarian, never decorative
- Binary light/dark split: dark cinematic canvas vs bright white modal surface `{colors.surface}`
- Pill radius `{rounded.lg}` (30px) for CTAs; rect radius `{rounded.sm}` (12px) for auth/utility buttons — two-tier grammar
- Hover pattern is opacity-based fade (to ~86% opacity) rather than color shift — extremely subtle interaction feedback
- No gradients, no illustrations in the chrome, no icons in navigation
- Ultra-sparse nav: wordmark left, two buttons right, nothing else
- Breakpoint cascade covers 440px to 1536px — mobile-first, but the design clearly lives at desktop

## Colors

### Primary Canvas
- **Off-White Shell** (`{colors.background}`): The page shell behind the hero image. Visible only at narrow breakpoints or when the image fails — closer to a light gray than pure white.
- **Pure White** (`{colors.surface}`): The modal card surface. Maximal contrast against the dark hero — the white card is the product UI.
- **Deep Near-Black** (`{colors.surface-dark}`): The hero canvas underneath the atmospheric illustration. Almost pure black with barely perceptible blue undertone.
- **Secondary Dark** (`{colors.surface-mid}`): Navigation background on scroll, hover state for primary buttons.

### Ink
- **Near-Black** (`{colors.ink}`): Primary text and primary CTA fill. The same value does both jobs — typography and interaction share one color.
- **Mid-Gray** (`{colors.ink-secondary}`): Footer navigation, secondary labels, supporting text. Cool, unobtrusive.
- **Tertiary Gray** (`{colors.ink-muted}`): Placeholder text and least-emphasis captions.
- **Near-White** (`{colors.ink-inverted}`): Text on dark-fill buttons and the hero surface.

### Interaction States
- **Surface Hover** (`{colors.surface-hover}`): Flattened approximation of `rgba(236,236,238,0.725)` over white. Used as hover fill for ghost/outlined buttons.
- **Link Hover** (`{colors.link-hover}`): Footer links darken to this on hover — a barely perceptible color-shift.

### Borders
- **Button Border** (`{colors.border}`): Subtle outline on the `Login` ghost button — light enough to feel optional.
- **Input Border** (`{colors.border-input}`): Textarea and auth-button outlines — slightly darker, necessary for form legibility.

### Shadow & Focus
- **Soft Glow Shadow** (`{colors.shadow-soft}`): Ambient gray used in the small card glow — `0px 0px 5px 0px`. Barely visible on white; purely depth-suggestive.
- **Focus Ring** (`{colors.focus-ring}`): Tailwind's default ring blue. Surfaces only on keyboard navigation, not a brand color.

## Typography

### Font Family
- **Primary**: `atHauss`, with fallbacks: `ui-sans-serif, system-ui, sans-serif`

`atHauss` is a self-hosted custom geometric sans-serif (served in `.woff2` and `.ttf` formats). No Google Fonts, no Adobe Fonts, no variable-font instance. The six font files cover the weight range from ultra-light (weight 100, used only in fine-print caption) to semi-bold (weight 600, used for display headlines). For external implementations, `Plus Jakarta Sans`, `DM Sans`, or `Geist Sans` are the closest accessible substitutes.

### Hierarchy

| Token | Use |
|---|---|
| `display` | 36px / 600 — hero modal headline ("Get access to 10M+ Characters") |
| `heading-section` | 24px / 600 — modal section titles, feature sub-heads |
| `heading-sub` | 18px / 400 — supporting descriptors, taglines |
| `body-large` | 18px / 400 — intro body text |
| `body` | 16px / 400 — standard body, nav, input text |
| `button-ui` | 14px / 400 — all button labels (CTA + ghost) |
| `nav-link` | 16px / 400 — header navigation |
| `caption` | 12px / 100 — fine print, legal notices, terms (ultra-light) |
| `label` | 11px / 400 — smallest UI labels |
| `label-medium` | 11px / 500 — small labels needing slightly more weight |

### Principles
- **Single typeface, controlled weight range**: `atHauss` at 100–600 handles everything. No serif for headings, no mono for code — maximum simplicity.
- **Negative tracking at display scale**: `-0.72px` at 36px gives headlines a modern, confident density. Body sizes carry no additional letter-spacing — they rely on the typeface's default aperture.
- **Weight 600 for headlines only**: The entire UI runs at weight 400. Semi-bold is reserved for the display level and subheadings, preserving its contrast value.
- **Ultra-light captions**: weight 100 for legal/fine-print text signals intentional de-emphasis — these words exist for compliance, not reading.
- **No decorative or editorial typography**: No italics, no uppercase labels, no ligature play. The typeface choice is utilitarian — clarity over expression.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with a 4px micro step for tight components). The system is compact by consumer-product standards — buttons use 8px vertical padding, not 14–18px. The design prioritizes screen efficiency over visual generosity.

### Grid & Container
- Modal card width: ~355px, centered on the hero at desktop
- Navigation: full-width, 40px horizontal padding, flex row with space-between
- Hero: full-bleed (100vw × ~380px), image covers the frame; modal floats center
- Breakpoints span 440px to 1536px in 9 tiers — exceptionally fine-grained for a consumer product

### Whitespace Philosophy
- **Restrained, not generous**: Vertical padding is functional, not editorial. The hero section lets the atmospheric image carry atmosphere — whitespace is not the design tool here, darkness is.
- **Modal-as-product**: The white card has generous internal padding for comfort, but the surrounding page frame is purposely recessive — you see the illustration, then the card, then nothing else.
- **Footer is flat**: Footer links stack in a single row with modest spacing — minimal, functional, invisible.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Dark hero canvas, navigation bar |
| Glow (Level 1) | `0px 0px 5px 0px {colors.shadow-soft}` | White modal card over the dark hero |
| Drop (Level 2) | `rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px` | Standard Tailwind card shadow for inner UI elements |
| Focus Ring (Level 3) | `0 0 0 0.5px {colors.focus-ring}` | Keyboard focus states — Tailwind default |

**Shadow Philosophy**: Character.ai's depth system is near-invisible. The white card against the dark hero creates depth by contrast alone — the modal does not need a strong shadow because the background does all the work. The `0px 0px 5px` ambient glow is a whisper, not a declaration. Inside the card, standard Tailwind shadows apply to secondary elements. The design intentionally avoids anything that would distract from the cinematic hero image.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses a two-tier grammar:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hairline borders and flush elements |
| `xs` | 2px | Badge micro-radius, barely perceptible softening |
| `sm` | 12px | Auth buttons (Google, Apple, email), inner form elements |
| `md` | 24px | Modal card container |
| `lg` | 30px | Primary CTA and Login pill buttons in the nav |
| `pill` | 9999px | Fully-rounded chip/badge elements |

The two-tier logic is deliberate: CTAs in the nav use the near-pill `{rounded.lg}` to signal primary action; auth flow buttons inside the modal use the rect `{rounded.sm}` to suggest a form context, not a marketing surface. The modal card itself uses `{rounded.md}` — soft enough to feel approachable, angular enough to feel like a panel.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Near-black `{colors.primary}` fill with near-white `{colors.on-primary}` text. Near-pill radius `{rounded.lg}`. Used for the primary "Sign Up to Chat" CTA in the nav. Hover fades to ~86% opacity.
- **`button-secondary`** — Ghost button with 1px `{colors.border}` outline, same near-pill shape. Used for "Login" in the nav. Hover applies a light gray fill `{colors.surface-hover}`.
- **`button-auth-filled`** — Dark `{colors.ink}` fill, rect `{rounded.sm}` radius, 16px body font. Used for "Continue with Google" and "Continue with Apple" in the auth modal.
- **`button-auth-outlined`** — Outlined with `{colors.border-input}`, same rect radius, `{colors.ink}` text. Used for "Continue with email".

### Cards & Modals
- **`card`** — Pure white `{colors.surface}`, 24px radius, minimal ambient glow. The central UI surface on every page state.

### Inputs
- **`input`** — Minimal 2px radius, 1px `{colors.border-input}` border. Focus state promotes border to `{colors.focus-ring}` blue.

### Navigation
- Minimal sticky top bar: wordmark left, "Sign Up to Chat" (filled) + "Login" (ghost) right. No secondary nav items, no hamburger, no mega-menu. Width-agnostic at desktop.

### Badges
- **`badge`** — Surface hover fill, mid-gray text, pill radius. Used sparingly for small status labels.

## Do's and Don'ts

### Do
- Use the dark hero image as the primary visual expression — the design system exists to frame it, not compete with it
- Keep `{colors.primary}` (near-black) as the sole CTA fill — never introduce chromatic brand colors
- Use the two-tier radius grammar: `{rounded.lg}` (30px) for marketing CTAs, `{rounded.sm}` (12px) for auth/form buttons
- Apply hover as opacity fade (~86%) rather than color shift — subtlety is the brand
- Use `atHauss` weight 600 exclusively for display headlines — weight 400 for all other text
- Maintain the binary light/dark split: `{colors.surface-dark}` canvas vs `{colors.surface}` card
- Keep navigation to two elements maximum: one filled CTA, one ghost button
- Use `{typography.caption}` at weight 100 for legal and fine-print text — ultra-light is intentional de-emphasis

### Don't
- Don't introduce brand accent colors (purple, teal, gradient) — the achromatic palette is the brand
- Don't use the modal card shadow (`{colors.shadow-soft}`) as a decorative element on light-background pages — it only reads over `{colors.surface-dark}`
- Don't apply the pill radius `{rounded.lg}` to auth or form buttons — those belong to `{rounded.sm}`
- Don't override `{typography.display}` letter-spacing — the `-0.72px` tracking at 36px is the headline's defining characteristic
- Don't add navigation items to the top bar without evidence the product has grown to need them
- Don't use the `{colors.focus-ring}` blue outside keyboard focus states — it's a Tailwind system affordance, not a brand color
- Don't reduce heading weight below 600 — the contrast between 600 display and 400 body is the only typographic tension in the system
- Don't use decorative illustrations or iconography in the page chrome — atmospheric photography does that job

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <440px | Modal fills viewport width; nav collapses to wordmark + single CTA |
| Mobile | 440–640px | Hero image may truncate vertically; modal centered |
| Mobile-Tablet | 640–768px | Two-column modal layout begins to be considered |
| Tablet | 768–1024px | Full hero visible; nav gains Login button |
| Desktop | 1024–1280px | Full layout, 40px nav padding |
| Large | 1280–1400px | Max hero scale, modal floats comfortably |
| XL | 1400–1536px | Layout locks to content-max-width |

### Touch Targets
- Primary CTA: ~34px effective height (10px padding + 14px text) — slightly below 44px minimum; functional but tight
- Auth buttons: ~48px effective height — comfortable tap targets
- Nav items: 34–40px — adequate with sufficient spacing

### Collapsing Strategy
- **Navigation**: horizontal bar collapses gracefully; at narrow widths only the wordmark and primary CTA remain visible
- **Hero**: image scales as background-cover; modal stays centered vertically and horizontally
- **Modal card**: transitions from fixed-width (~355px) to full-width with horizontal padding at small mobile
- **Typography**: display size (36px) may scale down to ~26px at mobile; body and button sizes remain fixed

### Image Behavior
- Hero illustration: `background-size: cover`, full-bleed — maintains cinematic proportion at all breakpoints
- Logo wordmark: SVG, scales proportionally, maintains legibility at all sizes
- No art-direction swaps between breakpoints — single hero image serves all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Page canvas: `{colors.background}`
- Modal / card surface: `{colors.surface}`
- Dark hero canvas: `{colors.surface-dark}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Primary CTA fill: `{colors.primary}`
- CTA text: `{colors.on-primary}`
- Ghost button border: `{colors.border}`
- Input border: `{colors.border-input}`
- Hover surface: `{colors.surface-hover}`

### Example Component Prompts

- "Create a minimal nav bar on `{colors.background}` with 16px top/bottom and 40px left/right padding. Left: `atHauss` wordmark `(character.ai)` in `{colors.ink}` at 16px weight 400. Right: a filled near-black pill button (`{colors.primary}`, `{colors.on-primary}`, 30px radius, 10px 16px padding, 14px `atHauss` weight 400) labeled 'Sign Up to Chat' and a ghost pill button (1px `{colors.border}` border, `{colors.ink}` text, same radius) labeled 'Login'. Hover fades both buttons to 86% opacity."
- "Design a signup modal card — `{colors.surface}` background, 24px border-radius, ambient glow shadow `0px 0px 5px 0px {colors.shadow-soft}`, 355px max-width, 24px padding. Headline at 36px `atHauss` weight 600, letter-spacing -0.72px, line-height 1.11, `{colors.ink}`. Sub-label at 16px weight 400, `{colors.ink-secondary}`."
- "Build a social auth button row — three full-width buttons stacked with 8px gap. First two: `{colors.ink}` fill, `{colors.on-primary}` text, 12px border-radius, 12px 16px padding, 16px `atHauss` weight 400 with provider icon left. Third: white with 1px `{colors.border-input}` border, `{colors.ink}` text, same radius. All hover to `{colors.surface-hover}` with 0.25s ease opacity fade."
- "Create a full-bleed hero section using a dark atmospheric photograph as background. Overlay a centered white card matching the modal spec above. The photograph should be 100vw × 380px, `object-fit: cover`, with no overlay or gradient — the image carries the mood alone."
- "Design a footer link row on `{colors.background}` — links in `{colors.ink-secondary}` at 12px `atHauss` weight 400, no underline by default. On hover, color shifts to `{colors.link-hover}` with 0.25s ease transition. Links: About, Careers, Safety Center, Blog, Terms, Privacy Policy, Cookie Policy."

### Iteration Guide

1. Start with the dark hero canvas (`{colors.surface-dark}`) as the stage — everything sits on top of it
2. Float the white card (`{colors.surface}`) with the minimal ambient glow — contrast does the depth work
3. Apply the two-tier radius rule: 30px pill for nav CTAs, 12px rect for modal/form elements
4. Use `{colors.primary}` (near-black) as the sole CTA fill — never introduce chromatic accents
5. Headline hierarchy: weight 600, -0.72px tracking, 1.11 line-height for display moments only
6. Hover = opacity fade to ~86%, 0.25s ease — never color shift on primary CTAs
7. Keep navigation to wordmark + two buttons — the design gains authority from what it removes

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Character.ai. Brand names and trademarks belong to their respective owners.