👻 Ghost Sandbox

Molt Studios Design System — Reference, Patterns & Documentation

🃏
Tool Cards
8 showcase card styles (s1-s8) + 30 palette cards (Forest, Sandstone, Lavender). 3D tilt, particles, glassmorphism.
38 cards
ghostsandbox.dev/tool-cards.html
✨
Cool Animations
GSAP scroll triggers, hover effects, staggered reveals, morphing shapes, particle systems.
Animations
ghostsandbox.dev/cool-animations.html
🔮
Lumnix Animations
Product-specific animations for Lumnix MCP tools — onboarding flows, tool showcases.
Product
ghostsandbox.dev/lumnix-animations.html
🎯
Design System
42 color palettes with hex codes, typography scale, spacing tokens. Hover any swatch for hex.
42 palettes
ghostsandbox.dev/design-system.html

📐 Tool Card Pattern Reference

Architecture: 2-Layer CSS

  • Layer 1 — Base Structural CSS (global): Layout, spacing, fonts, border-radius, transitions. Defined ONCE.
  • Layer 2 — Color Override CSS (per-style): ONLY colors. Zero structural properties.
  • Rule: If your style override has padding, border-radius, font-size, or display — you're breaking the pattern.

The 17 Required Color Selectors

  • .X .tool-card-inner { background, border }
  • .X .tool-desc { color }
  • .X .badge { background, color }
  • .X .fname { color }
  • .X .ai-response { color }
  • .X .ai-response .ai-label { color }
  • .X .ai-response strong { color }
  • .X .ai-response .highlight { color }
  • .X .ai-response .stat { color }
  • .X .ai-response .warn { color }
  • .X .prompt-box { color, border-color }
  • .X .prompt-box .plabel { color }
  • .X .acc-head { color, border-color }
  • .X .acc-head svg { stroke }
  • .X .field-row { border-color }
  • .X .floating-badge { background, color, border-color }
  • + Optional: .ftype, .fdesc, .card-body .left

Known Bugs

  • 🔴 Missing </div> — DOM nesting hell. All subsequent cards render inside the unclosed parent.
  • 🔴 Script before DOM — GSAP tilt silently fails if script runs before cards exist.
  • 🟡 CSS class mismatch — Targeting invented names (.param-name) instead of real ones (.fname).
  • 🟡 Structural CSS in overrides — Adding padding/radius in Layer 2 breaks consistency.
  • 🟢 Stale Vercel copy — Forgot to cp sandbox file before deploying.

Pre-Deploy Checklist

  • Div balance: count opens vs closes (must equal)
  • s8 nesting: no cards after s8 should be children of s8
  • Script position: GSAP tilt script AFTER all card HTML
  • File copied: sandbox → Vercel public directory
  • CSS pattern: style overrides contain ONLY color properties
  • 17 required selectors: every style defines all color overrides