Skip to content

TYPOGRAPHY — BRAND GUIDELINES (CHAPTER 3)

Brando Brand Guidelines v1.0

3. Typography

Typography is a core expression of Brando’s identity. It must communicate clarity, precision, authority, and technical excellence — the foundational qualities of the Brand Policy Graph standard.

Brando’s typographic system is intentionally minimalist, engineered for legibility, and designed to reinforce our position as the semantic governance layer for AI.

3.1 Typography Principles

1. Technical clarity

Our type should feel like reading a specification: crisp, exact, and unambiguous.

2. Confidence

Brando is a leader creating a new category. Our typography should reflect authority without aggressiveness.

3. Minimalism

Whitespace and consistency are part of the brand. Never clutter. Never decorate.

4. Precision & structure

Headings and body text follow a strict modular rhythm. Machines understand structure — humans do too.

5. Machine-actionable aesthetics

Where possible, the typography should subtly resonate with data, code, structure, and logic.

3.2 Font System Overview

Brando uses a two-typeface system, each with a defined purpose:

Primary Typeface: Inter

Use for:

  • All brand voice content
  • Website UI
  • Product UI
  • Marketing pages
  • Documentation
  • Long-form writing
  • Presentations and PDFs

Characteristics:

  • Neutral, modern, highly readable
  • Designed for digital environments
  • Legible at all sizes
  • Works harmoniously with grids, spacing, and technical layouts

Available Weights:

  • Light (300) — rarely used
  • Regular (400) — primary reading weight
  • Medium (500) — strong, readable UI
  • Semi-Bold (600) — section headers
  • Bold (700) — hero statements

Use italics sparingly. Inter’s power comes from its clarity, not stylistic flourishes.

Secondary Typeface: IBM Plex Mono

Use for:

  • JSON-LD
  • Code blocks
  • Schema examples
  • Technical artefacts
  • Variable names / policy keys
  • Inline references (“machine-actionable”, “policyGraph”, etc.)

Characteristics:

  • Technical without being harsh
  • Clean monospacing
  • Excellent for structured content
  • Supports Brando’s “semantic governance” narrative

Available Weights:

  • Regular (400)
  • Medium (500)

3.3 Modular Type Scale

Brando’s typography follows a Major Third (1.25) modular scale — a rational, elegant set of proportions.

Token Size Weight Usage
Display 48px 600 Hero lines, dominant statements
H1 36px 600 Page titles
H2 30px 600 Section headers
H3 24px 500 Subsections
H4 20px 500 Group labels
Body L 18px 400 Premium reading experiences
Body M 16px 400 Default paragraphs
Body S 14px 400 Secondary text, descriptions
Mono 15px 400 Plex Mono JSON-LD, code
Caption 12px 400 Labels, footnotes

This scale ensures consistency, vertical rhythm, and a strong sense of intentionality.

3.4 Line-Height & Spacing

Heading Line-Heights

  • Display → 1.1
  • H1 → 1.1
  • H2 → 1.15
  • H3–H4 → 1.2

Body Line-Height

  • Body text → 1.5

Spacing Rules

  • Paragraph spacing: 24px
  • Space above headings: 48px
  • Space below headings: 16px
  • Section-to-section spacing: 72px

This rhythm creates the clean, breathable layouts central to Brando’s visual language.

3.5 Typographic Use Cases

A. Headlines

  • Always sentence case
  • Short, declarative, authoritative
  • Never playful or metaphorical
  • Prefer clarity over creativity
  • Use Semi-Bold or Bold only
  • Avoid thin/light weights

Correct:

The standard for machine-actionable brands

Incorrect:

The future of AI brand magic starts here!

B. Body Text

  • Use Inter Regular (400)
  • Keep paragraphs short (3–5 lines)
  • Avoid idioms, fluff, filler
  • Avoid exclamation marks
  • Maintain a professional tone
  • Prioritise readability

C. Technical / JSON-LD Content

Whenever showing anything machine-readable, always use IBM Plex Mono:

{
  "@context": "https://brandoschema.com/",
  "@type": "BrandPolicy",
  "brand": "Brando"
}

Guidelines:

  • Never format JSON in Inter
  • Maintain consistent indentation (2 spaces)
  • Prefer lowercase keys unless schema defines otherwise
  • Avoid inline JSON unless extremely short

D. UI / Product Typography

In product UI:

  • Use Inter 14–16px primarily
  • Don’t use exaggerated weight differences
  • Reserve bold text for emphasis only
  • Use Mono for structured data, identifiers, or system labels

3.6 Do’s and Don’ts

Do

  • Use typography to communicate clarity
  • Lean into whitespace
  • Use monospaced type for any code or data
  • Maintain strict modular scale
  • Use consistent formatting for JSON-LD
  • Prioritize hierarchy

Don’t

  • Use decorative or stylized fonts
  • Mix too many sizes or weights
  • Add letterspacing to body text
  • Break the modular scale
  • Present code in sans-serif fonts
  • Use italics for emphasis
  • Use “marketing-y” oversized headlines

3.7 Color + Typography Interaction

Typography should remain crisp and monochrome.

Primary text:

#121212 (near-black)

Secondary text:

#6F6F6F

Code block background:

#F7F7F7

Borders / dividers:

#E0E0E0

Avoid colored text unless it is:

  • an actionable item
  • a link
  • a UI element
  • part of a branded highlight pattern

3.8 CSS Implementation (Token-Based)

For engineering + design consistency, use this CSS token system:

:root {
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --fs-display: 48px;
  --fs-h1: 36px;
  --fs-h2: 30px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-body-s: 14px;
  --fs-mono: 15px;
  --fs-caption: 12px;

  --lh-heading: 1.2;
  --lh-body: 1.5;

  --color-text: #121212;
  --color-text-secondary: #6F6F6F;
  --color-border: #E0E0E0;
  --color-bg-code: #F7F7F7;
}

This allows both designers and engineers to implement typography with precision and consistency across all surfaces.

3.9 Example Layouts

Hero Example

<h1 class="display">Where Brands Govern AI</h1>
<p class="body">Brando turns your brand’s identity into a machine-actionable policy graph.</p>

Section Example

<h2 class="h2">Semantic Governance</h2>
<p class="body">
  Brando provides the world’s first portable brand policy graph for generative AI systems.
</p>

Code Example

<pre><code>{
  "@type": "Brand",
  "name": "Brando",
  "policyGraph": "enabled"
}</code></pre>

3.10 Typography in the Context of Brando’s Brand Architecture

Typography is not decoration — it is part of the system of meaning.

In Brando:

  • Typography acts as a structural signal
  • It communicates authority, clarity, standards, precision
  • It supports the brand promise of machine-actionable governance
  • It aligns with JSON-LD logic and semantic modelling
  • It makes our content instantly recognizable

Typography is a tool of governance — not style.