noddle listens. And then, something clicks.
A practice space for therapists in training. You talk with a simulated client, then get honest feedback from a mentor. The brand is the listener in that room: attentive, warm, a little playful, and never in a hurry.
Three parts, one story. A conversation, someone paying attention, and the moment it lands. Every brand element in this book is one of these three parts, used on its own.
The conversation. Hand-drawn and slightly uneven, because real sessions are. The tail sits low-left, as if the speaker leans in.
Attention. Open, upright, slightly tilted, like a head turned toward you. They are the listener, and they are what moves first.
Hair, and the aha. They read as a cowlick at rest and as a burst when they spring. They are the only part that may turn orange.
Figtree ExtraBold, tracking −0.05em, always lowercase. The mark is 1.15× the cap height and sits 0.18em from the n. Clear space on every side equals one eye's width.
The tufts are bold and the eyes are large enough to survive a browser tab. There is no separate small version, and below 16 px the mark is not used.
Violet carries the brand, ink carries the words, and orange is rare on purpose. If orange is on the screen, something just clicked.
Where orange is allowed in the app: a strength in the mentor's feedback, a skill that moved up since last time, a finished milestone, the "Something clicked" line in a review. Never for errors (they use the app's danger red) and never as a decoration.
| Colour | Light | Dark mode | Use |
|---|---|---|---|
| Listener violet--violet | The mark, primary buttons, links | ||
| Ink--ink | Text, mono mark | ||
| Paper--paper | Page background | ||
| Aha orange--aha | Insight moments only | ||
| Sun--sun | The aha on violet backgrounds | ||
| Surface--surface | Cards and panels | ||
| Muted--muted | Secondary text, labels | ||
| Line--line | Borders and dividers | ||
| Violet soft--violet-soft | Tints, progress tracks | ||
| Aha soft--aha-soft | Behind an aha label | ||
| On violet--on-violet | Text and marks on violet |
One family, Figtree, already in the app. Round and open, close to the bubble's softness. Weight does the work instead of a second display face.
The tufts over "land" are the one typographic flourish: three short strokes over a single word, to mark the point of a sentence. Use it once per screen at most.
The mark comes apart. Eyes, tufts and bubble each do a job in the product, so the brand shows up in how noddle behaves, not only where the logo sits. Everything here is live. Try it.
In a voice session, the client's eyes drift toward whoever is speaking and blink every few seconds. Move your pointer over the panel.
While the client prepares a reply, the usual typing dots become a pair of blinking eyes. Same job, unmistakably noddle.
For waits over a second, the eyes scan left to right and the tufts lie flat. Replaces spinners everywhere.
When you finish a turn, the listener nods twice. It confirms you were heard without a toast or a tick.
The tufts spring up in orange when the mentor names a strength. It is the only place the full aha motion plays.
On hover or focus, the primary button grows a tiny cowlick. A small reward for intent, only on the one main action per screen.
When a bar fills, three orange tufts grow from its end. Progress feels like growth, not a trophy.
The bubble's uneven corners frame quotes from clients in briefs, reviews and marketing. Your own words never get the bubble: it is always the other voice.
Tufts and eye pairs on a loose grid, for covers, onboarding backgrounds, stickers and merch. Never behind running text.
Listen, then click. Most motion is slow and soft, the way someone listens. One motion is quick and springy: the aha. Keeping that contrast is what makes the aha feel earned.
| Moment | Part | Duration | Easing | When |
|---|---|---|---|---|
| Blink | Eyes | 160 ms, every 4–6 s | listen | Any idle mark larger than 32 px |
| Follow | Eyes | 260 ms | listen | Voice sessions, onboarding hero |
| Scan | Eyes | 2.4 s loop | listen | Waits over 1 s |
| Nod | Whole mark, eyes lead, tufts trail | 1 s, two dips | listen | End of your turn, saved settings |
| Aha | Tufts | 520 ms | click | Strengths, milestones. At most once per screen |
| Peek | Tufts | 320 ms | click | Hover or focus on the main action |
cubic-bezier(.45, 0, .25, 1)Slow in, slow out. No overshoot. Used for everything that is about attention.
cubic-bezier(.34, 1.56, .64, 1)A small overshoot, like a head lifting. Reserved for the aha and the peek.
With reduced motion turned on, blinks, scans and nods are off, and the aha becomes a plain colour change from violet to orange tufts.
Seven short clips made from the drawing and timings above, for social posts and videos. On a website or in the app, use the live code instead, so motion stays crisp and follows the reduced-motion setting.
The mark appears, nods, clicks, then the wordmark slides in.
Use for: Opening or closing a Reel or video
Listens, then the tufts spring up in the aha colour and settle.
Use for: The payoff of a tip, the end of a story
Two soft dips: you were heard.
Use for: Replies to comments, “we hear you” posts
The idle listener blinks, glances, blinks twice.
Use for: Background loops, profile videos
Tufts lie flat while the eyes scan.
Use for: “What would you say?” posts, before a reveal
Two blinking eyes instead of three dots.
Use for: Client-line posts
A row of tufts sprouts. The last one clicks.
Use for: Milestones, progress, launches
| Where | File in brand-assets/noddle-motion |
|---|---|
| Feed post | mp4-violet/ or mp4-paper/, -square 1080 × 1080 |
| Reels, Stories | Same folders, -story 1080 × 1920 |
| Over your own video | transparent/, -white or -violet (.mov) |
| Email, Notion, Slack | gif/, 540 px |
| Website, app | The live code in this book, not a video |
One aha per video, ideally at the end, when something has clicked.
Most motion uses the listen easing. Only the aha and tuft movements spring.
No sound is baked in, so music or a voice-over can go on top.
When the brand changes, re-render the whole kit with source/motion.py rather than editing clips by hand.
noddle speaks like a good supervisor: specific, warm, brief. It names what happened, then what to try. It never grades the person, only the moment.
Your reflection at 04:12 landed. Jane slowed down and told you about the argument.
Great job! You're a natural therapist! 🎉
Try one open question before offering a technique.
You failed to use open-ended questioning.
Jane is ready when you are.
Initialize simulated client session.
Yes: noddle is written in British English, everywhere. The app, the mentor's feedback, the website, posts and emails. The name is British, the app copy already was, and one spelling standard is easier to keep than two.
British spelling, international words. Spell it the British way, but choose words a therapist in Toronto, Dublin or Sydney reads without a second thought.
| Write | Not | Note |
|---|---|---|
| practise (verb) | practice | "Practise a session" |
| practice (noun) | same in both | "Your practice", "good practice" |
| behaviour, colour, humour | behavior | -our endings |
| recognise, organise, summarise | recognize | -ise, never -ize |
| counsellor, counselling | counselor | Double l |
| centre, programme | center | "program" only for software |
| judgement, towards | judgment | |
| 9 October 2026 | October 9th, 2026 | Day, month, year. No ordinals |
The name is always lowercase: noddle, even at the start of a sentence. Never Noddle, never NODDLE.
British slang is for the brand, not the feedback. "Use your noddle" and "have a go" are fine in marketing. In the app, and above all in the mentor's feedback, use plain words: no "brilliant", "loads", "cheers" or "spot on".
Clinical words stay clinical. Client, not patient. Session, therapist in training, supervisor, reflection. Approaches keep their published names, for example Motivational Interviewing.
Quotes from a session use double quotation marks, so they stand out from the surrounding text. Write the client's words exactly as spoken, whatever their spelling would be.
Serial comma only when it prevents a misreading. Sentence case for every heading and button.
Social
Six templates, each built on one part of the mark. Posts teach a small, usable skill or invite people to practise one. The text in dashed orange boxes is a slot to fill, not finished copy.
Caption: Jane is 34 and has been snapping at her partner. How would you open? Reflect first, ask second. We'll share a few strong replies on Friday.
Caption: The urge to help comes fast. A reflection first tells your client you heard them, and often they solve half of it themselves. Have a go with a simulated client on noddle.
"A real quote from a therapist in training, with their permission"
Use for: real stories from trainees, shared with consent. Never invent a quote for this template, and keep the orange for the word that names the moment.
Slides 2–4: one technique each, with a single example line in a bubble. Last slide: "Practise it with a simulated client." and the stacked logo.
Follow-up story: show the result and what the mentor would say about each option. The reflection usually wins.
Caption: noddle is a practice space for therapists in training. Talk with a simulated client, rate yourself, then compare with a mentor's feedback. Low stakes, honest feedback.
Margins are 8% of the width. The wordmark sits bottom right, the call to action bottom left.
One part of the mark leads each post: the bubble for client words, tufts for a tip or an aha, eyes for a series.
At most one orange element per post. Real client material never appears: every client line comes from noddle's fictional scenarios.
Captions follow the voice rules: say what to try, in two or three sentences. One or two hashtags at most, for example #counsellingstudent.