Clipnote — Brand Guidelines

00 — Brand Story

Your words, heard.

Read your work aloud. Share it. Get discovered. Poetry, fiction, memoir, spoken word, and whatever else you create — with a community built to listen.

01 / Origin

It started with a TikTok scroll. Watching creators post audio clips where the words appeared on screen in time with a voice. No face. No production. Just language moving with sound.

One thought landed: why doesn't somebody build a space where people can just write and pass their words to each other?

Friends who were poets, fiction writers, spoken word artists made it clear through regular conversation. Not research. Not surveys. The space was completely untapped. Nobody was building for literary creators. That is how Clipnote was born.

02 / Name

Clip

An audio clip. Short-form, shareable, self-contained. Also: to cut. To distill something down to its sharpest form.

Note

A note you pass. Direct, personal, meant for someone specific. Not a broadcast. A moment of connection between a writer and a listener.

CliffsNotes

Literature, without the gatekeepers. Clipnote inherits that spirit. A short audio clip of written work, passed like a personal note, accessible to anyone.

03 / Mission

Every creative discipline has been given a home in the last fifteen years. Musicians. Video creators. Visual artists. Literary creators never got one.

Writers have been asked to fit themselves into tools built for other mediums, or storefronts built to sell books rather than serve the people who write them.

Clipnote is a home for literary creators. Built for the way they actually work. Designed around the people who are meant to hear them. Control of the work. Control of the audience. Control of the voice.

04 / Philosophy

Every app being built right now is optimized for the same thing. Keeping your eyes locked to a screen. More scroll. More watch time. More engagement.

Clipnote was built around the opposite idea. Put your headphones in. Press play. Go live your life. Let literature become ambient.

The product gives you options. Read if you want to. Listen if you would rather. But the design philosophy is clear: audio first, screen optional, life uninterrupted.

05 / Voice

Direct

No filler. No hedging. No startup speak. Say the thing. Plain sentences that mean something.

Creator First

Always on the side of the writer. Every piece of copy passes a single test: does this serve the creator, or does this serve Clipnote? If Clipnote, rewrite it.

Editorial

The brand speaks like a magazine, not a startup. It has a point of view. It takes positions. It does not hedge every claim.

Human

Warm but precise. Not mission statements or brand pillars. Talks like a person who knows what they mean. Never sentimental.

06 / Tagline

Your words,
heard.

Literal

Your words, the thing you wrote, are heard. Someone listened. That moment happened because of Clipnote.

The Mission

Literary creators have spent years producing work that disappeared into platforms never built for them. Clipnote is the platform that finally says: your words will be heard. It closes every pitch. It earns its place every time.

01 — Logo

The mark.

The Clipnote logo is two elements: the icon mark (three tapering vertical bars) and the custom wordmark. The lockup — mark plus wordmark — is always used together. The mark may appear alone. The wordmark never appears without the mark. Never alter, recreate, or separate either element.

Light background — standard

Dark background — reversed

Red background — all white

Icon mark — sizes

48px

36px

24px

16px

Monochrome — black

Logo usage rules

Icon mark + wordmark

Always

Icon mark alone

Allowed

Wordmark alone

Never

Clearspace

Minimum clearspace (x) equals the height of the icon mark on all four sides of the lockup. Nothing — text, borders, or other graphics — may enter this zone at any size or on any background.

x = height of the icon mark

Scale x proportionally at every size. At 24px mark height, clearspace = 24px on all sides.

The clearspace zone must remain free of all other graphic elements — text, borders, imagery, and other logos — on every background and at every scale.

02 — Color

The palette.

Six colors. No more, no less. Clipnote Orange is the only accent. Everything else earns its place through restraint.

#FF3210

Clipnote Orange

Primary accent. CTAs, clip hearts, active states, section labels.

#000000

Pure Black

Primary text. Dark backgrounds. Primary buttons.

#FFFFFF

Paper White

Default background. The base. White space is the structure.

#F5F5F5

Light Gray

Secondary backgrounds. Screen fills. Inactive areas.

#999999

Muted

Secondary text. Meta labels. Timestamps. Placeholders.

#E5E5E5

Rule

Hairline dividers. Borders. 1px only. Never thicker.

Color Usage Rules

Use Clipnote Orange for

Active states and selected pills.

The clip heart and clip count.

Primary CTAs where one clear action must be taken.

Section label chips and category markers.

