Brand Foundation

BugPort is bug reporting and debugging for a whole team, dressed in what we internally call aubergine editorial SaaS: a warm cream canvas, white elevated cards, deep plum for the moments that matter, and a calm, precise tone throughout. This page is the root of the design system. It defines who BugPort is, how it should feel, and the non-negotiables that keep every surface — marketing, dashboard, plugin, auth, email — recognisably one product.

If you only read one design page, read this one. Everything in Visual Identity, Themes, Typography, Layout & Spacing, and Product UX Principles is downstream of the principles below.

WHO WE ARE

Brand personality

BugPort is the calm operations console for bugs. The personality is built from five traits, in tension and in balance:

Calm

Restrained chroma, generous spacing, minimal shadows. The product never shouts. A user mid-incident should feel steadier for opening BugPort, not more agitated.

Precise

Evidence-first. Exact severity, exact status, exact logs. Copy is plain and specific. Nothing is vague or decorative for its own sake.

Warm

Cream canvas instead of flat clinical white. Aubergine reads human and editorial, not cold corporate blue. We are a tool people work in all day.

Product-led

We show the real product — framed screenshots, real bug detail views — never stock photography or decorative mock devices.

Operational trust

Workspace isolation, scoped tokens, redaction, clear status. The brand signals "this is safe to run your team's debugging through."

The shorthand "aubergine editorial SaaS" carries all of this: modern SaaS structure, an editorial sense of rhythm and restraint, and a single distinctive accent — deep aubergine plum — used as a signal rather than wallpaper.

Positioning

BugPort is bug reporting and debugging for the whole team. Capture happens through the browser extension, the embeddable widget, the API, or MCP; everything lands in the dashboard as a structured, reviewable report with the evidence attached.

Two positioning facts must never be contradicted in copy or design:

Unlimited team members on every plan. Inviting more people never costs more. Onboarding, marketing, and upgrade prompts should reflect abundance, not rationing.
Pricing is workspace storage-based. You pay for the storage your captures consume — Free 1 GB, Starter 25 GB, Team 100 GB, Growth 500 GB, Scale 1 TB. Storage is the meter, never seats.

This shapes language everywhere. We talk about "storage used", "your workspace", "add storage" — never "seats", "per user", or "per member".

🚫

Seat language is a brand violation, not just a copy preference. Any UI, illustration, pricing card, or upgrade nudge framed around per-user cost is wrong by definition. The unit is storage.

What makes BugPort distinct

One report, many sources. A plugin capture, a widget submission, an API post, and an MCP-created bug all arrive as the same structured shape — and the UI adapts to what each source actually captured.
Evidence-first by default. Console logs, network requests with response bodies, page context, annotations, and optional replay travel with the bug. The design foregrounds evidence, not chrome.
Calm under pressure. Most bug tools feel like alarm panels. BugPort is deliberately quiet so it reads clearly during an incident.
A single distinctive accent. Deep aubergine is unmistakable and used sparingly. It is the opposite of the generic multicolor SaaS template.

The product surface split

BugPort spans five surfaces. They share tokens and personality but tune density, tone, and contrast to their job. Designing for BugPort means knowing which surface you are on.

🪧Marketing

Persuasive and editorial. Generous spacing, large display type, dark plum storytelling bands, product-led screenshots, storage-based pricing.

🗂️Dashboard

Operational and calmer. White cards on cream, structured density, body-sm tables, aubergine reserved for the active nav item and primary action.

🧩Plugin

Compact and task-first. A 320–420px panel, capture preview above submit, quota-aware (storage) warnings, advanced settings collapsed.

🔐Auth

Clear and trusted. A single centred card, minimal choices, obvious provider buttons, nothing decorative competing with the action.

✉️Email

Simple and branded. One message, one primary CTA, plain layout that survives every email client.

How brand becomes pixels

Principles flow into tokens, tokens compose into surface recipes, and recipes are applied per surface. Nothing is styled ad hoc.

Read this left to right as authority: a screen is correct when you can trace every choice back through a recipe, to a token, to a principle. If a colour, radius, or type role cannot be justified that way, it does not belong.

Voice and tone for UI copy

BugPort copy is the voice of a calm, competent product operator. Plain language, specific nouns, active verbs. We never adopt an anthropomorphic assistant persona ("I'll help you track that down!") and we never use hype.

✓ Do

Use plain operator verbs: "Capture bug", "Open project", "Storage used", "Create issue from bug".
Be specific and short: "No bugs yet", "Capture failed — try again".
Talk about the workspace and its storage when discussing limits or upgrades.
Keep one clear primary action per area.

✕ Don't

Don't use hype: avoid "supercharge", "magical", "effortlessly", "10x".
Don't write in an assistant voice: avoid "I", "let me", "I'll", "happy to help".
Don't frame anything around seats, per-user, or per-member cost.
Don't stack multiple competing calls to action in one view.

Non-negotiables

These are the bright lines. Crossing any one of them makes a surface off-brand regardless of how polished it looks:

No seat-based billing language, anywhere. Storage is the unit; team members are unlimited.
Not a generic chat or collaboration product. BugPort is a bug operations console, not a messaging app.
No stock photography. Visuals are product-led: framed real screenshots, not staged people or devices.
No large multicolor blocks. Chroma is restrained; aubergine is the single signal accent.
No proprietary font dependency in shipped code. Source faces are reference-only; ship with the open fallbacks.
Aubergine is a signal, not wallpaper. One primary aubergine call to action per area — no more.