brand-identity

Brand Identity System

A structured reference for producing a cohesive brand visual identity package. Every section provides concrete specifications — pixel dimensions, color ratios, spacing rules — so that generated code (Pillow, reportlab) outputs professional-grade deliverables on the first attempt.

---

BRAND KIT DELIVERABLE CHECKLIST

A complete brand kit contains these artifacts. Generate them in order; each builds on the decisions of the previous.

---

COLOR SYSTEM

Palette Structure

Every brand uses a three-tier palette:

Specification Format

Define each color with all three notations:

Primary:    #2D5BFF  →  rgb(45, 91, 255)
Secondary:  #FF6B35  →  rgb(255, 107, 53)
Neutral-900: #1A1A2E →  rgb(26, 26, 46)    ← text
Neutral-100: #F5F5F7 →  rgb(245, 245, 247)  ← background
Neutral-50:  #FFFFFF →  rgb(255, 255, 255)  ← white

Contrast Rules

• Text on background must meet WCAG AA: contrast ratio ≥ 4.5:1 for body, ≥ 3:1 for large text (≥18pt)
• Logo must remain legible at minimum size on both light and dark backgrounds
• Never place primary color text on secondary color background without testing contrast

---

TYPOGRAPHY HIERARCHY

Font Selection

Choose a maximum of 3 font families from the canvas-fonts/ directory:

Size Scale (pt)

Font Loading (Pillow)

from PIL import ImageFont

FONT_DIR = "/app/skills/canvas-design/canvas-fonts"
heading_font = ImageFont.truetype(f"{FONT_DIR}/Outfit-Bold.ttf", 48)
body_font = ImageFont.truetype(f"{FONT_DIR}/InstrumentSans-Regular.ttf", 16)
accent_font = ImageFont.truetype(f"{FONT_DIR}/DMMono-Regular.ttf", 12)

---

LOGO DESIGN SPECIFICATIONS

Geometric Construction

• Build from a maximum of 3-4 primitive shapes (circles, rectangles, triangles, custom paths)
• Use proportional relationships: golden ratio (1:1.618) or simple ratios (1:1, 1:2, 2:3)
• Maintain optical balance — geometric center ≠ visual center; adjust by eye
• Icon should be recognizable at 64×64px (favicon test)

Logo Variants

Export Specifications

Wordmark Rules

• Letter-spacing: +2% to +8% of font size for brand names (track out for elegance)
• Weight: Medium to Bold (never Thin for wordmarks — must be legible at small size)
• Alignment with icon: baseline-aligned or center-aligned, maintain consistent gap

Style Constraints

• No gradients in the primary logo — solid colors only for maximum versatility
• No photorealistic elements — geometric/abstract only
• No more than 3 colors in the logo (primary + secondary + neutral or white)
• Minimum clear space: 0.5× the logo height on all sides, free of other elements

---

BUSINESS CARD SPECIFICATIONS

Dimensions

Information Hierarchy

Arrange content in this priority order:

1. Logo — occupies 20-30% of card width, positioned top-left or centered-top
2. Name — largest text element on card, 14-18pt
3. Title/Role — 2-4 words maximum, 10-12pt
4. Contact details — ordered: email → phone → website → address, 8-10pt
5. Tagline (optional) — bottom edge or back, 8-9pt italic

Layout Rules

• Use one side only (single-sided design) unless explicitly requested otherwise
• Maintain clear spatial zones: identity zone (top) + contact zone (bottom)
• Horizontal rule or whitespace to separate zones
• All contact info left-aligned for scan-ability
• Logo and name can be on opposite sides (left/right) for visual balance

reportlab Output

from reportlab.lib.pagesizes import landscape
from reportlab.lib.units import mm

# Business card size
CARD_WIDTH = 89 * mm   # 3.5 inches
CARD_HEIGHT = 51 * mm  # 2 inches
BLEED = 3 * mm
SAFETY = 6 * mm

---

SOCIAL MEDIA COVER SPECIFICATIONS

Dimensions

Use 1500×500px as the universal size — works across platforms with minimal cropping.

Safe Zone

The outer 15% on each side may be cropped or obscured by profile pictures and UI elements. All critical content (brand name, tagline, key visuals) must fit within the center safe zone:

┌──────────────────────────────────┐
│ ░░░░░░ CROP ZONE ░░░░░░░░░░░░░░ │
│ ░░ ┌────────────────────────┐ ░░ │
│ ░░ │    SAFE ZONE           │ ░░ │
│ ░░ │  1080 × 360px          │ ░░ │
│ ░░ └────────────────────────┘ ░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────┘

Content Guidelines

• Brand name: prominent, centered or left-aligned within safe zone
• Tagline: one line, positioned below or beside brand name
• Visual elements: geometric patterns, color blocks, or abstract shapes from the design philosophy — extend to full bleed
• No small text: minimum 24pt for any text on cover (reads on mobile)
• Background should use brand colors; avoid busy photographs that compete with text

---

CROSS-DELIVERABLE CONSISTENCY RULES

These rules ensure visual coherence across all brand artifacts:

1. Color values are immutable — define once in Phase 4, copy-paste exact HEX values everywhere. Never approximate.

2. Font families are shared — the same heading/body/accent fonts appear on logo wordmark, business card, social cover, and spec document.

3. Logo placement scaling:

   • Business card: logo width = 20-30% of card width
   • Social cover: logo height = 40-60% of safe zone height
   • Spec document: logo displayed at 200px wide in header

4. Spacing system — derive all spacing from a base unit (e.g., 8px grid):

   • xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, xxl: 48px

5. Visual weight balance — if the logo uses thick geometric shapes, business card and cover should echo that weight (bold fonts, solid color blocks). If the logo is delicate/thin, other deliverables match (light fonts, fine lines, ample whitespace).

---

BRAND SPECIFICATION DOCUMENT FORMAT

The final .md document compiles all brand decisions into a referenceable guide:

# [Brand Name] — Brand Specification

## Brand Philosophy
[3-5 paragraphs from Phase 2]

## Design Philosophy
[Movement name and description from Phase 3]

## Color Palette
| Role | Name | HEX | RGB | Usage |
|------|------|-----|-----|-------|
| Primary | [name] | #XXXXXX | rgb(r,g,b) | Logo, headings |
| Secondary | [name] | #XXXXXX | rgb(r,g,b) | Accents |
| Neutral Dark | [name] | #XXXXXX | rgb(r,g,b) | Text |
| Neutral Light | [name] | #XXXXXX | rgb(r,g,b) | Background |

## Typography
| Role | Family | Weight | Sizes |
|------|--------|--------|-------|
| Heading | [font] | Bold | H1:48pt H2:32pt H3:24pt |
| Body | [font] | Regular | 14-16pt |
| Accent | [font] | Regular | 10-12pt |

## Logo Usage
- Minimum size: 64px width
- Clear space: 0.5× logo height on all sides
- Approved variants: Primary, Dark, Light, Icon-only
- Never stretch, rotate, or recolor the logo

## Deliverable Files
| File | Format | Dimensions |
|------|--------|-----------|
| logo-dark.png | PNG | 1024×1024 |
| logo-light.png | PNG | 1024×1024 |
| business-card.pdf | PDF | 3.5"×2" |
| social-cover.png | PNG | 1500×500 |