character.ai

How it works

hero:

Right-aligned full-height photographic background (sunset cityscape with character silhouette) with a left-anchored white card panel (≈35% width) containing stacked heading, subheading, and three authentication buttons, all vertically centered relative to each other but left-aligned to the page.

layout:

Header nav bar spans full width with logo left and auth buttons right; main content splits into overlapping card (left, z-indexed above image) and background image (right, full bleed); footer sits below as horizontal link row with secondary links stacked below.

type:

Bold sans-serif headline (appears 2.5xl) stating offer with smaller secondary text; body copy at small size for legal/subtext; button text in medium weight white on dark backgrounds; subtle tracking opens out the secondary line.

colors:

Warm orange-gold sunset palette dominates the right 65% of viewport; white card creates sharp contrast; black buttons (Google, Apple) for primary actions; gray typography and borders for tertiary elements; subtle orange accent on Google icon.

distinctive:

White signup card overlaps and slightly occludes the hero image rather than sitting adjacent to it, creating a compositional tension where the UI competes with—not supplements—the atmospheric photography.