Skip to content
DesignMunkDesignMunk Submit a site

SignalWire

signalwire.com
Compose AI agents and real-time communications into one programmable system.
Communication Technology Framer Homepage Instrument Sans Lexend
Share Visit site
signalwire.com DESKTOP · 1440
SignalWire

AI Breakdown

Design export

---
version: alpha
name: SignalWire
description: Compose AI agents and real-time communications into one programmable system.
colors:
  primary: "#fafbfc"
  secondary: "#044cf4"
  tertiary: "#f72a72"
  neutral: "#0f0f12"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Instrument Sans
    fontSize: 42px
    fontWeight: 600
    lineHeight: 1.07
    letterSpacing: -0.039em
  headline-md:
    fontFamily: Instrument Sans
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.37
    letterSpacing: -0.038em
  headline-sm:
    fontFamily: Instrument Sans
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: sans-serif
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: Lexend
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 4px
  md: 6px
spacing:
  xs: 6px
  sm: 16px
  md: 32px
  lg: 60px
  xl: 100px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.tertiary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "#000000"
    rounded: "{rounded.md}"
    padding: 1px
---

# SignalWire: Dark Control Plane with Neon Pink CTAs

## Overview

SignalWire presents a dark-mode, developer-first system: compact, high-contrast, and code-oriented. The personality is confident and technical rather than playful. Layouts are spacious between sections but dense within components so code, diagrams, and bullets sit close to their labels. When no token applies, bias to clarity: white-on-charcoal text, disciplined spacing, and restrained accent color use.

## Colors

