The Tag family brand

The mark

Angle brackets around a slash: a closing tag, on a violet square. It reads the same in light and dark mode.

The Tag family mark: white angle brackets and a slash on a violet rounded square — mark.svg, 32 by 32, also the favicon.

Color and type

Token	Value	Use
`--color-primary`	`#7c3aed`	The mark, buttons, links, and focus rings. TagBrush.css darkens or lightens links as needed to stay readable.
`--color-on-primary`	`#ffffff`	Text on violet: 5.7:1.
Neutrals	Tinted with the violet	Background, surface, text, and borders, from TagBrush.css's formulas.
`--font-weight-heading`	`700`	Headings, in the system font.
`--border-radius`	`0.5rem`	Buttons, fields, cards, and code blocks.

Use the theme

Link it after TagBrush.css. It holds only TagBrush.css variables and the family bar's few rules.

<link rel="icon" href="https://kovirlabs.github.io/tagstack/mark.svg" type="image/svg+xml">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagbrush@1/tagbrush.min.css">
<link rel="stylesheet" href="https://kovirlabs.github.io/tagstack/brand.css">

A page that has to show TagBrush.css's default look, like TagBrush.css's own demo, adds data-brand="chrome" to <html>: only the family bar and the footer carry the brand.

The family bar

The first thing in each site's <header>, before the site's own navigation. Mark the current site with aria-current="page".

<nav aria-label="Tag family" data-brand="bar">
  <a href="https://kovirlabs.github.io/tagstack/"><img src="https://kovirlabs.github.io/tagstack/mark.svg" alt="" width="24" height="24">Tag family</a>
  <ul>
    <li><a href="https://kovirlabs.github.io/tagbrush/">TagBrush.css</a></li>
    <li><a href="https://kovirlabs.github.io/tagaction/">TagAction</a></li>
    <li><a href="https://kovirlabs.github.io/tagcheck/">TagCheck</a></li>
    <li><a href="https://kovirlabs.github.io/tagkit/">TagKit</a></li>
    <li><a href="https://github.com/kovirlabs/REPO">GitHub</a></li>
  </ul>
</nav>

The footer

The site's own line first, then the family line.

<footer data-brand="footer">
  <p>…about this site…</p>
  <p>Part of the <a href="https://kovirlabs.github.io/tagstack/">Tag family</a> from Kovir Labs.</p>
</footer>

Keep to

Write the name as Tag family, and each tool as TagBrush.css, TagAction, TagCheck, TagKit.
No classes for the brand: it styles data-brand elements and TagBrush.css variables only, so every family page still passes TagCheck.
Don't recolor the mark. On a photo or a busy background, put it on a plain surface.