{"slug":"signal","name":"Signal — Dark Dev-Tool Landing","version":"2.8.4","category":"saas landing","priceCents":2400,"summary":"For a CLI or observability tool: a dark-first developer tool landing page template with docs, a changelog, a cost estimator and an incident page. 8 routes.","description":"A dark-first developer tool landing template for CLIs, built around an annotated regression trace. Eight routes include a frontend-only incident detail with explicit UTC windows, sample counts, deploy evidence, failure groups, and a resolution receipt. Interactions include a light and dark toggle, copy controls, tag filtering, and cost arithmetic. IBM Plex Sans and Mono are self-hosted. The neutral structural palette, independent status families, application states, and all 73 tokens per mode are documented with computed flat-token contrast. Every rendered href resolves to a shipped page or anchor. A framework-free HTML template edition compiles the same eight routes to standalone documents, with the local IBM Plex faces and vanilla JavaScript in place of the React runtime.","tags":["developer tool landing page template","dark saas template","cli landing page template","tailwind-v4","dev-tools","dark-mode","changelog","ibm-plex"],"palette":{"bg":"#0b0c0d","surface":"#151719","accent":"#2cacbe","text":"#eceff1","line":"#30343a"},"darkMode":true,"pages":[{"path":"/","title":"Signal — deploy-aware observability","sections":["site-header","terminal-hero","incident-band","integrations","feature-grid","changelog-section","cta","site-footer"]},{"path":"/pricing","title":"Pricing — a working estimator, then the price model","sections":["site-header","cost-estimator","pricing-plans","faq","cta","site-footer"]},{"path":"/changelog","title":"Changelog — every release, dated and attributed","sections":["site-header","changelog-section","cta","site-footer"]},{"path":"/docs","title":"Docs — quickstart","sections":["site-header","ui/page-hero","docs-shell","site-footer"]},{"path":"/cli","title":"CLI reference — every sgl command and flag","sections":["site-header","ui/terminal-window","docs-shell","site-footer"]},{"path":"/contact","title":"Contact — engineering addresses, response times, legal","sections":["site-header","contact-card","cta","site-footer"]},{"path":"/incident","title":"Incident detail — evidence from deploy to resolution","sections":["site-header","incident-header","trace-comparison","deploy-diff","evidence-timeline","failure-cluster","resolution-receipt","site-footer"]},{"path":"/components","title":"The parts — tokens, sections, primitives","sections":["site-header","terminal-hero","incident-band","integrations","feature-grid","pricing-plans","cost-estimator","contact-card","changelog-section","incident-header","trace-comparison","deploy-diff","evidence-timeline","failure-cluster","resolution-receipt","cta","docs-shell","site-footer","ui/button","ui/badge","ui/theme-toggle","ui/copy-button","ui/code-block","ui/terminal-window","ui/section-heading","ui/page-hero","ui/field","ui/inline-code"]}],"components":[{"name":"site-header","file":"src/components/site-header.tsx","renders":"Sticky nav: wordmark, five links, a quiet non-interactive star-count chip, a light/dark icon toggle that writes to localStorage, sign-in and CTA, plus a JS-free <details> mobile menu"},{"name":"terminal-hero","file":"src/components/terminal-hero.tsx","renders":"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"},{"name":"incident-band","file":"src/components/incident-band.tsx","renders":"The hero's regression narrative as a drawn figure: a p95 latency series flat inside its 24h rolling envelope, a deploy marker, and the step up 24 seconds later. Inline SVG computed from two editable point arrays, token-coloured (rebrand-safe), server-rendered and static"},{"name":"integrations","file":"src/components/integrations.tsx","renders":"Full-bleed hairline grid of eight supported data sources, one lucide glyph each describing what the source does — the page container break"},{"name":"feature-grid","file":"src/components/feature-grid.tsx","renders":"Four feature cards carrying nine lines each of real YAML/TypeScript/shell, a named outcome quote, and three supporting cards that each name a command"},{"name":"changelog-section","file":"src/components/changelog-section.tsx","renders":"Dated release entries with icon-marked added/improved/fixed/breaking notes; breaking releases carry an `sgl migrate config` transcript strip. Three latest on home; on /changelog it opens the page behind a live per-tag filter with counts read off the log and closes on a full-bleed release-cadence band"},{"name":"pricing-plans","file":"src/components/pricing-plans.tsx","renders":"Three plans on one usage price model — free tier, per-gigabyte usage, and a self-hosted collector that leads with what differs rather than repeating the rate — then the definition of a billed gigabyte beside a ledger of the six things that are never metered"},{"name":"cost-estimator","file":"src/components/cost-estimator.tsx","renders":"Working cost estimator, and the section that opens /pricing: a volume slider and number input plus five sample-rate presets drive a mono tabular ledger and a display-size monthly total, with the free-tier floor handled as a floor and not a credit"},{"name":"contact-card","file":"src/components/contact-card.tsx","renders":"The company surface, and the section that opens /contact: four engineering contact routes with mailto addresses and stated response times, a full-bleed operations band of regions, retention, sub-processors and uptime, and the legal minimum at #legal"},{"name":"cta","file":"src/components/cta.tsx","renders":"Closing panel: headline, two buttons, an init command and four answers to cost, risk and effort, over a radial wash"},{"name":"site-footer","file":"src/components/site-footer.tsx","renders":"Three link columns of real destinations, product blurb, build string and an operational status line"},{"name":"docs-shell","file":"src/components/docs-shell.tsx","renders":"Documentation layout in two variants: grouped sidebar, on-this-page rail, and route-specific closing evidence. quickstart renders a five-step guide with a local request/result excerpt; cli renders seven commands and the annotated trace payoff"},{"name":"incident-header","file":"src/components/incident-header.tsx","renders":"Incident identity, status, affected service, explicit onset, baseline and incident p95, plus investigating, identified, monitoring, and resolved server variants"},{"name":"trace-comparison","file":"src/components/trace-comparison.tsx","renders":"Direct-labelled baseline and incident span comparison on one scale, followed by an exact table, sample completeness, missing-span handling, and clock-skew disclosure"},{"name":"deploy-diff","file":"src/components/deploy-diff.tsx","renders":"Selected deploy metadata and exact before, incident, and rollback values with selected, no-diff, and reverted server variants"},{"name":"evidence-timeline","file":"src/components/evidence-timeline.tsx","renders":"Semantic ordered UTC evidence from deploy through resolution, with dense and grouped server variants"},{"name":"failure-cluster","file":"src/components/failure-cluster.tsx","renders":"Ranked failure signatures with counts, shares, and non-colour rank labels, plus empty and uncertain server variants"},{"name":"resolution-receipt","file":"src/components/resolution-receipt.tsx","renders":"Rollback, verification window, samples, resolved time, and separately refreshed current health, plus monitoring and rolled-back server variants"},{"name":"ui/button","file":"src/components/ui/button.tsx","renders":"Anchor or button in primary/secondary/ghost at three sizes, with a token state ramp for hover and press, optical padding on the icon side, a visible focus outline, and disabled and pending states that swap the whole variant rather than fading it — pending carries aria-busy on the independent info family"},{"name":"ui/badge","file":"src/components/ui/badge.tsx","renders":"Monospace pill in neutral (tinted surface) or accent (filled amber) tone — version tags and changelog labels"},{"name":"ui/theme-toggle","file":"src/components/ui/theme-toggle.tsx","renders":"The navbar light/dark switch: a sun or moon glyph carrying aria-pressed, writing the choice to localStorage and setting the mode class on the nearest .tt-signal wrapper or on documentElement, with a disabled state for a host that pinned the mode"},{"name":"ui/copy-button","file":"src/components/ui/copy-button.tsx","renders":"Copy-to-clipboard for a command string on the library's part: a three-frame glyph swap, a counted live-region receipt so a second refusal is still announced, focus returned after the browser's permission prompt, and a blocked state that widens the control, prints the word and puts it in the accessible name."},{"name":"ui/container","file":"src/components/ui/container.tsx","renders":"The content column at two declared widths: max-w-6xl marketing measure, max-w-7xl data measure"},{"name":"ui/logo","file":"src/components/ui/logo.tsx","renders":"Wordmark: inline pulse glyph plus the lowercase monospace product name"},{"name":"ui/code-block","file":"src/components/ui/code-block.tsx","renders":"Framed code sample with filename bar and dependency-free highlighting in four token colours plus a weight role; signed numbers read as deltas and take the accent"},{"name":"ui/terminal-window","file":"src/components/ui/terminal-window.tsx","renders":"Terminal chrome with a brand title bar, scrollable body, optional status line, and shared Dim, Ok, Positive, and Hot roles that separate CLI syntax from verified success"},{"name":"ui/section-heading","file":"src/components/ui/section-heading.tsx","renders":"Eyebrow, heading and lede at the one shared type scale"},{"name":"ui/page-hero","file":"src/components/ui/page-hero.tsx","renders":"Masthead with a required counterweight in the right half: eyebrow, title, lede and meta row beside the page’s own evidence. One route uses it (/docs) — every other page opens with its own instrument"},{"name":"ui/field","file":"src/components/ui/field.tsx","renders":"The form family on the library's shell: a mono uppercase label, an optional marker in words, a read-only sentence, and one supporting line whose precedence runs error over success over description. The control arrives through a render prop already carrying its id, aria-invalid and aria-describedby, so Input and Textarea read the verdict rather than being told it twice."},{"name":"ui/inline-code","file":"src/components/ui/inline-code.tsx","renders":"Inline CLI strings, flags and filenames in mono on a tinted chip; never breaks a flag across a line"},{"name":"ui/type","file":"src/components/ui/type.ts","renders":"The type vocabulary: the only place a font size is named, pairing every rung of the 1.200 ladder with its leading and optical tracking"},{"name":"ui/accordion-disclosure","file":"src/components/ui/accordion-disclosure.tsx","renders":"A ruled disclosure on the library's part: chevron marker, 250ms height tween, and Escape from inside the panel collapsing it back onto its summary. Two surfaces — a standalone card and a row in a stack — plus the header's burger on the same skeleton."},{"name":"faq","file":"src/components/faq.tsx","renders":"Six priced objections answered on the pricing page: what happens above the free tier, what sampling drops, self-hosting, retention, export and the absence of a contract. Built on ui/accordion-disclosure, so the answers stay in the page a crawler reads."},{"name":"ui/status-badge","file":"src/components/ui/status-badge.tsx","renders":"A domain status as glyph, word and semantic tone on a mono pill. The glyph is a required prop, so the state survives a greyscale capture."},{"name":"ui/alert-callout","file":"src/components/ui/alert-callout.tsx","renders":"A bounded notice with a label, a glyph and one of five semantic tones, at two densities. role=\"alert\" when critical, role=\"status\" otherwise."},{"name":"ui/state-card","file":"src/components/ui/state-card.tsx","renders":"The compact tone box every incident section renders for one of its states: a mono label, an optional glyph, one sentence, and the state name on data-state."},{"name":"ui/command-row","file":"src/components/ui/command-row.tsx","renders":"One shell command ready to run: the prompt, the command scrolling inside its own box rather than truncating, an optional figure, and the copy control."},{"name":"ui/icon-chip","file":"src/components/ui/icon-chip.tsx","renders":"The bordered box a glyph sits in, square or round, on the tinted surface or on one of the four semantic grounds."}],"tokens":{"--background":"#f2f3f4","--foreground":"#151719","--card":"#ffffff","--card-foreground":"#151719","--surface-sunken":"#eceef0","--surface-raised":"#ffffff","--surface-overlay":"#ffffff","--primary":"#006470","--primary-foreground":"#f5feff","--primary-hover":"#00525c","--primary-active":"#004149","--secondary":"#e6e8ea","--secondary-foreground":"#34393f","--muted":"#eceef0","--muted-foreground":"#596169","--accent":"#7e5100","--accent-foreground":"#fffbf6","--border":"#c9cdd1","--ring":"#006470","--surface-tint":"#e1e4e7","--shadow-raised":"0 18px 48px -24px #15171933","--shadow-overlay":"0 24px 64px -28px #1517194d","--field":"#ffffff","--field-border":"#747b82","--control-border":"#747b82","--selection":"#dce0e3","--selection-foreground":"#151719","--selection-border":"#747b82","--link":"#005866","--link-hover":"#00434d","--info":"#135f91","--info-foreground":"#ffffff","--info-soft":"#e6f2fa","--info-border":"#135f91","--positive":"#176b43","--positive-foreground":"#ffffff","--positive-soft":"#e4f4eb","--positive-border":"#176b43","--warning":"#7a5200","--warning-foreground":"#ffffff","--warning-soft":"#f8eed7","--warning-border":"#7a5200","--critical":"#9a2f37","--critical-foreground":"#ffffff","--critical-soft":"#fbe9ea","--critical-border":"#9a2f37","--radius":"0.5rem","--radius-inner":"0.3125rem","--weight-display":"700","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.6","--text-d1":"1.5rem","--leading-d1":"1.25","--text-d2":"1.8rem","--leading-d2":"1.2","--text-d3":"clamp(1.8rem, 1.651rem + 0.637vw, 2.16rem)","--leading-d3":"1.15","--text-d4":"clamp(2.16rem, 1.981rem + 0.764vw, 2.592rem)","--leading-d4":"1.06","--tracking-d1":"-0.01em","--tracking-d2":"-0.01em","--tracking-d3":"-0.01em","--tracking-d4":"-0.02em","--tracking-label":"0.08em","--font-text":"var(--font-plex-sans), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-plex-mono), ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"},"tokensDark":{"--background":"#0b0c0d","--foreground":"#eceff1","--card":"#151719","--card-foreground":"#eceff1","--surface-sunken":"#111315","--surface-raised":"#1d2023","--surface-overlay":"#282c30","--primary":"#2cacbe","--primary-foreground":"#000709","--primary-hover":"#46bfd1","--primary-active":"#5dd3e5","--secondary":"#1d2023","--secondary-foreground":"#cbd0d5","--muted":"#111315","--muted-foreground":"#9ba3aa","--accent":"#eeac53","--accent-foreground":"#1d1102","--border":"#30343a","--ring":"#2cacbe","--surface-tint":"#202328","--shadow-raised":"0 18px 48px -24px #00000066","--shadow-overlay":"0 24px 64px -28px #00000080","--field":"#111315","--field-border":"#777f87","--control-border":"#777f87","--selection":"#282c30","--selection-foreground":"#eceff1","--selection-border":"#9aa3ab","--link":"#55c4d4","--link-hover":"#75d8e5","--info":"#78b7e5","--info-foreground":"#07131c","--info-soft":"#111f2a","--info-border":"#78b7e5","--positive":"#66c391","--positive-foreground":"#07140d","--positive-soft":"#11231a","--positive-border":"#66c391","--warning":"#f1c36b","--warning-foreground":"#1c1202","--warning-soft":"#271e0e","--warning-border":"#f1c36b","--critical":"#f08c8c","--critical-foreground":"#200708","--critical-soft":"#2a1517","--critical-border":"#f08c8c","--radius":"0.5rem","--radius-inner":"0.3125rem","--weight-display":"600","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.6","--text-d1":"1.5rem","--leading-d1":"1.25","--text-d2":"1.8rem","--leading-d2":"1.2","--text-d3":"clamp(1.8rem, 1.651rem + 0.637vw, 2.16rem)","--leading-d3":"1.15","--text-d4":"clamp(2.16rem, 1.981rem + 0.764vw, 2.592rem)","--leading-d4":"1.06","--tracking-d1":"-0.01em","--tracking-d2":"-0.01em","--tracking-d3":"-0.01em","--tracking-d4":"-0.02em","--tracking-label":"0.08em","--font-text":"var(--font-plex-sans), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-plex-mono), ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"},"compatibility":{"next":">=15","react":">=19","tailwind":">=4"},"dependencies":["lucide-react"],"editions":{"react":{"source":"src","runtime":"react"},"html":{"source":"html/src","output":"html/dist","engine":"nunjucks","runtime":"vanilla","buildRequired":false}},"ui_library":{"version":"1.5.2","files":["html/src/js/_tt/accordion-disclosure.js","html/src/js/_tt/field-ids.js","html/src/js/_tt/field.js","html/src/js/_tt/mode.js","src/components/ui/_tt/accordion-disclosure.axes.ts","src/components/ui/_tt/accordion-disclosure.fixtures.ts","src/components/ui/_tt/accordion-disclosure.tsx","src/components/ui/_tt/announce.ts","src/components/ui/_tt/capture.ts","src/components/ui/_tt/copy-button.axes.ts","src/components/ui/_tt/copy-button.fixtures.ts","src/components/ui/_tt/copy-button.tsx","src/components/ui/_tt/field-ids.ts","src/components/ui/_tt/field.axes.ts","src/components/ui/_tt/field.capture.ts","src/components/ui/_tt/field.fixtures.ts","src/components/ui/_tt/field.tsx","src/components/ui/_tt/ids.ts","src/components/ui/_tt/recipe.ts"]},"license":"standard","typography":{"ratio":1.2,"ratioRationale":"dev-tools/docs row of themes/CONTRACT.md — a technical-plain register wants a compressed display range, because the argument is carried by the transcript and the code, not by a big headline","displayLadder":{"d1":"1.5rem","d2":"1.8rem","d3":"2.16rem (fluid from 1.8rem)","d4":"2.592rem (fluid from 2.16rem)"},"uiLadder":{"caption":"0.75rem/1.4","small":"0.875rem/1.45","body":"1rem/1.55","lead":"1.125rem/1.6"},"roles":{"text":{"family":"IBM Plex Sans","variable":true,"license":"OFL-1.1","file":"src/fonts/IBMPlexSans-Variable.woff2"},"mono":{"family":"IBM Plex Mono","weights":[400,500,600],"license":"OFL-1.1","file":"src/fonts/IBMPlexMono-*.woff2"}},"module":"src/fonts.ts"},"design":{"typefaces":{"text":"IBM Plex Sans","mono":"IBM Plex Mono"},"typeRatio":1.2,"signature":"The annotated regression trace: a latency series whose vertical deploy marker carries the commit that moved the number, so the cause sits inside the drawing instead of in prose beside it — 8f21c4e by @nadia above the bend, 912ms p95 on the plateau. It has four route-level tellings: / opens the story, /changelog records the release, /cli prints the trace, /incident closes the investigation; /pricing and /contact carry none. Every figure resolves through SIGNAL_INCIDENT (src/fixtures/incident.ts): the drawn series peaks and ends on incident.value, and the caption's 24s is onsetDelaySeconds computed from the deploy and onset timestamps, so the marker cannot drift from the number it explains. Not portable: an annotated trace needs a deploy and a metric on one timeline, which a landing page or a pricing table does not have.","surface_kind":"marketing","built_against":"2026-09-02","levers":{"theme":"near-dark","density":"compact","accent_mode":"duotone","motion":"mechanical","borders":"hairline","radius":"medium","texture":"none","shadow":"raised-only"},"icons":{"set":"lucide","stroke":2,"ladder":["size-3.5","size-4","size-5"],"contexts":{"nav":"glyph","panel_header":"mark","fact_row":"none","feature_grid":"none"}},"disclosure":{"helper_line":"one-clause","sentence":"hint","paragraph":"details","parallel_views":"tabs","secondary_object":"drawer"},"cta":{"header":"quiet","hero":"filled","repeats":["fold","end"],"mobile":"inline"},"colour_budget":{"brand_max_pct":null,"concentration_pct":70,"regions":[]}}}