6f28146ac3
- Complete project structure with Next.js frontend - GraphQL API backend with Apollo Server - Portal application with NextAuth - Crossplane Proxmox provider - GitOps configurations - CI/CD pipelines - Testing infrastructure (Vitest, Jest, Go tests) - Error handling and monitoring - Security hardening - UI component library - Documentation
285 lines
6.2 KiB
Markdown
285 lines
6.2 KiB
Markdown
# Phoenix Sankofa Cloud: 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
|
|
|