197 lines
4.6 KiB
Markdown
197 lines
4.6 KiB
Markdown
# Neode Logo Usage Guide
|
|
|
|
## Logo File
|
|
**Primary Logo**: `/assets/img/logo-neode.png`
|
|
- Format: PNG with transparency
|
|
- Size: 454x454 pixels
|
|
- Type: Square icon/badge style
|
|
|
|
## Usage Throughout App
|
|
|
|
### 1. **Splash Screen**
|
|
- **Size**: Medium-large (300px max width)
|
|
- **Position**: Centered on screen
|
|
- **Timing**: Appears after alien intro and welcome message
|
|
- **Style**: Drop shadow for depth
|
|
|
|
```vue
|
|
<img
|
|
src="/assets/img/logo-neode.png"
|
|
class="w-[min(50vw,300px)] max-w-[80vw]"
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
### 2. **Login Page**
|
|
- **Size**: 96px (24 in Tailwind = 96px)
|
|
- **Position**: **Half in, half out of glass card** (original design)
|
|
- **Style**: Absolute positioned at `-top-12` (48px up from card top)
|
|
- **Effect**: Logo appears to "float" above the card
|
|
|
|
```vue
|
|
<div class="glass-card p-8 pt-20 relative">
|
|
<div class="absolute -top-12 left-1/2 -translate-x-1/2 z-10">
|
|
<img
|
|
src="/assets/img/logo-neode.png"
|
|
class="w-24 h-24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**Visual Effect:**
|
|
```
|
|
┌─────┐
|
|
│ │ ← Half of logo above card
|
|
╔══│═════│══╗
|
|
║ │ │ ║
|
|
║ └─────┘ ║ ← Half of logo inside card
|
|
║ ║
|
|
║ Content ║
|
|
╚═══════════╝
|
|
```
|
|
|
|
---
|
|
|
|
### 3. **Onboarding Intro**
|
|
- **Size**: 128px (32 in Tailwind)
|
|
- **Position**: **Half in, half out of glass card**
|
|
- **Style**: Same floating effect as login
|
|
|
|
```vue
|
|
<div class="glass-card p-12 pt-20 relative">
|
|
<div class="absolute -top-16 left-1/2 -translate-x-1/2">
|
|
<img
|
|
src="/assets/img/logo-neode.png"
|
|
class="w-32 h-32"
|
|
/>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
### 4. **Onboarding Options**
|
|
- **Size**: 128px (32 in Tailwind)
|
|
- **Position**: Centered above heading (not in card)
|
|
- **Style**: Standard centered logo
|
|
|
|
```vue
|
|
<img
|
|
src="/assets/img/logo-neode.png"
|
|
class="w-32 h-32 mx-auto mb-8"
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
### 5. **Dashboard Sidebar**
|
|
- **Size**: 64px (16 in Tailwind)
|
|
- **Position**: Top of sidebar, inline with server name
|
|
- **Style**: Compact for sidebar
|
|
|
|
```vue
|
|
<div class="flex items-center gap-3">
|
|
<img src="/assets/img/logo-neode.png" class="w-16 h-16" />
|
|
<div>
|
|
<h2>Server Name</h2>
|
|
<p>v0.0.0</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
### 6. **Browser Tab (Favicon)**
|
|
- **File**: Same logo used as favicon
|
|
- **Platforms**: Standard favicon + Apple touch icon
|
|
|
|
```html
|
|
<link rel="icon" type="image/png" href="/assets/img/logo-neode.png" />
|
|
<link rel="apple-touch-icon" href="/assets/img/logo-neode.png" />
|
|
```
|
|
|
|
---
|
|
|
|
## Size Reference
|
|
|
|
| Location | Tailwind Class | Actual Size | Purpose |
|
|
|----------|---------------|-------------|---------|
|
|
| Splash | `w-[min(50vw,300px)]` | Up to 300px | Large reveal |
|
|
| Onboarding Intro | `w-32 h-32` | 128px | Prominent |
|
|
| Onboarding Options | `w-32 h-32` | 128px | Header |
|
|
| Login | `w-24 h-24` | 96px | Floating |
|
|
| Sidebar | `w-16 h-16` | 64px | Compact |
|
|
|
|
---
|
|
|
|
## The "Half In, Half Out" Effect
|
|
|
|
This is the signature Neode design pattern for modals/cards:
|
|
|
|
### CSS Pattern:
|
|
```vue
|
|
<div class="glass-card pt-20 relative"> <!-- Extra top padding -->
|
|
<div class="absolute -top-12 left-1/2 -translate-x-1/2 z-10">
|
|
<img src="/assets/img/logo-neode.png" class="w-24 h-24" />
|
|
</div>
|
|
<!-- Content -->
|
|
</div>
|
|
```
|
|
|
|
### Key Properties:
|
|
- **Parent card**: `relative` positioning, `pt-20` (extra top padding for logo space)
|
|
- **Logo container**: `absolute` positioning
|
|
- **Vertical**: `-top-12` (moves logo up by 48px, half of 96px logo height)
|
|
- **Horizontal**: `left-1/2 -translate-x-1/2` (perfect centering)
|
|
- **Z-index**: `z-10` (appears above card)
|
|
|
|
### Math:
|
|
- Logo height: 96px
|
|
- Pushed up: `-48px` (half the height)
|
|
- Result: **Top 48px outside card, bottom 48px inside card**
|
|
|
|
---
|
|
|
|
## Don't Use These (Deprecated)
|
|
|
|
❌ `/assets/img/logo-large.svg` - Old text-based logo
|
|
❌ `/assets/img/icon.png` - Generic icon
|
|
❌ `/assets/img/neode-logo.png` - Duplicate, use `logo-neode.png`
|
|
|
|
✅ **Always use**: `/assets/img/logo-neode.png`
|
|
|
|
---
|
|
|
|
## Design Philosophy
|
|
|
|
The logo represents:
|
|
- **Sovereignty**: Bold, centered presence
|
|
- **Elegance**: Clean design that works with glassmorphism
|
|
- **Trust**: Consistent across all touchpoints
|
|
|
|
The "floating" effect on cards creates visual hierarchy and draws attention to the brand while maintaining the clean, modern aesthetic.
|
|
|
|
---
|
|
|
|
## Responsive Behavior
|
|
|
|
### Mobile (< 768px):
|
|
- Logo sizes scale down proportionally
|
|
- Floating effect maintained
|
|
- Touch-friendly sizing
|
|
|
|
### Tablet (768px - 1024px):
|
|
- Standard sizes
|
|
- Full effects
|
|
|
|
### Desktop (> 1024px):
|
|
- Largest sizes for impact
|
|
- Maximum visual effect
|
|
|
|
---
|
|
|
|
**Remember**: The logo is your brand identity. Use it consistently! 🎨
|
|
|