Tile
A tile is a rounded square that holds an asset to represent something.
When to use
- Standing in for a thing that has no image, such as a project or a space.
- A row of items that people need to tell apart at a glance, and that have no icons of their own.
- Beside a name. The tile helps people spot the item, and the name says what it is.
When not to use
- For a person. Use an avatar, which is round so people and things look different.
- For a content type, such as a bug or a story. Use an object icon.
- Instead of a name. A coloured square with a letter is a visual shortcut. It does not replace the name.
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 tiles with the same letter differ only by colour, which people have to learn.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.