Component Library

Colors

Product color tokens from design-system/Product-Colors.json. All live-preview swatches use var() and swap automatically with dark mode. Base tones from Base-Tones.json are available via the toggle below.

Text

--text-primary

Purple 10

--text-secondary

NC 40

--text-tertiary

NC 60

--text-disabled

NC 80

--text-contrast

White

Primary & Secondary

--primary

Purple 40

--primary-dark

Purple 30

--primary-light

Purple 60

--primary-lighter

Purple 80

--purple-90

Purple 90

--secondary-cyan

Cyan 50

--secondary-cyan-dark

Cyan 10

--secondary-blue-light

Blue 80

--secondary-green-light

Green 80

--secondary-green

Green 50

--secondary-warm

NW 80

--accent-yellow

YE 80

--accent-green

GE 90

Backgrounds

--bg-0

NC 100

--bg-1

NC 98

--bg-2

NC 95

--bg-3

NC 90

--bg-4

NC 80

--bg-viewport

canvas

--bg-surface

sheets

--border

dividers

--border-light

subtle

Semantic

--danger

Error

--warning

Warn

--success

Success

Component Aliases

Tokens that reference other tokens. Swap automatically in dark mode.

--bubble-user-bg

user bubble

--bubble-agent-bg

agent bubble

--bubble-social-bg

social bubble

--widget-flight-bg

flight

--widget-calendar-bg

calendar

--widget-email-bg

email

--widget-news-bg

news

Toggle "Dark" in the header to see all preview components respond to the dark theme live.

Base Tones

Typography

System sans-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text'

Type Scale

Display Good morning, Alice

size44px

weight400

tracking−2px

lh46px

usedGreeting

Body How can I help you today?

size17px

weight400

tracking−0.408px

lh22px

usedBubble body

Title 3 Messages

size16px

weight600

usedNav title · Section header

Title 2 Flight cancellation!

size15px

weight600

tracking−0.408px

usedCard title

Headline Alice Adams

size14px

weight500

lh20px

usedList name · Row label · Filter pill

Body Small Your SEA → JFK flight on Dec 18 was cancelled.

size13px

weight400

lh18px

usedList preview · Sender · Account email

Caption Just Now

size12px

weight500

lh16px

usedTimestamp · Date pill · Widget label

Label Personal Agent

size10px

weight400

lh16px

usedNav subtitle · Avatar name

Icons

All SVG assets from /assets/. Canvas size shown below each name. Usage counts are generated by node scripts/process-icons.js.

Icon Library

Compare inline SVG rendering

24 × 24

ic-arrow-up24×24

ic-logs24×24

ic_add-large24×24

ic_add-reversed24×24

ic_add24×24

ic_agent-filled24×24

ic_agent-line24×24

ic_arrow-down24×24

ic_arrow-forward24×24

ic_arrow-left24×24

ic_arrow-outbound24×24

ic_arrow-outbound224×24

ic_arrow-post-up24×24

ic_arrow-right24×24

ic_arrow-start24×24

ic_attach24×24

ic_back24×24

ic_blank224×24

ic_bulb24×24

ic_camera24×24

ic_clock24×24

ic_close-circle-124×24

ic_close-circle24×24

ic_close-filled24×24

ic_close-large24×24

ic_close-reversed24×24

ic_close24×24

ic_cloud-upload24×24

ic_cloud24×24

ic_computer24×24

ic_contract24×24

ic_copy24×24

ic_edit24×24

ic_expand24×24

ic_fastforward3024×24

ic_feedback24×24

ic_heart24×24

ic_home-filled24×24

ic_home-line24×24

ic_image24×24

ic_info-circle24×24

ic_internet24×24

ic_link24×24

ic_listening24×24

ic_loading-spinner24×24

ic_lock24×24

ic_map-pin24×24

ic_menu24×24

ic_message24×24

ic_mic24×24

ic_mic_off24×24

ic_more-horizontal24×24

ic_more-vertical24×24

ic_news-doc24×24

ic_pause24×24

ic_phone-call24×24

ic_play-reversed24×24

ic_play24×24

ic_podcast24×24

ic_power24×24

ic_puzzle24×24

ic_rewind1524×24

ic_science24×24

ic_send-arrow-reversed24×24

ic_send-arrow24×24

ic_send24×24

ic_settings-bars24×24

ic_settings24×24

ic_share-android24×24

ic_share-iOS24×24

ic_sources24×24

ic_spark24×24

ic_stop-reversed24×24

ic_stop24×24

ic_task24×24

ic_trash24×24

ic_upload-computer24×24

ic_video-call24×24

ic_visible24×24

ic_zap24×24

Sub-24

ic-agent-inner18×17

ic-agent-outer21×21

ic-arrow-right-blue6×10