- **primary (#fafbfc):** High-contrast text and primary surfaces on dark backgrounds.
- **secondary (#044cf4):** Electric blue for links, focus states, and selective highlights.
- **tertiary (#f72a72):** Accent for urgent CTAs and active states.
- **neutral (#0f0f12):** Core canvas and card backgrounds in dark mode.
- **surface ({colors.neutral} → #0f0f12):** Section and component surfaces; matches neutral for consistency.
- **on-surface ({colors.primary} → #fafbfc):** Default readable text on dark surfaces.

## Typography

- Headlines (lg/md/sm) use Instrument Sans. Freely available on Google Fonts; load weights 500–700 as required. It delivers wide forms and light compression that read cleanly at 26–42px.
- Headline-xs uses the generic sans-serif stack. Treat this as a system UI fallback — no external load needed; use the platform default.
- Body text uses Lexend at 16px/1.4 for legibility in dense technical copy. Also on Google Fonts and safe to self-host.
- Pairing guidance: Instrument Sans for headings and buttons; Lexend for paragraphs, lists, and small helpers. Keep negative letter-spacing only where tokens define it for headlines.

## Layout

- Spacing scale: xs 6px for micro-gaps; sm 16px for control padding and inline gaps; md 32px for intra-section rhythm; lg 60px as section gutters; xl 100px for hero and banded blocks.
- Use a centered content column with generous outer margins on large screens. Within sections, align headings and their code/examples in a two-row stack, keeping related items within sm–md gaps.
- Grids skew to one or two columns on desktop; collapse to a single column with md spacing on mobile.

## Elevation & Depth

- Minimal shadow usage. The only measured elevation is a soft, long blue glow: rgba(4, 78, 244, 0.4) 0px 6px 120px 0px. Apply to featured code blocks or spotlight cards.
- Most hierarchy comes from contrast, weight, and whitespace. When separation is needed, prefer tonal shifts (neutral vs slightly lighter/darker neutral) over heavy shadows.

## Shapes

- Two radii: sm 4px for interactive controls (buttons, pills) and md 6px for containers and cards.
- The small rounding keeps a precise, engineered feel. Do not mix in larger radii; use md only when a component encloses other elements.

## Components

Buttons
- Primary: background #fafbfc, text #0f0f12, 40px height, 8px 16px padding, 4px radius. Use for the main action per section.
- Secondary: text #fafbfc, 40px height, 8px 16px padding, 4px radius. Background inherits the surface; add a 1px border or focus ring using #044cf4 when emphasis is needed.
- Link: text #f72a72, radius 0. Reserve for inline or minimal CTAs.

Card
- Background #0f0f12, 1px padding acting as an inner stroke gutter, 6px radius. Set text inside cards using on-surface (#fafbfc) for readability.

### Top Navigation Bar
- Dark surface (#0f0f12) with compact links and a right-aligned 40px CTA. Horizontal gaps at sm (16px); logo block padded at sm.

### Hero Unit
- Headline: Instrument Sans 42px/1.07, weight 600, tight -0.039em tracking. Body: Lexend 16px/1.4. Two side-by-side CTAs at sm gap; center aligned within an xl (100px) vertical band.

### Tabbed Code Block
- Container uses card styles (6px radius) and the blue glow shadow for emphasis. Tabs sit above the code area; active tab may use the tertiary accent (#f72a72). Code region gets md (32px) inner padding.

### Architecture Comparison
- Two-column list: "Traditional CPaaS" vs "Platform." Each column stacks short bullets with body-md type, 16px spacing between items, and 32px between columns.

### IVR Use-Case Stepper
- Three numbered items (01/02/03) in a horizontal row on desktop. Each item title at headline-sm (26px), description in body-md, with sm (16px) internal gaps.

### System-Directed AI Diagram
- Four small cards ("greet, collect, confirm, wrap_up") laid in a row. Use card md radius, body-md labels, and secondary (#044cf4) for connective labels or focus states.

### Testimonial Grid
- Quote cards in a responsive grid; body-md for quotes, headline-xs for names/titles. Use md (32px) gaps; keep each quote's width limited for readability.

### Developer Docs Feature Grid
- Three equal cards for SWML, REST APIs, and Realtime SDKs. Headlines at headline-sm, descriptions in body-md, and link as button-link in #f72a72.

## Do's and Don'ts

- Do reserve #f72a72 for high-intent CTAs and active states; keep general links in #044cf4.
- Do keep buttons at the specified 40px height with 8px 16px padding; mixing sizes breaks rhythm.
- Do use #fafbfc on #0f0f12 for all long-form copy to maintain contrast.
- Don't introduce larger radii; stay within 4px (controls) and 6px (containers).
- Don't add heavy drop shadows; if elevation is required, use the provided blue glow only.
- Don't invent intermediate greys; rely on the defined dark surface and light text for clarity.

## Agent Prompt Guide

Quick color reference
- Text: #fafbfc
- Background: #0f0f12
- Border/Focus: #044cf4
- Accent: #f72a72

1) Build the centered hero
- Canvas: background #0f0f12.
- H1: Instrument Sans, 42px, 600, line-height 1.07, letter-spacing -0.039em, color #fafbfc.
- Body: Lexend, 16px, 400, line-height 1.4, color #fafbfc.
- Primary button: 40px height, padding 8px 16px, radius 4px, background #fafbfc, text #0f0f12.
- Secondary button: 40px height, padding 8px 16px, radius 4px, text #fafbfc on transparent; focus ring #044cf4.
- Vertical spacing: xl (100px) band for the hero.

2) Create a tabbed code block with glow
- Wrap in a card: background #0f0f12, radius 6px, inner padding md (32px).
- Apply shadow: rgba(4, 78, 244, 0.4) 0px 6px 120px 0px.
- Tabs: active label uses #f72a72; inactive labels #fafbfc at lower opacity.
- Caption or labels: Lexend 16px; keep sm (16px) gaps.

3) Architecture split section
- Two columns with md (32px) inner padding and lg (60px) gutter between.
- Column headings: Instrument Sans, 33px, 600, line-height 1.37, letter-spacing -0.038em, color #fafbfc.
- Bullets: Lexend 16px/1.4, color #fafbfc; use #044cf4 for short emphasis tokens.

4) IVR use-case stepper
- Three items in a row; container gaps md (32px).
- Step number: Instrument Sans headline-xs (20px, 500), color #fafbfc.
- Step title: Instrument Sans 26px, 500, -0.015em, color #fafbfc.
- Copy: Lexend 16px/1.4.
- Optional CTA link: #f72a72 with 0px radius.

5) Developer docs feature grid
- Three cards using md (6px) radius and md (32px) padding.
- Titles: Instrument Sans 26px, 500; descriptions: Lexend 16px.
- "Learn more" uses button-link in #f72a72; focus outline #044cf4.

## Similar Brands

- Twilio — also developer-first communications; lighter canvas with red accents vs SignalWire's darker palette and neon pink/blue highlights.
- Vercel — dark, code-led marketing with disciplined spacing; less color than SignalWire and more monochrome.
- Supabase — developer tools with dark UI and strong code examples; swaps the pink accent for green.
- Stripe — precise type and high-contrast dark sections; more editorial gradients and fewer live code blocks.

More like this

Browse Communication →
featurebase.app
Featurebase AI
Featurebase
Support customers with AI, feedback, and product updates in one tool
Homepage · 2 days ago
missiveapp.com
Missive Communication
Missive
Inbox collaboration for teams that run on email
Homepage · 5 days ago
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 6 days ago
standardbots.com
Standard Bots AI
Standard Bots
AI-native robots for serious manufacturing—fast, safe, high-ROI.
Homepage · 7 days ago