Klipr

Klipr

Brand Guidelines

Version 1.0 — 2026

Brand Guidelines

The visual DNA, voice, and vocabulary of Klipr. Click any swatch to copy its hex. Linkable anchors on every section (/brand#colors).

Overview

Klipr is the share-first capture tool for the URL era, built on storage you control. One hotkey, one URL — klips live in your Drive, your S3 bucket, or your on-prem store.

✂️
Klip-first.
Everything starts with a capture. Fast, frictionless, keyboard-driven.
🖊️
Annotate in seconds.
Arrows, highlights, and text that go on before the share.
☁️
Your cloud.
Klipr stores nothing. Drive, S3, on-prem — your storage, your rules.
🔗
One URL to share.
A clean view URL — no account required to open a klip.
Primary Audience
Async-working teams (5–200) and regulated enterprises

Teams who've hit the ceiling on their current capture tool — price, platform, file ownership, or compliance. Loom-exhausted async teams who want their klips to stop living on someone else's cloud. Regulated enterprises (banks, healthcare, legal, gov) who structurally can't use Loom and need BYOK, SSO, audit logs, and on-prem deployment. The brand is direct, tool-like, and respectful of expertise — it speaks to people who don't need hand-holding.

Tagline

The tagline appears across all surfaces — meta tags, app store descriptions, hero banners, and email footers.

The Tagline
Your klips, your cloud.
Approved Renderings
Default (body copy, metadata, descriptions)
Your klips, your cloud.
Display (hero banners, splash screens, print)
YOUR KLIPS, YOUR CLOUD.
Rules
•Always include the period — it's part of the tagline.
•"your" is always lowercase in the sentence case rendering.
•Use ALL CAPS only in hero or display contexts. Body copy uses sentence case.
•Never use title case: "Your Klips, Your Cloud" is incorrect.
•The comma is mandatory — it separates two parallel claims.

Colors

A warm, editorial palette anchored in rust and ink. Dark-first, with a cream Paper for light contexts. Click any swatch to copy its hex.

Brand Gradient — Klipr Rust → Warm Amber
Primary
Copied!
Klipr Rust
#C13B1C
Primary brand color, CTAs, key accents
Copied!
Ink
#17171A
Primary background — the canvas everything lives on
Copied!
Paper
#FAF8F4
Light backgrounds, primary text on dark
Secondary
Copied!
Warm Amber
#E8A73A
Gradient accent, warnings, highlighted states
Copied!
Chalk
#E8E4DB
Soft text on dark, borders on light backgrounds
Copied!
Panel
#1f1f23
Card surfaces, sidebar, raised panels
Neutrals
Copied!
Panel Alt
#28282d
Secondary panels, nested cards
Copied!
Border
#2a2a30
Dividers, input borders
Copied!
Text Soft
#b9b9c0
Secondary text, subheadings
Copied!
Muted
#5E5E66
Placeholder text, disabled states
Accessibility

All text-on-background pairings must meet WCAG AA: 4.5:1 for body text, 3:1 for large text.

Rust on Ink — meets AA (large text) ✓ Paper on Ink — 19.5:1 ✓

Never rely on color alone — always pair with shape, label, or icon.

Typography

Three typefaces, one job each. All available free on Google Fonts.

Display
Space Grotesk
Marketing headlines, hero text, logotype
Aa Bb Cc
0123456789
Medium 500, Bold 700
Body
Inter
UI text, body copy, navigation, captions
Aa Bb Cc
0123456789
Regular 400, Medium 500, SemiBold 600, Bold 700
Mono
JetBrains Mono
Code, timestamps, hex values, metadata
Aa Bb Cc
0123456789
Regular 400 only
Type Scale
DisplayInter · 800 · 56pxThe quick brown fox
H1Space Grotesk · 700 · 40pxThe quick brown fox
H2Space Grotesk · 700 · 28pxThe quick brown fox
H3Space Grotesk · 500 · 22pxThe quick brown fox
BodyInter · 400 · 16pxThe quick brown fox
SmallInter · 400 · 14pxThe quick brown fox
LabelInter · 500 · 11pxThe quick brown fox
MonoJetBrains Mono · 400 · 13pxThe quick brown fox
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');

Voice

Direct, not brusque. Tool-like, not clinical. Klipr talks like a sharp colleague, not a corporate product.

✓ Do
"Klip saved to your Drive."
✕ Avoid
"Asset successfully synchronized to designated cloud storage."
✓ Do
"Your storage. Your rules."
✕ Avoid
"We offer user-configurable cloud storage backends."
✓ Do
"Connect your Drive and start capturing."
✕ Avoid
"Please configure your cloud storage integration to begin."
✓ Do
"Something went wrong. Try again."
✕ Avoid
"An unexpected error occurred during the capture operation."
✓ Do
"Annotated. Shared. Done."
✕ Avoid
"Annotation process completed. Share link generated successfully."
✓ Do
"Deploy Klipr anywhere your data can live."
✕ Avoid
"Klipr supports enterprise-grade data residency and deployment options."
Marketing copy

"Your klips, your cloud."

UI copy

"Button: 'Capture Region' — not 'Start Screenshot'"

Error states

"Couldn't connect to Drive. Check your connection."

Success states

"Klip saved to your Drive."

Vocabulary

Locked terms for product copy, docs, and marketing. Consistency here shapes how users understand the product.

Locked Terms
Klip (with a K)
Any captured artifact — screenshot, screen recording, voice klip, meeting capture, mobile capture. Never "clip," "screenshot," "asset," or "image."
Capture
The act of creating a klip. A verb. Never "take," "snap," or "grab."
Voice klip
A standalone audio capture — voice memo, verbal note, recording without video. A first-class klip type. Never "audio file," "voice memo," or "recording."
Threads
The conversation surface on a klip — comments, voice replies, and version history. Never "comments," "replies," or "discussion."
Version
A new iteration of an existing klip, accessible at the same URL with history preserved. Never "v2," "update," or "revision."
Annotate
Add arrows, text, highlights to a klip. Never "edit," "mark up," or "draw."
View
The shareable URL pointing to a klip. Never "link," "URL," or "permalink."
Drive
A user's connected storage. Capitalized. Google Drive for personal; S3-compatible for teams and enterprise. Never "backend," "storage," or "cloud."
Connect
Link a storage account or bucket. Never "integrate," "configure," or "set up."
Region
A selected area of the screen. Never "area," "zone," or "selection."
Window
A specific application window. Never "target" or "source."
Workspace
A team's shared klip surface, isolated from other workspaces. Never "team," "organization," or "tenant."
Use / Don't Use
✓ Klip
✕ Clip, screenshot, image, asset
when referring to a captured item
✓ Capture
✕ Take, snap, grab
when describing the act of capturing
✓ Voice klip
✕ Audio file, voice memo, recording
when referring to a standalone audio klip
✓ Threads
✕ Comments, replies, discussion
when referring to the conversation surface
✓ Version
✕ v2, update, revision
when referring to an evolved klip at the same URL
✓ Annotate
✕ Edit, mark up, draw
when adding marks to a klip
✓ View
✕ Link, URL, share link
when referring to the shareable reference
✓ Drive
✕ Backend, storage, cloud
when referring to connected storage
✓ Connect
✕ Integrate, configure, set up
when linking a storage account
✓ Workspace
✕ Team, organization, tenant
when referring to a shared klip surface

Layout

Spacing scale, border radii, and grid rules. Built on a 4px base unit.

Spacing Scale
--space-14pxTight internal padding
--space-28pxBetween related elements
--space-312pxCard internal padding
--space-416pxBetween cards
--space-624pxSection gaps
--space-832pxMajor section breaks
--space-1248pxPage section separation
--space-1664pxHero / header spacing
Border Radii
Buttons6px
Cards10px
Modals14px
Pills / Tags9999px
Avatars50%
Grid Rules

Max-width 800px for narrative content, 1100px for full-width brand surfaces. Desktop gutter: 24px. Mobile gutter: 16px.

Motion

Snappy but not frantic. Klipr is a tool — motion confirms state, it doesn't perform. Always respect prefers-reduced-motion.

Transition Tokens
Fast — 120ms
ease-out
Hover states, focus rings, toggles
Medium — 200ms
ease-in-out
Panel slides, tab switches, toasts
Slow — 350ms
ease-out
Page transitions, modal entrances
Under @media (prefers-reduced-motion: reduce), all transitions collapse to 0ms.
Recording Pulse

The active-recording indicator uses a slow, breathing pulse: scale(1) → scale(1.12) → scale(1) over 1.8s with ease-in-out. This is the only looping animation in the product — reserve it exclusively for live recording state.

In Practice

How the brand system comes together across product and marketing surfaces.

Klip Card (Dark)
capture.png
Bug report — checkout flow
2 min ago · Google Drive
App Icon
128px — macOS Dock
64px — Finder
32px — Menu bar
Social & Marketing
Profile icon:
Mark on Ink, no border. 400×400px minimum.
Cover / OG image:
Brand gradient + Space Grotesk tagline on Ink.
Post thumbnails:
Klip preview inside an Ink-background card frame.
Questions about brand usage? Email hello@klipr.app.