Quiet line

The exit. The small paragraph under a screen's main action that offers the way out: "Do this later", "Can't find it? Add it by hand", "Use a different email". It looks like a muted line and it is not one, and the difference is the point of this page.

Atom12 grey pages1 form, no axes3 states, both themes

Anatomy

One zone and one text slot, which is what makes it an atom. Everything below is drawn by design/system/components/quiet-line.css through the same entry point a product screen loads, so this page cannot drift from the screens. The class name is the one the product writes today and it does not change at step 6: .quiet is one of the few names the consolidation kept.

Can't find it? Add it by hand and fill the details yourself.

Do this later

.quiet 13px, and no colour declaration at all. It inherits the body ink from base.css, so it renders at --text-primary, one tier ABOVE the muted family
margin 0 0 22px, the gap to whatever follows, which on most of its screens is the end of the screen
.quiet a the way onward, ink with a hairline underline. Every quiet line in the product contains one
no > a rule the 44px target floor is deliberately absent here, and the reason is in the states block below

Variants and sizes

One form and no axes. The inventory records none, the stylesheet declares none, and the census measured four instances of .quiet a with one value on every property. There is no matrix to draw: a component that says the same thing on twelve screens is finished, and drawing an empty grid for it would suggest the variants are missing rather than unnecessary.

What DOES vary is the markup a screen wraps around it, and it is worth a table because it changes the size of the target rather than the look of the line.

Markup shape	Grey pages	What the anchor measures	Why
`<p class="quiet">` sentence with a link inside it	4	the height of its line	Running text. A 44px box forced into a sentence pulls the paragraph's lines apart, measured at 100px against 75px on a four line paragraph
`<p class="quiet"><a>` paragraph that IS the link	8	the same, and it should not	A standalone control under the target floor, on 8 of the 12 grey pages and 2 of the 4 coloured ones. CSS cannot tell it from a sentence that happens to contain a link, so the fix is markup and it belongs to a step that touches markup

No size axis, and that is a decision rather than an absence. Every quiet line in the product is 13px, on a phone and on a dashboard, inside a flow column and at the foot of a settings screen. It is the last thing a person reads before leaving a screen, and a smaller one would be a smaller door.

2026-08-18: one case the structure reaches perfectly

This component carries a written refusal of the 44px floor, and it is right: a quiet line's link is normally inside a sentence, and forcing a 44px box into running text pulls the paragraph apart - measured at stage 07, a four-line paragraph came out 100px instead of 75. It also logged the case it could not reach: <p class="quiet"><a>Do this later</a></p>, a paragraph whose only content is the link, which CSS cannot tell from a sentence that happens to contain one.

A quality sweep over all 57 coloured screens found a case that is NOT that one. Data and privacy carries <nav class="actions quiet"><a>Your sources</a>, and that anchor measured 86.97 by 21 with no padding: under the 44px floor and under WCAG 2.5.8's 24px besides. A nav.actions is a row of controls by definition and never a sentence, so the selector is exact and the exemption does not apply - 2.5.8 excuses a target "in a sentence or otherwise constrained by the line-height of non-target text", and a lone anchor in a control row is neither.

Padding and a matching negative margin, so the target is 44 and the layout is the layout it was. The border box grows to the floor and the margin box stays 21: the muted line's own answer to the same question with one more term. 21px is the measured line box of this link, named so the 11.5 is never read as a value somebody chose. Checked before it was written: the nearest other target on that screen is 53px away, so a 44px box overlaps nothing. Verified after, by box fingerprint over all 57 coloured pages at both widths: one box changed and it is this anchor, 21 tall to 44 tall, and nothing around it moved.

When to use it

A quiet line is where a person declines. It stands under the action a screen is asking for, and it says that not doing it is allowed: "Do this later" under Connect your bank, "Not now" under Add a source, "Use a different email" under a sign-in link that did not arrive. The product's audience is described in one line as skeptical about connecting a bank, and this component is that sentence's home. Twelve grey pages carry one, and every one of them is a screen where a person could get stuck.

It renders at ink, not muted, and that is the whole decision. A person who is stuck is the person least able to read small print, so the exit is never in the second tier. It sits one line away from a muted line on several screens (Add a Subscription has both), and the step between the two inks is the only thing telling a reader which of the two sentences is for them. Nothing else about the pair differs: the same 13px, the same family, the same underline under the link.

Its copy comes from voice/docs/microcopy.md, where "Do this later" is a single canonical line used on four screens rather than four variations of the same thought. It never apologises, never says "skip", and never asks a question the screen has already asked.

The rule, and the anti-rule

The way out, under the way on

Connect your bank

Do this later

One filled action and one quiet exit under it. The pair is the product's answer to a person who is not ready: the door stays open and nothing on the screen argues with them. Four grey screens carry exactly this pair, a filled button with a link-only quiet line under it.

Use a button instead

Start Tendd Pro Maybe later

When the two choices are genuinely equal, or when declining is itself a commitment the person will be asked to confirm, both are buttons. "Maybe later" is a button on the upgrade pair because it sits beside a purchase and closes a paid flow. A quiet line is the smaller of two unequal doors, not the second of two equal ones.

A sentence with the way onward in it

Want a copy first? Download your data is free and takes a moment.

