Menu
SaaS Surface · Brand & Motion System

SURFACE
STUDY.

I designed a sample product website and dashboard with one shared visual style. The deployments and pricing shown are simulated.

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

What it is

I designed a landing page, logo, dashboard, sample deployment sequence, log display, and pricing toggle as one system. This is a personal concept study, not a shipped product.

What I explored

I explored how a product’s website and dashboard can feel consistent.

Skills and tools

  • 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

I explored how a sample software website and dashboard could share typography, colors, and interactions.

I used the same visual style for the landing page, logo, sample deployment steps, logs, and pricing toggle.

// 01 — Product Dashboard

The Command Center

Click a queued deployment to play the simulated build sequence. No real service is deployed.

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