Skip to content
Free network check

SignalWings design system · v1

Built from one idea: delivered or lost.

Tokens, type and components behind signalwings.com, the lead magnets and the LinkedIn campaign. The signature is the delivery bar: one bar per interval, its height and colour set by the share of expected reports that arrived.

01 · Signature

The delivery scale.

Nine steps from fully delivered (deep blue) to lost (pale). Used for delivery bars, heat and progress, never for decoration.

≥ 99%--sw-d-100#061a3a
≥ 95%--sw-d-95#0a3a85
≥ 90%--sw-d-90#0f5bd0
≥ 80%--sw-d-80#2f86ff
≥ 70%--sw-d-70#6faeff
≥ 60%--sw-d-60#a9cdfb
≥ 45%--sw-d-45#cfe0f6
≥ 25%--sw-d-30#dfe7f1
≥ 0%--sw-d-0#e8ecf1

02 · Colour

Paper, ink, one signal.

Surfaces & ink

Paper--sw-paper
#f6f6f2
Surface--sw-surface
#ffffff
Sunk--sw-sunk
#eeeee8
Ink--sw-ink
#0b1626
Ink raised--sw-ink-raised
#121f33

Brand blue

Blue 950--sw-blue-950
#071d40
Blue 800--sw-blue-800
#0a3a85
Blue 500 · logo--sw-blue-500
#007bff
Blue 300--sw-blue-300
#7db6ff
Blue 50--sw-blue-50
#eef5ff

Signal

Signal (teal)--sw-signal
#0b8a7d
Signal bright · on dark--sw-signal-bright
#3ddcc4
Signal soft--sw-signal-soft
#d6f2ec
Signal deep--sw-signal-deep
#07665c
Green--sw-green
#1f9d6b

03 · Type

Geist, Inter, Geist Mono.

A tight technical grotesk for claims, a neutral sans for reading, a mono for every measurement.

Display--sw-fs-display

Your network says covered.

H1--sw-fs-h1

Online is not the same as delivering.

H2--sw-fs-h2

Coverage you can't infer, you survey.

H3--sw-fs-h3

Silent gaps

Lead--sw-fs-lead

SignalWings measures what your IoT network actually delivers.

Body--sw-fs-body

Reports stop for hours while the link stays up.

Mono label--sw-font-mono

92 OF 96 REPORTS · LONGEST GAP 15 MIN

04 · Components

Small set, used everywhere.

Buttons

Kicker & chips

Coverage, measured

Status: online49% of expected reportsValue frozenMeasured

Stripes

Score dial

28/100
64/100
88/100

Lead form

Guide cover

Field guide · Edition 1 · 2026

The Silent Failure Field Guide

12 ways an IoT network fails without telling you

05 · Rules

Five rules that keep it honest.

  1. 01
    Measure, then claim.

    Every number on a page is either from a real source or labelled as an illustration. No invented benchmarks, customers or prices.

  2. 02
    One teal phrase.

    Headlines carry one teal phrase: the turn in the sentence. Never two, never italic.

  3. 03
    Tall and blue is delivered, short and pale is lost.

    Delivery bars are the only data visual. Height and colour always mean the same thing: share of expected reports that arrived.

  4. 04
    Controls name their action.

    “Book a pilot”, “Start the network check”. Not “Learn more”, not “Submit”.

  5. 05
    Mono for measurements.

    Figures, units, timestamps and labels use Geist Mono with tabular numbers.