On the delete confirmation, the quiet line is the one thing on the screen offering something other than deletion. Ink, because it has to be read; a link rather than a button, because the screen already has its two buttons and a third would flatten the difference between them.

Use a muted line instead

Nothing about your plan or your data changed. If it keeps happening, tell us and we will look at it.

A sentence ABOUT the screen rather than a way off it belongs to the muted line, at the second ink tier. The test is whether the sentence offers a destination. Reassurance, consequence, provenance and small print are all muted; only the exit is ink. Getting this backwards is how a screen ends up with its footnote louder than its escape hatch.

States

The line itself has none: it is text and not a target. Its link does, and the link is the reason the component exists, so it is a real state surface rather than a template cell. Three states rather than four: there is no disabled link in this product, because a link that cannot be followed is not rendered.

Rest, live

Can't find it? Add it by hand and fill the details yourself.

Do this later

The second one is the open defect, shown rather than described. Tab to it and measure it: it is the height of its own line, not 44px, because .quiet > a was absent from the target-size rule in kit.css, where .trust > a, .removal > a, .notice > a, .attention > a and .legal > a all appeared, and the system carried the absence across. That is not an oversight in this file: adding the floor here would put a 44px inline-flex box inside the first specimen's sentence and pull its lines apart. The two cases are told apart by structure everywhere else in the system (> a against p a), and this is the one shape the structure cannot reach, because a paragraph whose only content is a link is indistinguishable from a sentence that contains one. Step 6 renamed classes and did not close it, because .quiet has no row on the map. It stays logged here rather than papered over, and it closes with markup.

The three, in both themes

The states are described, not photographed. Founder's decision, 2026-08-11: the snapshot strip went from every page in this kit, 120 images across 18 pages. They were framed as measurements rather than illustrations, and that framing was honest, but the bill came due all session: a value moves, and every picture of it is quietly stale until somebody re-shoots it. A stale picture is worse than no picture, because it looks checked. What is left is what a picture never carried anyway: the state, and the token it reads. The resting component is live and interactive above, so hover it, tab to it, and read the value off the real thing rather than off a photograph of it.

Restlight

the line inherits --text-primary, the link reads --text-body, the underline --line-container

Restdark

the same three roles, the other half of each pair. The line stays a full tier above the muted family in both themes, which is the component's whole claim

Hoverlight

--text-action, on the ink and the underline together

Hoverdark

--text-action again, and here it is the LIGHTER petrol: contrast runs against the opposite ground, so the accent climbs the scale instead of descending it

Focus visiblelight

--line-selected, from base.css at specificity 0. 6.2:1 as a line

Focus visibledark

6.8:1. The ring is the only thing that finds this link for a keyboard user, which is exactly why the missing target floor above matters and is logged

Retake, and this is the whole recipe, because there is no node Playwright in this
repo and a command that does not run is worse than no command:

  serve the repo, then for theme in (none, data-theme="dark" on <html>):
    goto /design/kit/quiet-line.html
    move the pointer away  -> screenshot #live-rest -> screens/quiet-line-rest-<theme>.png
    hover #shot-inline     -> screenshot #live-rest -> screens/quiet-line-hover-<theme>.png
    focus #shot-alone by Tab, assert :focus-visible
                           -> screenshot #live-rest -> screens/quiet-line-focus-<theme>.png

Reached the way a person reaches them: a real pointer and a real Tab. NO FILE COMES OUT OF THIS TODAY, and the recipe is kept for the day one is
wanted rather than as a promise. The strip was removed by the founder on 2026-08-11 and the
states above are described instead, so there is nothing here for step 9 to diff. The earlier
wording said step 9 checks these files for a byte shift; it was written before the decision
and outlived it, which is the same freeze it was warning about, in prose.

The technical half

Reads	Which token	Growing from
the line itself	none of its own	inherited from `base.css`, which sets `--text-primary` on `body`. Declaring it here would look tidier and would be a new declaration in a stage whose one promise is that the product does not move
the link at rest	`--text-body`	`--slate`
the link under the pointer	`--text-action`	`--petrol`
the underline at rest	`--line-container`	`--hairline`. A line role on a text decoration, deliberately: a full strength rule under a link in a calm paragraph reads as emphasis
the focus ring	not declared here	`base.css` draws one ring for the system at specificity 0, with `:where()`, precisely so a text link never repeats it

Lives in design/system/components/quiet-line.css. Stands on 14 grey pages and 15 coloured ones. Coloured screens carrying it: Add a Subscription and its loading state, Guided Reveal, empty, Your current plan, Path Choice, Sign In and its two states, Connect Bank, error and cancelled, Add a source, Data and Privacy and its delete confirmation. Recounted 2026-08-17, when the counter learned to read this sentence as well as the one in the CSS header.

<p class="quiet">Can't find it? <a href="...">Add it by hand</a> and fill the details yourself.</p>
<p class="quiet"><a href="...">Do this later</a></p>

Drawn by design/system/components/quiet-line.css through ../system/index.css, the same entry point a product screen loads. Its place in the consolidation is in docs/inventory.md, where it is one of the atoms that stayed its own component rather than folding into the muted line; the four instances the browser measured before the system existed are in docs/census.md.