claire / mobile kit

MOBILE COMPONENT KIT

One compact system, built to travel.

The reusable mobile primitives behind every Claire screen: a fixed device canvas, branded tab bar, actions, chips, and person-first list rows.

NAVIGATION / 05 DESTINATIONS

Claire mobile tab bar

Home, inbox, Claire, promises, and search. The Claire kept-thread mark is a first-class destination, not a substituted utility icon.

MK
Maya KimPerson-first conversation row
INBOX / PERSON-FIRST

Search, filters, and conversation rows

The real inbox primitives stay compact, keep platform identity secondary, and reserve lime for a conversation that needs attention.

Inbox

MK

Maya Kim

Can you send that deck?

SO
I

Sofia

That place looks perfect ✨

CHAT / ASSISTANCE

AI context and reply composer

Assistant context is always subordinate to the message thread and every action remains reversible.

✦
QUICK CONTEXT

Product review tomorrow · deck still open

Are we still good for tomorrow?9:12
I’ll send the deck before 10.9:14 · ✓✓
✦
PROMISE FOUNDSend the deck tomorrow before 10
Write a message…
FOLLOW-THROUGH / STATES

Promises, due dates, and clear urgency

Commitments are a native part of the product system, with source context and due state visible at a glance.

!
Send updated deck

WhatsApp · due today

NOW
○
Confirm dinner with Dad

Added from conversation

8H
○
Review Noah’s introduction

Telegram · due Friday

FRI
ACTIONS / STATES

Small controls, clear emphasis

Ink is reserved for committed actions; lime calls attention to an item that needs a human next step.