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.

One typeface. Inter, and nothing else. Weight carries the difference a second family used to carry — Light 300 is the display voice, Regular 400 reads, Medium 500 labels. No serif, no italic, no monospace, anywhere.

Display — Inter Light 300

Note titles, headlines, screen titles, large numeric stats. The light weight at large sizes is the signature — a Clipnote headline is thin and open, never bold. Never set display type at 400 or heavier.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Body / UI — Inter Regular 400

Body copy, captions, nav, metadata, descriptions, and anything longer than a line. Weights in use: 400 default, 500 labels and emphasis, 600 active states, 700 counts and small all-caps.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Type scale

grief & static

Display Hero Inter Light 300 · 64px / 1.0 · −2px tracking

what silence sounds like

Display XL Inter Light 300 · 40px / 1.05 · −1px tracking

the last train to anywhere

Display LG Inter Light 300 · 28px / 1.1

margot_writes · 4:12

Display MD Inter Light 300 · 20px / 1.2

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

Body LG Inter Regular 400 · 17px / 1.6

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

Body MD Inter Regular 400 · 15px / 1.6

2.4K followers · 84 notes · 312K listens

Body SM Inter Regular 400 · 13px / 1.6

Featured · Poetry · 3 min read

Label Inter SemiBold 600 · 10px · +3px · caps

84,312 listens · +12% · 7d

Mono / Meta Inter Regular 400 · 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!"

05 — UI Components

The building blocks.

Components are minimal by design. No shadows. No gradients. Borders are 1px. Radius is used only on pills and avatars — never on cards or panels.

Buttons

On dark

Filter pills

Poetry Fiction Memoir Essays

7d 30d All

Section labels

Poetry Featured Memoir

Trending this week

In-app — genre pill

Poetry Fiction Memoir

Outlined, never filled. 9px / 700 / +3px tracking, uppercase, 2px radius, 50%-opacity border. This is the pill on every Note in the feed — do not substitute the filled section label above.

In-app — read affordance

Read along

Sits under every Note title and opens the synchronized reading view. Always Clipnote Orange — it is the one cue that tells a listener the words are there to follow.

Note card

grief & static

margot_writes · 3:42 · Poetry

2,847 listens

312

the last train to anywhere

j.d.morrow · 4:18 · Fiction

1,203 listens

Stat display

84K

Listens

312

Clips

2.4K

Followers

Toast notification

Draft saved. Published. Clip marked at 1:24.

Spacing scale

Base unit: 4px. All spacing is a multiple of 4. Content areas use 20px side padding. Status bar clearance is 64px minimum.

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 Inter Light 300 for display text and numeric stats. One family, weight does the work.

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.

Set display type at 400 or heavier, or introduce a second typeface.

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

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