Skip to content

PRIMITIVE

Placeholder

An empty media box that tells you what belongs in it. Build and review a layout before a single asset arrives, and get an empty state somebody designed rather than a grey rectangle.

Both tints

Alternate the warm tint when three cool ones would otherwise run together.

PLACEHOLDER 4:3
FIG 01The cool tint, and its caption ink.
PLACEHOLDER 4:3
FIG 02The warm tint. Both change together.
HTML
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px; width:100%">
  <figure style="margin:0; display:flex; flex-direction:column; gap:14px">
    <div class="placeholder" style="--ratio:4/3">
      <span class="placeholder-kicker">PLACEHOLDER</span>
      <span class="placeholder-note">4:3</span>
    </div>
    <figcaption class="placeholder-caption">
      <span class="placeholder-caption-index">FIG 01</span>The cool tint, and its caption ink.
    </figcaption>
  </figure>
  <figure style="margin:0; display:flex; flex-direction:column; gap:14px">
    <div class="placeholder placeholder-warm" style="--ratio:4/3">
      <span class="placeholder-kicker">PLACEHOLDER</span>
      <span class="placeholder-note">4:3</span>
    </div>
    <figcaption class="placeholder-caption">
      <span class="placeholder-caption-index">FIG 02</span>The warm tint. Both change together.
    </figcaption>
  </figure>
</div>

Reference

Read from primitives/placeholder.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.placeholder.placeholder-warm.placeholder-kicker.placeholder-note.placeholder-caption.placeholder-caption-index
READS--ds-accent--ds-caption-on-cool--ds-caption-on-warm--ds-font-body--ds-font-display--ds-gap--ds-gap-inline--ds-hairline--ds-ink-faint--ds-radius-frame--ds-rule--ds-text-caption--ds-text-label--ds-text-small--ds-tint-cool--ds-tint-warm--ds-track-label--ds-track-meta

Notes

THE RULE THIS PRIMITIVE EXISTS TO ENFORCE

A caption colour travels with the surface it sits on. That is why the tints ship in pairs — tint-cool with caption-on-cool, tint-warm with caption-on-warm — and why .placeholder-warm reassigns both in one rule.

The kicker and the note state no colour of their own; they inherit it from the box. That is what makes the pairing impossible to get half right. A caller who sets a tint and then picks a caption colour by hand has broken the rule and will fail contrast on one of the two surfaces.

ASPECT RATIO

--ratio takes an aspect-ratio expression, not a number: 16/9, 4/5, 21/9. It defaults to 16/9.