№ character-ai--about

Character — About

Soft, muted earth tones meet clean, spacious layout with gentle, rounded sans-serif text.

Feature Stackminimalism brutalism glassmorphism ailight

The page uses a clean, minimalist layout with a prominent hero section featuring a full-bleed image. The color palette is muted, with a focus on cool tones and a sense of depth created by subtle shadows. The overall mood is calm and professional. · ai character creator, character ai landing page, ai tool, developer tools, minimalist ai, glassmorphism ai, character generation, ai platform

Character — About - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#9c5410
OKLCHoklch(52.2% 0.120 57)
RoleDominant
find sites →
Hex#674414
OKLCHoklch(41.7% 0.078 71)
RoleSurface
find sites →
Hex#ded595
OKLCHoklch(86.5% 0.083 101)
RoleInk
find sites →
Hex#a49c5c
OKLCHoklch(68.5% 0.085 102)
RoleAccent
find sites →
Hex#d3cfbf
OKLCHoklch(85.3% 0.022 95)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	atHauss	36px	600	1.11	-0.72px	Aa Bb Cc
body	atHauss	16px	400	1.5	0	Aa Bb Cc
caption	atHauss	12px	100	1.33	0	Aa Bb Cc
button	atHauss	14px	400	1.43	0	Aa Bb Cc

Spacing scale

24px

Radius scale

12px

24px

30px

32px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #9c5410;
  --color-surface: #674414;
  --color-ink: #ded595;
  --color-accent: #a49c5c;
  --color-detail: #d3cfbf;
}

