character.ai Design System

Overview

character.ai's chrome is a sign-up wall dressed as a marketing page. The base canvas is a near-white {colors.canvas} (#f4f4f5), one shade off pure white — visible only because the 360px auth card sits on top in {colors.surface-card} (#fafafa) and the hairline contrast separates the two. The wordmark at top-left is literal: (character.ai) wrapped in parentheses, set in atHauss, treating the URL itself as the lockup. There is no hero illustration, no scrolling feature band, no testimonial column. The viewport ends where the footer link row ends.

Wordmark as parenthetical: where most AI-chat consumer brands run a sans-serif logotype with a custom glyph, character.ai sets the URL inside literal parentheses and calls it the logo. The choice mirrors a function call — (character.ai) reads as an invocation, fitting for a product that exposes character personas through a chat surface. The parentheses are not decorative; they are the brand mark.

Blue in reserve, near-black on the page: the underlying token graph declares --primary-blue as {colors.primary} (#1a5eff), but no visible CTA on the public surface renders in that blue. The Sign Up to Chat button, the Continue with Google button, and the Continue with Apple button all run {colors.cta} (#202024) — a near-black declared as --button-background. The blue surfaces only as {colors.link} (#138eed) on the Terms and Privacy fine-print and as the latent focus ring color. Where most consumer AI brands paint their primary CTA in their brand voltage, character.ai treats the brand color as a system token and leaves the auth surface in achromatic chrome.

Key Characteristics:

• Near-white canvas {colors.canvas} (#f4f4f5) with {colors.ink} (#26272b) text — a one-step-off-white that registers visibly only against the auth card surface.
• Pill geometry — every CTA uses {rounded.pill} (30px) at 40-48px heights, reading as a full pill. The root --radius is 32px, captured here as {rounded.card}.
• atHauss display tightening — the 36px hero h1 carries -0.72px letter-spacing, the only non-default tracking value in the type system. Body and labels stay at zero tracking.
• Wordmark-as-parenthetical — (character.ai) set in atHauss at 18px, weight 400, the URL itself functioning as logotype.
• Near-black auth CTA {colors.cta} (#202024) — the visible primary on the page, despite the underlying --primary-blue (#1a5eff) declared in the token graph.
• Two-typeface declaration — atHauss as --font-at-hauss and Inter as --font-inter, with no third family across nine type roles spanning 11px through 36px.
• NextUI scale beneath a Tailwind layer — 379 CSS variables on :root expose --nextui-primary (212 100% 47%), --nextui-radius-large (14px), --nextui-spacing-unit-4 (1rem), surfacing the underlying component library through custom tokens.

Colors

Brand & Accent

• Primary Blue ({colors.primary} — #1a5eff): frequency 0 visible on the auth surface, but layer "brand" in the extraction, declared as --primary-blue and --primary-refresh. Reserved for focus rings, latent link states, and the primary-button slot when the auth wall opens into the product.
• Primary Container ({colors.primary-container} — #a0c9ff): frequency 0. Used as --primary-container-refresh and --link-light — the lightened brand tint for selected states and disabled link backgrounds.
• Primary Deep ({colors.primary-deep} — #0061a6): frequency 0. The darker container slot — --primary-container proper in the Material-Design-derived ladder.
• Primary On Container ({colors.primary-on-container} — #001138): frequency 0. Text on a primary-container background.
• Inverse Primary ({colors.inverse-primary} — #d1dfff): frequency 0. The very-light blue tint used on inverse surfaces.
• Link ({colors.link} — #138eed): frequency 0 visible. Used on the Terms and Privacy Policy fine-print lines under the auth buttons.
• Link Secondary ({colors.link-secondary} — #1ba5fb): frequency 0. Declared as --plus-light-blue — used inside the c.ai+ subscription chrome.

CTA / Ink

• CTA Near-Black ({colors.cta} — #202024): frequency 1 as background. Declared as --button-background in the token graph. The visible primary on every auth CTA — Sign Up to Chat, Continue with Google, Continue with Apple. Not pure black, slightly warmed toward neutral 850.
• CTA Text ({colors.cta-text} — #fafafa): frequency 11 (7 text · 4 bg). Used as the text fill on every near-black CTA. Also functions as the card-fill surface tone.
• Ink ({colors.ink} — #26272b): frequency 39 (38 text · 1 bg). The dominant text color on the canvas — h1, navigation labels, the (character.ai) wordmark.
• Ink Strong ({colors.ink-strong} — #131316): frequency 3 (1 text · 2 bg). Reserved for emphasis text and a darker hover-state background on the near-black CTA.
• Body ({colors.body} — #1e1e1e): frequency 0 raw, declared as --on-surface-refresh. Used for the "Sign up in just ten seconds" sub-headline on the auth card.
• Muted ({colors.muted} — #585962): frequency 17 (all text). The workhorse secondary — nav links, footer links, fine-print body. Declared as --muted-foreground and --on-surface-variant.
• Muted Soft ({colors.muted-soft} — #7c7c87): frequency 0 raw. Captions, placeholder text, tertiary labels.
• Outline ({colors.outline} — #a2a2ac): frequency 0 raw. Disabled icons, very-light borders.

Surface

• Canvas ({colors.canvas} — #f4f4f5): frequency 0 raw, declared as --background. The default page floor — one step off pure white.
• Surface Card ({colors.surface-card} — #fafafa): frequency 11 (7 text · 4 bg). The auth card surface, the elevated-content fill.
• Surface Cream ({colors.surface-cream} — #ececee): frequency 0 raw. Declared as --surface-elevation-1 and --brand-bg — slightly warmer than the canvas.
• Surface Cream Strong ({colors.surface-cream-strong} — #e5dfeb): frequency 0 raw. The brand off-white tone declared as --G175 and --brand-off-white.
• Hairline ({colors.hairline} — #e2e8f0): frequency 61 (60 border · 1 bg). The dominant border tone on the entire page — auth card outline, input borders, footer divider.
• Hairline Strong ({colors.hairline-strong} — #d4d4da): frequency 2 (both border). A heavier hairline used on the email-button outline and elevated card borders.
• Surface Elevation 3 ({colors.surface-elevation-3} — #c8c8cf): frequency 0. The --accent and --surface-elevation-4 slot — used inside product chrome behind the wall.

Accent / Semantic

• Accent Violet ({colors.accent-violet} — #b460eb): frequency 0. Declared as --tertiary-refresh — used inside the labs-gradient (a three-stop pink-to-violet-to-soft-blue band defined on --labs-gradient).
• Accent Violet Soft ({colors.accent-violet-soft} — #e1bff7): frequency 0. Tertiary container fill.
• Accent Green ({colors.accent-green} — #1ebe53): frequency 0. Declared as --secondary-refresh and --secondary-green — used on connection status dots.
• Accent Green Soft ({colors.accent-green-soft} — #a8eac6): frequency 0. Secondary container fill.
• Warning ({colors.warning} — #ff9800): frequency 0. Standard amber warning fill.
• Warning Soft ({colors.warning-soft} — #ffe991): frequency 0. Warning container fill.
• Error ({colors.error} — #cc3434): frequency 0. Validation error fill, declared as --error.
• Error Soft ({colors.error-soft} — #fba7b9): frequency 0. Error container fill.

Typography

Font Family

The system runs atHauss as the single display + body face, declared as --font-at-hauss with a fallback chain through ui-sans-serif, system-ui, sans-serif. Inter is declared in parallel as --font-inter for secondary roles and as the closest open-source substitute. JetBrains Mono or another monospace face would be needed for code blocks but does not appear on the auth surface.

The display/body split is collapsed:

• atHauss weight 600 with -0.72px tracking → h1 (36px) — the only tightened tier
• atHauss weight 400-500 → body, navigation, button labels, captions
• All other type lands at zero letter-spacing

Hierarchy

Principles

The 36px h1 is the only typography role with non-zero letter-spacing in the entire system. The -0.72px tightening reads as a -0.02em em-relative ratio — character.ai's choice to round to exact pixels rather than ems. Below 18px, every label and link stays at zero tracking and 400 or 500 weight. There is no 700-weight tier on the public surface — atHauss carries headings at 600 only.

Note on Font Substitutes

If atHauss is unavailable, Inter at the same weights (400 body, 500 labels, 600 display) is the closest substitute since it is already declared as --font-inter in the system. Söhne or Haas Grot are paid alternatives. Helvetica or Arial would break the slightly humanist proportions of atHauss.

Layout

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.base} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 40px.
• Most frequent values from extraction: 8px appears 12 times, "0px 16px" (button horizontal padding) appears 5 times, "8px 16px" (nav-link padding) appears 4 times.
• Auth card internal padding: {spacing.xl} (32px) — the dominant card padding.
• Button height tier: 40px for chrome CTAs (Sign Up to Chat, Login), 48px for auth-provider buttons (Continue with Google, Apple, email).

Grid & Container

• Max content width: the auth card caps at ~360px and sits centered on a 1440px canvas.
• Single-card layout: no grid — the page is one column with one card.
• Top-nav layout: wordmark left, two pill buttons (Sign Up to Chat, Login) right, no center navigation.
• Footer link row: two rows of inline-flex links centered at the bottom of the viewport.

Whitespace Philosophy

The auth card occupies one-quarter of the viewport, surrounded by canvas on every side. There is no second content band, so whitespace is the page's primary compositional element. The vertical gap between the wordmark and the auth card is roughly 240px of pure canvas — a deliberate emptiness that focuses every visual moment on the sign-up triplet.

Elevation & Depth

The elevation philosophy is hairline-first, shadow-rare. The auth card relies on a 1px {colors.hairline} border plus the {colors.surface-card} fill against the {colors.canvas} floor — the one-step contrast is the depth signal. Drop shadows exist in the token graph (--toastify-toast-shadow, --nextui-box-shadow-small/medium/large) but never render on the public surface.

Shapes

Border Radius Scale

Iconography

The auth surface carries five icons total: the Google G in its colored form, the Apple wordmark in white, an envelope outline on the email button, and a "?" inside the help FAB at bottom-right. No other iconography appears on the public surface. The product side declares --swiper-navigation-size: 44px for carousel arrows, but those live behind the wall.

Components

Top Navigation

top-nav — Cream-canvas nav bar pinned to the top of the viewport, 72px tall, {colors.canvas} background. Carries the parentheses-wrapped wordmark at left, two pill CTAs ({component.button-primary} and {component.button-secondary}) at right. No center menu items, no logo glyph.

wordmark — The (character.ai) lockup, set in {typography.title-lg} (atHauss 18px / 400), {colors.ink-strong} text. The parentheses are part of the wordmark, not punctuation.

nav-link — Inline nav text link in {colors.muted} text. Padding 8px 16px. Used in the footer link row (About, Careers, Safety Center, Blog, Cookie Policy, Privacy Policy, Terms of Service, Charms Terms of Use).

Buttons

button-primary — The signature Sign Up to Chat CTA. Background {colors.cta} (#202024), text {colors.cta-text} (#fafafa), type {typography.button} (atHauss 14px / 500), padding 0px 16px, height 40px, rounded {rounded.pill} (30px).

button-primary-hover — Press state. Background darkens to {colors.ink-strong} (#131316). Radius unchanged.

button-secondary — The Login pill. Background {colors.surface-card} with a 1px {colors.hairline} border, text {colors.ink}, otherwise identical geometry to primary.

button-auth-provider — Continue with Google, Continue with Apple. Same near-black fill as {component.button-primary} but 48px tall and full-card-width — the auth-provider tier overrides the standard 40px chrome height.

button-auth-email — Continue with email. Inverts to a {colors.surface-card} fill with a 1px {colors.hairline-strong} border, text {colors.ink}. Reads as the secondary auth path beneath the OAuth duo.

text-link — Inline links in {colors.link} (#138eed). Used on the "Terms" and "Privacy Policy" anchors inside the fine-print block.

Cards & Containers

auth-card — The 360px-wide sign-up card. Background {colors.surface-card} (#fafafa), {colors.hairline} 1px outline, rounded {rounded.card} (32px), internal padding {spacing.xl} (32px). Holds the hero headline, sub-headline, three stacked auth buttons, the OR divider, and the fine-print block.

hero-headline — The "Get access to 10M+ Characters" h1. Type {typography.display-md} (atHauss 36px / 600 / -0.72px), color {colors.ink}. The card's only large-type element.

hero-subhead — "Sign up in just ten seconds" paragraph. Type {typography.title-lg} (atHauss 18px / 400), color {colors.body}. Sits directly under the h1 with no vertical divider.

Inputs & Forms

text-input — Pill-shaped text input. Background {colors.surface-card}, text {colors.ink}, type {typography.body-md}, rounded {rounded.pill} (30px), padding 0px 20px, height 48px, 1px {colors.hairline-strong} border. Matches the email-button geometry exactly.

Divider / Fine-Print

divider-or — The "OR" splitter between OAuth buttons and the email button. Type {typography.caption-label} (atHauss 11px / 500), color {colors.muted}, no background. The text floats centered with no horizontal rule.

fine-print-block — "By continuing, you agree with the Terms and Privacy Policy". Type {typography.fine-print} (atHauss 11px / 400), color {colors.muted}. Links inside use {component.text-link}.

Footer / Misc

footer-link-row — Inline-flex row of footer text links, centered horizontally at the bottom of the viewport. Type {typography.body-md}, color {colors.muted}, padding 16px 24px.

help-fab — A 32px circular help button anchored at bottom-right, holding a "?" glyph. Background {colors.surface-cream} (#ececee), text {colors.ink}. Rounded {rounded.full}.

plus-badge — The c.ai+ subscription marker. Background {colors.link-secondary} (#1ba5fb — --plus-light-blue), text {colors.cta-text}, rounded {rounded.pill}, padding 2px 10px. Does not appear on the auth surface but lives in the token graph behind the wall.

Do's and Don'ts

Do

• Anchor every CTA on the near-black {colors.cta} (#202024) — declared --button-background — rather than on the brand-layer {colors.primary} (#1a5eff). The blue stays in reserve for focus rings and link text.
• Use {rounded.pill} (30px) on every button at 40-48px height. Do not substitute rounded-md or rounded-lg from a default Tailwind theme.
• Wrap the wordmark in literal parentheses: (character.ai). The brackets are part of the lockup, not punctuation around it.
• Apply -0.72px letter-spacing on the 36px h1 only. Every smaller tier stays at zero tracking.
• Pair the 360px auth card with empty canvas on every side — the whitespace is the composition.

Don't

• Don't paint the Sign Up to Chat button in {colors.primary} (#1a5eff). The brand color is declared but never visible on a CTA — fill it with {colors.cta} instead.
• Don't use {rounded.card} (32px) on small buttons or chips. The 32px radius is reserved for the auth card outer container; buttons under 56px tall use {rounded.pill} (30px) instead.
• Don't apply -0.72px tracking to body or label tiers. Tightening below 18px crushes atHauss into illegibility.
• Don't substitute Helvetica or Arial for atHauss. Inter is the declared --font-inter fallback — use that, not a metric-incompatible neo-grotesque.
• Don't add a 700-weight tier. atHauss tops out at 600 on the public surface; jumping to 700 reads as off-brand bombast.
• Don't fill the auth card with a hero illustration, testimonial column, or feature grid. The card holds exactly six elements: h1, sub-head, three buttons, fine-print. Adding a sixth row breaks the composition.
• Don't apply a drop shadow under the auth card. Elevation is signaled by the 1px {colors.hairline} outline against {colors.canvas} — adding a shadow reads as Bootstrap default.

Responsive Behavior

Breakpoints

Touch Targets

• {component.button-primary} at 40px height — at the WCAG 44px floor for primary actions.
• {component.button-auth-provider} at 48px height — comfortably above the floor for the conversion-critical OAuth row.
• {component.text-input} at 48px height.
• {component.help-fab} at 32px diameter — slightly under WCAG 44 but visually centered.

Known Gaps

• atHauss is a licensed character.ai typeface with no public web font. Inter (declared as --font-inter) is the closest substitute and is already in the fallback stack.
• The 379 :root CSS variables expose latent product-side tokens — --feed-item-width: 140px, --plus-gradient (a four-stop cyan-to-yellow-to-pink-to-neutral band), --labs-gradient (a three-stop pink-to-violet-to-soft-blue band), swiper carousel theming — that never render on the public auth surface. They are documented as token names but not extracted as components.
• Dark-mode tokens exist in the graph (--brand-bg-inverted, --inverse-surface-refresh, the --G900 near-black slot) but the public marketing surface renders light-only.
• Product-side components — chat bubbles, message-action menus, character cards in the discovery feed, the c.ai+ paywall sheet — live entirely behind the sign-up wall and were not captured.
• Animation and transition timings (auth button hover, modal entry, toast slide-in via the declared toastify variables) are out of scope.
• Form validation states beyond the default input are not extracted — error and success states would require triggering an auth failure to confirm.