Skip to content

LOGO & VISUAL TOKENS — BRAND GUIDELINES (CHAPTER 5)

Brando Brand Guidelines v1.0

5. Logo & Visual Tokens

Brando’s logo system and visual tokens are built on the core idea of semantic structure — the way rules, meaning, and identity become machine-actionable.

The visual identity must evoke:

  • precision
  • connection
  • structured intelligence
  • the flow of data
  • the elegance of the Northern Lights
  • the clarity of a graph schema

This chapter defines how Brando’s logo and visual system express its role as the standard for semantic brand governance.

5.1 Logo Philosophy

Brando’s logo is not ornamental — it is structural.

It represents:

1. A node in a graph

Meaning: identity, entity, brand.

2. A connection between systems

Meaning: interoperability, portability.

3. A policy bound as an object

Meaning: machine-actionable rules.

4. A stable geometric form

Meaning: reliability and governance.

5. Aurora energy (subtle)

Meaning: transformation, semantic flow, activation.

The mark is intentionally minimal, timeless, and technical — it is the visual anchor for a brand built on rules, logic, and clarity.

5.2 Primary Logo

The primary Brando logo consists of:

A. The Symbol (“The Node Mark”)

A geometric, circular node intersected by one vertical and one horizontal bar, symbolizing:

  • brand identity
  • control points
  • governance layers
  • a “semantic node” in a graph
  • precision & modularity

B. The Logotype (“Brando”)

Set in Inter Semi-Bold, custom-kerning for balance and authority.

Letterforms:

  • geometric
  • restrained
  • neutral
  • screen-optimized
  • modern without trendiness

Spacing:

  • wide enough for clarity
  • tight enough to signal confidence
  • avoids excessive friendliness (no rounded tech aesthetic)

C. Construction Grid

The logo is built on a 4×4 grid:

  • node diameter: 2 units
  • stroke weight: 0.25 units
  • spacing between symbol & wordmark: 1 unit
  • wordmark height: equal to symbol height

This geometric consistency reinforces Brando’s connection to machine logic and structured design.

5.3 Logo Variants

Primary Lockup (Horizontal)

Symbol on the left, logotype on the right. Use in 80%+ of applications.

Stacked Lockup (Vertical)

Symbol above logotype. Use for:

  • square orientations
  • center-aligned layouts
  • social media avatars
  • event materials

Symbol-Only Mark

Use when:

  • brand is already known
  • within UI
  • as watermark
  • as app icon
  • for favicons
  • for small spaces

Logotype-Only

Rare. Use only when:

  • symbol would be redundant
  • text-only contexts
  • compliance documentation

5.4 Logo Colors

Default Logo (Light Mode)

  • Symbol: #121212 (near-black)
  • Logotype: #121212

Default Logo (Dark Mode)

  • Symbol: #FFFFFF
  • Logotype: #FFFFFF

Aurora Gradient Logo (Hero Use Only)

Symbol rendered in the official Brando gradient: --brando-gradient

Use cases:

  • keynote slides
  • hero sections
  • product launches
  • category announcements
  • visual storytelling

Never use this for body-level branding. It is a moment, not a standard.

5.5 Clear Space & Minimum Size

Clear Space:

Maintain one circle-diameter of padding around the symbol and logotype.

Minimum Size:

  • Digital: 24px height
  • Print: 7mm height

At smaller sizes, use the symbol-only mark.

5.6 Incorrect Usage

❌ Don’t stretch, distort, or rotate

❌ Don’t apply drop shadows or glows

❌ Don’t use overly saturated aurora colors

❌ Don’t put the logo inside a shape

❌ Don’t outline the mark

❌ Don’t modify kerning

❌ Don’t place on busy backgrounds

❌ Don’t apply gradients except the official aurora gradient

❌ Don’t animate without brand-approved behaviors

The Brando mark must remain precise and stable.

5.7 Brand Visual Tokens

Visual tokens are the building blocks of Brando’s visual identity — small components that help AI and humans recognize Brando’s semantic system.

5.7.1 Token: Semantic Node

Shape: A circle with a subtle inner stroke, representing:

  • a brand
  • a policy object
  • an entity in a graph

Usage:

  • diagrams
  • UI indicators
  • infographics
  • graph-based visuals

Styling:

  • Fill: neutral or aurora accent
  • Stroke: 1–2px graphite or white
  • Glow: very subtle aurora green or cyan (optional for hero use)

Straight, clean lines connecting nodes.

Style:

  • 1–2px stroke
  • Neutral or cyan
  • Straight or 45° angles only
  • Never curved or decorative

Symbolizes:

  • rules connecting entities
  • governance flows
  • semantic relationships

5.7.3 Token: Policy Bracket

A thin rectangular bracket shape (similar to { }), representing:

  • machine-readable policies
  • code
  • JSON
  • structure

Use sparingly for:

  • section headers
  • infographics
  • callouts
  • syntax-like ornamentation

5.7.4 Token: Aurora Ribbon (Advanced)

A soft, flowing line with a subtle aurora gradient. Used only for large-format expressive visuals.

Symbolizes:

  • transformation
  • semantic flow
  • AI aligning to brand identity

Never use this in UI or small layouts. Strictly for hero moments.

5.8 Visual Token System — Correct Combinations

Nodes + Edges (Primary System)

These form Brando’s diagrammatic language. Used for policy graphs, semantic diagrams, illustrations.

Nodes + Aurora Ribbon (Hero System)

Used in marketing and hero sections.

Nodes + Policy Brackets (Technical System)

Used in documentation and product UI.

Never mix all three at once.

5.9 Motion Behavior (Optional)

When animated:

Node Behavior

  • slight pulsing
  • micro-scaling
  • minimal glow

Edge Behavior

  • occasional directional shimmer
  • flow in one direction
  • never looping or chaotic

Aurora Ribbon Behavior

  • slow gradient shift
  • long, atmospheric easing
  • no fast or sharp movements

Motion must feel stable, intentional, structured — like underlying logic.

5.10 Logo Files & Asset Management

Formats Provided

  • SVG (primary for web)
  • PNG (fallback)
  • EPS / PDF (print)
  • Icon set (symbol-only)
  • Dark/light variants
  • Gradient variants

Asset Naming Convention

brando-logo-primary.svg
brando-symbol.svg
brando-logo-stacked.svg
brando-logo-gradient.svg
brando-ui-icon-24.svg
brando-ui-icon-32.svg

Access

Brand assets should be stored in your central BrandoSchema asset registry with machine-readable metadata for AI usage.

Chapter Summary

Brando’s logo and visual tokens express:

  • clarity
  • semantic structure
  • stability
  • the precision of a graph
  • the energy of an aurora
  • the authority of a standard

This system forms the visual backbone for your category-defining identity.