What is character.ai's primary brand color?

The brand voltage is a saturated blue at #1a5eff, declared as --primary-blue and --primary-refresh in the underlying token graph. The visible CTA on the auth card, however, runs near-black (#202024 — declared as --button-background) on white. The blue is in reserve — it surfaces on focus rings, on the --link color, on the --primary-container-refresh light tint #a3bfff, but never on the Sign Up to Chat button itself. This is unlike most AI-chat consumer brands that paint their primary CTA in their brand voltage.

What typography does character.ai use, and what should I use if atHauss isn't available?

The site runs atHauss across every visible text element, declared as --font-at-hauss with a fallback chain through ui-sans-serif and system-ui. Inter is declared as --font-inter for secondary roles. Sizes ladder from 11px (small links) through 14px (button labels) up to 36px (the hero h1, with -0.72px letter-spacing). The display tightening is the only non-default tracking value in the system. If atHauss is unavailable, Inter at the same weights (400 body, 500 labels, 600 display) is the closest open-source substitute since it is already declared as the secondary stack.

Why are character.ai's buttons pill-shaped and how do I match it?

Every CTA on the auth surface — Sign Up to Chat, Login, Continue with Google, Continue with Apple, Continue with email — uses a 30px border-radius, which at the visible 40px button height reads as a full pill. The root --radius variable is 2rem (32px), and --nextui-radius-large is 14px, but the components consistently override toward 30px. To match: set radius to 30px on any button at 40px height; do not use rounded-md or rounded-lg from a default Tailwind theme.

Why is the entire landing page a sign-up card?

The marketing surface is deliberately collapsed into one conversion target. The page renders a 360px-wide card on a 1440px canvas, centered roughly two-thirds down, with three stacked auth buttons separated by an OR divider and a fine-print 'By continuing, you agree' footer in 11px atHauss. There is no scroll, no second band, no testimonial. The product itself — the chat surface, the character grid, the discovery feed — lives entirely behind the sign-up wall. Studying the token graph reveals the product-side chrome (--feed-item-width: 140px, --plus-gradient, --labs-gradient) that the marketing page never reveals.

Can I use this DESIGN.md to build my own React app?

Yes — feed the file to Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces character.ai's auth-card voice (pill buttons, near-black primaries, atHauss display tightening, parentheses-wrapped wordmark) rather than a generic shadcn theme. Every color, type style, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or your own component library. The underlying NextUI scale (--nextui-primary 212/100/47, --nextui-radius-large 14px) is exposed for teams already on that stack.

What's missing from this DESIGN.md spec?

Several items live in the Known Gaps section. atHauss is a licensed character.ai typeface with no public web font — Inter is the closest substitute. The 379 :root CSS variables expose latent product tokens (--feed-item-width, --plus-gradient, --labs-gradient, swiper carousel theming) that never render on the public marketing surface, so they are documented but not styled. Dark-mode tokens exist in the graph (--brand-bg-inverted #202024, --inverse-surface-refresh #1e1e1e) but the public page renders light-only. Chat-bubble, message-action, character-card, and feed-discovery components live behind the auth wall and are not extracted.

character.ai Design System

character.ai's design tokens as a DESIGN.md file.

About character.ai DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source character.ai

AI & LLM Platforms
Social & Community

character.ai's landing surface is a sign-up gate, not a marketing brochure. The page is one card on a near-white canvas (#f4f4f5), holding a 36px atHauss h1 ("Get access to 10M+ Characters"), three auth buttons stacked vertically, and a footer link row. The wordmark sits top-left wrapped in literal parentheses — (character.ai) — a typographic move that treats the URL itself as the logo. There is no hero illustration, no testimonial band, no comparison table. The page exists to convert a click to an account.

This DESIGN.md packages the underlying token graph into one file. Inside: 22 color tokens, 9 type styles built on atHauss with Inter as the declared --font-inter fallback, 6 corner radii anchored to a 30px pill, 9 spacing values on a 4px scale, and 18 components — every piece visible on the auth surface plus the latent product chrome the 379 :root variables expose. The colors include the brand-layer #1a5eff (declared as --primary-blue), the auth-CTA near-black #202024 (--button-background), and the cream canvas #f4f4f5 (--background) that distinguishes the site from a pure white default.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The agent reproduces character.ai's auth-card voice — pill buttons, near-black primaries, atHauss tightening at -0.72px, parentheses-wrapped wordmark — rather than a generic SaaS theme. Where most AI-chat consumer apps front-load a feature grid, this one front-loads a Google/Apple/email triplet on a single card. Studying the token graph reveals a NextUI-derived scale operating beneath a custom Tailwind layer.

What makes it distinct

Pill CTA geometry30px radius on buttons paired with a 2rem (#1a5eff) root radius, the strongest formal signal in the chrome
Wordmark-in-parenthesesliteral ( ) brackets wrap the (character.ai) lockup in atHauss, treating the URL itself as the logotype
Near-black primary, blue in reservevisible CTAs run #202024 on white while #1a5eff lives in focus rings, link-text, and the primary-refresh token
Two-typeface stackatHauss for product chrome, Inter declared as --font-inter for fallbacks, no third family across 7 weight tiers
NextUI-derived token graph379 CSS variables on :root expose the underlying nextui scale (primary 212/100/47), surfaced through a Tailwind layer rather than hand-rolled

Live at character.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

character.ai

Explore character.ai

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

character.ai design system FAQ

Common questions about character.ai's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

character.ai — official site

The chat-with-millions-of-AI-characters consumer app, gated behind the sign-up card this spec extracts.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use character.ai in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→