Brand book

The Noise brand book

Real fans.
Big voices.
Bring the noise.

How Noise looks, sounds and moves. Use it for anything that carries our name.

Get the logo See the product

Our story

Noise helps hosts run audience-driven campaigns to grow their shows. Hosts are our customers. Fans are the engine.

What fans do

  • Vote on the next guest or topic
  • Ask questions, in writing or on video
  • Clip the best moments and share them
  • Pledge, pre-order and show up to live tapings

What hosts get

  • New listeners, brought in by their fans’ links
  • Fans they can verify, know and thank by name
  • Sponsors sold on verified listeners
  • Group pre-orders, pledges, memberships and paid DMs

What we believe

Real people over bots

Every fan has a verification meter. Bots count zero, so a vote on Noise means a person.

1,204

Votes

0

From bots

Fans shape the show

They pick guests, ask the questions and fund the big moments. Their level follows what they did.

Listener Shaper Superfan

Give credit out loud

When a fan’s idea makes it on air, we tell them, and we tell them where.

Your question made it into Ep 41

Maya asks it at 1:47. Tap to listen.

Calm on purpose

One clear action per screen, plenty of white, and coral only where it matters.

One primary action. Everything else waits.

Moods and reactions

The mascot’s eyes react to what you just did, then settle back. Every logo on the screen shares one mood, so the whole app feels like it noticed.

Eight moods

A mood holds for 1.8 seconds. Listening lasts as long as something plays. Click a card to see it again.

Six reactions

Click any logo and the mascot does one of six moves, picked at random and never the same twice in a row. Moods are feedback. Reactions are just for fun.

  • The eyes change, nothing else.Moods swap the eyes and sometimes add sound waves. The headphones, the face and the grin never change shape.
  • One mood per action, from one list.Actions map to moods in a single registry in the app. Add an action there, never per button.
  • Never the only confirmation.A mood is a wink, not a message. The action still says what happened in words: “Vote counted”, “Link copied”.
  • Still for people who ask for still.With reduced motion on, moods swap without the pop and reactions skip their extras.

Color

Mostly white and ink, with one accent. Coral is loud, so we use it like a highlighter: the verified check, the one action that matters, a big number.

Neutrals

Click any swatch to copy its hex.

Accent and mascot

Dark theme

The same names, flipped. On near-black, bright coral works as text, so coral fills turn light and carry near-black text instead of white.

Rules

  • Coral at most once or twice per screen.If two things are coral, ask which one matters more.
  • Fill with deep coral when text sits on it.White on deep coral passes AA at 5.0:1. White on bright coral fails at 2.6:1. Back this5.0:1Back this2.6:1
  • Bright coral is for icons, bars and big type.Never for small text on white. Use deep coral for small accent text.
  • Pink belongs to the mascot.The tongue, love hearts, blushing cheeks. Nowhere in the interface.
  • No gradients, no colored shadows.Depth comes from hairlines and soft neutral shadows. Show covers bring the extra color.

Typography

Two families. Nunito Black is rounded like the wordmark and only shows up big. Manrope does all the reading.

Nunito Black

900, tracking −2%

Make some noise.

Manrope

400 to 800

Regular Medium Semibold Bold Extrabold

The scale in the app

Every size below is used in the product today. Pick from the list instead of adding a new one.

DisplayNunito 900, 72/80

Bring the noise.

Display, phoneNunito 900, 44/50

Big voices.

NumberNunito 900, 26/32

1,204 new listeners from fans’ links

TitleManrope 700, 28/34

Campaigns you can run

Title, phoneManrope 700, 22/28

Know your people

LeadManrope 400, 17/26

Grow your show with your community.

BodyManrope 400, 16/24

Votes count, and so does every new listener your link brings in.

Row titleManrope 600, 15/20

Pick the guest for Ep 42

SecondaryManrope 400, 14/20

Maya asks it at 1:47. Tap to listen.

MetaManrope 400, 13/18

Ends in 3 days

PillManrope 700, 12

Shaper

  • Nunito for headlines and numbers only.Never for body text, buttons or labels. Always 900, always tightened to −0.02em.
  • Sentence case everywhere.“Pick the guest”, not “Pick The Guest”. No all-caps labels.
  • Numbers line up.Counts, prices and percentages use tabular figures so they don’t jitter as they change.

Icons and show art

Icons are quiet line drawings from Lucide. Color comes from the shows themselves: every show gets a generated cover in its own colors.

Sizes and stroke

Stroke 2 (1.9 is fine at 20px and up). Icons take the text color.

16
18
20
24

No emoji as icons

Emoji render differently on every phone and shout over the interface. Fans can use them in what they write; we don’t use them in UI.

Show art

A show’s cover is its background color, one accent pattern and its name in Nunito Black. No uploads needed, so every show looks finished from day one.

Six patterns

Rings, bars, dots, wave, grid and sun, drawn in the show’s accent at about half opacity. Under 64px the name turns into initials.

Voice and tone

We sound like a host who knows their fans by name. Plain, warm and short, and never louder than the moment.

Plain

