110 lines
2.8 KiB
Markdown
110 lines
2.8 KiB
Markdown
|
# SYNTAXIS Logo Files
|
|||
|
|
|
|||
|
|
Generated SVG logo variations for the SYNTAXIS brand.
|
|||
|
|
|
|||
|
|
## Files Included
|
|||
|
|
|
|||
|
|
### Primary Logos
|
|||
|
|
|
|||
|
|
1. **syntaxis-logo-icon.svg** (200×200)
|
|||
|
|
- Standalone geometric icon
|
|||
|
|
- Use for: Favicon, app icon, profile pictures
|
|||
|
|
- Works at: 32px minimum
|
|||
|
|
|
|||
|
|
2. **syntaxis-logo-horizontal.svg** (500×120)
|
|||
|
|
- Full horizontal lockup with icon, wordmark, and tagline
|
|||
|
|
- Use for: Website headers, business cards, marketing materials
|
|||
|
|
- Best for: Wide spaces, headers
|
|||
|
|
|
|||
|
|
3. **syntaxis-logo-compact.svg** (400×100)
|
|||
|
|
- Horizontal without tagline
|
|||
|
|
- Use for: Toolbars, navigation, smaller spaces
|
|||
|
|
- Best for: UI components, email signatures
|
|||
|
|
|
|||
|
|
4. **syntaxis-logo-vertical.svg** (300×300)
|
|||
|
|
- Stacked layout with icon above text
|
|||
|
|
- Use for: Square spaces, mobile layouts, posters
|
|||
|
|
- Best for: Vertical layouts, social media
|
|||
|
|
|
|||
|
|
5. **syntaxis-logo-monogram.svg** (200×200)
|
|||
|
|
- Geometric "S" construction
|
|||
|
|
- Use for: Watermarks, very small sizes, alternative branding
|
|||
|
|
- Best for: Minimal contexts
|
|||
|
|
|
|||
|
|
### Monochrome Versions
|
|||
|
|
|
|||
|
|
6. **syntaxis-logo-mono-light.svg** (200×200)
|
|||
|
|
- Black shapes for light backgrounds
|
|||
|
|
- Use for: Print, high contrast, accessibility
|
|||
|
|
|
|||
|
|
7. **syntaxis-logo-mono-dark.svg** (200×200)
|
|||
|
|
- White shapes for dark backgrounds
|
|||
|
|
- Use for: Dark mode interfaces, dark presentations
|
|||
|
|
|
|||
|
|
## Color Palette Used
|
|||
|
|
|
|||
|
|
- **SYNTAXIS Blue** (#2C5F8E): Primary shapes, wordmark
|
|||
|
|
- **Greek Stone Gray** (#6B7280): Secondary shapes, tagline
|
|||
|
|
- **Arrangement Gold** (#D97706): Central triangle accent
|
|||
|
|
|
|||
|
|
## Design Elements
|
|||
|
|
|
|||
|
|
Each logo incorporates the core geometric pattern:
|
|||
|
|
- ◆ Diamonds: Project phases (blue)
|
|||
|
|
- ■ Squares: Tasks (gray)
|
|||
|
|
- ▲ Triangle: Core priority (gold)
|
|||
|
|
|
|||
|
|
## Usage Guidelines
|
|||
|
|
|
|||
|
|
### Minimum Sizes
|
|||
|
|
- With text: 120px wide
|
|||
|
|
- Icon only: 32px
|
|||
|
|
- Never scale below these minimums
|
|||
|
|
|
|||
|
|
### Clear Space
|
|||
|
|
Maintain clear space of 0.5× logo height around all sides
|
|||
|
|
|
|||
|
|
### Do's
|
|||
|
|
✓ Use on white or dark backgrounds as appropriate
|
|||
|
|
✓ Scale proportionally
|
|||
|
|
✓ Maintain color integrity
|
|||
|
|
✓ Use monochrome versions when color isn't available
|
|||
|
|
|
|||
|
|
### Don'ts
|
|||
|
|
✗ Don't distort or stretch
|
|||
|
|
✗ Don't change colors
|
|||
|
|
✗ Don't add effects (shadows, outlines, etc.)
|
|||
|
|
✗ Don't rotate or tilt
|
|||
|
|
✗ Don't place on busy backgrounds
|
|||
|
|
|
|||
|
|
## Next Steps for Production
|
|||
|
|
|
|||
|
|
To create raster versions (PNG):
|
|||
|
|
```bash
|
|||
|
|
# Using Inkscape or similar SVG converter
|
|||
|
|
inkscape syntaxis-logo-icon.svg --export-type=png --export-width=512
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Recommended raster sizes:
|
|||
|
|
- Favicon: 16×16, 32×32, 64×64
|
|||
|
|
- App icons: 128×128, 256×256, 512×512, 1024×1024
|
|||
|
|
- Social media: 400×400, 800×800
|
|||
|
|
- Open Graph: 1200×630
|
|||
|
|
|
|||
|
|
## Files Format
|
|||
|
|
|
|||
|
|
All files are:
|
|||
|
|
- Vector SVG format
|
|||
|
|
- Web-optimized
|
|||
|
|
- Embedded fonts (system fallback to Inter/sans-serif)
|
|||
|
|
- Clean, hand-coded paths
|
|||
|
|
|
|||
|
|
## Contact
|
|||
|
|
|
|||
|
|
Questions? hello@syntaxis.dev
|
|||
|
|
Brand guidelines: SYNTAXIS_VISUAL_IDENTITY.md
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
syntaxis.dev | Systematic Orchestration, Perfectly Arranged
|