Signal — Dark Dev-Tool Landing
A dark-first landing page for developer tools and CLIs, built around one signature: the annotated regression trace — a terminal transcript that names the commit that caused the number.
- 45 / 45
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs — install, use, customizepages, composed from 12 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Signal — deploy-aware observability/
- site-header
- terminal-hero
- integrations
- feature-grid
- changelog-section
- +2
Pricing — a working estimator, then the price model/pricing- site-header
- cost-estimator
- pricing-plans
- cta
- site-footer
Changelog — every release, dated and attributed/changelog- site-header
- changelog-section
- cta
- site-footer
Docs — quickstart/docs- site-header
- ui/page-hero
- docs-shell
- site-footer
CLI reference — every sgl command and flag/cli- site-header
- ui/terminal-window
- docs-shell
- site-footer
Contact — engineering addresses, response times, legal/contact- site-header
- contact-card
- cta
- site-footer
The parts — tokens, sections, primitives/components- site-header
- terminal-hero
- integrations
- feature-grid
- pricing-plans
- +15
Six routes ship a whole company site: home, pricing with a working cost estimator, quickstart, CLI reference, changelog with a live tag filter, and contact carrying the engineering addresses and the legal minimum. Every one of them opens with a different device — the estimator, the tag filter, an `sgl --help` terminal, the four contact routes — rather than the same heading-and-stats masthead five times. Interactions are real, not screenshots: a light/dark toggle in the navbar, copy buttons on every command, per-tag changelog filtering, and an estimator that does the per-gigabyte arithmetic in front of you. Ships IBM Plex Sans and IBM Plex Mono self-hosted (OFL), a 1.200 modular type scale with every size on a token, a steel-cyan palette with a true amber second hue that lets the changelog say breaking, a /components styleguide listing all 45 tokens per mode, and a light variant that is a designed variant rather than a token flip — every foreground/background pair in both modes verified against WCAG AA by computation. Every rendered href resolves to a page or an anchor the theme actually ships.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project.
terminal-hero
src/components/terminal-hero.tsx
Version badge, headline, install command row and the signature terminal: an annotated `sgl watch` transcript with a brand title bar and a status line, overhanging the container to the right. Sits over a generated contour field that is masked, not coloured, so it re-tints with --primary
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.2.
Signal
A dark-first landing page for developer tools and CLIs, built around one signature: the annotated regression trace — a terminal transcript that names the commit that caused the number.
const { open, close } = useLedger("2026-03") // 0123456789
- text
- IBM Plex Sans
- mono
- IBM Plex Mono
No separate display face: the headings are set in the text face.
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
agent files in the zip
Unzip it and run it, or install it into a project you already have. Either way the theme arrives with the instructions an agent needs to extend it without guessing at your conventions.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills
- add-pageCompose a new Signal page from existing sections
- add-sectionAdd a new section to Signal that matches its existing patterns
- check-qualityRun Signal's own gate locally
- rebrandApply a buyer's brand to Signal
- theme.jsontokens, pages and components, machine readable
- src/components/12 sections, 12 primitives
- src/app/7 pages, styleguide included
activity
- v2.2 — /pricing with a real cost estimator; /contact; mode toggletoday
- v2.1 — CLI reference page; every link goes where its label saystoday
- v2.0 — Plex type layer, steel/amber palette, designed light modetoday
- v1.1 — lucide icon system + polish passtoday
- v1.0 — terminal hero with real code samplestoday
- feature grid a/b variantin progress
- status page sectionplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent files are on the plate above.
comments
Ask about the theme before you buy, or say what you did with it after.
