Skip to content

Display emphasis — the dimmed tail

When a display headline carries a noun-then-adverb shape — the action, then the way it happens — demote the adverb to var(--fg-soft). The promise stays inked at full weight; the qualifier reads as a quiet beat after it.

One demotion per headline. Never on body or .h-3.

Rendered

Start a company, instantly.

Sign every document, in seconds.

Move money automatically.

Markup

<!-- one demotion, last clause, opt-in -->
<h1 class="h-display">
  Start a company,<br>
  <span class="dim">instantly.</span>
</h1>

Dark theme

[data-theme="dark"] .h-display .dim,
[data-theme="dark"] .h-1 .dim {
  color: var(--text-soft, #8B8175);
}

Rules

Do — demote the qualifier. One closing word, phrase, or comma-set adverb. Wraps to its own line at display sizes.
Don't — dim the noun. The action stays at full ink — softening it kills the promise.
Do — use only on .h-display and .h-1. H2/H3 stay one-tone; the rhythm depends on display being the only place this lives.
Don't — combine with color accents. No peach + dim. The dim is the accent.

On this page