ui-theme

---
name: ui-theme
description: The Greenroom design system — palette, typography, composition rules, component patterns, and anti-patterns extracted from the v3 dashboard work. Apply when building or implementing any UI in this codebase.
license: MIT
---

# Greenroom — UI Theme

This skill encodes the visual design system used by the agentic-collab v3 dashboard. The
authoritative live mock is `docs/v3-dashboard-design.html`; this skill captures the
**reusable bits** so future UI work stays consistent without re-discovering the rules.

## When this skill is invoked

1. **Always read `REFERENCE.md` first.** It contains the full design system: tokens, type,
   composition rules, component patterns, status-color semantics, and anti-patterns. Most
   questions are answered in there directly.

2. **Use the live mock as the source of truth for visuals.** `docs/v3-dashboard-design.html`
   is ~6000 lines of fully-worked HTML+CSS. When `REFERENCE.md` describes a pattern, the
   mock is where the concrete implementation lives. For exact CSS, copy from the mock.

3. **Apply the rules to the task at hand.** This skill is consulted when:
   - Building a new UI surface in this codebase
   - Implementing the v3 mock as real `src/dashboard/` code
   - Reviewing a UI change for theme consistency
   - Answering "what color / typography / pattern should X use?"

4. **Never describe Greenroom from training data.** It's a project-specific system. If
   you're unsure, read `REFERENCE.md` again rather than guessing.

## What this skill is NOT for

- Iterating on the design mock itself — use the `/design` skill for that. `/design` edits
  `docs/v3-dashboard-design.html`; `/ui-theme` is the read-only reference.
- General CSS or web-dev advice unrelated to this project's theme.

## Hard rules (the discipline that makes it cohere)

- **One clay moment per surface.** Clay (`#b85a3a`) is reserved for the primary action
  button and at most one other accent point (e.g., the "now" bar in a histogram). Never
  use it for body text, borders on cards, badge fills, or multiple action buttons.
- **No card chrome on row-list pages.** Rows are separated by `--rule-soft` borders +
  hover-paper-2 background. Avoid stacked card backgrounds.
- **Typographic-forward forms.** Borderless inputs with a bottom rule that strengthens to
  ink on focus. Mono uppercase labels in a 130px left column. No pill-shaped boxes.
- **No decorative borders.** No dashed/dotted (two narrow exceptions documented in
  `REFERENCE.md`).
- **No ambient motion.** No pulses, scanning rows, ticker tape, animated dots. Transitions
  ≤200ms; page-load fade and composer caret blink are allowed.
- **Status as a small colored dot, not a badge.** 5-7px circle, color-keyed (see
  `REFERENCE.md#status-semantics`).

## Files

- `REFERENCE.md` — the design system (this is where 95% of the content lives)
- `../design/REFERENCE.md` — per-screen design decisions for the v3 mock (companion)
- `../../../docs/v3-dashboard-design.html` — the authoritative live mock