Sankofa/docs/brand/brand-kit.md

Sankofa Phoenix: Brand Kit

Logo Concepts

1. Phoenix + Sankofa Bird Hybrid

• Phoenix wings with fire
• Head turned backward (Sankofa posture)
• Egg with fire inside at the center
• Forward flight motion

2. Heart-shaped Adinkra Sankofa Symbol with Phoenix Flame

• Traditional Adinkra heart shape
• Phoenix fire emerging from the center
• Sankofa bird silhouette within
• Integrated geometric patterns

3. Phoenix Rising from Adinkra Circle Geometry

• Phoenix emerging from circular Adinkra pattern
• Geometric precision with organic fire
• Balance of structure and transformation

4. Fire-Forged Adinkra Heart with Phoenix Tail

• Adinkra heart as the core
• Phoenix tail feathers as flames
• Forged metal aesthetic
• Strength and transformation

5. Interwoven Akan Gold Weights Forming Phoenix Crest

• Traditional Akan gold weight patterns
• Forming a phoenix silhouette
• Cultural heritage meets mythic power
• Geometric complexity

---

Color Palette

Primary Colors

Phoenix Fire Red

• Hex: #FF4500 (Orange Red)
• RGB: rgb(255, 69, 0)
• Usage: Primary brand color, fire elements, transformation
• Meaning: Rebirth, power, transformation

Sankofa Gold

• Hex: #FFD700 (Gold)
• RGB: rgb(255, 215, 0)
• Usage: Accent color, wisdom elements, ancestral connection
• Meaning: Ancestral wisdom, value, heritage

Deep Purple (Sovereignty)

• Hex: #6A0DAD (Purple)
• RGB: rgb(106, 13, 173)
• Usage: Premium features, sovereignty elements
• Meaning: Royalty, sovereignty, power

Secondary Colors

Phoenix Flame Orange

• Hex: #FF8C00 (Dark Orange)
• RGB: rgb(255, 140, 0)
• Usage: Secondary accents, energy elements

Sankofa Earth Brown

• Hex: #8B4513 (Saddle Brown)
• RGB: rgb(139, 69, 19)
• Usage: Grounding elements, heritage connections

Ancestral Blue

• Hex: #1E3A8A (Deep Blue)
• RGB: rgb(30, 58, 138)
• Usage: Trust, stability, depth

Dark Theme Palette (Studio Quality)

Background

• Near Black: #0A0A0A
• Dark Gray: #1A1A1A
• Medium Gray: #2A2A2A

Accent Colors (Neon/Cinematic)

• Teal: #00FFD1
• Magenta: #FF00FF
• Neon Cyan: #00FFFF
• Amber: #FFB800

Status Colors

• Success: #00FF88
• Warning: #FFB800
• Error: #FF0040
• Info: #00B8FF

---

Typography

Primary Font Family

Inter (Clean, modern sans-serif)

• Excellent readability
• Professional appearance
• Strong support for metrics and data
• Available via Google Fonts

Alternative Fonts

Satoshi (Premium option)

• Modern, geometric
• Excellent for headings
• Studio-quality aesthetic

IBM Plex Sans (Technical option)

• Clear, technical feel
• Excellent for code and data
• Professional and readable

Font Scale

Heading 1: 4rem (64px) - Hero titles
Heading 2: 3rem (48px) - Section titles
Heading 3: 2rem (32px) - Subsection titles
Heading 4: 1.5rem (24px) - Card titles
Body Large: 1.125rem (18px) - Body text
Body: 1rem (16px) - Default text
Body Small: 0.875rem (14px) - Secondary text
Caption: 0.75rem (12px) - Labels, captions

Font Weights

• Light: 300
• Regular: 400
• Medium: 500
• Semibold: 600
• Bold: 700

---

Spacing System

Base Unit: 4px

xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 64px
4xl: 96px
5xl: 128px

---

Logo Usage Guidelines

Clear Space

Maintain clear space equal to the height of the logo on all sides.

Minimum Size

• Full Logo: 120px width minimum
• Icon Only: 32px minimum

Color Variations

1. Full Color: Use on light backgrounds
2. White: Use on dark backgrounds
3. Monochrome: Use when color is not available
4. Inverted: Use on colored backgrounds

Do Not

• Stretch or distort the logo
• Rotate the logo
• Place on busy backgrounds
• Use colors outside the brand palette
• Modify the logo design

---

Visual Language

Icons

Use consistent iconography for:

• Well-Architected Pillars: Security, Reliability, Cost, Performance, Operations, Sustainability
• Infrastructure Elements: Regions, Nodes, Networks, Services
• Status Indicators: Health, Risk, Cost, Performance

Patterns

• Adinkra Patterns: Subtle use in backgrounds, borders
• Geometric Patterns: Modern, technical feel
• Fire Patterns: Transformation, rebirth elements

Imagery Style

• Dark, cinematic: Near-black backgrounds
• Glowing accents: Neon colors for important elements
• Layered depth: Multiple layers for visual hierarchy
• Subtle gradients: Smooth color transitions

---

Motion & Animation

Principles

• Smooth transitions: 200-300ms for UI elements
• Easing: Use ease-in-out for natural motion
• Purposeful: Every animation serves a function
• Subtle: Don't distract from content

Micro-animations

• Hover states: Subtle scale, glow, or color shift
• Loading states: Smooth progress indicators
• State changes: Fade, slide, or scale transitions
• 3D interactions: Smooth camera movements

---

Brand Voice in Visuals

Studio Quality Aesthetic

• Cinematic: Film/AAA-game-adjacent visuals
• Dense: Information-rich but organized
• Dark: Near-black base with bright accents
• Layered: Depth through shadows, glows, gradients
• Precise: Clean lines, exact spacing, perfect alignment

Emotional Resonance

• Power: Strong, confident visuals
• Wisdom: Thoughtful, considered design
• Transformation: Dynamic, evolving elements
• Sovereignty: Independent, self-determined aesthetic
• Heritage: Respectful integration of cultural elements

---

Application Examples

Website

• Dark theme with Phoenix Fire Red and Sankofa Gold accents
• Inter typography throughout
• Cinematic hero sections with 3D elements
• Smooth animations and transitions

Dashboards

• Near-black background
• Neon accent colors for status
• Dense information layout
• Studio-quality charts and visualizations

Documentation

• Clean, readable layouts
• Consistent use of brand colors
• Professional typography
• Clear hierarchy

Marketing Materials

• Bold, mythic imagery
• Strong use of brand colors
• Cinematic quality
• Cultural and spiritual resonance