SaaS Surface · Brand & Motion System

SURFACE
STUDY.

A modern SaaS surface as one visual system — landing, brand, hierarchy, motion. Click deploy and the state animates through. Toggle the pricing and the value swaps. Designed and built as a concept.

Single-file build Brand + surface + motion Live interactions [ CONCEPT ]
At a glance 30-second read

What it is

A SaaS surface designed end-to-end as one system: marketing landing, brand mark, dashboard with a live deploy state machine, log stream, pricing toggle. The kind of polished product surface AI startups need but rarely ship.

Maps to

Design Engineer · Frontend (AI SaaS) · Product UI Engineer · Brand / Marketing Engineer

Skills demonstrated

  • Cohesive design system across marketing + product
  • State-machine UI (deploy: queued → building → live)
  • Token-driven theming (light / dark surface differential)
  • GSAP motion as product affordance, not decoration
GSAP Vanilla JS CSS Tokens State Machine
// The Brief

Make a SaaS surface that reads like a finished product, not a portfolio exercise or a template with a logo on top.

The whole surface is one visual system: landing, brand mark, deploy state machine, log stream, pricing toggle. The product is shown through small interactions.

// 01 — Product Dashboard

The Command Center

Every service, every deploy, every log line. Click a queued deploy to trigger a build.

app.signal.so/overview
◈ Overview
↻ Deploys
≡ Logs
◎ Monitors
⊞ Team
⚙ Settings
elbe@sixpct.co
Overview
99.8%
// Uptime · 30d
847ms
// Avg deploy
12
// Deploys today
// Recent Deployments
signal-frontend main 2m ago [ LIVE ]
api-gateway hotfix/auth 8m ago [ LIVE ]
design-system feat/tokens 31m ago [ LIVE ]
analytics-worker main now [ QUEUED ]
// Live Log Stream
// 02 — Core Features

Built for teams that ship.

Three things Signal does better than watching a Slack channel and hoping.

↻
Real-time deploy tracking
Every push tracked from queue to live. Status updates the moment the state changes — no polling, no refreshing.
// WebSocket · Live state
≡
Streaming log pipeline
Every log line, every service, in one stream. Filter by severity, search by pattern, pin a session for replay.
// Server-sent events · Full-text search
◎
Team-aware monitoring
Not just uptime — who deployed what, when, and what changed. Shared context so the whole team knows before users do.
// Audit log · Presence indicators
// 03 — Pricing

Start free. Scale when you ship.

No seat fees. No per-deploy pricing. Pay for what you actually use.

Free
$0 / mo
For solo builders and side projects. No credit card required.
  • 3 projects
  • 50 deploys / month
  • 24-hour log retention
  • Basic monitors
  • 1 team member
// Most popular
Pro
$29 / mo
For product teams shipping weekly. Everything you need to stay unblocked.
  • Unlimited projects
  • Unlimited deploys
  • 30-day log retention
  • Advanced monitors + alerts
  • Up to 10 team members
Scale
$99 / mo
For scaling companies that need SLA guarantees and dedicated support.
  • Everything in Pro
  • SSO / SAML
  • Custom log retention
  • 99.99% uptime SLA
  • Unlimited team members

SHIP IT. WATCH IT.
KNOW IT'S LIVE.

Signal gives your team one place to see everything that's running and everything that isn't.

Start Free →
// No credit card · 5-minute setup · Free forever plan