CHAPTER 10 — BRAND APPLICATIONS

Brando Brand Guidelines v1.0

This chapter shows how Brando’s full identity system — typography, color, imagery, motion, grids, icons, and visual tokens — comes together in real-world applications.

Brando is a premium, technical, category-defining brand. Every application must express:

structure
semantic clarity
precision
authority
controlled energy
premium calm

Below are the standards for applying the Brando identity across web, product UI, documentation, presentations, and marketing materials.

10.1 Website Application

The Brando website is the primary public expression of the brand. It must feel like the homepage of a new standard — authoritative, minimal, and atmospheric.

10.1.1 Homepage Layout

Hero Section

Clean aurora gradient background OR neutral black
Large Display typography (48px, Inter Semi-Bold)
One-line category-defining headline
Short subheadline in Body L
Single CTA in Primary Button
Subtle semantic nodes drifting in background
Maximum width for text: 680px

Example Hero Headline: The Policy Graph for AI.

10.1.2 Key Messaging Sections

Each section uses the 12-column grid with 72px vertical spacing.

Sections typically include:

Brand value propositions
Semantic graph illustrations
Use cases
Product screens
Narrative flow about governance

10.1.3 Imagery

Only use:

aurora backdrops
architecture
semantic diagrams
node-based visual systems

Never use:

stock humans
cliché AI visuals
bright neon tech imagery

10.1.4 Interaction

Website motion should follow the Brando Motion System:

fade-up text
slow diagram shifts
light node pulses
subtle edge animations
no scrolling gimmicks
no bouncing or parallax overload

10.2 Product UI Application (App, Dashboard & Semantic Editor)

Brando’s product experiences must embody semantic structure. The UI must feel like a policy graph brought to life.

10.2.1 Core UI Principles

1. Clarity first

No heavy chrome, no clutter.

2. Data > decoration

Everything is functional and readable.

3. Neutral base

UI uses Slate, Cloud, and White — never aurora colors as backgrounds.

4. Semantic emphasis

Nodes, edges, contexts, policies appear visually meaningful.

5. Consistency

Every component follows the spacing, grid, and iconography rules.

10.2.2 Semantic Graph UI (Signature Component)

The Brand Policy Graph is the heart of the Brando product experience.

Nodes

Circular (8–12px radius)
Neutral or accent when active
Pulsing on interaction

Edges

Straight
45° or 90°
Minimal thickness (1–2px)
Directional shimmer for active routes

Labels

Inter Body S
Neutral tones
Never visually heavy

Hover Behavior

Node enlarges +2px
Edge brightens

Click Behavior

Node locks into accent (cyan or green)
Connected nodes glow

The graph should feel alive but governed, not chaotic.

10.2.3 UI Components

Buttons

Primary: charcoal
Secondary: outlined
Accent button: limited use for high-value actions

Tabs

Underline motion
Clean labels
No backgrounds

Cards

Minimal
Rounded 6px
Soft border only

Panels

32–48px padding
Clear structure for settings and policy configuration

Code Blocks

Plex Mono
Faint background
Used for actual JSON-LD policy previews

10.2.4 Onboarding Screens

Use:

aurora gradient
semantic diagrams
minimal copy
strong narrative about control & governance

Tone:

calm
confident
intelligent

10.3 Documentation Application (Docs, API references, Spec Library)

Documentation for Brando must reflect clarity and authority, mirroring the style of W3C, Schema.org, and API specs.

10.3.1 Layout

Left sidebar navigation
Right content area
8-column or 10-column text width
Abundant whitespace
No decorative imagery

10.3.2 Typography

Body M (16px)
H2 and H3 for structure
Mono for anything machine-readable

10.3.3 Code Blocks

Plex Mono
Indented
Structured
Faint line dividers
Highlighted key lines

Example:

{
  "@context": "https://brandoschema.com/",
  "@type": "Brand",
  "name": "Brando"
}

10.3.4 Diagrams

For explaining:

brand contexts
tokens
policies
category mapping
GTIN bindings

Use node + edge diagrams aligned to the grid.

10.3.5 Voice & Tone

Documentation tone:

factual
specific
non-salesy
technical
structured

Write like a standard, not like marketing.

10.4 Presentation Slides (Keynotes, Sales, Category Launch)

Presentations must feel premium and cinematic.

10.4.1 Slide Structure

Title Slide

Black or aurora gradient
Oversized Display headline
Semantic node pattern subtly in background

Content Slides

Large margins
24–48px spacing
Minimal bullet points
Use H2 for section headers

Diagrams

Clean, white or black backgrounds
Nodes + edges as primary visuals

10.4.2 Motion in Slides

Subtle animations only:

fade-up text
slow diagram reveals
subtle aurora drift

Never:

wipe transitions
3D flips
bounce-ins
cartoon motion

Brando uses a calm, premium tone even on social.

Profile Icons

Symbol-only
Charcoal or aurora gradient

Posts

semantic diagrams
short thought-leadership statements
code snippets
governance insights

Do NOT use

memes
emojis
stock photography of people

Brando speaks like a standard, not a personality-driven brand.

10.6 Print Application

Though rare, print moments exist for:

conferences
whitepapers
executive decks

Rules

high contrast
minimal color
clean typography
no heavy gradients
matte finishes over gloss

10.7 Brand Application Matrix

Surface	Personality	Requirements
Website	premium + atmospheric	aurora + structure
Product UI	controlled + semantic	graph-centric
Documentation	technical + clear	mono + grid
Slides	cinematic + minimal	aurora + motion
Social	authoritative	diagrams + code
Print	premium	black & white + sharp type

10.8 Purpose of the Application System

Every application amplifies Brando’s identity:

The website introduces the category
The product makes the category real
The docs formalize the standard
The slides evangelize the standard
The social expresses thought leadership
The print embodies the premium nature

Together they show that Brando is not just a brand — it is the infrastructure of semantic governance for AI.