56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/0_p7_rfyih3ce.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3x7cofmdt-u_a.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T854,

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.

53:[["$","$L56",null,{"post":{"id":"01a0fc9c-70ef-7764-be85-59ff5d622325","title":null,"body":"

Check out my new SaaS template called Signal — Security.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Check out my new SaaS template called Signal — Security."}]}]},"author":{"framerUserId":"9984ee5b-4091-4e90-9d64-a3aacae916df","name":"Lauri Lännenmäki","slug":"laurilllll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28834/lauri-serious-square-oiiSOCE9quuV53bOJtXelfG6DgCekg.jpg","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"74501","resolved":true,"title":"Signal — Security","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"a working detect, decide, contain product demo"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"a typed incident replay with milestones"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"six live widgets: login map, triage queue, fleet gauge, API sparkline, key rotation and an approve button"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"a pricing calculator with a seat slider"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"before/after results that count up"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"Framer Skills","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Five skills for Framer's agent, plus a /design-system page that shows every style, component and layout rule they rely on."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"/design-system: add pages and sections in Signal's grid and styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"/rebrand: another company's name, colours, logo, voice and scripts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"/content: customer stories, logos, plans, incidents and copy"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"/effects: tune the graph, demo, replay and widgets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"/before-publish: check every page at Desktop, Tablet and Phone"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Try: \"/rebrand Rebrand this for Halyard, an observability startup for payment systems. Electric blue instead of acid green, keep it dark.\""}]},{"type":"paragraph","content":[{"type":"text","text":"Suits security and observability SaaS, developer tools, AI-ops platforms and infrastructure startups."}]}]},"introduction":"Dark security SaaS","slug":"signal-security","author":{"framerUserId":"9984ee5b-4091-4e90-9d64-a3aacae916df","name":"Lauri Lännenmäki","slug":"laurilllll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28834/lauri-serious-square-oiiSOCE9quuV53bOJtXelfG6DgCekg.jpg","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9984ee5b-4091-4e90-9d64-a3aacae916df/01a0fc97-c056-753a-be51-71c2850a3a71.png","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9984ee5b-4091-4e90-9d64-a3aacae916df/01a13c29-2bdc-757d-bf74-7adadd50e1b7.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9984ee5b-4091-4e90-9d64-a3aacae916df/01a13c29-2c5d-7296-8049-bcb707c2ed9a.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9984ee5b-4091-4e90-9d64-a3aacae916df/01a13c29-2c4b-7329-80f7-72710975a25b.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T12:35:05.430Z","updatedAt":"2026-10-14T20:44:59.636Z","publishedAt":"2026-10-02T12:35:05.426Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"59","paymentUrl":"https://buy.polar.sh/polar_cl_Sed30wycn6K83zaaXVF1MIlYGuGxZgCXWw1Sc2XII67","remixUrl":null,"previewUrl":"https://sympathetic-architecture-950945.framer.app/","categories":[],"styles":[{"id":110,"name":"Animated","slug":"animated"},{"id":111,"name":"Minimal","slug":"minimal"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":2,"name":"SaaS","slug":"saas"},"features":[],"tags":[],"isAgentTemplate":true,"demoVideo":{"type":"youtube","url":"https://youtu.be/9EtghataCJo","metadata":{"videoId":"9EtghataCJo","title":"Signal - Framer Agent Template demo","thumbnailUrl":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/youtube/template-demo-video/74501/9EtghataCJo/thumbnail.jpg"}},"skills":[{"name":"before-publish","description":"A check before publishing: headings, contrast, overflow, SEO etc. and unused styles."},{"name":"effects","description":"Changing the code components and overrides: change the properties first, and keep the code’s rules."},{"name":"content","description":"Customer stories and logos (CMS), any copy changes etc."},{"name":"rebrand","description":"Turning the template into another product’s site."},{"name":"design-system","description":"Adding or changing any page or section."}]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T12:35:06.095Z","updatedAt":"2026-10-02T12:35:06.095Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you