Play progress bars on thumbnails.

Never use Clipnote Orange for

Large background fills or full-screen washes.

Body copy, long-form text, or secondary labels.

Decorative elements that carry no interactive meaning.

More than one element per visible screen section.

03 — Typography

The type system.

Two typefaces. Space Mono carries the display voice — monospaced, editorial, precise. Space Grotesk handles all UI and reading text. They do not overlap.

Display — Space Mono

Headlines, screen titles, numeric stats, timestamps in large format. Never used for body copy or anything requiring extended reading.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Body / UI — Space Grotesk

All UI labels, body copy, captions, nav items, metadata, descriptions, and anything longer than a single line. Weights: 400 (default), 500 (emphasis), 700 (strong).

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Type scale

grief & static

Display Hero Space Mono · 64px / 1.0 · −2px tracking

what silence sounds like

Display XL Space Mono · 40px / 1.05 · −1px tracking

the last train to anywhere

Display LG Space Mono · 28px / 1.1

margot_writes · 4:12

Display MD Space Mono · 20px / 1.2

A place for writers who want to be heard. Short-form audio readings, clipped and shared.

Body LG Space Grotesk · 17px / 1.6

Poetry. Fiction. Memoir. Spoken word. If it fits in three minutes, it belongs here.

Body MD Space Grotesk · 15px / 1.6

2.4K followers · 84 notes · 312K listens

Body SM Space Grotesk · 13px / 1.6

Featured · Poetry · 3 min read

Label Space Grotesk 600 · 10px · +3px · caps

84,312 listens · +12% · 7d

Mono / Meta Space Mono · 13px · muted

04 — Voice & Tone

How Clipnote speaks.

Clipnote is written for people who care about words. The copy is restrained, precise, and literary without being pretentious. Every string earns its pixels.

Direct and unhurried. Says what it means, then stops.

Literary without being precious. Smart without showing off.

Warm to the writer, invisible to the reader.

Comfortable with silence. Not every screen needs a headline.

Lowercase unless capitalization is structural (proper nouns, ALL-CAPS labels).

Is not

Chatty, hype-driven, or startup-casual. No "Let's go!" or "Awesome!"

Emojis. Ever. Not even in error states or empty screens.

Filler copy. "Welcome to your library" is five words Clipnote would never say.

Exclamation points in body copy or UI labels.

Motivational. Clipnote does not cheer. It listens.

Writing samples

Use this

"Draft saved."
"Nothing here yet."
"Clip marked at 1:24."
"Follow to hear new notes."
"Password updated."
"Published."

Not this

"Your draft is safe and sound!"
"Your library is empty. Start saving notes!"
"You clipped that! Nice!"
"Follow this writer to never miss a note!"
"Your password has been updated successfully!"
"Your note is live! Go share it!"

06 — Imagery

Photography & art direction.

Clipnote imagery is documentary in character. Candid, lit by available light, shot close. Photos serve as mood and context for the note — never decoration. The subject is always the human, the page, or the city at 3am.

Candid warmth

Close portrait

Urban mood

Solitary nature

Preferred

Available light, slight grain, natural color.

Candid or quietly staged. Never obviously posed.

Tight crop. Single clear subject.

Desaturated or warm — never oversaturated or filtered.

Avoid

Stock photography that reads as corporate or generic.

Bright, flat, overstyled lifestyle photography.

Illustrated or illustrated-photo hybrid treatments.

Any image that could belong to a different app.

08 — Do / Don't

The hard rules.

The things that make Clipnote look like Clipnote — and the shortcuts that will make it look like everything else.

Use 1px hairline borders (`#E5E5E5`) for all card and panel edges.

Use Space Mono exclusively for display text and numeric stats.

Default to white or `#F5F5F5` backgrounds. Earn every dark fill.

Keep Clipnote Orange (`#FF3210`) to a maximum of one active element per screen section.

Write copy at the minimum necessary length. Then cut it by half.

Use border-radius only on pills (100px) and circular avatars. Cards are square.

Don't

Add box shadows or drop shadows to any component.

Use gradients except for photo-scrim overlays on full-bleed images.

Use emojis anywhere in the product UI or marketing copy.

Use Space Mono for body copy or anything exceeding two lines.

Fill panels or backgrounds with Clipnote Orange. It is an accent, not a fill.

Design anything that could pass as TikTok, SoundCloud, or Spotify.