Say what happened, in the words a fan would use. Questions, guests and episodes, not “content” or “engagement”.

Warm

Name the person and give the credit. A thank-you with a detail in it beats a generic one every time.

Short

Labels over sentences. If a button needs a paragraph to explain it, the button is wrong.

Say it like this

Your question made it into Ep 41Specific, about them, with the proof.

Congratulations! Your submission has been selected for inclusion.

Votes count, and so does every new listener your link brings inExplains the Noise Score without naming a formula.

Boost your impact with our proprietary engagement algorithm.

Sell sponsorships on verified listeners, not download guessesA real benefit and a real contrast.

Supercharge your monetization journey.

Link copiedThe action, in the past tense. Done.

Success! The link has been copied to your clipboard.

That link expired. Ask the host for a new one.What went wrong and what to do next.

Oops! Something went wrong.

Be the first to askAn empty list is an invitation.

No questions found.

Our words

Use these the same way every time, so fans and hosts learn them once.

Noise Score
Verified votes plus the new listeners your link brings in. How a campaign picks its winner.
Verified
A real person, shown by the coral check. Verification is a meter, not a gate: every signal adds to it.
ListenerShaperSuperfan
Fan levels with a show. Listener follows it. Shaper helped shape an episode. Superfan is verified and brought listeners in or got on air.
Campaign
Something a host asks fans to do together, with an end date. Built from a template.
Vote, Submit, Rally, Event
The four building blocks. Fans pick from options, send questions and clips, push a counter toward a goal, or RSVP for something live.
Make some noise
Our call to action for fans. Use it once per screen, at most.

Mechanics

  • Digits for numbers“3 days”, “Ep 41”, “1.2K”. Short forms for big counts.
  • Buttons are verbs“Vote”, “Ask”, “Back this”. The toast repeats the verb: “Vote counted”.
  • Easy on the exclamation marksOne, for a real moment of celebration. Never in errors.
  • No dashes for dramaUse a period or a comma. Short sentences carry the rhythm.

Product UI

The app should feel calm enough to use between episodes. These pieces are rebuilt here from the real components.

Lists before card walls

Rows with a cover, a title and one fact read faster than a grid of boxes. Cards are for campaigns you can swipe through.

One primary action

Each screen has one ink button. Everything else is a line button, a quiet button or a link.

Coral means it counts

The verified check, the leading bar, the one action. If coral shows up as decoration, take it out.

Actions float, content scrolls

On a campaign or episode page, the actions sit in a floating pill at the bottom of the screen, within thumb reach.

Deep Signal, vote

Pick the guest for Ep 42

Dr. Lena Ortiz leadsNoise 1.2K

Ends in 3 days
Campaign card. What kind it is, the title, one fact, a few faces and when it ends. The whole card is the link.
Kenji Watanabe Superfan 131 brought in
Verified human90%
  • Signed in with Google or X+30
  • Connected listening history+15
  • Shared your top 5 episodes+15
  • Picked favorite shows+10
  • Location matches your activity+10
  • Invited by a host+10
  • Member for 30 days+10
The verified check. Coral, right after the name. Hover or tap it for the breakdown: how verified, and which signals got them there.

Your question made it into Ep 41

Maya asks it at 1:47. Tap to listen.

2m

Maya thanked you

“Your clips brought in 131 new listeners. You’re in the credits.”

1h

Pick the guest closes tomorrow

Dr. Lena Ortiz leads by 140 noise.

5h
Notification rows. Who or which show, what happened in one line, and when. A coral dot only for unread.
Floating pill bar. Try it: each action changes the mascot’s mood up top.
Ink, the primary
Line
Quiet
Coral, the one that matters
Listener
Levels stay quiet
Buttons. 12px corners, 44px tall to hit, a 0.97 press. Most buttons are ink or line; the coral fill is for the single action a screen exists for.

Campaigns a host can run

Every template is one of the four building blocks with a name and good defaults.

Vote
Vote on a guest, vote on a topic, fans suggest and you choose.
Submit
Upcoming episode questions, topics and video questions. Clip your favorite moment.
Rally
Rally for a dream guest, pledge for a cause, fund something big, group pre-order.
Event
Live stream, live taping and community events, with reminders and RSVPs.

See them in the product

Motion

Quick and soft. Things move because you did something, they finish fast, and they never make you wait. Click a box to play it.

  • Ease out, between 150 and 420ms.Fast to start, gentle to land. Nothing linear, nothing longer than half a second.
  • Motion answers an action.A press, a vote, a sheet you opened. No looping decoration, except the sound waves while something plays.
  • Interruptible.State changes use transitions, so a second tap reverses mid-way instead of waiting.
  • Reduced motion means still.When the device asks for less motion, everything finishes in a millisecond.

Downloads

SVG for anything digital or printed. PNG for tools that won’t take SVG. Every file has a transparent background.

Everything in one file

All logos as SVG and PNG, plus the color tokens as CSS.

Download all (.zip) Color tokens (.css)

Fonts: Nunito and Manrope on Google Fonts, both free under the Open Font License.