Components / Foundations
Colors
Shared semantic colors and opt-in section tinting.
One coordinated color family.
Section tinting scopes existing surface, border and ink tokens.
A softer muted step for supporting copy.
An ordinary Card.
It inherits this section’s surface palette.
HTML
<section class="card is-padded is-tinted is-info color-example"><div class="content block"><h2 class="like-h3">One coordinated color family.</h2><p>Section tinting scopes existing surface, border and ink tokens.</p><p class="has-text-muted-light">A softer muted step for supporting copy.</p></div><article class="card"><div class="content"><h3 class="like-h4">An ordinary Card.</h3><p>It inherits this section’s surface palette.</p></div></article></section>Role palettes
primary
100
300
500
700
900
link
100
300
500
700
900
info
100
300
500
700
900
success
100
300
500
700
900
warning
100
300
500
700
900
danger
100
300
500
700
900
text
100
300
500
700
900
Options
| Class or attribute | What it does |
|---|---|
is-tinted + role | Scope a coordinated surface, border and ink family. |
has-text-muted-light | One softer muted ink step, derived from the local muted color; usable on individual text or inherited by a list. |
group.is-dark | Dark section with its own background, ink, link, muted text and surface tokens. |
is-primary/tertiary/link/info/success/warning/danger | Color roles for compatible components or individual item overrides. Tertiary is an independently themed brand color. |