Void — Brand Identity System

Design Specification

This document defines the visual language of Void — the tokens, rules, and rationale behind every design decision. Use it as a source of truth.

Essence

Void is a design language built around a single constraint: only show what's necessary. Every element is chosen, not decorated. Every decision is justified.

Precision over decoration

Visual elements serve a function. If an element doesn't guide attention, communicate hierarchy, or aid comprehension — it doesn't belong.

Trust through restraint

We earn credibility by not overselling. A quiet confidence — the brand that doesn't need to shout because what it says is simply true.

Clarity as care

When we make something clear, we're respecting the person's time. Every word, every layout decision is an act of consideration.

Color System

Five values. One accent. Scarcity of color amplifies impact. The accent blue should account for less than 5% of any screen's total ink.

Ink

Primary text · Actions

#09090B

Muted

Secondary text

#71717A

Dim

Placeholders · labels

#A1A1AA

Surface

Panels · inputs

#F4F4F5

Accent

Links · focus · primary CTA

#2563EB

Token Reference

Token	Value	Usage
`--vbb-ink`	#09090B	Headlines, body, buttons
`--vbb-muted`	#71717A	Supporting copy, captions
`--vbb-border`	#E4E4E7	Dividers, card edges
`--vbb-accent`	#2563EB	Primary links, focus ring, 1 CTA only

Typography

Inter exclusively. Hierarchy through weight and size — not through typeface variety. Negative tracking on display sizes. Never use font-style: italic except for code samples or genuine emphasis.

Display

800wt / −0.05em
clamp(2.5rem, 6vw, 4rem)

The work.

Title

700wt / −0.04em
1.875rem

Clarity is the product.

Heading

600wt / −0.02em
1.25rem

What you need, when you need it.

Body

400wt / 0em
1rem / lh 1.7

Every word is deliberate. If it doesn't add meaning or move the person forward, remove it. Silence is a design decision.

Caption

400wt / 0em
0.875rem

Supporting context, timestamps, metadata.

Label

700wt / +0.1em
0.6875rem / ALLCAPS

Section · Status · Category

Logo

A wordmark only. Lowercase Inter at 800 weight. The simplicity is the point — don't add to it.

void

On white

void

On ink

Rule	Spec
Case	Always lowercase
Weight	800 (ExtraBold)
Tracking	−0.05em
Clear space	1× cap height on all sides
Minimum size	16px / 1rem rendered
Backgrounds	White (#FFFFFF) or Ink (#09090B) only

Components

Core interactive elements. Consistent border-radius (6px), no gradients on fills, no drop shadows on buttons. Hover states are opacity-only.

Buttons

Badges & Tags

Draft New Live Published Error

Input

Voice & Tone

Direct. Specific. Never cold. We sound like a brilliant colleague — not a brand. Short sentences preferred. Active voice required. No filler, no hyperbole.

Say the number

"Deploys in 30 seconds" not "deploys incredibly fast." Specifics build trust.

Finish the thought

Don't trail off into vagueness. If you can't say what the benefit actually is, don't make the claim.

Acknowledge the hard parts

We don't pretend things are easier than they are. Acknowledging complexity makes the solution feel more credible.

No em-dash abuse

One em-dash per sentence maximum. If you're using it to hold multiple ideas together, write two sentences instead.

Application

Core touchpoints and how the system holds across them.

Product UI

Dashboard & tables

Ink on white. Zinc panels for inputs. Blue only on primary action per view.

Marketing

Landing pages

Display weight headline. One CTA. Grid texture at top of page only.

Documentation

Guides & reference

Body at 1.125rem. Code blocks in zinc-100. Clear hierarchy, generous spacing.

Transactional & marketing

Plain text style preferred. No images that aren't essential. Max 480px width.