Character.ai Design System Deep Dive

1. Brand Overview

Character.ai is building an interactive, conversational playground for AI personalities. The product sits at the intersection of chat interfaces, social interaction, and creative exploration. The design language reflects that — it’s deliberately minimal, almost neutral, to let the characters and conversations take center stage.

There’s no loud gradient branding or eccentric shapes here. Instead, the site leans heavily on muted neutrals, soft contrasts, and clean typography. The primary color is a pale neutral (rgb(228, 228, 231) / #e4e4e7), which is unusual for a “primary” — most tech brands choose blues or bold accents. Here, the choice says: “We’re a platform, not the star. The content is the star.”

The feel is modern, utilitarian, and slightly understated. It’s visually closer to productivity tools like Notion or Linear than to consumer apps with heavy branding. The typography reinforces this: a single sans-serif family (__atHauss_f6c245 with a full system fallback stack), consistent across headings, body, buttons, and captions. That consistency keeps the experience calm and predictable.

The UI elements are restrained. Buttons come in a few variants — filled dark, outlined, muted — but all share rounded geometry and low visual noise. Borders are thin, colors are subdued, shadows are barely there (and sometimes fully absent).

This approach works because the platform’s primary “color” comes from user-generated avatars and conversation content. A heavy brand palette would compete. Instead, the system acts like a gallery wall: neutral, quiet, but thoughtfully proportioned and spaced.

It’s also worth noting the responsiveness. Breakpoints span from 440px up to 1536px. That’s a wide, granular set — they’ve clearly tuned layouts for multiple device widths. Tailwind CSS is in use (confirmed by arbitrary values and modifiers in classnames), which means the design system is codified in utility classes rather than a separate component library.

Overall, the vibe is: neutral tech scaffolding for expressive content. Minimal contrast in static UI, but enough structure to feel deliberate.

2. Color System

2.1 Primary Colors

The semantic primary is rgb(228, 228, 231) (#e4e4e7). That’s a very light gray with a hint of warmth. It’s not used as a “CTA” in the traditional sense — instead, it shows up in backgrounds for secondary buttons and subtle UI surfaces.

Psychologically, this color is calm and non-intrusive. It doesn’t scream for attention. Compared to competitors in the AI chat space (many of whom use deep blues or purples), this is a soft, almost passive primary. It positions Character.ai as a neutral host for many personalities rather than a personality itself.

2.2 Complete Palette

Here’s every color detected in the system:

Functional CSS variables also define brand-adjacent colors for notifications and UI frameworks:

--toastify-color-warning: #f1c40f
--toastify-text-color-warning: #fff
--toastify-color-progress-success: #07bc0c
--toastify-icon-color-error: #e74d3c
--toastify-color-dark: #121212
--toastify-text-color-light: #757575
--toastify-color-info: #3498db
...

These aren’t in the core brand palette but are part of the functional UI.

2.3 Color Relationships

Contrast is generally acceptable: dark text #26272b on white #fafafa is high contrast. The primary neutral #e4e4e7 against black text is also fine for WCAG AA. Where it gets riskier is using #6b7280 for text — that’s a muted gray that can fail contrast against light backgrounds for smaller text.

The system doesn’t lean on bright accent colors for interactivity. Hover states often use opacity changes rather than color shifts. This keeps the color relationships simple but means accessibility relies on more than just color — shape, underline, or motion need to signal state.

Dark mode support isn’t obvious from this palette, but #0f172a and other darks suggest some inversion patterns.

2.4 Usage Guide

• Use dark tones (#26272b, #131316) for primary text and filled button backgrounds.
• Use light neutrals (#e4e4e7, #e2e8f0) for backgrounds and secondary button fills.
• Avoid pairing low-contrast grays (#6b7280) with light backgrounds for small text.
• Hover/focus states can use transparent overlays (#ececee) or slight darkening.
• Reserve functional colors (warning, success, error) for notifications and feedback — they’re not part of the main brand look.

3. Typography

3.1 Font Families

Every text context uses the same family: __atHauss_f6c245 with fallbacks:

ui-sans-serif, system-ui, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

No Google or Adobe Fonts are loaded — this is likely a self-hosted custom font or alias.

Consistency here is deliberate. No serif headings or funky display fonts. Everything is san-serif, clean, and uniform.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is managed more by weight and size than by font changes. The largest heading is 36px/600 weight, stepping down to 24px, 18px, and 16px. Captions drop to 14px, 12px, and 11px — with a drastic weight drop to 100 for the smallest, which gives a very light feel.

Because the same font is used everywhere, line heights are critical to visual rhythm. Headings get tighter line heights (1.11–1.33), body/link/button text sits around 1.43–1.50.

4. Spacing & Layout

4.1 Spacing Scale

The base appears to be an 8px grid. Common values:

This isn’t a strict 8px-only system—10px and 14px sneak in—likely for optical alignment in certain components.

4.2 Layout

Breakpoints:

• 440px
• 480px
• 600px
• 601px (odd—possible JS breakpoint)
• 640px
• 750px
• 768px
• 1024px
• 1280px
• 1400px
• 1536px

This is more granular than most Tailwind defaults — they’ve added custom points for specific component adjustments.

5. Visual Elements

Border Radius

Values:

• 2px — badges
• 12px — buttons
• 24px — divs
• 30px — buttons
• 32px — divs
• 9999px — fully round buttons/avatars

The mix here is interesting: small radius for micro-elements, medium for buttons, very large for pills and circular icons.

Shadows

Only two detected:

• Subtle multi-layer: rgba(0,0,0,0.1) 0px 4px 6px -1px + rgba(0,0,0,0.1) 0px 2px 4px -2px
• Flat gray: rgb(128, 128, 128) 0px 0px 5px 0px

Shadows are rare — this is closer to a flat design system.

Borders

• 1px solid, light grays (#d9d9df, #6b7280, #c1c1c1)
• Often used instead of shadows to separate components.

6. Components

6.1 Buttons

Variant 1 — Filled Dark

• Default: background: #202024, color: #fafafa, padding 0 16px, radius 30px, border none.
• Hover: opacity 0.8, bg transparent, color var(--foreground).
• Active: bg rgba(0,0,0,0.08).
• Focus: bg rgba(0,0,0,0.15).

Variant 2 — Outlined

• Default: bg transparent, color: #202024, border 1px solid #d9d9df, radius 30px.
• States same as above.

Variant 3 — Filled Dark Small Radius

• Default: bg #131316, color #fafafa, radius 12px, opacity 0.8.
• States same.

Variant 4 — Circular Icon Button

• Default: bg #e4e4e7, color #202024, padding 8px, radius 9999px.

6.2 Links

Two styles:

• Dark text (#26272b), weight 400.
• Muted (#585962), weight 500. No underline, no hover style specified in data.

6.3 Forms

Text inputs use:

• Border: 1px solid (#c1c1c1)
• No shadow.
• Likely conform to 8px/12px padding.

6.4 Cards

No explicit card component in data, but #e2e8f0 backgrounds + 12–24px radius + light border/shadow likely.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #e4e4e7;
  --color-slate-100: #e2e8f0;
  --color-dark: #26272b;
  --color-gray-muted: #585962;
  --color-white: #fafafa;
  --color-gray-500: #6b7280;
  --color-navy-900: #0f172a;
  --color-light-gray-alpha-63: #ececee;
  --color-light-gray-alpha-68: #ececee;
  --color-gray-700: #36373c;
  --color-gray-200: #e9e9eb;

  /* Functional */
  --toastify-color-warning: #f1c40f;
  --toastify-text-color-warning: #fff;
  --toastify-color-progress-success: #07bc0c;
  --toastify-icon-color-error: #e74d3c;
  --toastify-color-dark: #121212;
  --toastify-text-color-light: #757575;
  --toastify-color-info: #3498db;

  /* Typography */
  --font-family-base: "__atHauss_f6c245", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-size-h1-lg: 36px;
  --font-size-h1-md: 24px;
  --font-size-h1-sm: 18px;
  --font-size-body: 16px;
  --font-size-button-sm: 14px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 12px;
  --font-size-caption-xs: 11px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-5: 20px;
  --space-5-5: 22px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 30px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px;
  --shadow-flat-gray: rgb(128,128,128) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# Character.ai Design System Specification

You are a Character.ai design expert. Build UIs matching their visual language exactly.

## Brand Context
Character.ai uses a neutral, minimal design language to let user-generated content shine. The brand avoids loud colors, sticking to soft grays and dark neutrals. All typography is san-serif, consistent, and clean.

## Color Palette
- Primary Neutral: #e4e4e7 — secondary buttons, soft surfaces
- Light Background: #e2e8f0 — panels, cards
- Dark: #26272b — primary text, filled button background
- Gray Muted: #585962 — secondary text
- White: #fafafa — text on dark, backgrounds
- Gray-500: #6b7280 — tertiary text, icons
- Navy-900: #0f172a — focus states
- Light Gray Alpha 63: #ececee — hover overlay
- Light Gray Alpha 68: #ececee — hover overlay
- Gray-700: #36373c — hover/focus backgrounds
- Gray-200: #e9e9eb — dividers, borders
- Functional Warning: #f1c40f — notifications
- Functional Success: #07bc0c — positive feedback
- Functional Error: #e74d3c — errors
- Functional Info: #3498db — informational messages

## Typography
Font family: "__atHauss_f6c245", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

| Level       | Size | Weight | Line Height | Use |
|-------------|------|--------|-------------|-----|
| H1 Large    | 36px | 600    | 1.11        | Page titles |
| H1 Medium   | 24px | 600    | 1.33        | Section titles |
| H1 Small    | 18px | 400    | 1.50        | Subheadings |
| Body/Link   | 16px | 400    | 1.50        | Body text, links |
| Button      | 16px | 400    | 1.50        | Primary buttons |
| Button Sm   | 14px | 400    | 1.43        | Small buttons |
| Caption     | 14px | 400    | 1.43        | Secondary text |
| Caption Sm  | 12px | 100    | 1.33        | Smallest captions |
| Link Sm     | 12px | 400    | 1.33        | Small inline links |
| Caption XS  | 11px | 400    | 1.45        | Very small labels |
| Link XS     | 11px | 500    | 1.45        | Tiny emphasis links |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 8px, 10px, 12px, 14px, 20px, 22px, 24px, 32px
Use multiples for padding, margins, and gaps. Buttons use 8px or 16px horizontal padding.

## Border Radius
- xs: 2px — badges
- sm: 12px — small buttons
- md: 24px — medium containers
- lg: 30px — pill buttons
- xl: 32px — large containers
- full: 9999px — circular buttons, avatars

## Shadows & Depth
- Subtle: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px
- Flat gray: rgb(128,128,128) 0px 0px 5px 0px
Use sparingly. Prefer borders over shadows.

## Component Specifications

### Primary Button
Default:
- background: #202024
- color: #fafafa
- padding: 0 16px
- border-radius: 30px
- border: none
- font-size: 14px
- font-weight: 400
Hover: opacity: 0.8; background: transparent; color: var(--foreground)
Active: background: rgba(0,0,0,0.08)
Focus: background: rgba(0,0,0,0.15)

### Secondary Button (Outlined)
Default:
- background: transparent
- color: #202024
- border: 1px solid #d9d9df
- border-radius: 30px
Hover/Active/Focus same as primary

### Icon Button (Circular)
Default:
- background: #e4e4e7
- color: #202024
- padding: 8px
- border-radius: 9999px

### Navigation Links
- Weight: 400 or 500
- Color: #26272b (primary) or #585962 (muted)
- No underline
- Hover: no color change (opacity change optional)

### Inputs
- Border: 1px solid #c1c1c1
- Border-radius: 2px–12px depending on context
- Background: white
- No shadow
- Focus: border-color #0f172a

### Cards
- Background: #e2e8f0 or white
- Border-radius: 12–24px
- Border: 1px solid #e9e9eb
- Optional subtle shadow

## Layout & Responsive Rules
Breakpoints:
- 440px, 480px, 600px, 601px, 640px, 750px, 768px, 1024px, 1280px, 1400px, 1536px

## Interaction Rules
- State changes: ~150ms ease
- Hover: opacity change
- Focus: background darken or border color change
- Avoid heavy motion

## DO
- Use only colors from palette
- Maintain 8px base spacing
- Keep typography consistent
- Use full radius for circular elements
- Keep hover states subtle

## DON'T
- Introduce brand-foreign colors
- Mix sharp and round corners arbitrarily
- Overuse shadows
- Remove focus indicators

## Code Examples

Button:
```css
.btn-primary {
  background: #202024;
  color: #fafafa;
  padding: 0 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
  border: none;
  transition: opacity 150ms ease;
}
.btn-primary:hover {
  opacity: 0.8;
  background: transparent;
  color: var(--foreground);
}
.btn-primary:focus {
  background: rgba(0,0,0,0.15);
}
```

Card:
```css
.card {
  background: #e2e8f0;
  border-radius: 12px;
  border: 1px solid #e9e9eb;
  padding: 24px;
}
```

Input:
```css
.input {
  border: 1px solid #c1c1c1;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  font-family: var(--font-family-base);
}
.input:focus {
  border-color: #0f172a;
}
```

9. Summary

TL;DR — Character.ai’s design system is neutral, minimal, and content-first. Soft grays, dark neutrals, and consistent sans-serif typography create a calm stage for user-generated content. Interactivity is signaled by subtle opacity changes, not loud colors.

Brand Keywords:

• content-first-neutral
• minimal-utility
• soft-contrast
• rounded-geometry
• tailwind-driven