Claire — Brand system

01 / COLOR

A warm base.
Signals with purpose.

Ink and cream carry the product. Lime marks action and intelligence. Supporting colors identify modes and platforms without turning the interface into a rainbow.

PRIMARY SIGNAL

Claire Lime#DFFF64

CORE INK

Claire Ink#10120F

CANVAS

Cream#F4F1EA

RAISED

Paper#FFFDF8

CONTEXT

Sky#B9DCFF

RELATIONSHIP

Blush#F2CFE1

MEMORY

Lavender#D8CCFF

SUCCESS

Mint#BDEBD5

50

100

200

400

600

800

950

02 / TYPOGRAPHY

Editorial confidence.
Utility precision.

Two families only. Inter carries the human voice. DM Mono labels systems, dates, platforms, and AI metadata. Extra weights can look like extra fonts — they are not. Card titles stay Inter Bold, same as headings.

SANS · --font-sans

Inter

400 body · 500 nav · 600 display · 700 headings and card titles

MONO · --font-mono

DM Mono

400 code · 500 kickers, pills, and captions

DISPLAY
96 / 86 / −7%Be present.

HEADING 1
42 / 44 / −5%Every conversation, together.

HEADING 2
28 / 31 / −4%Know what needs you.

BODY
16 / 24 / 0Claire makes scattered conversations feel like one thoughtful daily rhythm—clear enough to scan, warm enough to trust.

MONO LABEL
11 / 16 / +12%CLAIRE CAUGHT A PROMISE

03 / FOUNDATIONS

Soft geometry.
Firm hierarchy.

Large surfaces use generous continuous curves. Controls remain compact and predictable. The 4px base scale keeps dense mobile screens composed.

4px spacing scale

8

16

24

32

48

64

96

Continuous radii

12 / control

20 / card

32 / panel

48 / feature

pill / action

Elevation

small

medium

large

Motion

180ms / standard
cubic-bezier(.2,.8,.2,1)

Respect reduced motion.

Heroicons

Home Inbox Loops Search

Ask

Use 24px outline icons for navigation and actions, with a consistent 1.7px optical stroke. Use solid icons only for selected or confirmed states. Platform logos stay as official vendor marks—they are not replaced with interface symbols.

04 / SURFACES

One canvas.
Nothing stacked on top.

Cream is the product canvas. Paper lifts bubbles, cards, and the composer. Chat screens keep cream from the status bar through the header—no second bar, no white cap under the island.

9:41● ◒

‹

Maya Kim WhatsApp · active now

···

Today

Perfect. I’ll add comments tonight. Thank you!

Do this

Cream runs edge to edge. Status, header, and thread share one gray. The header is just type and an avatar sitting on the canvas.

9:41● ◒

‹

Maya Kim WhatsApp · active now

···

Today

Perfect. I’ll add comments tonight. Thank you!

Not this

A paper or white header makes a cap. It reads like WhatsApp chrome, not Claire. Don’t give the status bar its own surface either.

CHAT Cream to the top

Canvas, header, and composer tray are cream. Incoming bubbles and the input field are paper.

ASK CLAIRE Sky to the top

The same rule in the research tab: sky fills the phone, including the status bar. Don’t drop a cream or paper bar above the thread.

LISTS Paper home, cream chat

Inbox and people stay on paper. Opening a conversation switches the whole device to cream—not just the message list.

05 / COMPONENTS

Quiet controls.
Expressive moments.

Core controls are nearly neutral. Claire’s color arrives when something deserves attention: a promise, a suggestion, or a useful connection.

BUTTONS

FILTER CHIPS

INPUTS

TAB BAR

Five equal columns. The Claire mark sits on the lime tile and is optically centered. The bar floats over content with a frosted paper fill—not a solid white dock.

AI ASSIST CARD

✦

CLAIRE CAUGHT A PROMISESend Maya the updated deck tomorrow

06 / VOICE

Helpful, never showy.

Claire explains the benefit in human terms, uses contractions, and gives people an easy way to stay in control.

✓ Say this

“You promised Maya the deck tomorrow. Track it?”

Specific, contextual, and asks permission.

× Not this

“AI detected a potential task entity.”

Technical, impersonal, and unclear about the next action.