Spiel OS, Logo Kit / Brand Guidelines

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.

Shayan Spiel

Session-as-Content — Build in Public

Slogan φ = 1.618Grid

Shayan Spiel

Session-as-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

Shayan Spiel

Micro 5 · Pixel font · Google Fonts / OFL

Micro 5 — David Jonathan RossPixel

Tagline

Session-as-Content

JetBrains Mono · Code font · Google Fonts / OFL

JetBrains Mono — JetBrainsMono

When to Use Which Logo

Variant	File	Use Case
Primary	personal/primary-{bg}.svg	Headers, nav bars, social banners, docs, slides
Slogan	personal/slogan-{bg}.svg	Hero sections, landing pages, splash screens, README
Stacked	personal/stacked-{bg}.svg	Avatars, app icons, mobile, constrained spaces
Icon	personal/icon-{bg}.svg	Favicon, social avatar, OS app icon, browser tab
Dark	*-dark.svg	Black (#000) background
Light	*-light.svg	White (#fff) background
Transparent	*-transparent.svg	Any 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.

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.