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.
Shayan Spiel
personal/primary-dark.svgDark
Shayan Spiel
personal/primary-light.svgLight
Shayan Spiel
personal/primary-transparent.svgTransparent
Slogan Lockup — Horizontal + Tagline
Icon spans both text lines vertically. Tagline width-aligned to "Shayan Spiel"
via textLength justification. Use for hero sections, splash pages, docs.
Shayan Spiel
Session-as-Content — Build in Public
personal/slogan-dark.svgDark
Shayan Spiel
Session-as-Content — Build in Public
personal/slogan-light.svgLight
Shayan Spiel
Session-as-Content — Build in Public
personal/slogan-transparent.svgTransparent
Stacked Lockup — Vertical + Tagline
Icon centered above two-line lockup. First line "Shayan Spiel", second line
"Session-as-Content" width-aligned. Use for avatars, app icons, mobile.
Shayan Spiel
Session-as-Content
personal/stacked-dark.svgDark
Shayan Spiel
Session-as-Content
personal/stacked-light.svgLight
Shayan Spiel
Session-as-Content
personal/stacked-transparent.svgTransparent
Icon Only
Standalone mark. Favicon, social avatar, browser tab, app icon.
personal/icon-dark.svgDark
personal/icon-light.svgLight
personal/icon-transparent.svgTransparent
Golden Ratio — Construction Grid
Overlay shows φ circles, golden rectangles, and baseline alignment.
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.
personal/primary-dark.svgSVG
personal/slogan-dark.svgSVG
personal/stacked-dark.svgSVG
Sub-brand — Spiel OS
The flagship product of Shayan Spiel — the open-source + DFY implementation
of the Session-as-Content methodology. Uses the same icon + Micro 5 system,
but its own wordmark. Lives at /assets/logos/primary-*.svg
(root, not /personal/).
Spiel OS
primary-dark.svgSub-brand
Spiel OS
primary-light.svgSub-brand
Spiel OS
Work IS Content
slogan-dark.svgSub-brand
Shayan Spiel — Logo Kit v1.0 — Golden Ratio Design System — 24 SVG files (12 personal + 12 product) + preview.html
Fonts: Micro 5 (Google Fonts) · JetBrains Mono (Google Fonts) · Mark: pixel/star (svgrepo.com)
Personal brand: /assets/logos/personal/ ·
Sub-brand (Spiel OS): /assets/logos/
Open this preview in a browser with internet to see correct font rendering.