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

3.4 KiB Raw Blame History