SPG by Windsong Communications Inc.

The SPG brand

How Single Pane of Glass looks, sounds and is used. This page is for viewing: the SPG name, wordmark, colors and these guidelines belong to Windsong Communications Inc. All rights reserved. They may not be copied, downloaded or used without written permission. For approved artwork, email [email protected].

The name

The product is Single Pane of Glass. Write it out in full the first time, as Single Pane of Glass (SPG), and use SPG after that. With the logo or the full name, the byline is by Windsong Communications Inc., in full. The one short form is the text alert prefix, "SPG by Windsong:", which is registered with the carriers and never changes.

Write SPG · Single Pane of Glass · SPG by Windsong Communications Inc.
Not Spg · S.P.G. · SPG System · Single-Pane-of-Glass

Logo

The logo is the S of SPG inside a single pane, its frame open at two corners, above the SPG wordmark: one view of everything, with room to see out. It is always in the signal gradient, cyan to violet, left to right.

Full logo on Glass navy
Full logo on white
SPG mark The mark: app icon, favicon, avatars
SPG wordmark The wordmark: beside the mark, or where it's too tall
SPG logo animation In motion: video intros and the start of presentations
  • Clear space: keep empty space around the logo at least the height of the S in the frame, on every side.
  • Smallest size: the full logo 96 pixels tall on screens, 25 mm in print. Smaller than that, use the mark alone.
  • Backgrounds: Glass navy, Panel, or plain white. Never a busy photo or pattern.
  • Browser tabs: the wordmark alone. Phone home screens: the mark on Glass navy.

Don't

Stretch or squash it
Recolor it
Put it on busy backgrounds
SPG Retype it in another font

Colors

SPG is dark by design: it lives on control-room screens around the clock. Two accents carry the brand.

Glass
#070B12
Backgrounds
Panel
#0E1522
Cards and panels
Line
#1C2636
Borders and dividers
Text
#E6EDF3
Main text
Muted
#8B98A9
Secondary text
Signal
#22D3EE
Main accent: links, focus, live
Violet
#A78BFA
Second accent
Signal gradient · #22D3EE to #A78BFA · the wordmark and the main button only

Status colors

These mean something to the people on shift. Use them only for status, never as decoration.

OK
#34D399
Healthy, on air, recovered
Warning
#FBBF24
Needs a look
Down
#F87171
Critical, offline, failed

Type

Aa
Inter
Everything people read: headings, labels, messages. Segoe UI where Inter isn't installed.
00:42
JetBrains Mono
Numbers, times, addresses and codes, so digits line up.

Voice

  • Plain and exact. Say what happened, where and when: the feed, the device, the time.
  • Calm. No exclamation marks, no alarm words. Critical alerts are serious by their content.
  • Short. An alert is read on a phone at 3 a.m. Lead with what needs doing.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.