Skip to content

Instantly share code, notes, and snippets.

@cayter

cayter/isometric-website-design-prompt.md

Created January 20, 2026 03:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cayter/25c34600fd9e4654efd436205d4c91f3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cayter/25c34600fd9e4654efd436205d4c91f3 to your computer and use it in GitHub Desktop.
Download ZIP
Isometric Website Design Prompt
Raw
isometric-website-design-prompt.md

Overview

Isometric exploded-view diagram showing 6 horizontal platform layers stacked vertically. Scroll-driven animation separates layers to reveal internal architecture. Light background (#fafafa) with dot grid pattern.

Visual Style

  • Clean technical illustration, not photorealistic 3D
  • Orthographic camera (isometric projection)
  • Soft even lighting, no harsh shadows
  • White/light gray platforms with thin gray edge outlines
  • Each layer has a colored vertical stripe on right edge (layer's accent color)
  • Muted palette: white bodies, single accent color per layer

Platform Structure

  • Each layer: white rectangular slab (~6.5 × 4.8 units), thin height (~0.5)
  • Subtle gray edge lines define geometry
  • Colored stripe on right edge identifies layer

Layer Content (top to bottom)

  • Interface (black accent): macOS-style app window sitting on platform — dark title bar with red/yellow/green traffic lights, dark screen area with gray sidebar and content blocks. Orange corner marker.
  • Auth (blue #2563eb): Large extruded shield icon centered with keyhole cutout (white). Small lock boxes in corners with blue edge outlines.
  • Database (violet #7c3aed): 3 stacked cylinders (classic DB symbol) centered — top cylinder colored, others light gray. Colored rings between cylinders. Small cylinders in corners.
  • Storage (rose #e11d48): Large 3D folder icon centered with tab. White file rectangles peeking out top. Small file boxes in corners with rose outlines.
  • Events (amber #d97706): Large extruded lightning bolt centered. Concentric broadcast rings around it (innermost colored, others light with colored outlines). Sphere nodes at edges.
  • Workflows (emerald #059669): Large gear with teeth centered, white center hole. Partial circular arrow (flow indicator) around gear. Small gears in corners.

UI Overlays

  • Top-left: Logo, accent square marker, headline text, feature list with arrow bullets
  • Right side: Layer cards (white bg, border, colored dot + name + description) — appear on scroll
  • Bottom: Thin progress bar (gradient of all layer colors)

Interaction

  • Scroll down: layers separate vertically (explode), layer cards fade in sequentially
  • Scroll up: layers collapse back together
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment