Tags

Base class

Tags are small, bordered labels — always uppercase, always monospace. They carry category, type, or status information without competing with body content.

.tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 0;
  padding: 4px 10px;
}

---

Variants

Default

Bordered with no fill. Uses the current text color for border.

tag (default)

Reading Signal Application

⎘ Copy

<span class="tag">Reading</span>
<span class="tag">Signal</span>
<span class="tag">Application</span>

Accent

Filled blue. For primary category labels and active filter states.

tag--accent

Archive Featured

⎘ Copy

<span class="tag tag--accent">Archive</span>
<span class="tag tag--accent">Featured</span>

Action

Filled vermilion. For status indicators, warnings, and new/live markers.

tag--action

New Live

⎘ Copy

<span class="tag tag--action">New</span>
<span class="tag tag--action">Live</span>

Muted

50% opacity. For secondary labels, optional metadata, and disabled states.

tag--muted

Draft Archived

⎘ Copy

<span class="tag tag--muted">Draft</span>
<span class="tag tag--muted">Archived</span>

Inverse

For use on dark backgrounds. Border and text use a lightened blue-white tint.

tag--inv (on dark)

Upcoming Issue 02

⎘ Copy

<span class="tag tag--inv">Upcoming</span>
<span class="tag tag--inv">Issue 02</span>

---

All variants together

All tag variants

Default Accent Action Muted

⎘ Copy

<span class="tag">Default</span>
<span class="tag tag--accent">Accent</span>
<span class="tag tag--action">Action</span>
<span class="tag tag--muted">Muted</span>

---

Common tag content patterns

Tags in the hs108 content system carry four types of information:

Pattern	Content	Example
Archive type	The type of archive entry	Reading, Signal, Application, Calibration
Journal type	The type of journal entry	Reflection, Decision, Weekly, Project Log
Status	Publication or draft state	Published, Draft, Upcoming
Category	Thematic grouping	Brand, Type, Systems

---

Usage rules

• One accent tag per element. Multiple .tag--accent in a cluster looks cluttered.
• Action tags signal urgency. Don’t use vermilion for neutral categorisation.
• Muted = not primary. If a tag is muted, the reader should be able to ignore it without losing meaning.
• Keep labels to one word. Two words maximum. If it needs three words, it’s a description, not a tag.