Termbay Brand Guidelines

Brand story & positioning

A coding agent CLI is a boat — it goes out, does work, comes back with something to report. Run several at once and you need a place to dock them where you can see all of them at a glance, without losing track of which one needs you. That place is the bay.

Every terminal column in Termbay is a docked vessel: given its own berth, resizable, movable between rows, but never lost in a sea of tabs. The beacon — the amber dot at the top of the mark — is the thing that calls your attention across the whole harbor: an agent waiting on you, a finding that needs a decision, a run that just finished. The water line underneath is the tide: agents working, always some quiet motion even when nothing demands your attention yet.

Mission

Make running many AI coding agents at once feel like commanding a small, orderly harbor instead of wrangling a pile of terminal tabs — provider-agnostic, transparent about what each agent can and can't do, and honest when it doesn't know something (a cost number, a context window) rather than guessing.

Audience

Developers already running more than one coding-agent CLI, or curious to — people comfortable in a terminal, who want real control (permission modes, worktree isolation, headless runs) rather than a simplified chat wrapper.

Personality & values

• Orderly, not sterile. A harbor has structure — berths, a beacon, a tide — but it's alive, not a spreadsheet.
• Provider-agnostic. No CLI is the hero; Termbay never plays favorites in copy, iconography, or default sort order.
• Honest about uncertainty. "Not available" beats a fabricated number. Uncertain capabilities are labeled, not hidden.
• Quietly capable. Confidence without hype — the product argues for itself through what it actually does.

Voice & tone

Termbay's voice is direct, technically precise, and dry rather than exclamatory. It talks to developers like a competent colleague — never a hype machine, never cute at the expense of clarity.

Microcopy rules

• Buttons are verbs: "Spawn", "Kill", "Resume" — never "OK" alone on a destructive action.
• Errors state what happened and, where known, why — never a bare error code with no next step.
• Numbers that aren't real (estimated usage windows) are always labeled estimated, inline, not in a tooltip only.
• Empty states explain the action that fills them, not just "Nothing here."

Terminology

Naming

The product name is Termbay — one word, capital T, everything else lowercase. In prose, always "Termbay," never "TermBay," "termbay," or "Term Bay." In the wordmark and lockup artwork specifically, the mark is set in lowercase-styled display type as a deliberate visual choice (see Logo) — that stylization never overrides the capitalized "Termbay" used in running text, headings, or code identifiers.

Logo

The mark reads as three terminal columns docked in a rounded harbor tile, an amber beacon above them, a teal prompt caret mid-column, and a tide line underneath.

Clear space & minimum size

Keep clear space on every side of the mark equal to 2× the beacon's diameter at whatever size it's placed. Never crop, crowd, or overlap the clear space with text or other UI chrome.

• 16px — small mark only (favicon, tray icon). Use termbay-mark-small.svg.
• 24px — standard mark (toolbar, nav). Use termbay-mark.svg.
• 96px — minimum for the full lockup (mark + wordmark). Below that, use the mark alone.

Variants

Misuse

Real mark, deliberately misapplied — for illustration only.

Color

Every color in the product traces back to a token in brand/tokens.json — never a one-off hex value in a component.

Semantic roles

Provider palette

Contrast (WCAG 2.1)

Computed from actual token values — not estimated.

Typography

Type scale

Pairing rules

• Space Grotesk for headings only — never body copy, never longer than ~8 words on a line.
• Inter for everything a user reads at length: paragraphs, form labels, table cells.
• JetBrains Mono for anything that is, or resembles, literal output: file paths, flags, keyboard keys, terminal text.

Iconography

UI icons come from Lucide, drawn at a consistent 1.5px stroke (2px is acceptable at 16px and below, where 1.5px under-renders). Never mix filled and outline icons in the same view.

Layout & spacing

Spacing is a 4/8/12/16/24 base scale; radii are 6/10/16/22.

UI components

A few core primitives, rendered live with brand tokens.

Mascot — Buoy

Buoy is the small companion that lives on every column, reflecting what its agent is actually doing. Buoy never speaks for the agent and never invents status — its state is driven by real Claude Code hook events, or a per-provider output heuristic for every other CLI. Personality: quiet, competent, a little nautical — never cutesy commentary, never an "AI assistant" voice of its own.

Idle

When: Column is quiet, no active turn

Don't use for a column that's actually mid-task.

Thinking

When: The agent is reasoning before it acts

Don't hold this state past the first token of output.

Working

When: Actively editing, running tools, streaming output

Don't confuse with Thinking — Working implies visible progress.

Waiting

When: Needs input or a permission decision

Don't use for a column that's simply idle.

Alert

When: An error occurred or a finding needs attention

Don't overuse for routine warnings — reserve it.

Sleeping

When: It's been quiet in this column for a while

Don't apply immediately on idle — give it a grace period.

Disconnected

When: The CLI process exited or the PTY link dropped

Don't reuse for a column that was deliberately killed by the user.

Illustration style

Feature illustrations are flat-isometric, palette-locked to the harbor tokens, and text-free — the illustration sets the scene, copy carries the message.

Prompt style guide

The recipe used for every illustration in this system:

Flat isometric illustration, harbor / dock theme, [subject].
Palette strictly limited to: harbor-900 #0B1220, harbor-800 #111A2E,
tide-500 #14B8A6, tide-300 #5EEAD4, beacon-500 #F5A524, foam-50 #F2F8F7.
Soft ambient lighting, subtle grain, no text or lettering anywhere in
the image, no logos, generous negative space for copy overlay,
rounded geometric shapes matching a 16–22px corner radius language.

Screenshot guidance

Every screenshot used publicly is captured from Termbay's own scripted demo mode (termbay --demo), never a real user's session. Always frame screenshots in the standard three-dot window chrome (see UI components), capture at 1600×1000 for feature shots and 2400×1500 for the hero, and prefer the dark theme unless the shot's purpose is specifically to show theming.

Motion

Motion is restrained — a "quiet tide," not a bouncy mascot show.

• Buoy bob — a 2.4s ease-in-out vertical drift of ±3px, looping, paused entirely under prefers-reduced-motion.
• Hover / press — 150ms ease for color and shadow changes; a 1px translateY on press, never a bounce or overshoot.
• Panel transitions — 200–250ms ease-out; nothing in the product animates longer than 300ms.

Social & OG templates

The default Open Graph image (1200×630) composites the og-bg illustration with the on-dark lockup and the tagline, rendered with outlined font paths so it never depends on a system font being present on the sharing platform's renderer.

Downloads

Everything on this page, packaged — or grab individual files.

Logo SVGs, PNG/ICO exports, mascot PNGs, tokens.json, and a generated tokens.css.

Individual files