Brand Identity v1.0

SPIEL ENGINE

// Work IS Content
Logo Kit · 12 SVGs · Golden Ratio Design · Micro 5 + JetBrains Mono
Primary Lockup — Horizontal (No Slogan)
Icon and wordmark side by side. Golden ratio: icon-to-cap-height ≈ φ. Clear space built into canvas. Use for headers, nav bars, social banners.
SPIEL ENGINE
primary-dark.svgDark
SPIEL ENGINE
primary-light.svgLight
SPIEL ENGINE
primary-transparent.svgTransparent
Slogan Lockup — Horizontal + Tagline
Icon spans both text lines vertically. Tagline width-aligned to "SPIEL ENGINE" via textLength justification. Use for hero sections, splash pages, docs.
SPIEL ENGINE
Work IS Content
slogan-dark.svgDark
SPIEL ENGINE
Work IS Content
slogan-light.svgLight
SPIEL ENGINE
Work IS Content
slogan-transparent.svgTransparent
Stacked Lockup — Vertical + Tagline
Icon centered above two-line lockup. First line "SPIEL ENGINE", second line "Work IS Content" width-aligned. Use for avatars, app icons, mobile.
SPIEL ENGINE
Work IS Content
stacked-dark.svgDark
SPIEL ENGINE
Work IS Content
stacked-light.svgLight
SPIEL ENGINE
Work IS Content
stacked-transparent.svgTransparent
Icon Only
Standalone skull icon. Favicon, social avatar, browser tab.
icon-dark.svgDark
icon-light.svgLight
icon-transparent.svgTransparent
Golden Ratio — Construction Grid
Overlay shows φ circles, golden rectangles, and baseline alignment.
SPIEL ENGINE
Work IS Content
Slogan φ = 1.618Grid
SPIEL ENGINE
Work IS Content
Stacked φ ConstructionGrid
Specifications
Base Unit (U)
8 px
Golden Ratio (φ)
1.618
Primary Canvas
600 × 88 px
Slogan Canvas
600 × 112 px
Stacked Canvas
200 × 180 px
Primary Icon
32 × 32 px
Slogan Icon
40 × 40 px (spans 2 lines)
Icon → Text Gap
16 px (2U)
Clear Space
24 px (3U)
Micro 5 Sizes
34 / 28 / 24 px
JetBrains Mono
12 / 11 px (tagline)
Tagline Alignment
textLength matching
Typography
Wordmark
SPIEL ENGINE
SPIEL ENGINE
SPIEL ENGINE
Micro 5 · Pixel font · Google Fonts / OFL
Micro 5 — David Jonathan RossPixel
Tagline
Work IS Content
Work IS Content
Work IS Content
JetBrains Mono · Code font · Google Fonts / OFL
JetBrains Mono — JetBrainsMono
When to Use Which Logo
VariantFileUse Case
Primaryprimary-{bg}.svgHeaders, nav bars, social banners, docs, slides
Sloganslogan-{bg}.svgHero sections, landing pages, splash screens, README
Stackedstacked-{bg}.svgAvatars, app icons, mobile, constrained spaces
Iconicon-{bg}.svgFavicon, social avatar, OS app icon, browser tab
Dark*-dark.svgBlack (#000) background
Light*-light.svgWhite (#fff) background
Transparent*-transparent.svgAny bg. White icon + text. For dark surfaces.
Usage Rules
✔ Do
Maintain 24px clear space around the logo
Use the provided SVG files directly, never recreated
Keep icon-to-text proportions intact
Use dark variant on dark backgrounds, light on light
Link Google Fonts Micro 5 + JetBrains Mono for rendering
Scale proportionally (lock aspect ratio)
✘ Don't
Rearrange or restack elements
Change colors from white/black/gray
Stretch or distort proportions
Add shadows, strokes, or effects
Replace fonts with system alternatives
Use on busy photographic backgrounds without sufficient contrast
Standalone SVG Previews
SVGs load fonts via Google Fonts @import. Render correctly in any modern browser. Offline: install Micro 5 and JetBrains Mono locally.
primary-dark.svgSVG
slogan-dark.svgSVG
stacked-dark.svgSVG
Spiel Engine — Logo Kit v1.0 — Golden Ratio Design System — 12 SVG files + preview.html
Fonts: Micro 5 (Google Fonts) · JetBrains Mono (Google Fonts) · Icon: skull (svgrepo.com)
Open this preview in a browser with internet to see correct font rendering.