Design system & brand guidelines · v1.2

Built for the
next moment.

Meet Signal: the working name for our design system, not the platform. Familiar streaming patterns. A warmer point of view. A story the audience can actually change.

The stream is the center.

We borrow familiar interaction patterns, not another platform’s identity. Twitch informs the content-first room structure; Kick informs the confident, pared-back contrast. Signal orange makes this experience its own.

Content gets the spotlight

A wide 16:9 stage, compact navigation, and quiet surfaces. No marketing wall between the viewer and the show.

The room feels human

Readable chat, visible authors, thoughtful empty states, and language that invites participation without pressure.

Agency is unmistakable

The direction, bid, countdown, and current leader live together. The system explains what is happening and what happens next.

Reference surfaces: Twitch, Twitch brand assets, and Kick. This is an independent interpretation, not their official design system.

A Spark starts something.

Sparks power audience direction. The split bolt is a product symbol, distinct from the Soft Loop brand mark. Use “1 Spark”, “10 Sparks”, and “Add Sparks”. Never confuse Sparks with XP or a cash balance.

Sparks

Solid silhouette, detached ignition cut, Signal orange. Use at 20–24 px beside an amount; 15 px minimum. Always give icon-only controls an accessible name.

Download Sparks SVG

Made for this story

A shared solid family for watching, joining the room, and directing. Familiar utility controls keep their simple line icons.

Clear about value

Only the winning bid is spent. Outbid holds are released. A purchase is not complete until the payment is verified. XP stays separate.

See the introduction

A little heat. A lot of focus.

Graphite does the heavy lifting. Orange marks decisions. Avoid purple and neon green as brand accents; semantic success green is reserved for actual status.

Signal orange#FF7849 · --accent

Primary action, selection, focus. Dark text on orange.

Graphite#0E0E10 · --background

The canvas. Keeps attention on the story.

Studio#171719 · --surface

Navigation, chat, cards, and account surfaces.

Elevated#202023 · --surface-raised

Inputs, secondary actions, contained controls.

Chalk#F3F3F5 · --text

Headings and primary information.

Silver#B2B2BC · --text-secondary

Descriptions and supporting information.

Quiet#9999A5 · --text-muted

Timestamps, metadata, secondary labels.

Warm shadow#2C1D18 · --accent-subtle

Selected navigation and director prompts.

Live / error · #FF5264Success · #6DD6ADWarning · #F3C56AInformation · #91BBFF

Clear at a glance.

Geist is our single, self-hosted type family. Strong, tightly spaced headlines meet practical UI text. Numbers that change use tabular figures.

Display · 32–62 px

Every room
has a secret.

Weight 750. Line height 1.03–1.2. Tight tracking, maximum two or three lines. Display is reserved for the artwork and guide.

Interface · 12–22 px

The next chapter is yours.

Weight 400–720. Short titles, clear verbs, and generous line height. The watch-page heading scales from 27 to 39 px.

Metadata · 9–11 px

English dialogue · Chapter 042

00:10

Only secondary information uses the compact metadata scale. Never shrink primary actions to make the layout fit.

One language. Every interaction.

These working specimens use the same tokens and button primitive as the product. No isolated mockup styling.

Actions

One orange primary action per task. Secondary controls stay quiet. Try the follow state.

Inputs & feedback

State, not decoration

Status always uses a word or icon as well as color. These are component examples, not live platform status.

LiveConnectedReconnectingPreview

Player & chat Auction panel Scene cards

Dense, never crowded.

A four-pixel spacing foundation, subtle corners, and predictable hierarchy. Motion helps people understand the interface; it never interferes with watching.

Foundation	Specification	Application
Spacing	4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48	Small inside controls; generous between tasks.
Corners	4 / 8 / 12 px	Controls / cards / larger panels. Round avatars only.
Desktop	218 px rail + fluid stage + 292 px chat	Persistent room navigation; video stays dominant.
Compact desktop	186 px rail at ≤1200 px	258 px chat; rail disappears at ≤1050 px.
Mobile	One column at ≤760 px	Player → chat → direction → scene history.
Scene grid	3 columns; 1 at ≤480 px	Equal card widths; no fake replay affordances.
Interaction	160 / 240 ms	Hover and focus transitions; no scroll hijacking.
Entrance	650–1200 ms, GSAP	Scoped, cleaned-up image and card reveals.
Reduced motion	No entrance animation	Static, immediately legible content.

Pull up a chair.

The voice is an inviting, sharp-witted host. It is direct about the product and honest about its limits. The audience is a co-author, not a metric.

Watch together.
Decide what happens next.

Say this

“What happens next?”

“Your idea. The next scene.”

“Reconnecting. Your draft is safe.”

“Preview artwork. Not live footage.”

Not this

“Revolutionary AI-powered engagement.”

“Guaranteed to make your scene.”

“Something went wrong.”

“Live now” when only artwork is available.

Identity guardrails

Use only the selected Soft Loop master. Do not substitute a standard infinity icon or a competitor’s mark. The platform has no text logo yet.

Soft Loop names the symbol; Signal names the system; The Midnight Hotel labels an illustrative show. None is the platform name. Naming and legal clearance need separate approval.

Logo rules & downloads

Make room for everyone.

Perceivable

Readable contrast on all text surfaces.
Dark labels on orange buttons, never small white labels.
Words accompany every status color.
Artwork is explicitly illustrative.

Operable

Visible focus ring and skip-to-stream link.
Native buttons, forms, and disclosure controls.
Arrow-key navigation for story tabs.
Reduced-motion preference respected.

Trustworthy

No invented viewer counts.
Preview chat stays isolated from the server.
Existing account and safety flows preserved.
Payments remain off until explicitly enabled.

Contrast and interaction targets are documented in the repository guide. This is a design standard, not a claim of completed assistive-technology certification.