ic-arrow-right6×10

ic-check-white12×10

ic-chevron-right6×10

ic-chevron-small5×8

ic-doc-corner4×4

ic-doc-line16×2

ic-doc-line210×2

ic-doc-rect16×18

ic-feedback-bang2×5

ic-feedback-bubble20×19

ic-feedback-dot2×2

ic-filter-add12×12

ic-flight-dash21×1

ic-outbound-arrow11×11

ic-plane16×18

ic-share-ios15×19

ic-sun-center40×40

ic-sun-outer40×40

ic-sun-rays18×19

ic-sun44×44

ic-timestamp-chevron5×8

ic-visible-filled13×10

ic_agent_social14×15

ic_personal-agent15×14

Avatars

Two types: image (user photo fills the circle) and agent (colored background + Continua mark). Both use border-radius: 50%.

Agent Avatar

Personal
settings
56px

Personal
nav
48px

Personal
list / card
36px

type personal social

personal-bg#ff9cc2 → #7edbff

social-bg#c8c4ff

markcontinua-mark.svg · 52%

Image Avatar

Alice
settings
56px

Alice
tab active
32px

Alice
tab inactive
32px

Bob
list / nav
48px

Bob
bubble
30px

Carol
list / nav
48px

Carol
bubble
30px

Ski Trip
group photo
48px

nav-avatar48px

msg-avatar30px

list-avatar36px

tab-avatar32px

account-avatar56px

Brand Marks

Logotype and agent avatar variants.

Continua Mark

continua-mark
(dark bg)

Status Bar Mobile only

Always frozen at 8:33. Sits at the top of every screen inside a .top-bar frosted glass wrapper.

Status Bar

Time left, signal / wifi / battery right. Frosted white background.

8:33

h44px

bgrgba(255,255,255,0.92)

backdropblur(12px)

padding0 28px 6px

Home Indicator Mobile only

iOS safe-area bar. Appears at the bottom of all tab-bar screens.

Home Indicator

h34px

bar134×5px

br100px

bg#000

pb8px

Nav Bars

Per-screen navigation. Same HTML on both platforms — mobile uses absolute-positioned elements centered in the bar; desktop reflows them as a flex row with an identity block.

Nav Bar

Mobile: standard (56px, centered title) and tall (72px, centered avatar + name). Desktop: tall variant reflows to a flex row with name + activity text.

Mobile · 390px

Desktop · 800px+

Mobile

screenMessagesSettingsAgent ChatGroup Chat

h56px

title16px/600, centered

nav-avatar48×48px circle

icon-slot24×24px abs

Desktop

h72px

layoutflex row, static pos

avatar40×40px

name15px/600

activity11px/400, tertiary

Tab Bar / Site Nav Tab bar: Mobile · Site nav: Desktop

Primary navigation. Mobile uses a 60px bottom tab bar; desktop uses an 88px top site header with horizontal links. Same tabs — different form factor.

Primary Navigation

Home, Messages (+ Profile on mobile). Active state switches icon from line → filled on mobile; highlights link on desktop.

Mobile · 390px

Desktop · 800px+

Mobile

h60px

icon24×24px

tab-avatar32×32px

activeHomeMessagesProfile

Desktop

h88px

nav-item14px/600

account32×32px avatar

activeHomeMessages

Chat Input Mobile + Desktop

Primary text and voice input at the bottom of all chat screens. Combines a growing textarea, an attachment button (+), and a mic/send toggle. The input field border turns primary on focus; the mic icon swaps to send when text is present.

Input Bar — Interactive

Type in the field or tap a state chip to see how the component responds. Icon spans are replaced by inline SVGs at build time via npm run build:icons.

stateEmptyPlaceholderFocused

field-h48px → 70px

br16px

border1px --border → primary

font17px/400, −0.408px, lh 22px

add-btn48×48px circle · bg bg-0

Mic (icon-mic) swaps to Send (icon-send) when textarea has text. The send button uses --fill-1 (accent) as its fill color. Attachment button always visible.

Message List Items

Tappable rows in the Messages screen. Two variants: agent (tinted bg) and standard.

Agent Row (selected / tinted)

Always first. Subtle purple gradient indicates the primary agent thread.

Personal Agent Chat Just Now

Some conversational thread that is about this long and wraps to two lines, we should always

bggradient(primary→purple 5%)

avatar36×36px

name14px/500

time12px tertiary

preview13px, 2-line clamp

Standard Row

Group chats and 1:1 DMs. White background, border-bottom divider.

The Ski Trip Just Now

I can't believe how much snow we got! I'm already looking forward to our next trip.

Bob Blevins Yesterday

Yeah, Alta was epic! I'm already checking flights for Snowbird in March.

Carol Cairns Yesterday

