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.

Ink

Accent

Glass

Conversation

States

Atmosphere

The tones behind every page. Faint by design, so lift them to see the mesh move.

Lift the atmosphere

--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; Sets the corners →
space-3: 12
space-4: 16
space-5: 20; Page gutter on phones

Corners

Surface · 24

Card · 16

Inset · 8

Surface 24px: Menu, composer, bubbles, dialogs
Card 16px: Panes, images and video
Inset 8px: Inline code, icon buttons

Pad 8px inside a corner and the corner within is 8px smaller, which is always the next role: 24, then 16, then 8. Drawn at twice size.

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.

About Agentic User Research

AnsweredSources follow the reply; copy and retry appear on the latest one.

That response didn’t finish.

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.

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

ListeningWords land where you’ll edit them. Settled words are solid; the current guess stays muted until it settles.

Waiting for the microphone

Waiting for the microphoneBefore the browser grants access. The ribbon rests flat.

Listening. The text appears when you stop

RecordingWhere the browser can’t transcribe live, the words come when you stop.

Transcribing

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

Unable to access the microphone. Please review your browser settings.

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.

The atmosphere: the accent colours under blur — **Media**Images and video at a 16px corner, with no shadow.

InputThe password field, at rest and after a wrong try.

Default

Error

That password didn’t work. Try again.

SkeletonSentence-shaped lines that stream in while a page loads.

DirectoryLists of work, builds and writing; a lock marks protected work.

Work

Agentic User Research customer research any team can run Data Signals making data trust visible Experimentation Platform faster, more reliable experiments

DialogConfirm, password and video, in one glass card.

Audio playerA recorded reading of every post.

Listen to post