Tile
A tile is a rounded square that takes an asset and represents a noun.
When to use
- Standing in for a thing that has no image, such as a project or a space.
- A row of items that need to be told apart at a glance and have no icons of their own.
- Beside a name, where the tile is the quick handle and the name is the truth.
When not to use
- For a person. That is an avatar, which is round for exactly this reason.
- For a content type such as a bug or a story. That is an object icon.
- Instead of a name. A coloured square with a letter in it is a shortcut, not an identity.
Guidance
Do
BBilling
Show the tile beside the name it stands for, and take the letter from that name.
Don't
BBB
Do not rely on colour to tell identical tiles apart. Three blue letters differ only by a colour the reader has to learn.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| tile | neutral | 0.042Ambient | 0.066Substrate |
| tile--blue | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| tile--green | accent-green-subtler | 0.081Ambient | 0.172Ambient |
| tile--purple | accent-purple-subtler | 0.091Ambient | 0.127Ambient |
| tile--red | accent-red-subtler | 0.092Ambient | 0.124Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.