Official provides twelve bg-pattern-* shortcuts. They paint a background
image without choosing the surface color, spacing, text style, or interaction.
Enable @presets "standard,official"; and compose each pattern with the
application’s surface and content utilities.
<section class="bg-pattern-graph-paper $bg-pattern-primary-color:$color-neutral-500 bg-color:neutral-100 text-color:neutral-950 p:6">
<h2 class="m:0 text-4x">Release notes</h2>
</section>| Pattern | Geometry |
|---|---|
bg-pattern-checkerboard |
Alternating squares in a 64px tile |
bg-pattern-checkerboard-grid |
Centered 1px guides over a checkerboard |
bg-pattern-crosshatch-art |
Four crossing hatch angles |
bg-pattern-diagonal-stripes |
Equal 2px diagonal bands |
bg-pattern-dense-hatch |
A 1px hatch every 5px |
bg-pattern-diagonal |
A 1px hatch at 45 degrees |
bg-pattern-reverse-diagonal |
A 1px hatch at minus 45 degrees |
bg-pattern-dot-grid |
Regular points in a 16px tile |
bg-pattern-fine-grain |
Two offset sets of specks in 6px tiles |
bg-pattern-graph-paper |
Centered 1px guides in a 20px tile |
bg-pattern-line-grid |
A horizontal 1px line every 24px |
bg-pattern-sparse-grain |
Unevenly spaced points in 72px and 96px tiles |
--bg-pattern-primary-color supplies the first ink, falling back to
currentColor. --bg-pattern-neutral-color supplies the second ink, falling
back to the first. Set them locally with Standard’s variable utilities:
<div class="bg-pattern-checkerboard-grid $bg-pattern-primary-color:$color-primary-700 $bg-pattern-neutral-color:$color-neutral-500 bg-color:neutral-100 text-color:neutral-950 p:6">
<p class="m:0">Two inks share one surface.</p>
</div>There is no base bg-pattern class or bg-pattern:* utility. Transparent
regions preserve the surface below. Check text and focus contrast in light,
dark, and forced colors; a pattern remains decoration and conveys no state.