/* CSS variables exposed by source */
:root {
  --border: hsl(214.3 31.8% 91.4%);
  --surface-variant-disabled-refresh: rgba(222,222,222,0.75);
  --brand-container-refresh: #e5dfeb;
  --primary-foreground: #fafafa;
  --secondary-refresh: #1ebe53;
  --shadow-refresh-control-outline: 0px 1px 1px rgba(0,0,0,0.12),0px 0px 0px 1px #9e9e9e,0px 2px 5px rgba(103,110,118,0.08);
  --primary-blue: #1a5eff;
  --spacing-m: 16px;
  --surface-elevation-2: #e4e4e7;
  --font-character-sans: 'characterSans';
  --shadow-refresh-control-primary: 0px 1px 1px rgba(0,0,0,0.12),0px 0px 0px 1px #195eff,0px 2px 5px rgba(103,110,118,0.08);
  --surface-elevation-5: #a2a2ac;
  --primary-container: #0061a6;
  --secondary-green: rgba(30,190,83,1);
  --accent: #c8c8cf;
  --spacing-l: 20px;
  --shadow-refresh-control-stroke: 0px 1px 1px rgba(0,0,0,0.12),0px 0px 0px 1px rgba(103,110,118,0.16),0px 2px 5px rgba(103,110,118,0.08);
  --brand-off-white-refresh: #fafafa;
  --secondary-foreground: hsl(222.2 47.4% 11.2%);
  --brand-bg-inverted: #202024;
  --background: #f4f4f5;
  --spacing-0: 0px;
  --shadow-refresh-floating: 0px 15px 35px rgba(103,110,118,0.08),0px 5px 15px rgba(0,0,0,0.12);
  --brand-bg: #ececee;
  --spacing-s: 12px;
  --surface-elevation-3: #d9d9df;
  --primary: #202024;
  --surface-elevation-4: #c8c8cf;
  --surface-refresh: #f3f3f3;
  --spacing-xl: 24px;
  --accent-foreground: #26272b;
  --brand-off-white: #e5dfeb;
  --surface-variant: #e4e4e7;
  --background-refresh: #ffffff;
  --surface-elevation-1: #ececee;
  --radius: 2rem;
  --spacing-xs: 8px;
  --border-outline: #d9d9df;
  --secondary-container-refresh: #a8eac6;
  --font-inter: 'Inter';
  --surface-variant-refresh: #dedede;
  --font-libre-baskerville: 'libreBaskerville';
  --primary-refresh: #195eff;
  --primary-container-foreground: #f4f4f5;
  --shadow-refresh-control: 0px 2px 5px rgba(103,110,118,0.08),0px 1px 1px rgba(0,0,0,0.12);
  --shadow-refresh: #000000;
  --font-at-hauss: 'atHauss';
  --primary-container-refresh: #a3bfff;
  --border-divider: #e4e4e7;
  --surface-disabled-refresh: rgba(243,243,243,0.75);
  --spacing-xxs: 4px;
  --brand-refresh: #ffffff;
  --surface-base: #fafafa;
  --foreground: #26272b;
  --secondary: #d9d9df;
  --on-background-refresh: #131313;
  --nextui-default-foreground: 0 0% 0%;
  --nextui-foreground-700: 240 5% 26%;
  --icon-button-emphasis-refresh: #1e1e1e;
  --nextui-font-size-medium: 1rem;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Character — About.
Reference design system (extracted from the live site):
- Palette: #9c5410, #674414, #ded595, #a49c5c, #d3cfbf
- Typefaces: atHauss
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/character-ai--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

atHauss

36px

600

1.11

-0.72px

Aa Bb Cc

body

atHauss

16px

400

1.5

Aa Bb Cc

caption

atHauss

12px

100

1.33

Aa Bb Cc

button

atHauss

14px

400

1.43

Aa Bb Cc

:root { --color-dominant: #9c5410; --color-surface: #674414; --color-ink: #ded595; --color-accent: #a49c5c; --color-detail: #d3cfbf; } /* CSS variables exposed by source */ :root { --border: hsl(214.3 31.8% 91.4%); --surface-variant-disabled-refresh: rgba(222,222,222,0.75); --brand-container-refresh: #e5dfeb; --primary-foreground: #fafafa; --secondary-refresh: #1ebe53; --shadow-refresh-control-outline: 0px 1px 1px rgba(0,0,0,0.12),0px 0px 0px 1px #9e9e9e,0px 2px 5px rgba(103,110,118,0.08); --primary-blue: #1a5eff; --spacing-m: 16px; --surface-elevation-2: #e4e4e7; --font-character-sans: 'characterSans'; --shadow-refresh-control-primary: 0px 1px 1px rgba(0,0,0,0.12),0px 0px 0px 1px #195eff,0px 2px 5px rgba(103,110,118,0.08); --surface-elevation-5: #a2a2ac; --primary-container: #0061a6; --secondary-green: rgba(30,190,83,1); --accent: #c8c8cf; --spacing-l: 20px; --shadow-refresh-control-stroke: 0px 1px 1px rgba(0,0,0,0.12),0px 0px 0px 1px rgba(103,110,118,0.16),0px 2px 5px rgba(103,110,118,0.08); --brand-off-white-refresh: #fafafa; --secondary-foreground: hsl(222.2 47.4% 11.2%); --brand-bg-inverted: #202024; --background: #f4f4f5; --spacing-0: 0px; --shadow-refresh-floating: 0px 15px 35px rgba(103,110,118,0.08),0px 5px 15px rgba(0,0,0,0.12); --brand-bg: #ececee; --spacing-s: 12px; --surface-elevation-3: #d9d9df; --primary: #202024; --surface-elevation-4: #c8c8cf; --surface-refresh: #f3f3f3; --spacing-xl: 24px; --accent-foreground: #26272b; --brand-off-white: #e5dfeb; --surface-variant: #e4e4e7; --background-refresh: #ffffff; --surface-elevation-1: #ececee; --radius: 2rem; --spacing-xs: 8px; --border-outline: #d9d9df; --secondary-container-refresh: #a8eac6; --font-inter: 'Inter'; --surface-variant-refresh: #dedede; --font-libre-baskerville: 'libreBaskerville'; --primary-refresh: #195eff; --primary-container-foreground: #f4f4f5; --shadow-refresh-control: 0px 2px 5px rgba(103,110,118,0.08),0px 1px 1px rgba(0,0,0,0.12); --shadow-refresh: #000000; --font-at-hauss: 'atHauss'; --primary-container-refresh: #a3bfff; --border-divider: #e4e4e7; --surface-disabled-refresh: rgba(243,243,243,0.75); --spacing-xxs: 4px; --brand-refresh: #ffffff; --surface-base: #fafafa; --foreground: #26272b; --secondary: #d9d9df; --on-background-refresh: #131313; --nextui-default-foreground: 0 0% 0%; --nextui-foreground-700: 240 5% 26%; --icon-button-emphasis-refresh: #1e1e1e; --nextui-font-size-medium: 1rem; }

Build a landing page in the visual style of Character — About. Reference design system (extracted from the live site): - Palette: #9c5410, #674414, #ded595, #a49c5c, #d3cfbf - Typefaces: atHauss - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/character-ai--about