Signal owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 2.3.0
- version
- 7
- pages
- 24
- components
- 45 × 2 modes
- tokens
- 4
- workflows
unzip signal-2.3.0.zip
cd signal-2.3.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 7 routes, the token file, 24 components and the agent kit.
See the priceInstall
Three ways in: the zip, the shadcn registry, or your agent over MCP.
The artifact is versioned and immutable, so the file you get is signal-2.3.0.zip. Unzip it, run the four commands above, and the site is on localhost:3000.
The link arrives with your license, and stays valid for every future version.
Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/signal/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/signal.jsonSignal is paid, so the registry answers 402 with the price, the purchase URL and both token tables. Only the source files are withheld.
A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.
Point any MCP client at https://tailthemes.com/api/mcp and your agent can read the manifest, both token tables and AGENTS.md before it touches a file.
the four toolsWhat unzips
One directory, laid out the way you would lay it out yourself.
every file
Three of these do the work: src/theme.css holds every design decision, AGENTS.md is the contract your agent reads first, and .claude/skills/ holds the 4 workflows it can run.
Screenshots are not in the download. They are generated by the publish pipeline and live on the listing, not in your project.
Using it
Every page is a plain component, and the tokens are scoped to one class.
- /Signal — deploy-aware observability7 sections
- /pricingPricing — a working estimator, then the price model5 sections
- /changelogChangelog — every release, dated and attributed4 sections
- /docsDocs — quickstart4 sections
- /cliCLI reference — every sgl command and flag4 sections
- /contactContact — engineering addresses, response times, legal4 sections
- /componentsThe parts — tokens, sections, primitives20 sections
Tokens are declared on .tt-signal as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-signal"> and everything inside picks them up.
Dark mode is a dark class on <html>. There is no second stylesheet and no dark: utility in the components.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 45 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
- Watch it land. Open /components. The styleguide reads every swatch, type step and radius live, so you see what the change did to the whole system at once.
- Re-check contrast. Run the check-quality workflow. The palette ships verified to WCAG AA in both modes and a rebrand should keep it there.
- .claude/skills/add-page
A page is pure composition. It imports sections, stacks them, and does nothing else — no data fetching, no page-level 'use client', no Next-specific APIs.
- .claude/skills/add-section
One section = one file in src/components/. Self-contained: it may import from src/components/ui/, and from nowhere else in the theme.
- .claude/skills/check-quality
Eleven checks. All of them are mechanical — none of them is "look at it and decide".
- .claude/skills/rebrand
Signal routes every colour through 18 variables per mode. A rebrand touches one file: src/theme.css.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/signal/ your copy has the project root instead.
For your agent
The theme brought its own rules, so nothing has to be reverse-engineered.
AGENTS.md is 707 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# AGENTS.md — Signal
Rules for any agent (or human) editing this theme. They are not style suggestions;
the publish gate and the extension skills in `.claude/skills/` assume them.
## The four declarations
Every extension of this theme holds to these. They are the theme, compressed.
| | |
|---|---|
| **Signature** | **The annotated regression trace** — a terminal transcript that names the commit that caused the number. Marker, labelled rows, next command. It runs on `/` (the hero), `/docs` (the payoff band), `/changelog` (the migration strip on breaking releases) and `/cli` (the payoff band prints what `sgl trace --deploy 8f21c4e` answers, which is the line the other two transcripts end on). **Four tellings, and 2.2.1 kept it at four across six routes**: `/pricing` and `/contact` carry none, because the signature answers *which commit caused this number* and neither a price nor a postcode has a commit. This is also why the cost estimator is built as a control and not as a terminal — see § "The sanctioned islands". A new route earns a telling only if it *closes* something the existing ones open; a transcript added for texture is decoration. "A terminal in the hero" is not the signature — Vercel, Bun, Deno, Railway, Warp and Turso all have one. The *argument rendered as output* is. **`/cli`'s `sgl --help` opener is the primitive, not a fifth telling**: a command index has no `▲` marker, no amber, no `→` next command and no fixture from the regression narrative. Count tellings by that shape, never by counting terminals. |
| **Sanctioned deviation** | **Dark is the default, not the override.** `:root` carries the dark table; `.light` is the variant. Every other theme in the catalog is the other way round. What it buys: a buyer who drops the zip in with no theme class gets the look they bought the screenshot for, and the identity is not one class away from being lost. Exactly one deviation — do not add a second. |
| **Register** | **Technical-plain** (`content-pass`). H1 at 9–12 words naming the mechanism; one clause; concrete nouns; no first-person plural. "Every deploy lands on the same timeline as the latency it moved", not "Find the deploy that moved your p95" — the second is quiet-declarative and is on record as a cadence collision with three other themes. |
| **Motion personality** | **Mechanical** (`motion-pass`). `steps()` is in character; feedback is crisp at **120ms `ease-out`**; the ambient slot is spent on the terminal cursor and nothing else. |The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.