CHAPTER 7 — LAYOUT, GRID & SPACING SYSTEM

Brando Brand Guidelines v1.0

Brando’s layout system creates structure, clarity, and spatial intelligence. It organizes content the same way the Brand Policy Graph organizes meaning — cleanly, predictably, and semantically.

This chapter defines how space, alignment, and grids are used across all Brando surfaces.

7.1 Layout Philosophy

1. Structure first

Layout must feel intentional and governed. No randomness, no decoration.

2. Breathe

Whitespace is a core asset. It creates calm and premium clarity.

3. Grid-aligned always

Everything snaps to grid: text, images, nodes, diagrams, rules.

4. Hierarchy is semantic

Important content gets space. Support content stays quiet.

5. Stable compositions

Layouts should feel steady, confident, and well-engineered.

6. The visual metaphor = a graph

Nodes (content blocks) Edges (flow/relationships) Grid (structure)

7.2 Grid System

Brando uses a 12-column responsive grid, with a simplified 8-column variant for product UI.

12-Column Grid (Marketing, Documentation, Presentation)

Desktop

12 columns
Column width: fluid
Gutter: 24px
Outer margins: 80px
Max content width: 1280px

Tablet

8 columns
16px gutters
48px margins

Mobile

4 columns
16px gutters
24px margins

This grid mirrors the semantic structure of Brando’s brand: modular, logical, governed.

8-Column Grid (Product UI)

Used in UI for:

dashboards
schema editors
policy graph visualizations
forms
settings layouts

Configuration:

8 columns
20px gutter
40px margins

This creates a sense of system-level structure.

7.3 Spacing System (Vertical & Horizontal Rhythm)

Brando uses a spacing scale in multiples of 8 reflecting modular, technical design systems.

Spacing Tokens

8
16
24
32
48
72
96

Meaning:

Token	Usage
8	micro spacing, label padding
16	text block spacing, simple UI
24	paragraph spacing, minor groups
32	divided sections, multi-element groups
48	section headers, major blocks
72	major sectional separation
96	hero spacing

Key rule:

Spacing should feel calm, not compressed.

7.4 Vertical Rhythm: Hierarchy in Action

Brando layouts follow this rhythm:

Headings

Top spacing: 48px
Bottom spacing: 16px

Paragraphs

After paragraph: 24px

Sections

Separation: 72px

Hero Areas

96–144px top padding
72–96px bottom padding

This creates a premium editorial grid.

7.5 Composition Rules

1. Align left by default

Left alignment supports readability and precision.

2. Hero text max width:

680px For strong readability.

3. One focal object per frame

Never clutter.

4. Semantic grouping

Group related content visually using:

spacing
alignment
subtle dividers

5. Image + text balance

60% whitespace
30% text
10% imagery or diagrams

6. No center-aligned body text

Unless in a hero moment.

7.6 Layout Patterns

Pattern A — Hero

Aurora gradient or neutral background
Headline width ~ 60%
Subtitle width ~ 60–65%
Semantic node or ribbon subtly placed
CTA aligned left or centered depending on mood

Pattern B — Text + Diagram

6 columns text
6 columns diagram
Diagram grid-aligned
Ample whitespace on margins

Pattern C — Multi-section Narrative

Sections separated by 72px
Alternating:
text-heavy
image-heavy
diagram-heavy

Helps maintain narrative energy without sacrificing clarity.

Pattern D — Full-Width Aurora Panel

Aurora gradient
Centered or left-aligned headline
Minimal content
Single semantic node in focus

Used for:

transitions
break points
high-level vision statements

Pattern E — Documentation Layout

Sidebar (2–3 columns)
Content (9–10 columns)
All code blocks left-aligned
Graph diagrams centered or left-aligned

7.7 Rules for Graph-Based Visuals Within Layout

Nodes

Snap to grid intersections
Never crowd text
Maintain consistent spacing between nodes (multiples of 16px)

Edges

45° or 90°
Never curved
Never crossing unless semantically necessary
Stroke 1–2px

Labels

align above or below nodes
use Body S
keep text short

7.8 Do’s and Don’ts

✔ DO

Keep large margins
Create airy, premium compositions
Use grid alignment religiously
Pair structural imagery with neutral backgrounds
Apply spacing tokens consistently
Use the 12-column grid for marketing
Use the 8-column grid for product UI

✖ DON’T

Overfill the screen
Place text directly over detailed imagery
Use inconsistent spacing values
Break the grid
Mix typographic alignment styles in one frame
Center-align paragraphs
Crowd diagrams

7.9 Layout in the Context of Brando’s Identity

Layout is Brando’s silent governance system. Just as policies guide AI behavior, layout guides the reader’s eye.

Brando layouts must visually express:

structure
clarity
predictability
quality
semantic order

The grid = the graph. The spacing = the rules. The composition = the meaning.

7.10 Sample Layout Templates

Marketing Page Template

Hero
Value props
Diagram section
Use cases
Proof points
CTA