Skip to content

CHAPTER 8 — ICONOGRAPHY & COMPONENT SYSTEM

Brando Brand Guidelines v1.0

Brando’s iconography and UI components extend the brand’s philosophy of precision, structure, and semantic clarity. Icons and components should feel like visual tokens of a system — not decorative illustrations.

This chapter defines how icons, UI elements, and visual components express Brando’s identity across product, marketing, and documentation.

8.1 Iconography Philosophy

Brando’s icons and components must reflect:

1. Semantic structure

Icons behave like simplified nodes in a graph.

2. Precision

Every line, corner, and angle is intentional.

3. Minimalism

No unnecessary shapes, colors, or illustrative flair.

4. Technical calmness

Icons are neutral by default; accents are used sparingly.

5. System-first behavior

Icons must function cohesively as part of a larger design system, not as standalone art pieces.

8.2 Icon Style Overview

Brando uses a line-based geometric icon style, influenced by UI system icons but modified for semantic clarity.

Key Characteristics

  • 1.5–2px stroke weight
  • Rounded joins kept to a minimum
  • Mostly 90° and 45° angles
  • Balanced negative space
  • Simplified shapes
  • Clear geometry
  • Neutral color by default (#121212)

Icons should feel:

  • modern
  • structured
  • calm
  • authoritative

Not playful or cartoonish.

8.3 Icon Grid & Construction

All icons use a 24×24 pixel grid system.

Construction Rules

  • Stroke weight: 1.5px (UI), 2px (marketing)
  • Safe zone padding: 2px
  • Key shapes align to pixel grid
  • No half-pixel positioning
  • Curves are minimal — used only when essential
  • Icons must remain readable at 16px size

This ensures consistency and crisp rendering across devices and resolutions.

8.4 Icon Color System

Default Color:

  • #121212 (light mode)
  • #FFFFFF (dark mode)

Aurora Accents (limited use):

  • Aurora Cyan (#4FE5F8)
  • Aurora Green (#6FFFB0)
  • Aurora Violet (#8D68FF)

Accent Color Rules:

  • Use sparingly
  • Only for active states, highlights, semantic cues
  • Never use more than one aurora color in the same icon

8.5 Icon Categories

Brando’s icon system is grouped into functional categories:

A. Navigation Icons

  • Home
  • Dashboard
  • Documentation
  • Settings
  • Policies
  • Products
  • Insights
  • Help

B. Action Icons

  • Add / Create
  • Edit
  • Delete
  • Filter
  • Search
  • Upload
  • Download
  • Refresh
  • Save

C. Semantic Graph Icons

(Unique to Brando)

  • Node
  • Edge
  • Graph cluster
  • Policy object
  • Category node
  • GTIN token
  • Override indicator
  • Context marker

D. State Icons

  • Success (green)
  • Info (cyan)
  • Warning (gold)
  • Error (aurora red)

E. File & Data Icons

  • JSON
  • CSV
  • Schema
  • Document
  • Media
  • Zip

F. AI Behavior Icons

  • Guardrail
  • Action
  • Automation
  • LLM
  • Agent
  • Model

These are Brando’s unique semantic visual vocabulary.

8.6 The “Semantic Node” Icon (Brando’s Signature)

This is the most important icon in the system.

Definition

A small geometric circle representing:

  • entities
  • brands
  • rules
  • context objects
  • nodes in a graph

Variants

  • Filled
  • Outlined
  • Connected
  • Highlighted (accent color)
  • Pulsed (animated)

Rules

  • Never stretch or distort
  • Keep stroke proportion exact
  • Always grid-aligned
  • Use consistent spacing between nodes

This icon is a core part of Brando’s design DNA.

8.7 Component System Overview

Brando’s components reflect the same principles of:

  • clarity
  • structure
  • precision
  • minimalism

Components are never decorative — they are functional and semantic.

8.7.1 Buttons

Primary Button

  • Background: #121212
  • Text: #FFFFFF
  • Radius: 4px
  • Padding: 12px 20px
  • Hover: slightly lighter charcoal
  • Active: cyan underline (1px)

Secondary Button

  • Border: 1px solid #121212
  • Text: #121212
  • Background: transparent
  • Hover: charcoal tint

Accent Button (Limited Use)

  • Background: #4FE5F8 (Aurora Cyan)
  • Text: black
  • Use only for high-value CTAs

8.7.2 Tabs

  • Line-based, minimal
  • Active tab uses Aurora Cyan underline
  • Inactive tabs use Cloud (#E0E0E0)

8.7.3 Cards

  • Neutral backgrounds (#FFFFFF or #FAFAFA)
  • Subtle shadow or border
  • 24px padding
  • Rounded corners: 6px
  • Never use bright gradients inside cards
  • Clean separation between header and content

8.7.4 Tables

  • Minimal gridlines
  • Header row: graphite text
  • Body rows: slate text
  • Hover state: faint (#FAFAFA)
  • Code cells: IBM Plex Mono

8.7.5 Code Blocks

  • Background: #F7F7F7
  • Border: #E0E0E0
  • Font: IBM Plex Mono
  • Padding: 16px
  • Optional aurora-highlighted lines

(Important for semantic examples & JSON-LD.)

8.7.6 Panels

Used for:

  • settings

  • policy configuration

  • graph visualization controls

  • documentation sections

  • Neutral background

  • 32–48px padding

  • Clear hierarchy

  • Subtle section dividers

8.8 Motion Tokens for Components

Brando’s micro-interactions match the brand’s “quiet authority.”

Buttons

  • 120–160ms transitions
  • No bounce, no elasticity

Tabs

  • Underline slides smoothly from left to right

Nodes

  • Subtle pulse
  • Glow transitions under 1 second

Edges

  • Shimmer traveling in one direction
  • Never looped animations

Modals

  • Fade in, fade out
  • No scaling

Motion should feel measured and controlled.

8.9 Do’s and Don’ts

✔ DO

  • Use icons sparingly
  • Keep stroke weights consistent
  • Use monocline geometry
  • Align icons perfectly to typographic grid
  • Use accent colors for semantic meaning
  • Maintain 8px spacing increments

✖ DON’T

  • Use filled, cartoon, or playful icons
  • Mix stroke styles
  • Apply heavy shadows
  • Use multiple aurora accents together
  • Over-illustrate components
  • Add unnecessary flourish or curvature

8.10 How Icons Support Brando’s Identity

Icons visualize the same ideas that define the brand:

  • semantic nodes
  • governance rules
  • machine-readable structure
  • aurora energy for activated states

The icon system is a visual extension of the Brand Policy Graph itself.