Pills you place

A pill is a small rounded label: a status, a category, a version. You make one by writing a label in braces inside single-backtick inline code:

The settlement engine is `{STABLE, c2}` as of this week.

This is the universal pill. It works on every slide, in every component, anywhere inline code can go: a heading, a sentence, a table cell, a footer. You choose everything about it. If you learn only one pill, learn this one.

Four statuses on one slide

Try this. Change c2 to c9 and watch only that row move. The slide has no variant class — the color travels with the value.

How to read a pill

`{QUEUED, tag, c7, lg}`
  ──┬───  ─┬─  ┬─  ┬
    │      │   │   └ size
    │      │   └ color slot
    │      └ shape
    └ the label, first in the braces

Everything after the label is a modifier, separated by commas inside the braces. Order does not matter: `{X, tag, c4, lg}` and `{X, lg, c4, tag}` are the same pill. Leave a modifier out and you get the default.

In the Studio’s editor, a comma after the label offers the next step: a shape, then a color, then a size, and only what the pill can still take.

Shape

Lattice draws all eight shapes itself, as a rounded corner or a cut-out on the pill’s own box. None of them is a font character, so a shape looks the same in the PDF, in the browser and in an export.

Modifier	Shape	Use it for
(none)	Capsule	The default status chip
`chip`	Softly rounded	A quieter label
`tag`	Square corners	A filed or categorical label
`tag-bordered`	Square, double stroke	Emphasis without spending a color
`circle`	Circle	A digit or a single character — `{3, circle}`
`chevron-right`	Right-pointing	Sequence, forward — `{STEP 2, chevron-right}`
`chevron-left`	Left-pointing	Sequence, back
`diamond`	Diamond	One or two characters — `{!, diamond}`

Every shape, side by side

Try this. Put a whole word in the circle. It either overflows or stretches until it stops reading as a circle — which is what lint:deck warns about.

Every shape is as tall as the capsule, so mixed shapes share one line and never push a row apart. That makes circle and diamond small: they hold one character, or a number up to two digits. {3}, {!} and {12} fit; {OK}, {WM} and {100} stretch the shape into an oval or a sliver. Put one of those in a circle or diamond and lint:deck warns, the editor underlines the pill, and the fix suggests tag or chip. The warning never stops a deck from rendering.

Color — `c1` … `c12`

The twelve color slots are numbered, not named. c1 is a light blue in the indaco theme and a khaki in burgundy, so a slot picks a distinct color, never a meaning.

Never write c2 because “green means good.” It is not green in every theme.

Use slots to tell categories apart: team A, team B, team C. You never do contrast math. Each slot takes the theme’s fill and edge for that category, plus a text color Lattice has already checked against the fill.

A pill cannot say “failing.” The pass, warn and fail colors are not among the twelve slots, on purpose. To say good, careful or bad, use a state mark or a status word instead. Picking whichever slot happens to look red in your theme breaks the moment someone switches themes.

Size — automatic, then `sm` and `lg`

A pill takes its size from the text around it, so you rarely type one. In a heading or other large text it is half the text’s size, so a title gets a bigger pill than a slide title. In body text, lists and table cells it is the usual metadata size. In a below-note, a caption or a footer it is small.

sm makes a pill smaller and lg larger than that automatic size. They scale the context, so lg in a footer is still a footer-sized pill, only bigger.

- Small `{MINOR, sm, c9}` · default `{NORMAL, c9}` · large `{MAJOR, lg, c9}`

When inline code should stay code

Plain inline code is left alone. `getUserId()`, `:root`, `--accent` and `{ ok, scene }` all render as code, exactly as typed. A pill needs a brace pair with no comma inside, which is what keeps `{ ok, scene }` looking like the code it is.

A mistake shows up as code, not as a wrong pill. An unknown or repeated modifier leaves the whole span literal: `{X, c13}` renders as the text {X, c13}. You catch it on the first read-through, which you would not if it quietly drew something.

Forcing literal text

Put a backslash in front:

`\{LIVE}`   renders as   {LIVE}
`\[x]`      renders as   [x]

The backslash only escapes something that would have become a pill or a mark, so a regular expression is safe: `\d+` and `\[a-z]` keep their backslash and render as typed.

Fenced and indented code blocks are never read as pills or marks. Only single-backtick inline code is.

Turning the grammar off for a whole deck

On a deck you did not write, `[x]` in a sentence may never have been meant to draw anything. One line of front matter turns pills and inline marks off for the whole deck:

---
inline-code: literal
---

For one slide, add inline-code-literal to its class: . In the Studio the same switch is Settings → Deck → General → Inline pills and marks. Turning it off writes the inline-code: literal line for you.

Use the backslash for one or two spans. Use the switch for a whole deck.

Braces make a pill, brackets make a mark

`{x}` would draw a capsule holding the letter x, which is almost never what an author reaching for a checkbox meant. So the four markers that read as a checkbox — x, -, a space and / — are reserved inside braces. They render as literal text, and lint:deck and the Studio’s Coach point you at the bracket form, `[x]`. `{!}` and `{?}` stay pills: an alert diamond and a help circle are established uses.

Brackets draw a state mark: The six answers.

Some components place a pill for you, from a word you write in the right slot: Pills a component places.

The same inline-code grammar draws word-sized charts too: `~{12 14 17}` is a spark.