Character.ai

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.

Color Palette18 tokens

background#f4f4f5

surface#ffffff

surface-dark#1a1a1f

surface-mid#26272b

ink#202024

ink-secondary#585962

ink-muted#6b7280

ink-inverted#fafafa

primary#202024

on-primary#fafafa

surface-hover#ececee

link-hover#26272b

text-hover#313238

border#d9d9df

border-input#c1c1c1

border-bottom#d4d4da

shadow-soft#808080

focus-ring#3b82f6

Buttons

TypographyGoogle Font

Plus Jakarta Sansbrand uses atHauss

display

The quick brown fox

36px · 600 · -0.72px

heading-section

The quick brown fox

24px · 600 · 0px

heading-sub

The quick brown fox

18px · 400 · 0px

body-large

The quick brown fox

18px · 400 · 0px

body

The quick brown fox

16px · 400 · 0px

IconsLucide

Set: Lucide · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Character.ai

Achromatic near-black design system with a custom geometric sans-serif, soft pill-and-rect radius grammar, and atmospher…

none

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Character.ai

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 cinemat…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeAICharacter.ai

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Character.ai.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Character.ai tokens
export const theme = {
  primary: "#202024",
  radius: "24px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

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 illus…

Character.ai · AI

Similar systems

Generated from shared tags, visual DNA, category, color, type, and radius.

Filter by this ↗

Windsurf96%

shared styles: Dark, Minimal, Mono · same category: AI

xAI90%

shared styles: Dark, Minimal, Mono · same category: AI

Runway81%

shared styles: Dark, Minimal, Mono · same category: AI

ElevenLabs80%

shared styles: Dark, Minimal · same category: AI

Higgsfield80%

shared styles: Dark, Minimal, Cool · same category: AI

Krea76%

shared styles: Dark, Minimal, Mono · same category: AI