Signal.

Best for

• Business types: trades and energy (solar, electrical, HVAC), engineering and hardware, developer tools and infrastructure, specialist retail with specs (coffee, audio, bikes), accountants, bookkeepers, brokers, labs, anything sold on performance, price transparency or measured results.
• Audiences: careful buyers who compare quotes, read the fine print and trust a table more than an adjective. Technical decision-makers. People who were burned by a vague quote last time.
• Less suited to: fashion, beauty, nightlife, luxury, or any brand that sells on mood rather than measurement. See Aurora.

Personality and voice

Signal sounds like the best engineer you know explaining something to a smart friend: plain, specific, a little dry, never selling. It shows its working.

• Headlines are complete sentences with a full stop: "Every panel placed, every kilowatt counted.", "Your bill, split by where the power came from.", "What you get that a cheap quote leaves out.", "Straight answers."
• Numbers carry the claims: "2 days from the roof check to a written, fixed quote". Every figure has a unit, and each chart or table has a note saying how it was measured.
• Honesty is a feature. Comparison tables mark where you're partly there (ring) or absent (grey). Notes say what's a sample and what's measured.
• Buttons: Book a roof check, See what you'd save, Start a subscription, Get a fixed quote. The one "add" action on the instrument is lime: Add panel.
• Microcopy: "Drag panels to arrange them; shade and the west roof are counted.", "Prices include GST.", "We reply within one business day."
• Avoid: superlatives without numbers, "seamless", "best-in-class", exclamation marks, marketing fluff in tables.

Colour

Contrast (WCAG): ink on paper 15:1; muted on paper 5.0:1; cobalt on white 5.3:1 and on paper 4.56:1; table-muted on the table 6.3:1; lime-ink on lime 12.5:1. In dark mode muted is 7.2:1 and accent 5.4:1. The amber ring (--built) is a mark, not text; its label stays in ink.

Typography

• Bricolage Grotesque (Google Fonts) 500 / 700 / 800 for headlines, figures, prices and brand.
• Instrument Sans (Google Fonts) 400 / 500 / 600 for reading and UI.
• System mono (ui-monospace, Cascadia Code, SF Mono, Menlo, Consolas) for the instrument's command line and axes.

The signature move: heavy, tightly tracked Bricolage sentences that end with a full stop, beside lighter Instrument Sans prose, and font-variant-numeric: tabular-nums on every number so figures line up and readouts don't jitter as they change.

Layout

• Wrap 1120px, 16px gutters (safe-area aware). Everything is left-aligned.
• Hero: a 5 / 7 split. Text left; the light table right. Stacks below 900px.
• Bands: sections start 72px apart with an H2 and a muted intro (max 40em).
• Definition rows: two columns, 56px gap, each row with a 1px top rule; group labels span both columns in uppercase cobalt.
• Proof grid: four columns of figures on 2px ink rules (two columns on phones).
• Tables live in a bordered, rounded, horizontally scrolling container so they never break the page.
• Plans: four (or three, .plans-3) columns; the recommended plan is tinted --accent-soft with no border.
• Spacing scale: 4, 8, 12, 16, 24, 32, 48, 72, 96.

Shape

• Radii: 4px inline code and keys; 6px tiles on the table; 10px buttons, tables and code; 14px plans; 16px the light table. Pills only for segmented toggles, the theme button and "New" tags.
• Borders: 1px --line everywhere; 2px ink rule above proof figures.
• Shadow: exactly one, under the light table: 0 30px 60px -30px rgba(13,19,36,.55). In dark mode the table also gets a 1px line so it doesn't merge with the page.
• No glass except the sticky header (88% paper + 10px blur).

Motion language

Signal moves when you touch it, plus one quiet sign of life.

There are no scroll reveals and no decorative loops: content is simply there. Degrading: the default follows prefers-reduced-motion; the footer Motion switch overrides it and is remembered. With motion off, every change still happens, instantly, and the sweep holds at noon.

Imagery and illustration

• The instrument is the hero image. Build it from real data: the customer's own roof, menu, price list or measurements.
• Photography, if any, is documentary and specific (the actual crew, the actual roaster), in rectangles with a 10px radius. No stock "happy customer" shots.
• Charts follow the bar and legend patterns: cobalt, cyan, violet, then line grey, with a legend and a note on method.
• Icons: 1.5–2px line icons in ink. The logo motif is a framed set of stripes (colour bars, cells, roast stages, ledger columns) inside a rounded rectangle.

Signature components

• Light table. Dark gridded panel: a title bar with an object name and a lime add button; a stage of draggable, keyboard-movable tiles that snap to a grid inside dashed zones and around hatched blocks; three readouts; a monospace "command" line restating the state; a one-line note. Driven by Signal.LightTable().
• Instrument variants. The same panel as a curve plotter (Grade) or a slider calculator (Ledgerline).
• Measured bars. Rows with a label and sub-label, a stacked track and a tabular total, a segmented toggle to switch cases, a colour legend and a method note. Signal.bars().
• Proof figures. Big Bricolage numbers on 2px ink rules with a one-line explanation.
• Definition rows with uppercase group labels and soft "New" pills.
• Honest comparison table: your column tinted, others marked with status dots and rings, group rows in small caps, a sources note underneath.
• Status marks: filled dot (yes), amber ring (partly / pending), grey dot (no), always with a key.
• Plans with an add-on footer line; the recommended one tinted.
• Closing instrument: a second, smaller light table holding a short form.
• Code block with a copy button, when the product has something to paste.

Do and don't

Do

• Make the instrument genuinely useful and accurate. It is the pitch.
• Put a number in every claim, and a method note under every chart.
• Keep exactly one dark instrument above the fold, and at most one more on the page.
• Mark partial support honestly with the ring.

Don’t

• Turn features into a grid of icon cards. Use definition rows.
• Use the lime anywhere except the instrument's add / new action and its highlights.
• Centre-align body sections, or add scroll animations.
• Warm the paper to cream, or add a second accent.
• Invent statistics. Template figures are placeholders and must be replaced with measured ones.

Accessibility

• Contrast as listed above; all text pairs meet WCAG AA in both themes.
• Every instrument works without a mouse: tiles are focusable buttons; arrow keys move them a cell at a time, Delete removes them; add is a real button; readouts use aria-live="polite".
• Bars have role="img" with a full text label; toggles use aria-pressed.
• Visible focus: 3px cobalt outline (2px lime on table tiles). Skip link first.
• Tables scroll inside their container at narrow widths; nothing scrolls the page sideways at 360px.
• Theme button and Motion switch are labelled; the theme follows the system until chosen.

How to make it yours