391 lines
8.5 KiB
Markdown
391 lines
8.5 KiB
Markdown
# 🎨 Awesome Branding & Visual Identity
|
|
|
|
Complete branding implementation for the Awesome web application with our signature purple/pink/gold theme!
|
|
|
|
## ✅ Brand Colors
|
|
|
|
### Primary Palette
|
|
```css
|
|
/* Awesome Purple */
|
|
--awesome-purple: #DA22FF
|
|
--awesome-purple-light: #E855FF
|
|
--awesome-purple-dark: #9733EE
|
|
|
|
/* Awesome Pink */
|
|
--awesome-pink: #FF69B4
|
|
--awesome-pink-light: #FFB6D9
|
|
--awesome-pink-dark: #FF1493
|
|
|
|
/* Awesome Gold */
|
|
--awesome-gold: #FFD700
|
|
--awesome-gold-light: #FFE44D
|
|
--awesome-gold-dark: #FFC700
|
|
```
|
|
|
|
### Gradients
|
|
```css
|
|
/* Main Gradient */
|
|
linear-gradient(135deg, #DA22FF 0%, #9733EE 50%, #FFD700 100%)
|
|
|
|
/* Pink Gradient */
|
|
linear-gradient(135deg, #FF1493 0%, #DA22FF 50%, #9733EE 100%)
|
|
|
|
/* Gold Gradient */
|
|
linear-gradient(135deg, #FFD700 0%, #FF69B4 50%, #FF1493 100%)
|
|
```
|
|
|
|
## 🎯 Logo & Icons
|
|
|
|
### Main Icon (awesome-icon.svg)
|
|
**Location:** `/public/awesome-icon.svg`
|
|
|
|
**Description:** Full-featured awesome icon with all five circles
|
|
- Center circle: Awesome Pink (#FF69B4)
|
|
- Top circle: Primary Purple (#DA22FF)
|
|
- Right circle: Pink (#FF69B4)
|
|
- Left circle: Gold (#FFD700)
|
|
- Bottom left: Dark Pink (#FF1493)
|
|
- Bottom right: Light Purple (#E855FF)
|
|
- Structure: Awesome Purple (#9733EE)
|
|
|
|
**Size:** 512x512px
|
|
**Format:** SVG (scalable)
|
|
**Usage:** Marketing, social media, high-res displays
|
|
|
|
### Simplified Icon (icon.svg)
|
|
**Location:** `/public/icon.svg`
|
|
|
|
**Description:** Simplified gradient circles for small sizes
|
|
- Three concentric circles with gradient
|
|
- Perfect for 32x32 and smaller
|
|
- Uses main awesome gradient
|
|
|
|
**Size:** 32x32px base
|
|
**Format:** SVG
|
|
**Usage:** Toolbar icons, small UI elements
|
|
|
|
### Favicon (favicon.svg)
|
|
**Location:** `/public/favicon.svg`
|
|
|
|
**Description:** Minimal 3-circle design
|
|
- Optimized for 16x16px
|
|
- High contrast
|
|
- Clear at tiny sizes
|
|
|
|
**Size:** 16x16px
|
|
**Format:** SVG
|
|
**Usage:** Browser tabs, bookmarks
|
|
|
|
### PWA Icons
|
|
|
|
#### icon-192.svg
|
|
**Location:** `/public/icon-192.svg`
|
|
- White icon on gradient background
|
|
- Android home screen
|
|
- Size: 192x192px
|
|
|
|
#### icon-512.svg
|
|
**Location:** `/public/icon-512.svg`
|
|
- White icon on gradient background
|
|
- Android splash screens
|
|
- Size: 512x512px
|
|
|
|
### Apple Touch Icon
|
|
**Location:** `/public/apple-touch-icon.svg`
|
|
|
|
**Description:** iOS-optimized with rounded corners
|
|
- Gradient background
|
|
- White icon overlay
|
|
- Rounded corners (radius: 40px)
|
|
- Size: 180x180px
|
|
- Usage: iOS home screen, Safari
|
|
|
|
## 📱 Social Media Assets
|
|
|
|
### Open Graph Image
|
|
**Location:** `/public/og-image.svg`
|
|
|
|
**Specifications:**
|
|
- Size: 1200x630px
|
|
- Format: SVG (can be exported to PNG)
|
|
- Usage: Facebook, LinkedIn, Slack previews
|
|
|
|
**Content:**
|
|
- Full gradient background
|
|
- Centered awesome icon (large, glowing)
|
|
- "AWESOME" title with gradient text
|
|
- "Curated Lists Explorer" subtitle
|
|
- Stats: "209 Lists • 14K+ Repos • FTS5 Search"
|
|
- Decorative circles in background
|
|
|
|
**Colors:**
|
|
- Background: Full gradient (#DA22FF → #9733EE → #FF69B4 → #FFD700)
|
|
- Text: Gradient fill
|
|
- Icon: White with glow effect
|
|
|
|
## 🎨 Typography
|
|
|
|
### Font Stack
|
|
```css
|
|
font-family: system-ui, -apple-system, sans-serif
|
|
```
|
|
|
|
### Weights
|
|
- Regular: 400
|
|
- Semibold: 600
|
|
- Bold: 700
|
|
- Black: 900 (for headlines)
|
|
|
|
### Gradient Text Classes
|
|
```css
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #DA22FF 0%, #9733EE 50%, #FFD700 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.gradient-text-pink {
|
|
background: linear-gradient(135deg, #FF1493 0%, #DA22FF 50%, #9733EE 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.gradient-text-gold {
|
|
background: linear-gradient(135deg, #FFD700 0%, #FF69B4 50%, #FF1493 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
```
|
|
|
|
## 🖼️ Icon Manifest
|
|
|
|
### PWA Manifest (manifest.json)
|
|
```json
|
|
{
|
|
"icons": [
|
|
{
|
|
"src": "/icon.svg",
|
|
"sizes": "any",
|
|
"type": "image/svg+xml"
|
|
},
|
|
{
|
|
"src": "/icon-192.svg",
|
|
"sizes": "192x192",
|
|
"type": "image/svg+xml"
|
|
},
|
|
{
|
|
"src": "/icon-512.svg",
|
|
"sizes": "512x512",
|
|
"type": "image/svg+xml"
|
|
},
|
|
{
|
|
"src": "/apple-touch-icon.svg",
|
|
"sizes": "180x180",
|
|
"type": "image/svg+xml",
|
|
"purpose": "maskable"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
### HTML Meta Tags (app/layout.tsx)
|
|
```tsx
|
|
icons: {
|
|
icon: [
|
|
{ url: '/favicon.svg', type: 'image/svg+xml' },
|
|
{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' }
|
|
],
|
|
apple: '/apple-touch-icon.svg',
|
|
shortcut: '/favicon.svg',
|
|
}
|
|
```
|
|
|
|
## 🎭 Theme Colors
|
|
|
|
### Light Mode
|
|
```css
|
|
--background: 0 0% 100%
|
|
--foreground: 0 0% 3.9%
|
|
--primary: 291 100% 56% /* Awesome Purple */
|
|
--secondary: 330 81% 60% /* Awesome Pink */
|
|
--accent: 51 100% 50% /* Awesome Gold */
|
|
```
|
|
|
|
### Dark Mode
|
|
```css
|
|
--background: 0 0% 3.9%
|
|
--foreground: 0 0% 98%
|
|
--primary: 291 100% 56%
|
|
--secondary: 330 81% 60%
|
|
--accent: 51 100% 50%
|
|
```
|
|
|
|
## 📏 Spacing & Layout
|
|
|
|
### Border Radius
|
|
```css
|
|
--radius: 0.5rem (8px)
|
|
--radius-sm: 0.25rem (4px)
|
|
--radius-md: 0.375rem (6px)
|
|
--radius-lg: 0.75rem (12px)
|
|
```
|
|
|
|
### Shadows
|
|
```css
|
|
/* Awesome Button Shadow */
|
|
box-shadow: 0 4px 15px 0 rgba(218, 34, 255, 0.4);
|
|
|
|
/* Awesome Button Hover */
|
|
box-shadow: 0 6px 20px 0 rgba(218, 34, 255, 0.6);
|
|
|
|
/* Card Hover */
|
|
box-shadow: 0 8px 30px rgba(218, 34, 255, 0.3);
|
|
```
|
|
|
|
## 🎨 Component Styles
|
|
|
|
### Buttons
|
|
```css
|
|
.btn-awesome {
|
|
background: linear-gradient(135deg, #DA22FF 0%, #9733EE 50%, #FFD700 100%);
|
|
box-shadow: 0 4px 15px 0 rgba(218, 34, 255, 0.4);
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 300ms;
|
|
}
|
|
|
|
.btn-awesome:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px 0 rgba(218, 34, 255, 0.6);
|
|
}
|
|
```
|
|
|
|
### Cards
|
|
```css
|
|
.card-awesome {
|
|
border: 2px solid rgba(218, 34, 255, 0.2);
|
|
transition: all 300ms;
|
|
}
|
|
|
|
.card-awesome:hover {
|
|
border-color: rgba(218, 34, 255, 0.6);
|
|
box-shadow: 0 8px 30px rgba(218, 34, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
```
|
|
|
|
### Scrollbar
|
|
```css
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(135deg, #DA22FF 0%, #9733EE 50%, #FFD700 100%);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(135deg, #FF1493 0%, #DA22FF 50%, #9733EE 100%);
|
|
}
|
|
```
|
|
|
|
## 🌐 Browser Support
|
|
|
|
### SVG Icons
|
|
- ✅ Chrome/Edge (all versions)
|
|
- ✅ Firefox (all versions)
|
|
- ✅ Safari 14+
|
|
- ✅ iOS Safari 14+
|
|
- ✅ Android Chrome
|
|
|
|
### PWA Support
|
|
- ✅ Android (Chrome, Samsung Internet)
|
|
- ✅ iOS 16.4+ (limited)
|
|
- ✅ Desktop (Chrome, Edge)
|
|
|
|
## 📊 Asset Sizes
|
|
|
|
| Asset | Format | Size | Usage |
|
|
|-------|--------|------|-------|
|
|
| awesome-icon.svg | SVG | ~1KB | Main logo |
|
|
| icon.svg | SVG | ~0.5KB | General use |
|
|
| favicon.svg | SVG | ~0.4KB | Browser tab |
|
|
| icon-192.svg | SVG | ~0.8KB | PWA Android |
|
|
| icon-512.svg | SVG | ~0.8KB | PWA large |
|
|
| apple-touch-icon.svg | SVG | ~1KB | iOS home |
|
|
| og-image.svg | SVG | ~2KB | Social media |
|
|
|
|
**Total:** ~6KB for all brand assets!
|
|
|
|
## 🎯 Usage Guidelines
|
|
|
|
### Logo Usage
|
|
|
|
**✅ DO:**
|
|
- Use on white or light backgrounds
|
|
- Use on gradient backgrounds matching theme
|
|
- Scale proportionally
|
|
- Maintain minimum size (32px)
|
|
- Use SVG for crisp display
|
|
|
|
**❌ DON'T:**
|
|
- Distort or stretch
|
|
- Change colors outside palette
|
|
- Add effects (shadows, outlines)
|
|
- Use on busy backgrounds
|
|
- Compress below minimum size
|
|
|
|
### Color Usage
|
|
|
|
**Primary Uses:**
|
|
- Purple: Main branding, primary CTAs
|
|
- Pink: Secondary elements, highlights
|
|
- Gold: Accents, special features
|
|
|
|
**Accessibility:**
|
|
- All text meets WCAG AA contrast
|
|
- Focus rings use primary purple
|
|
- Error states use system red
|
|
|
|
## 🚀 Implementation Checklist
|
|
|
|
- [x] Create main awesome icon
|
|
- [x] Create simplified icon
|
|
- [x] Create favicon
|
|
- [x] Generate PWA icons (192, 512)
|
|
- [x] Create Apple touch icon
|
|
- [x] Create OG image
|
|
- [x] Update manifest.json
|
|
- [x] Update layout metadata
|
|
- [x] Apply theme colors throughout
|
|
- [x] Implement gradient classes
|
|
- [x] Style components
|
|
|
|
## 💡 Brand Voice
|
|
|
|
**Personality:** Enthusiastic, helpful, professional
|
|
**Tone:** Friendly but focused, exciting but clear
|
|
**Voice:** Active, direct, positive
|
|
|
|
**Example Headlines:**
|
|
- ✅ "Discover Awesome Lists"
|
|
- ✅ "Lightning-Fast Search"
|
|
- ✅ "Your Gateway to Curated Collections"
|
|
- ❌ "Maybe You'll Find Something"
|
|
- ❌ "Try Our Search Feature"
|
|
|
|
## 🎊 Summary
|
|
|
|
**Complete Branding Package:**
|
|
- ✅ 7 SVG assets created
|
|
- ✅ All icons themed with purple/pink/gold
|
|
- ✅ PWA manifest updated
|
|
- ✅ Meta tags configured
|
|
- ✅ OG image for social sharing
|
|
- ✅ Responsive and scalable
|
|
- ✅ Total size: ~6KB
|
|
- ✅ 100% brand consistency
|
|
|
|
**The Awesome webapp now has a complete, professional visual identity!** 💜💗💛
|
|
|
|
---
|
|
|
|
*Designed with love and maximum awesomeness!*
|