Canvas Onev0.1.0

Canvas One
brand guidelines.

A whiteboard where people and AI work on the same canvas.

02

App icon

The neutral face reversed out of the brand colour. Corner radius is 23% of the icon size.

Light · 128 / 64 / 32 / 16
Dark · 128 / 64 / 32 / 16
03

Colour

Colours come from the active theme. The head is always ink. The AI colour is only ever a detail inside an expression, never the whole mark.

Inkink ·

The head and the wordmark.

Brandprimary ·

App icon ground and primary actions.

AIbranch ·

Small AI details inside expressions.

Riskrisk ·

The Error expression only.

Canvasshell ·

Eyes, and the ground behind the logo.

Deskdesk ·

Outer page ground.

04

Type

A shared type system across the website and product.

Canvas One

IBM Plex Sans 600. The wordmark. Zero tracking.

Think out loud, together.

Newsreader 300. Editorial lines on the website and in documents.

12 ITEMS · 3 COLLABORATORS · 0.8S

IBM Plex Mono. Interface text and controls. Martian Mono for counts, timestamps and metadata.

05

Expressions

Inside the product, the same face tells you what the AI is doing. The head stays recognisable at every size.

ReadyReady
Idle · AI available
ThinkingThinking
First response pending
Reading the boardReading the board
Gathering context
WorkingWorking
Long task · over 5s
CheckingChecking
Analysing a selection
BrainstormingBrainstorming
Generating ideas
Suggestion readySuggestion ready
Output to review
ChatChat
Conversation open
ConnectingConnecting
Joining · syncing
ListeningListening
Voice input on
Your turnYour turn
Needs input
DoneDone
Task complete
ErrorError
Request failed
OfflineOffline
No connection
Empty boardEmpty board
Nothing selected
06

Motion

Only the eyes and small details move; the head stays still. Movements are short and never bounce. The splash screen uses the Thinking expression.

Canvas One
Opening canvas
Canvas One
Joining board · 3 here
07

Transitions

Every change of expression happens behind a blink. The eyes close in 120ms, the face changes while they are shut, then they open on the new expression in 180ms. The head never jumps.

Ready
Example flow

“Group these stickies by theme”

  1. ReadyReady
  2. Reading 12 itemsReading the board
  3. ThinkingThinking
  4. Grouping 48 stickiesWorking
  5. 3 groups suggestedSuggestion ready
  6. Done · 3 groups addedDone
Or pick any expression

Hold for 600ms. Show each expression for at least 600ms so the face never flickers.

Done and Error don’t last. They return to Ready after 2 seconds; the label stays until the next action.

One state, everywhere. Status chip, cursor, avatar and prompt always show the same expression.

08

In the app

The face appears where the AI is present. All live placements follow the same state.

Q3 planning/ Retro boardReady1
MK
Standups run long
Too many tools
Unclear owners
Demo day helped
Suggested · 3 groups
Meetings
Tooling
Ownership
ready2
3 groups suggested3
1Status chip16px · top bar

Always visible. Shows the live expression and a short label.

2AI cursor16px face · name tag

A standard arrow in the AI colour with a white keyline. The face sits in the name tag, never as the pointer.

3Suggestion20px · on proposed content

The Suggestion ready face sits on the card with Accept and Discard.

4Chat and prompt24px · 28px send

Past messages use the still Ready face. While working, the send button becomes the live face.

drafting buf-01
AI cursor
Ask Canvas One…
Drafting on the sheet…
Prompt input
Y
You & Canvas One
Avatar
09

Loading

Opening the app wakes the face up. Inside the app the wait time decides what you see.

Canvas OneOffline
App launch · offline → ready → connecting → reading → ready
Thinking
400ms–5s · thinking
Grouping 48 stickies12s
Over 5s · working
Board or panel · reading

Under 400ms, show nothing. Long tasks get a progress bar and elapsed time, and can be cancelled. Panels that wait on AI content show placeholder lines next to the Reading face.

10

Usage

Use the logo as drawn.

✕ Don’t stretch or squash the mark.
✕ Don’t flip the tail to the right.
✕ Don’t recolour the eyes.
✕ Don’t fill the head with the AI colour.
✕ Don’t add a mouth or extra features to the logo.
✕ Don’t use an expression as the logo outside the product.
✕ Don’t use the face on its own as a cursor. Put it in the name tag.