COMPONENT
Inscription
One short line, set apart from the prose around it. A dedication, a colophon, a thank-you — larger than the text it sits with, in the accent, and led by a rule so the eye reads it as an aside rather than as the next paragraph.
A line, and a mark if you want one
The mark is yours and arrives in the accent on its own, because icon fills with currentcolor. Nothing here has an opinion about hearts.
for my nephews
set in Commit Mono, on a laptop, mostly at night
<!-- The mark is the caller's and arrives in the accent on its own, because
`icon` fills with `currentcolor`. The dash is drawn rather than typed —
this design does not put an em dash in anybody's copy. -->
<div class="flow">
<p class="inscription">
for my nephews
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 20.5C5.5 15.9 3 12.4 3 9.2A5.2 5.2 0 0 1 12 6a5.2 5.2 0 0 1 9 3.2c0 3.2-2.5 6.7-9 11.3Z"></path>
</svg>
</p>
<p class="inscription">set in Commit Mono, on a laptop, mostly at night</p>
</div>Composed with typewriter
Scroll it into view. The whole line draws itself left to right — the rule, then the words, then the mark.
for my nephews
<!-- One element, so the whole line draws itself left to right: the rule, then
the words, then the mark. Put the words in an inner span and they would
type while the dash and the heart stood there already. -->
<p class="inscription typewriter" x-ds-reveal>
for my nephews
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 20.5C5.5 15.9 3 12.4 3 9.2A5.2 5.2 0 0 1 12 6a5.2 5.2 0 0 1 9 3.2c0 3.2-2.5 6.7-9 11.3Z"></path>
</svg>
</p>Reference
Read from components/inscription.css when this page was built, so it cannot fall behind the stylesheet.
.inscription--inscription-size — falls back to --ds-inscription-size--inscription-dash — falls back to --ds-rule-basis--ds-accent--ds-font-display--ds-gap--ds-hairline--ds-track-snug--ds-weight-displayNotes
Count them: every accent-coloured class in this library is a label — section-head-kicker, triptych-index, notice-kind, eleven more — and every one of them sits at --ds-text-label or below.
The single exception is a blockquote inside prose, at h3 — and that rule matches only unclassed elements, so nothing carrying a class can reach it. A consumer wanting a line that was accented and big had nothing to compose and no way to build one either, because a site may not paint. Found by one asking for exactly that, which is the way these gaps are always found.
An em dash in the words would be a character in somebody's copy, and this design has one rule about those it does not bend. So it is a ::before: a caller writes the words and nothing else, and the mark cannot be forgotten on the second instance.
Its length is --ds-rule-basis, which already answers "how long is a decorative rule beside a label" for the section head. A second token holding 48px would be a second place for one decision to drift from.
Typewriter masks a fraction of its own box. Put the words in an inner span and they type while the dash and the mark stand there already — the line arrives in two pieces. Keeping it one element is what makes the whole thing draw itself, which is the effect anybody reaching for both actually wants.