{
  "version": "1.0.0",
  "name": "BIOHAZARD VFX Website Design System",
  "description": "Design system for the BIOHAZARD VFX website based on Temp-Placeholder component",
  "colorPalette": {
    "background": {
      "primary": "#000000",
      "secondary": "#0a0a0a",
      "description": "Primary black backgrounds with very dark secondary"
    },
    "text": {
      "primary": "#ffffff",
      "secondary": "#e5e5e5",
      "muted": "#a3a3a3",
      "subtle": "#808080",
      "verySubtle": "#606060",
      "description": "White primary text with decreasing opacity gray variants"
    },
    "accent": {
      "primary": "#ff4d00",
      "description": "Orange accent color used for interactive elements, links, and highlights"
    },
    "borders": {
      "subtle": "rgba(255, 255, 255, 0.05)",
      "muted": "rgba(255, 255, 255, 0.1)",
      "description": "Subtle white borders with low opacity for divisions"
    },
    "overlay": {
      "dark": "rgba(0, 0, 0, 0.8)",
      "description": "Dark overlay for modals and overlays"
    }
  },
  "typography": {
    "fontFamilies": {
      "exo2": "font-exo-2",
      "geist": "Geist, sans-serif",
      "geistMono": "Geist Mono, monospace"
    },
    "scales": {
      "xl": {
        "sizes": ["9xl", "8xl", "7xl", "6xl", "5xl"],
        "description": "Extra large heading sizes for hero/main title (BIOHAZARD)"
      },
      "lg": {
        "sizes": ["4xl", "3xl"],
        "description": "Large heading sizes for section titles"
      },
      "base": {
        "sizes": ["lg", "base", "sm"],
        "description": "Base text sizes for body content"
      },
      "xs": {
        "sizes": ["xs"],
        "description": "Extra small text for meta information"
      }
    },
    "weights": {
      "normal": 400,
      "bold": 700,
      "black": 900,
      "description": "Font weights used throughout the design"
    },
    "lineHeight": {
      "tight": "1.2",
      "relaxed": "1.6",
      "description": "Line heights for text readability"
    }
  },
  "spacing": {
    "container": {
      "maxWidth": "900px",
      "padding": {
        "mobile": "px-4",
        "sm": "sm:px-6",
        "lg": "lg:px-8"
      },
      "description": "Main container width and responsive padding"
    },
    "sections": {
      "vertical": {
        "small": "mb-8",
        "medium": "md:mb-16",
        "large": "md:mb-20",
        "description": "Vertical spacing between major sections"
      },
      "horizontal": {
        "gap": "gap-6",
        "description": "Horizontal gaps between elements"
      }
    },
    "card": {
      "padding": {
        "base": "p-6",
        "sm": "sm:p-8",
        "md": "md:p-12"
      },
      "description": "Card container padding (main content area)"
    },
    "elements": {
      "small": "mb-4",
      "medium": "mb-6",
      "large": "mb-8",
      "description": "Element spacing within sections"
    }
  },
  "breakpoints": {
    "mobile": "< 640px",
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px",
    "description": "Tailwind CSS responsive breakpoints used"
  },
  "components": {
    "navigation": {
      "description": "Top navigation bar",
      "layout": "flex justify-between items-center",
      "padding": "py-6",
      "border": "border-b border-white/10",
      "typography": "text-lg font-mono tracking-tight",
      "interactive": {
        "links": "hover:text-[#ff4d00] transition-colors",
        "gap": "gap-6",
        "fontSize": "text-sm"
      }
    },
    "card": {
      "description": "Main content card container",
      "background": "#0a0a0a",
      "border": "border border-white/5",
      "layout": "relative bg-[#0a0a0a] border border-white/5"
    },
    "heading": {
      "main": {
        "description": "Large BIOHAZARD heading with text shadow effect",
        "fontSize": ["text-3xl", "sm:text-4xl", "md:text-5xl"],
        "fontFamily": "font-exo-2",
        "fontWeight": "font-black",
        "color": "#000000",
        "textShadow": "2px 2px 0px #ff4d00, 4px 4px 0px #ff4d00",
        "interactive": "hover:opacity-80 cursor-pointer transition-opacity"
      },
      "heroTitle": {
        "description": "Hero section title",
        "fontSize": ["text-4xl", "sm:text-5xl", "md:text-7xl", "lg:text-8xl", "xl:text-9xl"],
        "fontWeight": "font-black",
        "fontFamily": "font-exo-2"
      }
    },
    "link": {
      "description": "Interactive link styling",
      "color": "#ff4d00",
      "hover": "hover:opacity-80",
      "underline": {
        "description": "Animated underline on hover",
        "height": "h-[1px]",
        "animation": "scaleX animation on hover"
      }
    },
    "divider": {
      "description": "Section divider component",
      "type": "SectionDivider"
    },
    "accordion": {
      "description": "Horizontal expandable accordion",
      "type": "HorizontalAccordion"
    },
    "videoPlayer": {
      "description": "Reel video player component",
      "type": "ReelPlayer"
    }
  },
  "layout": {
    "sections": [
      {
        "name": "Navigation",
        "id": "nav",
        "content": "Brand name and navigation links"
      },
      {
        "name": "About",
        "id": "about",
        "content": "Hero message with accordion and main title"
      },
      {
        "name": "Work",
        "id": "work",
        "content": "Reel player and project list with video previews"
      },
      {
        "name": "Studio",
        "id": "studio",
        "content": "Instagram feed component"
      },
      {
        "name": "Contact",
        "id": "contact",
        "content": "Contact email and footer information"
      }
    ]
  },
  "animations": {
    "containerVariants": {
      "hidden": "opacity: 0",
      "visible": {
        "opacity": 1,
        "staggerChildren": 0.1,
        "delayChildren": 0.1
      },
      "description": "Page load animation with stagger effect"
    },
    "itemVariants": {
      "hidden": "opacity: 0, y: 20",
      "visible": "opacity: 1, y: 0",
      "transition": "duration: 0.4, ease: easeOut",
      "description": "Individual item fade-in and slide-up animation"
    },
    "underlineAnimation": {
      "initial": "scaleX: 0",
      "hover": "scaleX: 1",
      "transition": "duration: 0.3, ease: easeOut",
      "description": "Animated underline on links"
    },
    "easterEgg": {
      "initial": "opacity: 0, scale: 0.7",
      "animate": "opacity: 1, scale: 1",
      "transition": "duration: 0.4, ease: [0.16, 1, 0.3, 1]",
      "description": "Modal popup animation for easter eggs"
    }
  },
  "interactions": {
    "links": {
      "color": "#ff4d00",
      "hoverEffect": "opacity 0.8, text-shadow glow",
      "tapEffect": "scale 0.98",
      "underlineAnimation": true,
      "description": "Standard link interaction pattern"
    },
    "easterEgg": {
      "trigger": "Click on main BIOHAZARD heading or footer text",
      "action": "Display modal with depth map or easter egg image",
      "closeAction": "Click outside or mouse leave",
      "description": "Hidden interactive elements"
    },
    "hover": {
      "cards": "opacity reduction on hover",
      "text": "color change to accent color or text-shadow glow"
    }
  },
  "responsiveness": {
    "strategy": "Mobile-first with progressive enhancement",
    "mobileOptimizations": {
      "fontSize": "Capped scaling to prevent cramped text",
      "maxScale": 0.8,
      "description": "Mobile (< 640px) uses conservative font scaling"
    },
    "tabletOptimizations": {
      "maxScale": 1.2,
      "description": "Tablet (640-1024px) allows moderate scaling"
    },
    "desktopOptimizations": {
      "maxScale": 1.8,
      "description": "Desktop (> 1024px) allows expansive scaling"
    }
  },
  "accessibility": {
    "colorContrast": "High contrast white text on black backgrounds",
    "interactiveElements": "Clear hover states and cursor pointers",
    "semanticHTML": "Proper heading hierarchy and section landmarks",
    "focus": "Default browser focus states on interactive elements"
  }
}