Signal — Security

Signal is a site for a security, observability or developer-tools company, seen from the night shift: a near-black mission-control surface where everything hums along until one thing turns red, gets triaged in plain sight and is contained with a single yes. Dark only, glass and hairlines, one acid-green accent.

In the hero, a live infrastructure graph flares red every few seconds, a callout triages the threat and a green ring contains it, while the nav's status pill and event counter follow along. Below it:

• a working detect, decide, contain product demo

• a typed incident replay with milestones

• six live widgets: login map, triage queue, fleet gauge, API sparkline, key rotation and an approve button

• a pricing calculator with a seat slider

• before/after results that count up

The page is native Framer: sections, nav, footer, contact form, 404 and privacy pages. Customer stories and logos are CMS collections, and every story gets its own page. The graph, demo, replay and widgets are code components with property controls. Their colours follow the 53 color styles, so a new palette re-tints them too. 40 text styles, Desktop, Tablet and Phone layouts, and reduced motion respected.

Framer Skills

Five skills for Framer's agent, plus a /design-system page that shows every style, component and layout rule they rely on.

• /design-system: add pages and sections in Signal's grid and styles

• /rebrand: another company's name, colours, logo, voice and scripts

• /content: customer stories, logos, plans, incidents and copy

• /effects: tune the graph, demo, replay and widgets

• /before-publish: check every page at Desktop, Tablet and Phone

Try: "/rebrand Rebrand this for Halyard, an observability startup for payment systems. Electric blue instead of acid green, keep it dark."

Suits security and observability SaaS, developer tools, AI-ops platforms and infrastructure startups.