VoiceProfile AI — Foundations

Design system

Editorial, typography-first, one restrained accent. Every screen in the product inherits these tokens — no ad-hoc colors, no decorative motion.

Color tokens

Defined as oklch variables in src/styles.css.

background

#FAFAF8

surface

#FFFFFF

ink / foreground

#1B2027

muted-foreground

#5B6472

border

#E4E6EA

accent / primary

#2E6F6B

success

#2F8F5B

warning

#B8862E

destructive

#C4453D

Type scale

12 / 14 / 16 / 18 / 22 / 28 / 36 / 48px. Body 1.5, headings 1.2.

Display / 48Your voice, at scale

H1 / 36Your voice, at scale

H2 / 28Your voice, at scale

H3 / 22Your voice, at scale

Lead / 18Your voice, at scale

Body / 16Your voice, at scale

Small / 14Your voice, at scale

Caption / 12Your voice, at scale

Buttons

Badges & status chips

Approved

Draft

Idea

Failed

Form inputs

Topic

Writing sample

Tone: warmth

Use my best-performing style

Cards

Voice fidelity

Directional guidance, not a precise score.

High84 / 100

Empty state

No fabricated numbers, ever.

Nothing published yet. Once your first post goes live, performance lands here.

Motion presets

fade-up and soft-scale. Reduced motion is respected.

fadeUp

12px rise, 450ms, editorial easing. Used for section reveals.

softScale

0.985 → 1, 350ms. Used for panels, dialogs and generated drafts.