docs: add logo design spec for faceted gem mark

2026-08-03 07:46:42 +02:00 · 2026-03-27 13:50:01 +08:00
parent d4d4321b98
commit 2a936d9488
1 changed files with 89 additions and 0 deletions
@@ -0,0 +1,89 @@
+# Stirling Image Logo Design Spec
+
+## Concept: The Gem
+
+A faceted diamond/gem mark representing quality ("Sterling") and precision image processing. The facets suggest pixels, image planes, and craftsmanship.
+
+## Design Decisions
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| Personality | Professional/Enterprise | Matches the tool's positioning as a serious, self-hostable platform |
+| Mark type | Combination mark | Icon + "Stirling Image" wordmark, usable together or separately |
+| Icon concept | Faceted gem | Plays on "Sterling" (quality/precious), facets evoke image processing |
+| Color | `#3b82f6` (existing primary blue) | Consistent with app UI, single-color for versatility |
+| Typography | System font stack, weight 700 | "Stirling" in foreground color, "Image" in primary blue |
+
+## Icon Specification
+
+The gem is a four-point diamond shape (kite) with internal facets creating depth through opacity variation:
+
+- **Outer shape**: Diamond/kite — points at top, bottom, left, right
+- **Crown facet** (top center triangle): `#3b82f6` at 100% opacity — the brightest face
+- **Left facet**: `#3b82f6` at 70% opacity
+- **Right facet**: `#3b82f6` at 50% opacity
+- **Upper-left edge facet**: `#3b82f6` at 85% opacity
+- **Upper-right edge facet**: `#3b82f6` at 65% opacity
+- **Outline**: `#3b82f6` at 100%, 2.5px stroke, round joins
+- **Girdle line** (horizontal center): `#3b82f6` at 40% opacity, 1.5px stroke
+- **ViewBox**: `0 0 140 140`
+
+### Key coordinates (in 140x140 viewBox)
+
+```
+Top:          70, 16
+Left:         22, 60
+Right:       118, 60
+Bottom:       70, 124
+Crown-left:   40, 48
+Crown-right: 100, 48
+Center:       70, 60
+```
+
+## Combination Mark Layout
+
+- Icon and wordmark aligned center-vertically
+- 16px gap between icon and text (at 28px font size)
+- Wordmark: "Stirling " in foreground + "Image" in `#3b82f6`
+- Font: system stack, weight 700, letter-spacing -0.5px
+
+## Size Variants
+
+| Context | Size | Notes |
+|---------|------|-------|
+| Favicon | 16px | Facets merge into solid diamond — drop outline and girdle line |
+| App header | 24px | Simplified, no outline stroke |
+| Medium (docs, GitHub) | 48px | Full detail with outline and girdle |
+| Large (splash, social) | 96px+ | Full detail, all facets visible |
+
+## Color Variants
+
+| Variant | Usage |
+|---------|-------|
+| Blue on dark (`#0f172a`) | Dark mode, social previews, Docker Hub |
+| Blue on white (`#ffffff`) | Light mode, documentation, print |
+| Monochrome white | On colored backgrounds, loading screens |
+| Monochrome dark (`#0f172a`) | Stamps, watermarks, single-color contexts |
+
+## Files to Generate
+
+| File | Format | Purpose |
+|------|--------|---------|
+| `logo.svg` | SVG | Full combination mark (icon + wordmark) |
+| `logo-icon.svg` | SVG | Icon only, full detail |
+| `logo-icon-simple.svg` | SVG | Icon only, simplified for small sizes |
+| `favicon.svg` | SVG | Favicon-optimized (no outline/girdle) |
+| `favicon.ico` | ICO | Multi-size favicon (16, 32, 48) |
+| `logo-192.png` | PNG | PWA icon 192x192 |
+| `logo-512.png` | PNG | PWA icon 512x512 |
+| `og-image.png` | PNG | Social preview 1200x630 |
+
+## Integration Points
+
+- **App header**: Replace text-only fallback with icon + wordmark (24px icon)
+- **Favicon**: Replace default Vite favicon
+- **Settings > About**: Show logo
+- **Documentation site**: VitePress header
+- **Docker Hub**: Repository logo
+- **GitHub**: Repository social preview
+- **Login/splash screen**: Centered large logo