COLOR — BRAND GUIDELINES (CHAPTER 4)

Brando Brand Guidelines v1.0

4. Color System

Brando’s color system balances technical precision with the natural phenomenon of the Northern Lights. The palette is intentionally minimal in its core, with carefully controlled accents inspired by aurora gradients.

The goal is clarity first, with controlled energy where needed.

4.1 Color Philosophy

1. Clarity is the foundation

Brando operates in a high-precision domain. Therefore, monochrome neutrals form the core palette.

2. Color is functional, not decorative

Accents guide attention, signify hierarchy, and clarify interactions — not embellish.

3. Northern Lights as inspiration

The aurora colors express:

energy
intelligence
connected systems
nature’s geometry
dynamic movement

These qualities parallel the nature of semantic governance.

4. Gradients, not flat colors, represent transformation

Auroras are gradients, not blocks. Brando uses gradients sparingly — for moments of emphasis, not as a default.

4.2 Core Neutral Palette (The Foundation)

These neutrals are the backbone of the brand — used in 80–90% of UI, typography, layout, and structural elements.

Name	Hex	Use
Black / Charcoal	`#121212`	Primary text, premium surfaces
Graphite	`#1C1C1E`	Dark UI backgrounds
Slate	`#2C2C2E`	Secondary dark backgrounds
Steel Gray	`#6F6F6F`	Secondary text
Cloud	`#E0E0E0`	Dividers / strokes
Snow	`#FAFAFA`	Light surfaces
White	`#FFFFFF`	Primary light background

These tones keep Brando looking premium, professional, and timeless.

4.3 Aurora Accent Palette (The Signature)

Inspired by the Northern Lights — refined, not neon; atmospheric, not playful.

These colors are used sparingly for:

highlights
active states
callouts
diagrams
product UI signals
hero gradients

They give Brando its unique personality.

Aurora Green

Hex: #6FFFB0
Meaning: Clarity, intelligence, signal
Use: Positive indicators, highlights, interactive states

Aurora Cyan

Hex: #4FE5F8
Meaning: Connectivity, flow, precision
Use: Primary accent for UI, links, data lines

Aurora Violet

Hex: #8D68FF
Meaning: Creativity, depth, semantic layers
Use: Secondary accent, diagrams, highlights

Aurora Magenta

Hex: #DB4CFF
Meaning: Energy, transformation
Use: Rare accent, caution-highlighting, advanced features

4.4 The Brando Gradient (Hero Element)

A sophisticated, Northern Lights–inspired gradient for hero moments:

linear-gradient(
  135deg,
  #6FFFB0 0%,
  #4FE5F8 30%,
  #8D68FF 70%,
  #DB4CFF 100%
)

Usage:

Landing page hero
Major slides
Key visuals
Section dividers
Background behind policy graph illustrations

Rules:

NEVER use text on top without 90% opacity black/white overlay
NEVER apply to body copy
NEVER overuse
This is a brand “moment,” not a default

4.5 Functional UI Colors

Success (positive state)

#6FFFB0 (Aurora Green)

Information

#4FE5F8 (Aurora Cyan)

Warning

#F8D34F (Aurora Gold) ← subtle, not harsh

Error

#FF4F72 (Aurora Red) Inspired by the “red edge” often seen at the base of auroras.

Important: These are tinted, not flat hues — matching the atmospheric tone of the Northern Lights.

4.6 Accessibility Rules

Body text must be #121212 on white / snow backgrounds
Headings must maintain 4.5:1 contrast
Aurora accents should never be used for large text
Avoid placing light aurora colors on white backgrounds
Tooltips, badges, and tags must use dark neutrals for text
Gradients must be accessibility-supported via overlays

4.7 Color Usage Ratios

Brando uses strict ratios to maintain visual discipline:

Neutral Palette: 80–90%
Aurora Accents (Flat): 8–12%
Aurora Gradient: 1–3%
Functional Colors: as needed (minimal)

We are a premium technical brand, not a colorful SaaS.

4.8 Incorrect Usage

❌ Don’t use aurora colors for body text

❌ Don’t place cyan or green on white without outlining

❌ Don’t use gradients as section backgrounds everywhere

❌ Don’t combine accent colors arbitrarily

❌ Don’t use bright neon versions of aurora hues

❌ Don’t over-saturate visuals

❌ Don’t let color overshadow content or structure

Brando’s presence must feel calm, technical, controlled.

4.9 CSS Token System (Brand Color Variables)

:root {
  /* Neutral Core */
  --color-black: #121212;
  --color-graphite: #1C1C1E;
  --color-slate: #2C2C2E;
  --color-gray: #6F6F6F;
  --color-cloud: #E0E0E0;
  --color-snow: #FAFAFA;
  --color-white: #FFFFFF;

  /* Aurora Accents */
  --aurora-green: #6FFFB0;
  --aurora-cyan: #4FE5F8;
  --aurora-violet: #8D68FF;
  --aurora-magenta: #DB4CFF;

  /* Gradient */
  --brando-gradient:
    linear-gradient(135deg, #6FFFB0, #4FE5F8, #8D68FF, #DB4CFF);

  /* Functional */
  --color-success: #6FFFB0;
  --color-info: #4FE5F8;
  --color-warning: #F8D34F;
  --color-error: #FF4F72;
}

4.10 Examples

Hero Gradient Block

A subtle aurora glow behind the headline.

UI Accent

Cyan underlines, data-line strokes, active states.

Visual Graphs

Nodes in violet, edges in cyan, highlight nodes in green.

Callouts

Light aurora overlays for emphasis.

4.11 Color in the Brand’s Story

Color supports Brando’s narrative:

Neutral palette → governance, control, clarity
Aurora accents → dynamic energy, machine interpretation, semantic flow
Gradient → transformation, alignment, structure emerging from noise

Brando’s color system is not aesthetic alone — it visually communicates the entire purpose of the brand.