The fade for a whole element that should read as unavailable, such as a disabled picture.
Levels
disabled50%
ghost10%
dim20%
muted70%
faded50%
Guidelines
Purpose
The fade applied to a whole element when it should read as unavailable. Opacity is a last resort. When the intent is "less prominent", a subtle text color or a subtle surface almost always reads cleaner; opacity is right only when the entire element — glyph, label, chrome — should fade together, and disabled media is the case the system currently names.
How it is structured
Deliberately small: the fade for disabled media, and three see-through levels, faint, light and strong, for a hint of a fill, dimmed media and content set back but still readable. A new fade is added only when something needs it.
Tiers
Primitive only, and it reaches CSS. It has no semantic tier because it is already named by its use; if a second use arrives, that is the moment to decide whether a semantic layer is warranted.
Usage rules
Do
- Fade disabled images and media with the disabled fade.
- Pair any disabled fade with the real disabled state — the attribute or the pointer rule — so that what looks unavailable is unavailable. Disabled styling must stay perceivable and understandable, and a fade alone is neither.
Don't
- Write a literal opacity in component CSS. The conformance checker rejects it.
- Fade text to make it secondary. Use the subtle text roles; faded text over a colored surface produces an off-brand mid-tone that no token names.
- Fade a disabled control. Controls have their own disabled colors in the action and border groups, which keep the label readable.
Tokens
5 tokens in 1 group. Open a group to see its tokens. The button beside a CSS name copies it, ready to paste; open a row for what the token is for and which components read it.
Scale
| Token | Value | CSS |
|---|---|---|
disabled | 0.5 | --smbk-opacity-disabled |
Fade for disabled pictures and media (50%).
| ||
ghost | 0.1 | --smbk-opacity-ghost |
The faintest see-through level: a hint of a fill. 10%.
| ||
dim | 0.2 | --smbk-opacity-dim |
A light see-through level: dimmed media, a soft tint. 20%.
| ||
muted | 0.7 | --smbk-opacity-muted |
A strong see-through level: content set back but still readable. 70%.
| ||
faded | 0.5 | --smbk-opacity-faded |
Half see-through: the parts of a chart not pointed at, set back so the one pointed at stands out. 50%.
| ||