Create a complete brand visual identity system from a project description. Use this skill when a user asks to create a brand kit, logo system, business card design, social media cover, color palette, typography specification, brand guidelines document, or any combination of brand identity deliverables. Covers the full spectrum of brand collateral: primary/wordmark/icon logos with monochrome and reversed variants, color systems with primary/secondary/neutral palettes, typographic hierarchies with heading/body/accent scales, business card layouts, social media assets, and compiled brand specification documents.
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.
A complete brand kit contains these artifacts. Generate them in order; each builds on the decisions of the previous.
| # | Deliverable | Format | Key Spec |
|---|---|---|---|
| 1 | Brand Philosophy | .md | 3-5 paragraphs, 150-300 words |
| 2 | Design Philosophy | .md | 4-6 paragraphs, aesthetic movement |
| 3 | Color Palette | defined in spec | Primary + Secondary + Neutral, HEX/RGB |
| 4 | Typography Scale | defined in spec | Heading / Body / Accent, 3 font families max |
| 5 | Logo — Primary |
.png |
| 1024×1024, transparent background |
| 6 | Logo — Dark variant | .png | For light backgrounds |
| 7 | Logo — Light variant | .png | For dark backgrounds |
| 8 | Business Card | .pdf | 1050×600pt (3.5"×2" @300dpi) |
| 9 | Social Media Cover | .png | 1500×500px |
| 10 | Brand Specification | .md | Compiled reference document |
Every brand uses a three-tier palette:
| Tier | Role | Usage Ratio | Typical Application |
|---|---|---|---|
| Primary | Brand signature | ~60% | Logo, headings, CTAs |
| Secondary | Supporting accent | ~30% | Illustrations, highlights, hover states |
| Neutral | Background & text | ~10% accent / rest bg | Body text, borders, backgrounds |
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
Choose a maximum of 3 font families from the canvas-fonts/ directory:
| Role | Characteristics | Typical Families |
|---|---|---|
| Heading | High impact, distinctive | BigShoulders, Outfit, YoungSerif, Gloock |
| Body | Highly readable at small sizes | InstrumentSans, WorkSans, CrimsonPro, Lora |
| Accent | Decorative or monospaced, for labels/captions | DMMono, GeistMono, JetBrainsMono, Italiana |
| Level | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| H1 | 48-64pt | Bold | 1.1× | Hero / cover title |
| H2 | 32-40pt | Bold | 1.2× | Section headings |
| H3 | 24-28pt | Medium/Bold | 1.25× | Sub-headings |
| H4 | 18-22pt | Medium | 1.3× | Card titles |
| Body | 14-16pt | Regular | 1.5× | Paragraphs |
| Caption | 10-12pt | Regular/Light | 1.4× | Labels, footnotes |
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)
| Variant | Content | Background | Use Case |
|---|---|---|---|
| Primary | Icon + Wordmark | Transparent | Default usage |
| Dark | Dark-colored mark | Transparent | On light backgrounds |
| Light | Light/white mark | Transparent | On dark backgrounds |
| Icon-only | Icon without text | Transparent | Favicon, app icon, small spaces |
| Property | Value |
|---|---|
| Canvas size | 1024×1024px minimum |
| Background | Transparent (RGBA) |
| Format | PNG-24 with alpha |
| Color mode | sRGB |
| Padding | 10-15% of canvas on each side (icon centered) |
| Property | Value |
|---|---|
| Standard size | 3.5" × 2" (89mm × 51mm) |
| Pixel size @300dpi | 1050 × 600px |
| reportlab points | 1050pt × 600pt (1pt = 1px at 72dpi, use 252pt × 144pt for true size, or scale up) |
| Bleed area | 3mm (9px @300dpi) beyond trim on all sides |
| Safety margin | 6mm (18px @300dpi) inside trim — all text/logos within this |
Arrange content in this priority order:
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
| Platform | Size | Safe Zone |
|---|---|---|
| Universal cover | 1500×500px | Center 1080×360px |
| LinkedIn banner | 1584×396px | Center 1080×360px |
| Twitter/X header | 1500×500px | Center 1080×360px |
Use 1500×500px as the universal size — works across platforms with minimal cropping.
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 │ ░░ │
│ ░░ └────────────────────────┘ ░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────┘
These rules ensure visual coherence across all brand artifacts:
Color values are immutable — define once in Phase 4, copy-paste exact HEX values everywhere. Never approximate.
Font families are shared — the same heading/body/accent fonts appear on logo wordmark, business card, social cover, and spec document.
Logo placement scaling:
Spacing system — derive all spacing from a base unit (e.g., 8px grid):
xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, xxl: 48pxVisual 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).
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 |