Flux
Flux is text that shows the model wrote it. It flows in pigment while it waits for a person, settles into still pigment once accepted, and never turns into ink.
Tap Accept and the pigment stops flowing but stays pigment. Undo from the murmur to see it flow again.
Anatomy
When to use
- Any text the model wrote that a person will read, send or sign: answers, summaries, replies, clauses.
- Inline, inside a person’s own sentence, when the model completed it.
- Not for the interface’s own words, such as labels and help text. Those are lapis and ink.
Behaviour
| State | Looks like | Means |
|---|---|---|
| Writing | pigment behind a steady model caret | The model is still writing |
| Flowing | pigment, flowing | Written, waiting for a person |
| Still | pigment, still | A person accepted it |
| Edited | Ink where the person changed words | The person rewrote part of it |
Best practices
- Mark model text from its first word, not after it finishes.
- Keep acceptance reversible for as long as the text hasn’t been sent.
- When a person edits model text, turn only the edited words into ink.
- Use a weight of 560 or more, so the gradient stays legible.
Accessibility
- Pair the colour with words: the specimen’s status reads “Model-written · awaiting you”.
- The Accept control is a toggle button with
aria-pressed. - With Still on, flowing pigment stops but keeps its gradient, so authorship remains visible.
Build it
Flux is pure CSS. Wrap model text in a span with the flux prov classes; add is-accepted when a person accepts it.
<span class="flux prov">4.1% ahead of budget</span>
<span class="flux prov is-accepted">…accepted…</span>- Flow
- One cycle per beat (2.4 s), linear
- Weight
- 560 to 600 in body text
- Tokens
--pigment,--beat- Off-screen
- Paused