Totally! I'm ready to hit the slopes again. Maybe Aspen next time?

bg--bg-0

padding14px 16px

gap16px

border-bottom1px --bg-3

Chat Bubbles

Five distinct bubble types. All share the same base padding (14px 16px), border-radius (16px), and font (17px/400, tracking -0.408px, lh 22px).

Agent — gray

Robin's messages in the 1:1 agent chat. No avatar inline.

First things first — What do you want to call me?

OK — so who do I have the pleasure of working for?

bg--bg-3

w240px

row-padding0 42px 0 16px

User / Alice — primary

Outgoing messages, right-aligned.

I'll call you Robin

I'm Alice Adams

bg--primary

colorwhite

wfit-content, max 282px

row-padding0 16px 0 54px

Social Agent — lavender (with header)

Group chat AI agent messages. Shows sender + timestamp header row.

bg--purple-90 (#d6d5ff)

w282px

sender13px primary

time12px secondary

Group Person — gray (with header)

Other humans in a group chat. When consecutive from same sender: hide avatar (opacity 0).

Bob Blevins12:51PM

Wow this is amazing, I can't wait to learn more about this.

Carol Cairns12:51PM

Seriously, this is so cool. Let's get planning.

bg--bg-3

w282px

msg-avatar30×30px circle

Action Confirmation — check + label

Confirms a completed agent action. No arrow = not tappable.

Agent name changed to Robin

bg--bg-0

border1px --border

br8px

h48px

padding0 16px

check24×24px, primary

Action with Arrow — tappable

Spinner while the agent works; check + chevron when done and tappable.

Creating itinerary…

stateLoadingDone

spinner24×24px · 1.4s linear

action-arrow24×24px · shown when done

Tapping opens the linked document. Chevron only appears once the action completes.

Permission Picker

A stacked single-select radio card group used as an agent response. Supports N options. The outer container clips children with greater rounding than the items themselves, creating a connected-card visual rhythm. After selection the picker locks — subsequent taps are ignored.

Level 1: Ask me everything

Agent will always whisper before sharing any info or taking action

Level 2: Keep me in the loop

Agent auto-shares low stakes info like availability preferences. Whispers for booking, purchases, or calendar changes.

Level 3: Just get it done

Agent shares freely, executes routine actions. Whispers only when there is a conflict or ambiguity.

stateInteractiveLocked

w282px

outer-radiusvar(--radius-lg) = 16px

gap2px (structural)

paddingvar(--spacing-4) = 16px

bg--bubble-agent-bg

Click an option to change selection. Use the state toggle above to preview the locked (post-submission) state.

Permission Picker — Locked (after selection)

Once the user submits a choice, the picker receives perm-picker--locked. Pointer events are suppressed; selection is preserved visually.

Level 1: Ask me everything

Agent will always whisper before sharing any info or taking action

Level 2: Keep me in the loop

Agent auto-shares low stakes info like availability preferences. Whispers for booking, purchases, or calendar changes.

Level 3: Just get it done

Agent shares freely, executes routine actions. Whispers only when there is a conflict or ambiguity.

classperm-picker--locked

cursordefault (suppressed)

Tokens used: --component-perm-picker-background · --component-perm-picker-option-background · --radius-lg · --spacing-3 · --spacing-4 · --spacing-1 · --text-primary · --text-secondary · --primary · --bg-0 · --text-tertiary

Chat Meta

Non-message elements that appear inline in the chat stream.

Date Pill

Separates messages by day. Centered in stream.

Today Nov 23rd

bg--bg-3

br20px

padding8px 16px

font12px/500 text-secondary

System Pill

Automated events, e.g. members added to group.

Bob Blevins and Carol Cairns were added to the chat

stylesame as date pill

wrapavailable width

Pinned Item

Sticky row between nav bar and chat content. Group chats only.

The Ski Trip Itinerary

padding12px 16px

border-bottom1px --bg-2

label13px/500 primary

chevron24×24px

Tapping opens the pinned document. Shown only when an itinerary/doc exists.

Greeting Block

Sticky at the top of the home feed. Large greeting + subtitle with primary-colored action count.

Greeting + Subtitle

Good Morning Alice

You have 5 actions to review, and something else to put here for two lines.

greeting44px/400, -2px track, 46lh

subtitle14px/500 text-primary

accent--primary color

Filter Pills

Horizontally scrollable. Square add button, then labelled pills. Active pill is primary-filled.

Filter Bar

Click any pill to toggle it active. "+" opens filter editor (stub). Row scrolls horizontally when pills overflow.

All

Asks

Updates

Groups

Something

add-btn38×38px · br 8px · bg #f4f4f7

pill9px 16px · br 8px · 14px/600

activebg --primary · color #fff

inactivebg --bg-2 · color text-secondary

Action Cards

Home feed cards. Gradient variant for AI agent actions, neutral variant for info widgets.

Action Card — Gradient (agent)

Primary card type. Avatar left, title + subtitle center, arrow right. Purple gradient border.

Flight cancellation! Your SEA → JFK flight on Dec 18 was cancelled. I found 3 alternatives.

Mom's birthday in 9 days Last year you sent flowers. Want options under $75?

Package delivered Your order arrived at 2:34 PM.

br24px

border1px --primary-lighter

bggradient(164deg, primary 10%)

avatar36×36px circle

title15px/600 · ellipsis

sub12px/400 · 2-line clamp

Entire card is tappable. Arrow confirms navigability.

Widgets

Two fixed-size cards displayed side by side. Weather (gray-blue) and Flight Status (light blue).

Widget — Neutral (solo)

No border, flat --bg-2 background. Used for non-agent info blocks like weather.

Light Rain 48° Seattle

bg--bg-2

bordernone

br24px

Widget Row — Weather + Flight

size177×148px

br24px

padding14px 16px

weather-bg#e1e0eb

flight-bg#bde5fb

gap4px

Account Block

Profile row at the top of Settings. Avatar, name, email, sign-out.

Account Block

Alice Adams

aadams@gmail.com

Sign Out

h69px

avatar56×56px

name14px/500

email13px

sign-out13px/600 --danger

"Sign Out" is destructive — red color is the signal. Should confirm before acting.

Settings Rows

Three variants of the same row component: internal navigation (chevron), external link (outbound arrow), destructive action (danger red).

Settings Row

Click a variant chip to switch.

Chrome Extension

Gmail

Agent Personality

variantChevronOutboundDanger

h54px

bg--bg-2

padding0 15px 0 17px

label14px/500

Danger rows require a confirmation dialog before executing.

Pinned Item

See Chat Meta → Pinned Item.

Button

Primary interactive control. 4 variants × 3 sizes. Border-radius: 12px. Heights: 44px (L) · 36px (M) · 32px (S).

Button L — 44px

Default size. 15px/600. 20px horizontal padding.

h: 44px · radius: 12px · padding: 0 20px · font: 15px/600 · secondary border: 1px var(--color-bg-3)

Button M — 36px

Medium size. 14px/600. 16px horizontal padding.

h: 36px · radius: 12px · padding: 0 16px · font: 14px/600

Button S — 32px

Small size. 13px/600. 14px horizontal padding.

h: 32px · radius: 12px · padding: 0 14px · font: 13px/600

Form Input

Text input for forms and settings. Includes label, placeholder, focus ring, and error states.

⚠ Created by LLM, needs human confirmation

Form Input — States

Label

Focused

Error This field is required.

Toggle / Switch

Binary on/off control. Used in settings and preferences.

⚠ Created by LLM, needs human confirmation

Toggle — On / Off

On

Off

Disabled

Badge

Small status indicator. Used for notification counts, status labels, and metadata tags.

⚠ Created by LLM, needs human confirmation

Badge — Variants

New Active Review 3 Inactive

Toast / Snackbar

Ephemeral system feedback. Auto-dismisses after 3–5s. Used for confirmations and errors.

⚠ Created by LLM, needs human confirmation

Toast — Variants

Memory saved

Something went wrong

Message sent

Progress / Loading

Linear and circular progress indicators for async operations.

⚠ Created by LLM, needs human confirmation

Progress Bar

60% complete

Indeterminate

Skeleton Loader

Animated content placeholder shown while data loads. Mirrors real layout structure.

⚠ Created by LLM, needs human confirmation

Skeleton — Message List Item

Empty State

Shown when a list or view has no content. Includes icon, message, and optional CTA.

⚠ Created by LLM, needs human confirmation

Empty State

No messages yet

Start a conversation and Continua will be here.

Presence Indicator

Real-time status dot overlaid on avatars. Online, away, busy, offline.

⚠ Created by LLM, needs human confirmation

Presence — States

Online

Away

Busy

Offline

Search Bar

Full-width search input used on the Messages screen (messages search) and Memory screen. Two variants: rounded-rect on white bg (messages) and flat on tinted bg (memory).

Messages Search Bar

White background, border, rounded rect (16px). Appears below the nav bar in the Messages screen. Filters the list live.

h48px

bg--bg-0

border1px --border → primary focus

br16px

padding0 16px

font17px/400, -0.408px, lh 22px

Memory Search Bar

Tinted bg-2 background, no distinct white fill. Appears at the top of the Memory settings screen.

h44px

bg--bg-2

border1px --border → primary focus

br12px

font15px/400

Segmented Control

Inline selector for switching between 2–4 exclusive options. Used for view modes and filters.

⚠ Created by LLM, needs human confirmation

Segmented Control — 3 Options