# Swatch A sample of a color, with the ink line around it, next to its name. ## Playground ```html accent ``` ## When to use - To show a color in documentation: the color roles, a token table. ## When not to use - **To tell a status** in an interface: the Tag, with icon and word. ## Examples ### Next to the name The sample is the size of the text and follows the theme: it changes on its own from day to night. Show code ```html accent ``` ## Accessibility - The sample goes along (it is decoration); the color’s name, next to it, is what gets read. ## Attributes Attribute Values What for `class="feitio-swatch"` required The little square with the ink line. `--swatch` a Feitio color The sample’s color.