Atmos

A design system for conversation, in text and in voice.

Chat and voice come first. The rest of the site, posts and case studies included, is made from the same parts.

Foundations

ColourNeutral ink and glass, with one accent. Select a swatch to copy its token.
TextStrongest to faintest, and errors
AccentThe one gradient
AtmosphereThe colour behind every page, faint by design

--inkTitles, labels and chat replies

TypographyManrope in six styles, for posts, pages and the conversation.

Manrope, for the page and the conversation alike

Display32–44 · 800
Section title20–24 · 800
List title18–20 · 800
Body18 · 400
Label16 · 400
Chat16 · 400
Spacing and cornersSpacing runs on 4px. The 8px step also sets the corners: inside any corner, pad 8px and drop one role.

Steps

space-1
4
space-2
8
space-3
12
space-4
16
space-5
20

Corners

radius-surface
24
Menu, composer, bubbles, dialogs
radius-card
16
Panes, images and video
radius-inset
8
Inline code, icon buttons
MotionQuick to respond, slow to settle.
cubic-bezier(0.22, 1, 0.36, 1)
IconographyLucide, still until you reach for it. The last three hold a state.

Conversation

Chat

A conversation, end to end

The real composer and messages, with scripted answers drawn from the about page instead of the live agent. Ask something, then type again while it replies to queue a follow-up.

Ask me about my work.

Message

Your words, and the reply

Your turn sits in a bubble; replies are plain text with their sources. Every state a message can be in, side by side.

Reading About
ThinkingNames what it’s reading, one source at a time.
Most
StreamingWords settle in as they arrive. No cursor, no spinner.
Most of my work has been on products people rely on to make decisions.
AboutAgentic User Research
AnsweredSources follow the reply; copy and retry appear on the latest one.
Didn’t finishOne quiet line and a way to try again. Never a red panel.
What kind of work do you do?
Your turnYour words sit in a bubble on the right. Replies never do.
Yesterday, 18:40
New sessionMarks where a conversation picked up again after a break.
This one is shared privately. Enter the password to keep reading.

Agentic User Research

Protected case study

Request access on LinkedIn
Protected work, lockedWhen a reply mentions protected work, it offers the password right there, so you never leave the conversation.
This one is shared privately. Enter the password to keep reading.
Agentic User Research is unlocked.Open the case study
Protected work, unlockedOnce you have access, the same reply links straight to the case study instead.

Composer

One surface, one primary button

Where you type or start talking. The primary button changes with what you can do next.

EmptyMicrophone, then the call: talking is one tap away.
DraftingSend fills with the accent once there is something to send.
ReplyingSend becomes stop while the reply streams.
Paused

And what are you exploring now?

Queued follow-upTyped while a reply was streaming. It goes next, or waits if you stopped.

Dictation

Talking into the composer

The microphone in the composer turns speech into a draft you can edit before sending. The ribbon follows your voice: it rises quickly and settles slowly.

Listening
Recording
ListeningWords land where you’ll edit them. Settled words are solid; the current guess stays muted until it settles.
Waiting for the microphone
Requesting microphone access
Waiting for the microphoneBefore the browser grants access. The ribbon rests flat.
Listening. The text appears when you stop
Recording
RecordingWhere the browser can’t transcribe live, the words come when you stop.
Transcribing
Transcribing recording
TranscribingAfter you stop. Send waits until the words are in.

Voice

A voice call

The real call screen with a scripted voice, so it never asks for your microphone. Tap the orb to connect, then mute, end, or offer the unlock. Below, the same screen held in every state of a call. The orb shows each one by how its colour moves, never by a halo, pulse or change of size.

Talk with Mo

Tap the orb to use your microphone

Every state of a call

Talk with Mo

Tap the orb to use your microphone

IdleBefore a call. The orb is the button.
ConnectingThe orb pulses while the call connects; tapping it cancels.
ListeningWaiting for you. Mute and End sit under the orb.
SpeakingThe orb moves with Mo’s voice.
MutedYour microphone is off. Only the mute button changes.

Talk with Mo

Tap the orb to use your microphone

ErrorThe call couldn’t start. The orb dims and the reason sits under it.

Components

ButtonSix roles. Disabled and busy behave the same in every one.
VariantRestDisabledBusy
primaryThe one action that moves you forward.
secondaryThe way back or out, beside a primary.
destructiveA primary that removes something.
glassA control over the atmosphere, in a call or conversation.
accentThe round button that starts or sends.
iconA square control inside content.
MediaImages and video at a 16px corner, with no shadow.
The atmosphere: the accent colours under blur

Agents are making execution cheaper. Teams can explore more directions, build prototypes faster, and turn an early idea into something tangible with far less effort.

InputThe password field, at rest and after a wrong try.
Default
Error
DropdownThe site menu, unfolding from its trigger.
SkeletonSentence-shaped lines that stream in while a page loads.
Loading content
DirectoryLists of work, builds and writing; a lock marks protected work.

Work

Agentic User Research (Protected) customer research any team can runData Signals (Protected) making data trust visibleExperimentation Platform (Protected) faster, more reliable experiments
DialogConfirm, password and video, in one glass card.
Audio playerA recorded reading of every post.
Listen to post