CURATED · OPEN · FREE

Character.AI

A minimalist, friendly AI platform focused on character-based conversations with a low-friction sign-up flow.

aichat

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://character.ai

📦 Browse pack contents →

Identity DNA

conversational AIcharactersplayfulaccessible

A clean, modern chat application interface that prioritizes simplicity and ease of onboarding.

Color

#26272bInk

#585962Ink soft

#f4f4f5BG

#ffffffBG soft

#6b7280Muted

rgba(212, 212, 218, 1)Line

Neutral and subdued palette with high-contrast dark elements for primary actions.

Typography

geometric-sans · humanist-sans

display36px · 700
body16px · 400

Headings use a tight negative letter-spacing for impact. · Body text maintains standard line-height for readability. · Font weights are strictly limited to 400, 500, 600, and 700.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px grid system with consistent spacing for padding and gaps.

Surfaces

sm · 4px

md · 12px

lg · 30px

pill · 9999px

1px solid #d4d4da

rgba(0, 0, 0, 0.1) 0px 4px 6px -1px · rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered card layout with a large hero image as the backdrop for the sign-up form.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle 250ms transitions on all interactive elements. · Smooth background image scaling or fading. · Clean hover states on buttons and links.

Subtle background color change or opacity shift on primary buttons. · Immediate feedback with a slight scale or color change.

Components

button Large, rounded buttons with high contrast (black or white) and centered text.
card Floating white card with subtle shadow, used for the main sign-up form.
chip Simple text link with underline on hover, used for footer navigation.
input Clean input field with rounded corners and a subtle border.
hero A split layout with a large animated/illustrated background and a floating white card for conversion.

Voice & Don'ts

Tone Inviting, simple, and encouraging.
Headlines Direct and benefit-oriented with a focus on scale and speed.
CTAs Clear, action-oriented buttons (e.g., 'Sign Up to Chat', 'Continue with Google').

don't use complex multi-column grids — screenshot shows a simple, focused single-column or split layout.
don't use a wide variety of colors — screenshot shows a neutral palette with black and white as the primary contrast.
don't use ornate or decorative fonts — screenshot shows clean, modern sans-serif typography.
don't use heavy, dark backgrounds for the main interface — screenshot shows a light, airy aesthetic.
don't use small, cramped buttons — screenshot shows large, touch-friendly buttons with ample padding.
don't use aggressive or high-saturation accent colors — screenshot shows a calm, monochromatic UI.
Avoid: Technical jargon
Avoid: Formal or overly corporate language
Avoid: Long-winded explanations

Inside the pack — real screenshots

Character.AI — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Character.ai is a conversational AI platform with a clean, modern, and friendly UI. The design uses a neutral palette of off-white (#f4f4f5) and dark gray (#26272b) for high contrast. Typography consists of clean sans-serif fonts (humanist and geometric) with tight letter-spacing on headings. Critical don'ts: do not use complex layouts or grids, do not use high-saturation accent colors, and do not use decorative or ornate fonts. The interface is minimalist, focusing on ease of onboarding and simple, direct interactions.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko