Components

Airmond paints one ground, in the member’s own scheme. Exactly one surface is allowed a world of its own, and only while it is live: the recording stage, because the question it answers — “can she hear us?” — is asked by people two metres away who cannot see a setting. The call is live too, so it takes the stage’s dusk, and so does Ada’s meeting tile, because the people looking at it cannot see the member’s setting; everything else on this page is drawn on the one ground. That rule is dated 2026-09-19 and it cost a black: see the call.

Stock shadcn/ui with the smallest possible delta: the system is a theme (tokens) plus a tiny set of extension tokens. Everything below is rendered purely with the CSS variables from dist/css/airmond.css — no component forks.

Feather (light)

Low flame (dark)

The recording stage

This is the surface the one-ground rule makes an exception of, and the only one. It paints its own world edge to edge and does not follow the member’s scheme: while she is listening the ground is dusk; the moment the member goes off the record the whole screen repaints amber. That is the feature, not decoration: the phone is lying flat on a table, and “can she hear us?” is being asked by people two metres away, so the answer has to survive a glance across a room. A state whose colour depended on a setting nobody in the room can see would be a state two people could describe differently.

⚠️ The exception is the AMBER, not the dusk. The listening ground is the dark scheme, read straight out of it, so what this screen actually claims is the right to stop following the member’s setting while it is live and to repaint itself entirely when it stops capturing. The call takes the same dusk for the same reason and has no amber, because it has no off-the-record state to announce. Everything else on this page follows the member.

The two grounds

The rule: each ground carries its own foreground, and one ink is drawn at a few opacities rather than a second set of hexes. The quiet fill is that ink at 0.1; the hairline is 0.3 on dusk and 0.28 on amber. Secondary is the one tone that needs two numbers — 0.68 on dusk, 0.75 on amber — because the amber ink has a far lighter ground to survive, and a shared value cannot serve both. The dusk pair is not a third scheme: it is the dark scheme, read straight out of it.

This is where the second bug was. Both grounds shared one 0.68, and on the amber that measured 3.91:1 — under the 4.5 body-text bar, for every caption on the screen: the tap hint, the privacy note, the honesty caveat under the controls, the count. The amber ink was being asked to be loud enough at full strength and quiet enough at 0.68 against a ground far lighter than the dusk. Fixed by splitting the token: 0.75 on amber is the lowest step that clears the bar (4.58:1; 0.74 measures 4.44 and misses), deliberately chosen over a rounder 0.8 because a secondary tone that stops receding has stopped being secondary. Dusk keeps 0.68 at 6.51:1 — it never had the problem.

The capture card

The rule: transparent with a currentColor-strength outline, never a filled card. A filled card would need a surface colour per ground and would fight the wash the whole screen just performed; an outline at the ink’s own 0.22 follows it for free. Radius 12, padding 12, a kind chip that hugs its label, the headline in the ground’s primary ink and the detail in secondary.

The chip is blue on dusk and ink on amber rather than blue on both: on the amber the feed is historical (“she wrote down, before the pause”), and a confirm blue that means “live” would be claiming something untrue about rows captured before the member paused her. Never green — confirmation is the blue pair on every Airmond surface.

The speaker chip

The rule: the hue is a MARK, never the text. One capsule holding two controls — the name (tap to mark them talking) and a ✕ (remove) as a sibling, never nested — with the roster hue as a 10px dot, the capsule fill and the capsule border. The name itself stays in the ground’s own ink, so a hue never has to carry a word. Resting: fill 0.1, border 0.3, 1px. Speaking: fill 0.28, border 0.95, 2px, and the label goes bold — three signals, because one is missable across a table. 44px tall, Apple’s minimum, because the member is tapping while looking at a person rather than at the phone.

Ines is the one marked speaking in both.

The status pill and its live dot

The rule: this is the one element that must read from across a table, so it is drawn at near-full foreground strength — a 1.5px outline at the ink’s 0.9, not the 0.3 hairline everything else uses. Listening: a live dot that breathes (0.45 → 1, 900ms, and static under prefers-reduced-motion). Off the record: the dot is replaced by a pause glyph in the stage ink. The dot is recording-red (#E8574A) rather than the stage foreground, because “recording” is red everywhere else in the app — and it has no amber counterpart on purpose, since a red dot on a screen that is not capturing anything would be the single most dangerous pixel in the product.

The stage control pair

The rule: two EQUAL halves of one switch, quiet on the left and the destructive on the right. Equal widths are the whole point — the pair reads as two directions of a single control rather than as an action with an afterthought beside it, which is also why the labels mirror each other (“Go off the record” / “Back on the record”) instead of describing what happens. 52px tall, radius 14, 12px between them, one line always. While listening the left half is quiet (the fill plus the hairline); off the record it is the solid ink, because coming back on the record is then the primary act.

The count pill

The rule: the count appears only when there is something to count, and it never competes with the eyebrow it sits beside. A 13px secondary line at the end of the feed header — no chip, no border, no colour of its own. A zero state says its sentence instead (“nothing yet”), because a pill reading “0 saved” invites the reading that something failed.

Same colour, same finding as the two grounds above: on the amber this is 4.58:1.

Consuming it

Web: the --stage-* variables in dist/css/airmond.css, in :root — scheme-independent by design, not by omission. React Native: stagePalette(listening) from dist/ts/tokens.ts, which returns the ground, its ink, the three opacity-derived tones and that ground’s Stop; the roster hues, the live dot and the raw opacities are on the stage export beside it. Until this page those values lived only in mb-airmond-app/src/features/recording/stage-palette.ts, which is what let both findings above ship unseen.

The call

The other surface that fills the screen while she is live, and as of 2026-09-19 the one that stopped painting a world of its own. It is on the one ground — the dusk, the same one the recording stage paints while she is listening — because it is the same moment: she is live on both. The two are told apart by what is on them, a portrait and a handset against a speaker roster and a capture feed, and never by two different blacks.

The ground

The rule: Airmond paints one ground, in the member’s own scheme, and one surface is allowed a world of its own only while it is live. That surface is the recording stage, because the question it answers is asked by people two metres away who cannot see a setting. The call is a phone held by one person, so it has no claim on a third ground — but it is live, which is why it takes the stage’s dusk rather than the member’s current scheme.

Nothing in the table above is a new value. The ground and its ink are dark.background and dark.foreground read straight out of the dark scheme, exactly as the stage’s dusk is, so the two can never drift. The section below adds four things and borrows the rest.

Only one ground, so only one column

Every other component section on this page draws its specimens in both schemes side by side, because the surfaces they document follow the member’s setting. This one does not, and that is a decision rather than an omission: the call is pinned while it is live, exactly as the stage is. The one exception is the minimised banner, which is not on the call ground at all — it is a strip across the member’s own page, so it is drawn in both.

The specimen palette

The specimen carries the call palette on itself as the --ca-* set, mapped once in site/call.mjs from tokens/tokens.json. Two things in this section are not read from it, and both are deliberate: the retired black and its ember above, which have no token because they no longer exist, and the white on the minimised banner, which is white in both schemes and so belongs to no scheme set. Everything else re-renders when the token file changes.

The icon set

Seven symbols, drawn once into a <defs> block and referenced by <use>, each stroked in currentColor so it takes the colour of whatever it sits on. Nothing here is an emoji or a text character: a text glyph renders as an empty box, which is the defect the chat surface was revised to fix.

CallPortrait, and the shape the screen starts in

The rule: her size is the outcome of a subtraction, never a constant. The screen has one hard requirement — Mute and End are always reachable — and exactly one flexible thing above them. So the portrait takes whatever height is left after her name, the pill, the controls and the clock have had theirs, between 88 and 240 points. An iPhone SE mid-call has about 120 points of slack; a 6.9" phone has three times that. The ring is coral, and coral on this screen means identity and nothing else — which is exactly why ending a call is not coral.

CallHeader, once she has captured something

The rule: the clock is the same counter, left-aligned rather than centred — never a smaller one. Stacking her, her name and the counter cost over 250 points of header on an iPhone 17 and left the thing the screen exists to show with one visible row, so the working shape puts them in a row. The counter stays the largest thing in it: how long you have been on the phone is the one number a member looks up to check, and shrinking it the moment the screen got busier would make it harder to read exactly when there is more to read.

CallStatusPill

The rule: this is the recording stage’s pill, not a second one. Same radius, the same 1.5px outline at 0.9 of the foreground, the same paddings and label scale, and the same breathing dot at #E8574A. A member who lowers the screen mid-call and comes back to a busier one must not have to re-read a different status vocabulary to work out what changed, so one function turns a phase into words and both shapes mount this component rather than restating it. The dot is static under prefers-reduced-motion.

CallControls, and the one measurement this section came back with

The rule: ending a call is red, and on this screen red means only that. It used to be coral, which was right while coral did nothing else here; since the portrait grew its ring, a coral End button sits inches from a coral ring meaning something completely different, and one colour saying two things is how a signal stops working. The disc is #FF453A — the stage’s own Stop, read from there rather than typed again, so the control that ends a live conversation cannot drift from the one that ends a recording.

Two controls, not three. There is no audio-route button and that is not an oversight: AirmondLiveAudio follows the OS communication route — speaker, wired headset or Bluetooth — and reports the changes, so the platform stays the source of truth and the screen keeps only the controls whose behaviour is identical everywhere. The first version of this section drew a Speaker disc here, and the app has never had one. It is recorded rather than quietly deleted, because a specimen that invents a control is worse than no specimen: the next person builds it.

And muted is the loud state

Muted fills with primaryFill — the way a pressed key stays down — so “she cannot hear you” is legible without reading the pill. A filled disc takes no outline, and must not: it separates on its own, and an edge on top of a fill reads as a second state.

The app draws this, as of 2026-09-19. call-controls.tsx takes call.controlOutlineTone at control.card.borderWidth on an unarmed control and nothing on a filled one, pinned by an e2e test that asserts both halves — a test checking only that Mute has a border would pass on a build that put one on every control. For about an hour this note read “a change the app has to pick up”, which is the state every token in this kit starts in and the state none of them should stay in.

CaptureFeed

The rule: it is the recording stage’s own headings, taken by reference and not retyped, plus one the stage has no use for. It stopped being a single flat stream when Cédric asked to see “what you’re capturing, what tasks, what knowledge updates, and so forth”, so the feed carries the stage’s two headings and a third, What didn’t go through. The tally sits beside the heading and outside the scroll view: on one 514-second call nineteen of twenty-eight completions were refused and the member found out from her, near the end, while reloading another tab. A count that can be scrolled away from is a count that arrives too late.

The feed is the clearest argument for the one ground there is: it draws the recording stage’s own two headings. Two screens sharing a heading and not a ground was the thing to fix.

MinimisedCallBanner

The rule: it is the other half of the minimise control, and it ships with it or neither ships. Without the strip a lowered call is a call the member cannot find, and the only remaining way to end it is the system’s own call UI. This is the one component in this section drawn in both schemes, because it is not on the call ground: it is a push-down strip across the member’s own page, so it follows the member’s setting like everything else there.

Consuming it

Web: the --call-* variables in dist/css/airmond.css, in :root — scheme-independent by design, exactly as the --stage-* set is, because the call is pinned while it is live. React Native: the call export from dist/ts/tokens.ts, which carries the ground, its ink, the End disc and its glyph, the quiet wash and the outline that actually finds the control. Nothing in that export is a hex this file decided: the ground and ink are read from the dark scheme, the End disc from stage.stopOnDusk, the outline from rule. Until today these values lived only in mb-airmond-app/src/features/voice/components/, which is what let a whole ground exist without ever being measured.

Ada’s meeting tile

The Recall bot’s 1280x720 camera page: what everyone else in a Meet, Zoom or Teams call sees as Ada’s video. Her portrait and the meeting’s title at the top of a column, then what she is capturing as it happens: action items, notes, knowledge updates, answers and her summary, with the people who join. Decided 2026-09-30 while reviewing a mockup built from a real team call, and the speaking orb approved 2026-10-01. The decisions and their reasons are DESIGN.md’s “the meeting tile” section; this section is their values, drawn.

The tile, state by state

Each frame is the real page at 1280x720, scaled to fit. The bot’s browser draws it at 1:1, so every distance in this section is in the frame’s own pixels.

Pricing review

Ada · taking notes · 5 people

AnswerReading aloud

The launch moved to the week of 12 October, after the pricing review, so the partner accounts join the beta a week later.

Asked by Tom Okafor

Action item

Send the revised pricing sheet to Marcus.

PSPriya ShahFriday

Note

Launch moves to the week of 12 October.

Speaking. The liquid orb behind her portrait, following her voice; “Reading aloud” on the answer she is saying; the live dot pulses. Once the meeting has a title it replaces her name in the header and her name moves to the subtitle. The button fades the orb out and back in.

AdaPriya’s assistant

Ada

Airmond · not taking notes · 5 people

Member confirmation needed

Open the Airmond app and confirm which participant is you.

PSMLNBTO

Priya, Marcus, Nina and 1 other joined

Ada

Airmond · taking notes · 5 people

Answer

Yes, Priya, you’re confirmed as the participant now.

Asked by Priya Shah

PS

Priya ShahConfirmed · Ada works for Priya

PSMLNBTO

Priya, Marcus, Nina and 1 other joined

Ada

Airmond · taking notes · 5 people

Muted · still taking notes

Action item

Send the revised pricing sheet to Marcus.

PSPriya ShahFriday

Note

Launch moves to the week of 12 October.

Why the middle third, and why an orb rather than a border

The rule: once anyone has joined, everything sits in the middle third of the frame, and “she is speaking” is drawn inside it. Meet, Zoom and Teams crop the tile to fit their grids, and the worst case is the centre 720x720 square, which removes 280 px from each side. A coloured border round the whole frame, which is what the old tile drew, is invisible on at least two sides for everyone who sees that crop. The middle third runs from 427 to 853 px, inside the square, so the header, the orb and the feed survive every crop.

Ada

Airmond · taking notes · 5 people

Note

Launch moves to the week of 12 October.

cropped

cropped

the middle third

The shaded sides are what the 720x720 crop removes; the dashed band is the column every state draws in.

The kind icons

The rule: the app’s own icons for the same meanings, drawn bare, with no tinted box behind them. Phosphor regular, exactly as mb-airmond-app/src/ui/icon-glyphs.tsx maps them, so one set of icons means one set of things across the app and the tile. Each kind has one colour, and only the action item is loud: coral is reserved for it, so the summary, which is her speaking rather than a request to act, takes the confirm blue like an answer.

The tags, rows and pills use six more from the same set: PencilSimple (Edited), Waveform (Reading aloud, Connecting voice), Clock (due), Check (confirmed), Question (the confirmation pin) and MicrophoneSlash (muted). Path data from phosphor-react-native 3.0.6, MIT.

MeetingHeader

The rule: her portrait is a small circle top-left of the column, beside the title. 64px in a 2px ring, the title in Schibsted Grotesk 700 at 24px (her name until the meeting has a title, clamped to 2 lines), and a 15px subtitle in Instrument Sans that says whether she is taking notes and how many people are in the call. The title starts 106px from the portrait’s left edge, which is exactly clear of the orb at full level. App components that show her portrait beside a title may follow this header.

Taking notes

Ada

Airmond · taking notes · 5 people

Not yet confirmed

Ada

Airmond · not taking notes · 5 people

Speaking

Ada

Airmond · taking notes · 5 people

Titled

Pricing review

Ada · taking notes · 5 people

FeedCard, each kind

The rule: a feed card is a dusk card, never a white one. dark.card with the dusk ink and a 12% hairline, at the system’s card radius. Next to camera feeds in a video grid, white cards read as a screen share and pull the eye off the people. Card text is 21px (an action item 22px at 600), because people read it at grid size. Drawn at 1:1, in the column’s own width.

FeedCard, each state

The rule: a state is a tag at the right of the kind row, and the words that changed stay visible for a moment. New has no tag: the card rises into the top of the feed over motion.arrive, and the next card pushes it down within seconds. Edited is the waiting amber, with the replaced words struck through under the new ones for six seconds. Removed strikes the text before the card leaves. Reading aloud is the coral wash, on the card she is saying.

JoinRow, ConfirmedRow and the ConfirmationPin

The rule: people are rows, not cards, and joins that land together fold into one row. A row is lighter than a card: avatars in the roster hues with ink initials, then the words. Folded, at most 4 avatars overlap by 10px and at most 3 first names are spelled out, then “and N others”. The member she works for gets a blue check once they confirm in the app; until then the ConfirmationPin sits at the top of the feed, a dusk card with an amber hairline and the Question icon.

StatusPill

The rule: a state the room needs to know about is a pill on its own row between the header and the feed. The raised fill, the label in ink and the detail in muted. Muted says she is still taking notes, because mute only silences her voice, and a pill that just said “Muted” would read as “she has stopped”.

LiquidOrb

The rule: she is speaking when the orb shows, and the orb follows her voice. Two conic layers of four hues, screen-blended behind her portrait: the brand coral and three of the roster (pink, amber, blue). The edge morphs through three shapes every 5s while the gradient turns every 7s (the inner layer 3.6s and 5s, reversed), and its size is 0.86 + level × 0.26, where level is her output amplitude from 0 to 1, the audio the page is already playing, eased over 130 ms. It fades in and out over 450 ms. While it shows, her ring becomes a 3px band of ground colour so her face stays separate from the light. Chosen over a halo, ripples, a waveform and an aurora because it is the one that still reads at Meet’s 3x3 grid size.

Behind the header portrait

She is speaking

Before anyone joins, at 1.2x the idle ring

AdaPriya’s assistant

The level here is a smoothed stand-in for her voice. On the tile it is the PCM amplitude of what she is saying. Under prefers-reduced-motion the shape stops morphing and turning, the level is held at 0.5, the live dot stops pulsing, and the fade takes motion.reduced. It animates only transform, opacity and border-radius, with no full-frame blur, so Recall’s headless Chrome draws it at full frame rate.

IdlePortrait

The rule: before anyone joins, her portrait is the whole tile, and it is crisp. A 330px ring, 3px wide, with the photo inset 7px from its outer edge so a band of dusk shows between them; centred at 50% across and 42% down, her name at 42px and whose assistant she is at 19px. When she speaks before anyone joins, the orb behind it is 1.2x the ring, and her name sits 236px below the centre, clear of the orb’s rim at full level (222 px); the token build fails if the two ever meet. An earlier version faded the photo into the ground with a vignette; Cédric did not like it, and the crisp circle matches the header she shrinks into.

AdaPriya’s assistant

Measured

Every pairing the tile introduces, measured on the surface it sits on. Text is measured against dark.card, which is also the ground’s lightest point, so a pairing that clears here clears anywhere on the ground. This table and the claims in tokens.json come from the same list (meetingPairs in build/meeting-tile.mjs), and the token build fails if a pairing has no claim.

Four marks are recorded rather than relied on. The card’s 12% hairline and its fill do not separate from the ground by luminance, the pin’s amber hairline is a tint, and the portrait’s ring frames a photo. The card is found by its text and its icon, the pin by its icon and title, and her portrait by her face. Whether a feed card on a video tile is a mark the mark rule covers is recorded here as a question for the next pass, not settled by this one.

The specimen palette

The tile carries its palette on itself as the --mt-* set; the published variables are the --meeting-* set in dist/css/airmond.css. Both are generated from the same resolved tones, and each role names the token it reads. Only two of these are new colour decisions, and both are an existing hue at a new opacity: the pin’s hairline and the Removed tag’s wash.

Geometry, and the reason for each number

Every distance on the tile is a meetingTile.layout token and carries its reason in the token file, printed here. The next change should argue with the reason rather than the number.

Consuming it

Web: the --meeting-* variables in dist/css/airmond.css, in :root, scheme-independent like the --stage-* and --call-* sets. TypeScript: the meetingTile export from dist/ts/tokens.ts (tones, the ground gradient, the roster, the orb, the layout with each reason as a doc comment, and the fixed words). The consumer is cs-airmond-api/src/meetings/live-stage-page.ts, which builds the page the bot shows and, today, carries these values by hand.

The chat surface

The seven components a conversation with her is actually made of, every state, drawn in both schemes from the token file and from nothing else. This is the thread itself: the bar you type into, the two credential cards (one that keeps a secret and one that hands it straight to a live page and keeps nothing), the connector, the card that asks you to choose, her screen, and the page an OAuth round trip lands on.

The specimen palette

Each specimen carries one scheme's palette on itself as the --ch-* set, mapped once in site/chat.mjs from tokens/tokens.json. There is no hex anywhere in the section: change a token and every specimen below re-renders. The mapping is the whole surface contract, so it is printed rather than described.

The icon set

Eleven symbols, drawn once into a <defs> block and referenced by <use>, every one of them stroked in currentColor so it takes the colour of whatever it sits on. Nothing in this section is an emoji or a text character. Two of them — Task and Knowledge — are drawn here but used by the reference densities inside a message bubble rather than by any card below; they are held in the same set so the thread cannot end up with two families of glyph.

Two things on this page are the page talking, not the component. A state label above a specimen goes coral-deep when it is the state the section is arguing about — that is a caption, outside the component, and it is not the surface spending its one coral. And a specimen page runs more ambient loops than a product screen is allowed (the motion budget is at most two per screen; this page draws a live dot per scheme per state), because every state has to be visible at once here.

MessageBar

The rule: one pill, and every control inside it. The + is not a disc standing beside the bar, it is the same 36px circular control as the mic, inset 6px inside a 24px radius, so the bar reads as one object rather than two. The field is 17/23. The trailing slot does two jobs and never both at once: it is the mic while there is nothing to send, and it becomes the coral send the moment there is.

On the web the same bar is one step down (chat density, the standard since 2026-09-24): 42 tall with 30px discs, still 6px in from every side, a 21px radius and a 14/20 field, the size of the messages it sends. Both are drawn from density.composer.

The coral disc is found by its glyph, not by its edge. Coral on the white field measures 2.80:1, under the 3.0 a control boundary wants — the same property of this coral that makes onCoral ink rather than white. What identifies the send is the ink arrow on it at 5.76:1 and its fixed position at the end of the pill, so the claim is recorded as a must-fail rather than papered over with a deeper coral that would stop being the brand.

Recording keeps the + and arms the send. There is no use for a mic while a recording is already running, and the thing you want at that moment is to send it. The waveform and the elapsed time are drawn in confirm blue: the send disc stays the one coral fill on the surface.

SecureCapture

The rule: the ask, the field and the reassurance in one card — and a refusal never leaves it. A title, one line of why she needs the value, the field with a quiet Save securely beside it, and a shield footnote saying where the value goes. The button is the quiet fill, not coral: handing over a key is not the primary action of a conversation, it is a chore the card is asking you to finish.

CredentialHandoff

The rule: this one hands values to a page that is open right now, keeps nothing, and asks for everything it can already see at once. She is standing in a sign-in form on your behalf and it wants an email and a password; she takes an ordered list of fields in ONE card rather than a card per field, because asking twice interrupts you twice and leaves you waiting mid-flow while she sits on a half-filled page. The values go into the page and are not retained, so the done state says Submitted and never Saved — there is nothing saved to speak of, and a card that says Saved about a value nobody kept is the most expensive kind of wrong.

The subtitle always says two things: why she needs it, and what she does next. "Sign in to Windy so I can pull weather for your flights. I'll click Login after it fills." The first half is what makes handing over a password reasonable; the second is what stops you sitting there wondering whether to press anything. A card that carries only one of the two halves is not finished.

Three actions, three weights, and only one of them is filled. Continue is the ink fill (16.12:1 light, 12.61:1 dark) rather than coral: the armed send disc is this surface's single coral, and a password card is not where to spend it. Open the screen is the quiet fill and carries the screen glyph, because it is the same object as the AgentScreen panel above — it is the takeover escape hatch, the one control that says "you do it, here is the live browser". Dismiss is plain text with no plate at all: it is always available and never the thing to press.

The label is above the input, not inside it. A placeholder is the one piece of text that disappears exactly when it is needed — the moment you start typing — and this is a field you are being asked to fill from memory, under a card that has to be read carefully. The required marker is coral-deep on the card (5.20:1 light, 6.78:1 dark): identity, not an action, and the one place the coral family appears on a card.

One card, every field she can already see — and the single-field card is the fallback, not the default. A sign-in form that wants an email and a password is one ask, so it is one card: two interruptions to answer one question is the version that makes a member wait twice while she holds a half-filled page open. The one-field shape stays for the case that actually needs it — a page that reveals a field she could not predict, a login split across two screens, an unexpected second factor — and each finished card stays in the thread as Submitted, which is also the honest record of what was handed over and when.

The promise is made before the value is typed, not only after. The shield footnote sits on the asking card, where you are about to paste a live password, and the subtitle repeats it once the card is done. A component that explains itself only on the way out has asked for a password in silence.

ConnectorCard

The rule: one row, one verb. A 40px logo tile on the confirm wash, the connector's name, one line of what it buys you, and exactly one control at the end of the row. The verb is the state: Add offers it, Authorize is the sign-in round trip, connected stops offering a verb at all and shows a confirm-blue On pill instead, and an expired grant says Reconnect with the reason in the amber where the description was.

Connected has no button, and that is the point. A working connector should not keep asking to be pressed; the only thing left to say is that it is on. The On pill is the same component as Saved and Connected below it, so one state reads identically wherever it appears.

ChoiceCard

The rule: the options are ONE group, separated by hairlines. Not three floating rows — a single bordered group at radius 12, each option a lettered key, a bold title line and an optional lighter description under it. The × in the header dismisses the question without answering it, which is a real answer and needs somewhere to go. Answered collapses the group to the option you picked, its key in the confirm wash and a confirm tick at the end of the row: the card stops asking.

AgentScreen

The rule: it is a live view, not a picture of one — and the only question it answers is who has control. Some steps cannot be handed over as a form. A QR code on WhatsApp Web is the clearest case: there is no field to fill and no value to paste, so she shows you her screen and you scan it with your phone. That is what makes Open the screen on a CredentialHandoff card a destination rather than a label. The panel keeps 16:10 and radius 12 throughout; idle and working are thumbnails beside the thread, watching and handed over are the expanded forms, and the bar across the top is the part that changes.

Working carries a live dot that breathes at the ambient floor (--motion-ambient-min 4s, --motion-ease-ambient, static under prefers-reduced-motion) and names what she is doing. Watching says live and read-only out loud, because a screen you can see but not touch has to say so. Handed over changes the border and the bar to the waiting amber and adds the one control that gives it back.

Handed over is the waiting amber, and that is not decoration. Amber on this system means waiting on you, and a screen you are holding is exactly that: she is blocked until you give it back. It is the one state on this surface allowed to be louder than the accent, it carries a 2px border rather than the 1px hairline everything else uses (4.76:1 light, 9.50:1 dark), and it is the only place on the chat surface where a panel changes its edge. Control changing hands has to be unmistakable at a glance, or somebody types into a screen that is not listening.

Handing control back is a deliberate act, never a timeout. Hand back to Ada is a control the member presses; nothing reverts on a timer. A screen that silently takes itself back while somebody is mid-scan is worse than one that waits, because the member finds out by watching his own input go nowhere. The corollary: while the screen is handed over she does nothing, and the bar says so in her own words.

This panel is where Open the screen goes. The secondary action on a CredentialHandoff card carries the same screen glyph and lands here, which is why the two components share a glyph and why the handed-over state is drawn at all: an escape hatch that cannot show you what you are escaping to is a label.

The live dot is coral-deep, not coral. Full coral measures 2.55:1 on the Feather panel and misses the 3.0 a mark needs; coral-deep measures 4.75:1. This is the same swap the admin app icon makes for its tick, for the same reason — the coral family keeps the identity, the depth buys the contrast.

AuthComplete

The rule: a pill, a title, and one line of what happens next. This is the page a browser lands on at the end of an OAuth round trip, with nothing else on it, so it answers the only two questions anybody has there: did it work, and what do I do with this tab. Centred, and short enough to read without scrolling on a phone.

A refusal here is amber rather than the destructive red: nothing was destroyed and nothing was saved, and the next step is a fresh link rather than an apology. Red on this page would be the loudest thing in a flow whose worst outcome is "press it again".

Consuming it

Web: the --ch-* mapping printed at the top of this section, over the variables in dist/css/airmond.css. React Native: the same values are lightColors / darkColors in dist/ts/tokens.ts, which is where mb-airmond-app already reads ground, surface, ink, muted, coral, onCoral, confirm and confirmSoft — so a component here is a component there with no new token. The measured pairings above are asserted in tokens/tokens.json and re-run by build/contrast-test.mjs on every build, including the five this surface deliberately does not rely on.

Chat density

The chat at Grok's density is the standard since 2026-09-24. Cédric put app.airmond.com beside Grok's desktop app at 858 and 1283 on 2026-09-23 and approved its density, except for the emoji reactions; on 2026-09-24 he asked to keep it: “I do like the way you made it so that we can have more in one conversation now, so let's save that.” Every number below comes out of the density block in tokens/tokens.json, which records each one three times, for the web, the Mac and the native apps, and the apps mirror it.

The web, at 858

The window Cédric tested, drawn at true size: a 300 sidebar with the 108 portrait and three captioned 48pt discs over rows 32 tall at 14; a 44 header with a 24 portrait and her name at 14/600; the thread at 14/20 in bubbles with a 10 corner and 12/8 insets, 5 between two from one sender and 16 when the sender changes; and a 42 composer with 30 discs. The column is the pane less 16 each side, 526 here, so no bubble grows past min(640, 0.78 × 526) = 410. The draft card under her last message (no Send on it: Airmond never sends from the member's mailbox) keeps its own 14 corner: the bubble's corner moved to 10 and the cards' did not.

Feather (light)

Ada

Can you move my Thursday flight? Anything before nine works.

Swiss had nothing before 07:40, so I took that one and released the 11:20.

Your car is booked for 05:50, which puts you at the gate with twenty minutes spare.

The Lisbon hotel held the room but moved you to the street side. I have asked for the courtyard back.

Perfect. Leave the room as it is if they say no.

Will do. I also drafted the reply to Ákos about Thursday:

Draft replyTo akos.kovacs@example.com · Re: Thursday in Lisbon

Ákos, Thursday works. I land at 09:20 and can be at your office by eleven.

Change itOpen in Gmail

Message Ada

Low flame (dark)

Ada

Can you move my Thursday flight? Anything before nine works.

Swiss had nothing before 07:40, so I took that one and released the 11:20.

Your car is booked for 05:50, which puts you at the gate with twenty minutes spare.

The Lisbon hotel held the room but moved you to the street side. I have asked for the courtyard back.

Perfect. Leave the room as it is if they say no.

Will do. I also drafted the reply to Ákos about Thursday:

Draft replyTo akos.kovacs@example.com · Re: Thursday in Lisbon

Ákos, Thursday works. I land at 09:20 and can be at your office by eleven.

Change itOpen in Gmail

Message Ada

The two windows stack rather than sit side by side for the reason the thread's widest pair does: two 858px windows do not fit across this page, and a specimen clipped at the edge of a scroller is a specimen half-seen. There is no call mark in this header because the sidebar already offers Call; a window without the sidebar (under 720) draws it.

Native and web, the same exchange

One conversation drawn twice in the same 393px column: the native phone's density on the left of each pair, the web's on the right. The words are the same; the web fits more of them in the frame, which is the whole of what was approved. Native keeps ONE gap of 12 whoever is speaking (2026-09-14: “we should not combine messages that follow each other”); the web puts the grouping back at 5 / 16, which Cédric approved with the rest.

Feather (light)

Native · 17/26, corner 18, one 12 gap, 50 header, 48 composer

Ada

Can you move my Thursday flight? Anything before nine works.

Swiss had nothing before 07:40, so I took that one and released the 11:20.

Your car is booked for 05:50, which puts you at the gate with twenty minutes spare.

The Lisbon hotel held the room but moved you to the street side. I have asked for the courtyard back.

Perfect. Leave the room as it is if they say no.

Message Ada

Web · 14/20, corner 10, 5 / 16, 44 header, 42 composer

Ada

Can you move my Thursday flight? Anything before nine works.

Swiss had nothing before 07:40, so I took that one and released the 11:20.

Your car is booked for 05:50, which puts you at the gate with twenty minutes spare.

The Lisbon hotel held the room but moved you to the street side. I have asked for the courtyard back.

Perfect. Leave the room as it is if they say no.

Message Ada

Low flame (dark)

Native · 17/26, corner 18, one 12 gap, 50 header, 48 composer

Ada

Can you move my Thursday flight? Anything before nine works.

Swiss had nothing before 07:40, so I took that one and released the 11:20.

Your car is booked for 05:50, which puts you at the gate with twenty minutes spare.

The Lisbon hotel held the room but moved you to the street side. I have asked for the courtyard back.

Perfect. Leave the room as it is if they say no.

Message Ada

Web · 14/20, corner 10, 5 / 16, 44 header, 42 composer

Ada

Can you move my Thursday flight? Anything before nine works.

Swiss had nothing before 07:40, so I took that one and released the 11:20.

Your car is booked for 05:50, which puts you at the gate with twenty minutes spare.

The Lisbon hotel held the room but moved you to the street side. I have asked for the courtyard back.

Perfect. Leave the room as it is if they say no.

Message Ada

Every number, on every platform

Generated from the block, so the table cannot fall behind it. A bold web value is one the web draws differently from native. none means that platform has no such number, usually because the system draws that part (the Mac's titlebar, its split-view sidebar). guide marks a number the build checks and this page draws but tokens.ts does not export, because the app reads it from somewhere else and a second copy would be a second thing to keep true. The Mac column is recorded, not drawn: the Mac is SwiftUI and its numbers live in ThreadLayout.Mac, ComposerLayout.Mac and MacWindowStyle; they are here so the three shells can be read against each other in one place.

density.thread The thread on each platform, measured against Grok (14/20 type, 12/9 insets, a corner of about 10, 5 to 6 within a sender and 16 between, about 460 wide at a narrow window and 640 at a wide one). Two web numbers moved again on 2026-09-24: the vertical inset 9 to 8, because 8 + 20 + 8 lands Grok's measured 34 px one-line bubble within two, and the bubble corner 14 to 10; the Mac has not taken either yet (9 and 14). 640 at 14pt is about 80 characters, what Grok runs at 1283. The web's bubble is min(maxMeasure, measureShare x the thread column), and the column is the pane less columnInset each side with no cap once the sidebar is there (720 and up); below 720 a browser draws the phone's 14 inset and 900 cap. Mac caps its column at 1000. The native column's numbers are checked against the thread block, so the two cannot disagree.

density.chatHeader The band above the thread: her portrait, her name, the call mark. The web is 10 + a 24 portrait + 10 = 44, and the call mark's 44pt target is pulled in by a -10 margin each way rather than growing the band to 64. The Mac uses the system's compact titlebar, which is about 40 (macOS offers 52 or about 40, and 40 is what Grok's Mac app uses). The phone keeps native's ~50pt navigation bar, 8 + 34 + 8.

density.composer The composer's one bar: +, the field and the trailing slot inside one pill. The web is the same construction one step down: 42 boxes holding 30 circles, so the 6 inset survives on every side. The Mac keeps its square control exactly as tall as the field (30), which is the relationship its bottom-aligned row depends on. Coral appears here only on the armed send disc.

density.rail The sidebar. On the web the HERO HEAD is back since 2026-09-24 (Cédric: "on desktop, since we have space, we should still allow for a bit more room ... make the avatar larger again"): the 108 portrait, her name, and Call / Message / Record as captioned 48pt discs, on native's 6 / 10 / 18 spacing, on a 300 rail at every window from 720. Only the ROWS stay compact: 32 tall at 14 (6 + 20 + 6) with a 16 glyph in an 18 column, where native's are 41 at 15. The Mac kept the 2026-09-23 compact head (a 40 portrait, name 14/600, an 11pt one-line subtitle, 24pt Call and Record discs) on a 232 sidebar. The native iPad keeps its rail exactly as it was.

density.layout Where a browser grows the sidebar. 720, was 1000 (Cédric, 2026-09-23): at his 858 window the app dropped to the phone layout, a bottom tab bar under a 626 pane, where Grok beside it kept its sidebar. At 720 the 300 rail leaves a 420 pane whose widest bubble (286 measured: the hover rail's reserved slot binds at 388 - 90 = 298, before the 0.78 share) is still wider than a phone's (262 at 393). ONE switch for the sidebar AND the wide type ramp, because a window with a sidebar is a desktop window. The native iPad keeps its own 768 rule; the Mac always has its sidebar.

The build checks the block against itself and against the thread. Every native thread number must equal the thread block's (the MessageRun gaps included, which is how the old 4 / 12 was caught: neither app drew it); a header must be its padding twice plus its portrait; a composer's disc must sit 6 inside its bar and its corner be half the bar; a sidebar row must be its padding twice plus its line. A value that breaks one of those fails npm run build, not a review.

The colours did not move

The density pass changed sizes and nothing else: every fill is an existing token, coral is still only the Call disc and the armed send. Two things are new enough to measure, because the type came down a step and the sidebar grew a head again.

Every pairing above that the surface relies on is a claim in tokens.json, re-run by build/contrast-test.mjs; the two discs are recorded as must-fails so nobody later credits a plate with doing the work its glyph does. The header's edge measures 1.16:1 and is texture by the rule on the thread's marks: the band is told from the thread by its fill and its contents, and nothing is lost if the line is not seen.

The thread

The thirteen components the conversation itself is made of, under the cards: the bubble both speakers use, the structured answer she writes inside one, the long message of his that folds, the run of messages from one speaker, the rail that appears beside a message, the timestamp, the day break, the unread divider, the quiet line that records something happening, code, the draft she wrote for you to review and open in your own mail, the pill that says how many messages you have not read, and the action card that steps back once its work is finished. Every specimen is drawn in both schemes, and every distance in them is read out of one block in tokens/tokens.json.

The geometry, and the one place it lives

Everything below is drawn from the thread block in tokens/tokens.json. That block is the single source, and it is new: until 2026-09-14 these numbers existed twice, once in the React Native app and once in the iOS package, with nothing joining them, and the two had already drifted far enough that settling an argument about a disc and a glyph meant reading the approved artifact's own CSS. Both apps now mirror this block, which is why it is printed here in full rather than described. Sizes are px, which the Mac reads as points.

thread.measure maxBubble caps one bubble; maxColumn caps the thread's own column. The app's layout.maxContentWidth is a DIFFERENT number read by 39 other screens and must not be conflated with either.

thread.block Spacing INSIDE a bubble holding a structured answer. Every value is the EXTRA space on top of the 26px line rather than a total, so a change to lineHeight carries through instead of being silently overridden.

thread.run THE NATIVE PHONE'S GAPS: ONE 12, NOT A PAIR. A run is consecutive messages from one speaker. Until 2026-09-24 this said 4 within a run and 12 between speakers, which neither app drew: the phone and the iPad collapsed the pair into one 12 on 2026-09-14 (Cédric: "we should not combine messages that follow each other"), and the Mac and the web both moved to 5 / 16 on 2026-09-23. The Mac agent found this block behind all three shells on 2026-09-23 (mb-airmond-ios #530). So this block now states what the phone draws, and the desktop pair lives in `density.thread.gapSameSender` / `gapNewSender`, where the build checks the native column against these two keys. A timestamp at rest belongs to the NEWEST message and to no other on every platform, whatever the gap: that is how a touch device shows the time without a hover to reveal it.

thread.rail The controls beside a message, revealed on hover on a pointer device and by long press on touch. Reply and a three-dot menu, and NO reaction button: decided 2026-09-14, because Airmond is one member and one assistant and a reaction to your own assistant has no reader.

thread.stamp tone is muted and NOT faint. faint measures 3.08:1 on this surface and 2.81:1 on the panel, so it fails the body-text bar and the non-text bar alike; the must-fail claims below are what say so if somebody reaches for it again.

thread.dayBreak Plain centred text carrying the day AND the time, with no pill and no rule around it. The time is the time of the FIRST message after the break, because the break introduces what follows rather than closing what came before.

thread.unread A hairline across the measure, broken for a centred label. Drawn only when at least one message sits ABOVE it: a rule at the very top of a thread labels the whole thread and says nothing.

thread.draft THE DRAFT SHE WROTE, shown in the thread: mb-airmond-app's DraftCard (src/features/drafts/draft-card.tsx, MAR-173 and MAR-174), mirrored here on 2026-09-24. ⛔ THERE IS NO SEND, AND THAT IS THE RULE, NOT A GAP: Airmond never sends from a member's mailbox (Cédric; the api's identity/never-send.ts, three layers including a load-time seal on the SMTP submission ports), so the card has no Send button and no Sent, Sending or Did-not-send state, and the library never draws one. It is review-and-edit: `Open in Gmail` (`Open in Outlook` for a Microsoft mailbox, `Open the draft` when the client is unknown) leaves the app for the draft in his own mail client, the one place it can go out from, and `Change it` puts this message in the composer's reply quote. Revisiting Send is Cédric's decision, not a pull request. THE HEAD: a pen on a `groundAlt` tile, the title `Draft reply`, and a caption naming who and what (`To akos@… · Re: Thursday in Lisbon`, never `Re: Re:`). HER TEXT sits in a band under a hairline, cut IN THE TEXT (not by the renderer) to `previewLines` lines or `previewChars` characters, whichever comes first, at a word, with a `Read all` in the working accent; a remainder under `previewCrumb` characters is shown rather than hidden. THE FOOT: a quiet `Change it` (muted text, no plate) and the ONE ink primary; no coral, no green, nothing faint. THE REPLACED RECORD (MAR-174): when she wrote a newer draft, this card keeps its head and her words (fewer lines, muted) and a `groundAlt` strip with a down arrow says `Replaced by the draft below` in place of the foot, both verbs gone; a used card stays, lighter than the one below it. THE COMPACT CARD: a draft with no stored text draws the head and the primary alone. The card's edge and its band hairlines are the `mark` tone per the rule above (the app still draws them in `border`; recorded, not copied).

thread.newMessages THE FLOATING PILL that says how many messages you have not read, centred in the thread column and `edgeInset` in from the edge it anchors to. ONE component, TWO anchors: unread BEHIND you gives a pill at the top with an up arrow that scrolls to the unread divider, and new messages arriving BELOW while you read history give a pill at the bottom with a down arrow. Same count either way, so the member never has to work out which of two components he is looking at. INK FILLED WITH GROUND TEXT: not confirm, which on this system means confirmed and succeeded and live and would be claiming something untrue about a message nobody has read; and not coral, which the thread has already spent on the composer's send disc. The ✕ dismisses the pill WITHOUT marking anything read: dismissing a reminder is not reading the messages, and a pill that quietly marked them read would destroy the one piece of state the member came back for. The label is TABULAR so it does not jitter as the count goes from 9 to 10 while he is looking at it.

thread.longMessage HIS LONG MESSAGE FOLDS (2026-09-26, mb-airmond-app #324, approved by Cédric: "Both look great."). Grok Bot's pattern: a text message OF THE MEMBER'S taller than `capLines` lines of body is clipped to exactly that many lines, its last `fadeLines` lines are covered by a gradient from transparent to THE BUBBLE'S OWN FILL (memberBubble, or a flavour's own member fill; no new colour, no grey, no hard line), and a `moreLabel` with a chevron sits bottom-left inside the bubble on the text's own left edge. One tap opens it in place and the control becomes `lessLabel` with the chevron turned 180 degrees; per message, in memory, never animated in height. ⛔ THE MEMBER'S OWN WORDS ONLY: never her answer (it is what he came to read, and folding it would fold a streamed answer under him the moment it landed), never a bubble with an attachment, a voice note, a call or a machine card, never a failed send (its retry wrapper is one accessibility element, so the control would be unreachable). ⛔ MEASURED IN RENDERED HEIGHT, NEVER IN CHARACTERS: the body's laid-out height against `capLines` x the body's own line height (364 at the phone's 17/26, 280 at the web's 14/20), and it folds only when at least `minHiddenLines` more lines would be hidden, because a control that reveals one or two lines costs the space it saves. The control is the body's INK at `controlWeight`, the body's own size, never muted and never onCoral (nothing quiet goes inside his bubble). On the web the clip is `overflow: clip`, not `hidden`, so find-in-page and a focused link cannot scroll it. The clipped text stays in the tree: a screen reader, copy and a reply quote act on the whole message.

thread.actionCard AN ACTION CARD IN THE THREAD, and what it does when its work is finished (2026-09-26, mb-airmond-app #319, variant B of three, from Grok Bot's dismissed action card; approved by Cédric: "Both look great."). CallCard is the first instance and the one drawn here: a neutral `surface` card inside the call's bubble, a phone on a `confirmSoft` disc, the recipient as the TITLE, the number as a caption, a status pill, the brief behind a rule, then the last transcript line (or the report, once it lands) on an inset, and a secondary `Follow call` / `View call`. THE RULE, for every action card: while it is live nothing changes; once its work is finished (a call ended or failed, or unavailable with its report in; generally approved, dismissed, done) its title stays `titleTone` and every explanatory LINE (brief, report, last transcript line, consequence text) takes `detailTone`. Labels (the speaker's name, the status pill) and controls keep their own tone. The finished card stops competing with the live messages while its title stays scannable. `detailTone` must clear the 4.5 text bar on EVERY surface it is drawn on, in both schemes: the card (`surface`) and its inset (`groundAlt` in Feather, `surfaceRaised` in Low flame). Claimed below; if one fails, the rule stops rather than ships. The card's edge, the brief's rule and the foot's hairline are the `mark` tone here per the 2026-09-14 rule (the app draws `border` / `borderStrong`; recorded, not copied).

The table is generated from the block, and the block is guarded in both directions. A key the token file loses throws at build time, and a key it gains that nothing here explains throws too, so this table cannot quietly fall behind the values the apps are mirroring. The notes above are the token file's own words, printed rather than paraphrased; where one of them quotes a number measured on a neighbouring surface (stamp's 3.08:1 is the chat card, which is not a thread fill), the measured table under each component below is the authority.

The specimen palette

Each specimen carries one scheme's palette on itself as the --th-* set, mapped once in site/thread.mjs. There is no hex in the section. Five of the tones the block names as strings (stamp.tone, dayBreak.tone, unread.labelTone, unread.ruleTone, mark.tone) are resolved through this table at build time rather than hard-coded, so changing one of those words in the token file actually changes what the page draws. The last two rows are derived rather than read: one ink at two strengths, as rgba, so they composite over whichever surface they are actually painted on.

The marks that separate, and the measurement that was wrong

The rule, and it applies to every component this kit gains: a mark that separates or encloses must clear the 3.0 non-text bar on the surface it ACTUALLY sits on. Not on the page the specimen was measured against. The thread had three marks doing one job and had got two of them invisible and the third six times louder than the other two, and the cause is a single habit: the kit measures a tone in the context its specimens live in, which is a page, while the product draws the same tone inside a bubble that already has an edge.

border is the hairline for the page ground and it clears 3.0 there. Inside a bubble the same token composites to #DBE0E4 and #363E48 and measures 1.21:1 and 1.38:1 against the fill. So a thread mark can never use border, no matter what the page does. All three marks are --th-rule now: muted at 0.7, which is the lowest 0.05 step that clears 3.0 in both schemes (3.18:1 and 3.50:1; the step below it, 0.65, measures 2.87:1 in Feather and misses). The same pair already ships on the Mac, which is where the self-consistent version existed first.

The one mark allowed under 3.0, and why it is not an exception to the rule. The unread divider's rule measures 1.22:1 on the thread ground and stays exactly where it was. The rule above has a clause: unless the component draws something else at the body-text bar that carries the same meaning. The unread divider draws its label at 4.97:1, and that label is what tells you where you stopped reading. The section rule, the quote rule and the plate edge draw nothing else at all, which is why none of them may borrow the same argument. A hover mark is the other case: it appears and disappears under the pointer, and a change reads far below the ratio a static edge needs.

Bubble

The rule: one anatomy, two fills, two sides. Hers is the neutral wash on the left, the member's is the blue-soft fill on the right, and both hug their text and stop at measure.maxBubble (640px). There is no avatar, no name and no tail: a thread with one member and one assistant never has to answer which of nine people said this, and every pixel spent saying so is a pixel not spent on the words. Neither fill separates from the thread ground by luminance, which is deliberate and is why the hairline and the side carry the reading.

That last pair is drawn at measure.maxBubble, at true width, which is why it is the one pair on this page with its two schemes stacked rather than side by side: two 640px threads do not fit across this column, and capping the specimen to the column instead would have the container doing the work the token is supposed to do. Both schemes are still on screen together, which is what the rule is for.

Nothing quiet ever goes inside the member's bubble. Muted on that fill measures 4.05:1 in Low flame, under the body bar, and the fix is not a new tone: his bubble holds his words and nothing else. Every caption the thread has (the timestamp, the day break, the activity line, the unread label) sits on the thread ground instead, where muted measures 6.40:1 and 6.27:1. The claim above is recorded as a must-fail so the rule survives somebody deciding a timestamp would look nice in there.

LongAnswer

The rule: a structured answer is one bubble, and the thread has one type size. Title, section heading, bullets, a numbered list, a link, a quote, a rule, inline code and a fenced block all live inside a single bubble, spaced by the block values and by nothing else. Hierarchy is weight and space: there is no second font size anywhere in the thread, because a bubble that starts growing headings turns a conversation into a document.

Every block value is the extra space on top of the 26px line rather than a total, so changing the line height carries through instead of being quietly overridden. A bullet's marker is 5px and its text starts 22px in; a numbered item gets 28px because a number is wider than a dot, and a wrapped line in both returns to the text edge rather than sliding under the marker.

every weekday 07:00
  brief: calendar, weather, flights

every weekday 07:00
  brief: calendar, weather, flights

The rule under a section takes the heading's lower space on both sides. It does the same job a heading does, which is to separate, so it borrows the same number rather than introducing one of its own. The same applies to the quote: it is inset by block.markerToText, the distance a bullet already uses, so the bubble has one left edge for indented things instead of two. Both of them take the same tone as well as the same spacing, which they did not until 2026-09-14: the section rule was border at 1.21:1 and the quote's was full muted at 6.11:1, two marks doing one job five times apart.

MessageRun

The rule: the gap depends on the platform, and this block is the native phone's. On the phone and the iPad every message sits 12px from the one before it, whoever sent it (2026-09-14, Cédric: “we should not combine messages that follow each other”), so the side and the fill are what say who is speaking. On the web and the Mac the grouping is back, approved with the rest of chat density on 2026-09-23: 5px between two from one sender and 16px when the sender changes, drawn in that section at the web's own type. Until 2026-09-24 this block said 4 and 12, which no app drew; the build now checks it against the density block's native column.

The timestamp does not key off a run. A time at rest belongs to the NEWEST message in the thread, plus whichever message the member has opened the menu on, so a touch device shows when the conversation last moved without a time under every bubble, which would be a log rather than a conversation.

HoverRail

The rule: reply and a menu, and nothing else. No reaction button. Airmond is one member and one assistant: a reaction on your own assistant's message has no reader, and a reaction on your own message has no sender. What is left is the two things a member actually does with a message, so the rail is 15px glyphs in 22px hit boxes at a 26px pitch, starting 12px off the bubble.

At rest it is invisible and its space is still reserved, so a bubble never moves under the pointer. It fades in over 120ms and collapses to nothing under prefers-reduced-motion. Both icons are drawn SVG symbols: a text glyph renders as an empty box, which is the defect this whole component family inherited its icon rule from.

22px is a pointer hit box, not a touch target. On touch this rail is not tapped at all: it is reached by long press on the bubble, which is a target the size of the message. So the 22px box is held to what a mouse needs, and the 44pt touch minimum is answered by the bubble rather than by shipping a rail nobody can hit.

Timestamp

The rule: one home, two ways of reaching it. The time sits after the rail, 12px past it, at 12px in muted, and it is the same place in both cases. On a pointer device it is revealed with the rail on hover. On touch there is no hover, so it is shown at rest on the newest message and on the one whose menu is open, and on no other, which is how a thread gets a time without every bubble carrying one.

24h everywhere, including here. The clock is a token rather than a locale guess, because the day break above a message and the time beside it have to agree, and they are drawn by two different components in two different apps.

DayBreak

The rule: plain centred text, and no furniture at all. No pill, no rule, no plate: 12.5px in muted, 22px above and 16px below. It carries the day and the time, and the time is the time of the first message after the break, because a break introduces what follows rather than closing what came before.

Four distances, one shape: today and yesterday by name, a weekday inside the last week, and a date beyond that. Nothing here ever says “2 days ago”: a relative phrase past yesterday makes the reader do arithmetic to find out whether they missed something.

UnreadDivider

The rule: a hairline broken for a centred label, and it only appears when something sits above it. The label is NEW in coral-deep, inset from the rule by bubble.insetHorizontal either side, in the same vertical furniture a day break uses.

Coral-deep, in both schemes, because a role takes one token. Full coral clears the text bar on the dark ground (6.14:1) and fails it badly on the light one (2.68:1), so Feather alone forces the choice and Low flame follows it rather than running a second colour for the same word. This is the same substitution the AgentScreen's live dot and the admin icon's tick already make, for the same reason: the coral family keeps the identity, the depth buys the contrast.

The hairline is not load-bearing. It is one ink at one opacity, so it resolves to #E2E4E7 over the Feather ground (1.22:1) and #2F3540 over Low flame (1.36:1), which is a texture rather than a signal. The label is what carries the meaning, which is exactly why the label is held to the 4.5 body bar rather than the 3.0 a mark would get. Both numbers are claimed, so a future rule that tried to do the telling on its own would have to say so out loud.

ActivityLine

The rule: something that happened gets the day break's treatment, never a card. Same 12.5px, same muted, same space above and below. These are the thread's own events rather than messages, so they are not bubbles, they have no side, and they carry no control: a line that needs a button is a card and belongs with the cards above.

The wording is the component. “Routine created”, “Ada called you”, “3 messages with Cash”: a fact in the fewest words that still say who did it, with no verb tense a member has to decode and no exclamation anywhere.

InlineCode

The rule: monospace on a tinted plate with a 1px edge, and the edge is what draws the plate. The fill is the mark ink at 0.14 and measures 1.22:1 against the bubble: a tint, not a boundary. That is exactly why the edge cannot be the quiet one. It is the only measurable thing there, so it takes the same 0.7 every other enclosing mark in the thread takes. Inline the plate takes half a bubble inset either side and no vertical padding at all, so a sentence with three identifiers in it still sits on the 26px line. A fenced block takes the bubble's own insets and scrolls sideways rather than wrapping, because a wrapped command is a command somebody will mistype.

every weekday 07:00
  brief: calendar, weather, flights

every weekday 07:00
  brief: calendar, weather, flights

The plate and its edge come off ONE ink now. Until 2026-09-14 the fill was the quiet wash and the edge was the page's hairline: two unrelated tokens, neither chosen against the surface the plate actually sits on, and the edge measuring 1.21:1. Both are muted now, at 0.14 and 0.7, so the plate cannot end up tinted one way and outlined another.

DraftCard

The rule: she drafts, the member sends, and the card is the draft as it sits in his own mailbox. This is the app's DraftCard (MAR-173 and MAR-174), state for state. The head is a pen on a quiet tile, Draft reply, and a caption naming who and what (“To … · Re: …”, never “Re: Re:”), which wraps rather than cuts because the address is the fact a member checks before opening. Her text sits in a band under a hairline, cut to 6 lines or 360 characters at a word, with Read all in the working accent; a remainder under 40 characters is shown rather than hidden. The foot is a quiet Change it, which puts this message in the composer's reply quote, and the ONE ink primary, Open in Gmail (or Outlook), which leaves for the draft in his mail client. It takes the full 640px, because a card is a document and a bubble is a sentence.

That pair is drawn at measure.maxBubble, at true width, so it stacks its two schemes for the same reason the bubble at the cap does: two 640px cards do not fit across this column, and a specimen clipped at the edge of a scroller is a specimen half-seen.

The replaced record (MAR-174). When the member asks for a change and she writes a new draft, the earlier card stays as the thread's record of what she wrote: its head and her words, 3 lines of them and muted, and in place of the foot a quiet strip, Replaced by the draft below, with an arrow pointing at the newer card. Both verbs go: Open would lead to the draft he has been told is the old one, and Change it would rewrite what is already superseded. It must read LIGHTER than the live card below it, never wear the quiet button's face.

NewMessagesPill

The rule: one component, two anchors, and the arrow is the only difference. Unread behind you gives a pill at the top with an up arrow that scrolls to the unread divider; new messages arriving below while you read history give a pill at the bottom with a down arrow. The count is the same number either way, so the words are the same too. It floats 12px in from the edge it anchors to, centred in the thread column, and stands 28px tall at radius 14, which is exactly half its own height and therefore a capsule. It is content width rather than a fixed one: 9px leading, the arrow, 9px, the label, 9px, the ✕ on a 16px hit box, 10px trailing.

Ink filled with ground text. Not confirm, which on this system means confirmed and succeeded and live, and would be claiming something untrue about messages nobody has read. Not coral, which the thread has already spent on the composer's send disc. Ink is the only fill left that a floating object can carry without borrowing a meaning, and it clears everything it might float over by a wide margin.

There is no count on the tab bar to keep this in step with. The pill is the thread's own statement about the thread you are looking at, which is why it carries a number and not a dot: “you have not read nine of these” is a different sentence from “something happened here”, and only one of them is worth interrupting a read for.

LongMessage

The rule: his long message folds, hers never does. A text message of the member’s own that is taller than 14 lines of body is clipped to exactly 14 lines, the last 2.5 of them fade into the bubble’s own fill, and Show more with a chevron sits bottom-left inside the bubble, on the text’s own left edge. One tap opens it in place and the control becomes Show less, the same chevron turned over. It is Grok Bot’s pattern, asked for by Cédric on 2026-09-26 because a wall of his own text pushed the thread off the screen, and it shipped in the app as #324.

The fade is the bubble’s own fill, transparent at the top and opaque at the bottom over 65px: memberBubble, or a flavour’s own member fill wherever a flavour sets one. No new colour, no grey, no hard line: a fade in any other colour is a visible band across his words. The control is the body’s ink at 600, the body’s own size, never a quiet tone and never onCoral, because nothing quiet goes inside his bubble. It is a real button with aria-expanded and the clip it controls; opening it does not animate the height (instant, as on WhatsApp), only the chevron turns. The clipped text stays in the tree, so a screen reader, copy, a reply quote and the long-press menu all act on the whole message. On the web the clip is overflow: clip, not hidden: a hidden box is still a scroll container, and find-in-page or a focused link in the hidden lines would scroll the top of the message away under a fade that no longer lines up. The expansion is per message and in memory: it survives the list recycling a row, not a restart.

A finished action card

The rule, for every action card in the thread: once its work is finished, the title stays in ink and every explanatory line steps back to muted. Finished means a call ended or failed, or went unavailable and its report has landed; for other cards, approved, dismissed or done. The explanatory lines are the brief, the report, the last transcript line and any consequence text. Labels keep their own tone (the speaker’s name stays confirm, the status pill says Ended in its own quiet pair), and so do the controls. While the card is live nothing changes: the transcript line is news and stays ink. The point is that a finished card stops competing with the live messages around it while its title stays scannable. It is Grok Bot’s dismissed “Action approved” card, picked by Cédric as variant B of three on 2026-09-26, and CallCard is its first instance (the app’s #319).