Clipkit — Brand#

The load-bearing version of the Clipkit brand. AI agents and human contributors read this; the visual companion (with rendered swatches and type specimens) lives at brand/board.html. When the two disagree, this file wins.

1. Essence#

The video runtime for agents.

Clipkit is a developer tool — a GPU-rendered video runtime built on the open Clipkit Protocol — and it should feel like one: precise, fast, and unfussy. The visual language borrows from modern dev infrastructure brands — Vercel, Linear, Resend — dark by default, mostly monochrome, with two confident accent colors doing all the talking.

The runtime turns a JSON timeline into a rendered video. That duality — structured code on one side, motion on the other — is the heart of the brand. Wherever possible, show the JSON and the timeline together.

The Clipkit Protocol is what makes the runtime portable: a documented, versioned JSON format that anyone can implement. It's a credibility feature, not the headline. Lead with the runtime; the protocol shows up as "how is this possible? → via the open Clipkit Protocol."

2. Logo#

Three equal-length rounded bars — white, yellow, red — offset horizontally and stacked like clips on a timeline. The mark is the product: tracks of media, layered in time.

Construction#

• Three bars of equal width and height.
• Bar width = 65% of container width.
• Bar height = 29% of container height (~3 stacked bars + 2 small gaps).
• Stagger:
  • Bar 1 (top) — white #FAFAFA, offset right (left: 33% of container).
  • Bar 2 (middle) — yellow #FFB800, flush left (left: 0).
  • Bar 3 (bottom) — red #EF4444, offset right (left: 35% of container).
• Bar corner radius ≈ 18% of bar height (rounded, not pill-shaped).
• Wordmark when locked up: Geist 600, tracking −0.02em, gap 14px from the mark.

Do#

• Keep the three-bar stagger and the white / yellow / red order, top to bottom.
• Use the icon alone at small sizes; pair with the wordmark elsewhere.
• Give the mark clear space equal to one bar's height on all sides.
• Set the wordmark in Geist, weight 600, tight tracking (−0.02em).

Don't#

• Recolor the bars or reorder them (the order encodes the timeline).
• Add gradients, glows, bevels, or drop shadows to the mark.
• Rotate, skew, or outline the bars.
• Set the wordmark in any font other than Geist.

Variants#

Sizing#

• Minimum width: 88px (icon + wordmark lockup) or 24px (icon alone).
• Favicon: icon alone, square crop with 12% padding.

3. Color#

Two brand accents, one near-black surface system. Accents are for emphasis only — a single red dot or yellow word carries more weight than a field of color. Aim for 90% neutral, 10% accent.

Brand accents#

Accent variants#

Selection fill is yellow on dark text: background: var(--yellow); color: #181717.

Dark surface system (canonical)#

Used everywhere unless explicitly in light mode.

Light surface system (warm cream)#

Used only when a surface explicitly needs to be light — landing-page sections, customer assets, etc.

4. Typography#

Geist & Geist Mono#

Geist Sans for everything human-readable — headlines, body, UI. Geist Mono for everything machine — code, labels, eyebrows, metrics, timestamps, captions of intent. The sans/mono split mirrors the product's human-vs-machine duality.

Headlines run tight: weight 600, tracking −0.02em to −0.035em as size grows. Body stays at weight 400, 1.6 line-height. Never use a third family.

Type scale#

Loading Geist#

<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;900&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Code syntax coloring (when rendering JSON)#

The brand uses syntax coloring in JSON specimens:

• Keys — var(--muted) (#8A8A8A) or var(--fg-2) (#E5E5E5).
• Strings — var(--yellow) (#FFB800).
• Numbers — var(--red) (#EF4444).
• Booleans / null — var(--muted).
• Punctuation (: , { } [ ]) — var(--muted-2) (#5F5F5F).

This mapping is the same in the brand board's code block. Use it consistently — it makes JSON specimens immediately recognizable as Clipkit.

5. The timeline motif#

The logo's three bars extend into a full visual system: stacked tracks, a red playhead, and offset blocks. Use it for dividers, section markers, hero visuals, and empty states.

The motif is not the same as the logo. The logo is locked geometry; the motif is a flexible visual system inspired by it.

6. Voice & tone#

Write like a senior engineer explaining a tool to a peer: direct, concrete, a little opinionated, never hype. Lead with the technical truth. Respect the reader's intelligence. Admit the limits — the honest comparison with Remotion is a feature, not a risk.

Short sentences. Active voice. Real numbers over adjectives. When in doubt, show the JSON instead of describing it.

We say / we don't say#

Do#

• Lead with the technical truth.
• Show numbers, not adjectives ("renders in 3.4s" not "blazing fast").
• Admit limits when they exist (honest Remotion comparison is fine).
• Use lowercase for mono labels and eyebrows.
• Show JSON instead of describing it when in doubt.

Don't#

• Use emoji.
• Use exclamation marks.
• Say "blazing," "stunning," "powerful," "intuitive," "easy-to-use," or any near-synonym.
• Use marketing-speak superlatives ("the ultimate," "the best," "next-generation").

7. Copy-paste tokens#

Drop this into :root and you have the dark theme.

/* Clipkit — brand tokens (dark, canonical) */
--red: #EF4444;       --yellow: #FFB800;
--bg: #0A0A0A;        --bg-2: #111111;       --bg-3: #161616;
--surface: #141414;   --border: #232323;     --border-strong: #2E2E2E;
--fg: #FAFAFA;        --fg-2: #E5E5E5;
--muted: #8A8A8A;     --muted-2: #5F5F5F;    --code-bg: #0E0E0E;

/* fonts — Geist + Geist Mono (Google Fonts) */
--font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

Light-theme overrides:

--bg: #FAF8F3;  --surface: #FFFFFF;  --border: #E5E0D2;
--fg: #181717;  --muted: #6A6864;

8. One-line brief for an AI#

For pasting into a system prompt when authoring Clipkit-branded assets:

Clipkit is a developer tool — "the video runtime for agents." A GPU-rendered engine that turns a JSON timeline into MP4, built for LLMs, agents, and the apps that ship them. It's powered by the open Clipkit Protocol but lead with the runtime, not the protocol — the protocol is a feature credit. Dark by default (#0A0A0A bg, #FAFAFA text), Geist + Geist Mono. Two accents only: red #EF4444 (playhead/live/emphasis) and yellow #FFB800 (active caption word / code strings). ~90% neutral, 10% accent. Logo is three equal, horizontally-offset rounded bars (white, yellow, red, top to bottom) like timeline clips. Voice: direct, concrete, honest, no hype, no emoji. Show JSON, not adjectives.

Document history#

• 2026-05-28 — Initial port from brand/board.html (v1 of the brand board).