Nicholai
b1feda521c
- Changed wrapper settings in open-next.config.ts to use "cloudflare-node" and "cloudflare-edge". - Updated main entry point in wrangler.toml to point to ".open-next/worker.js". - Modified middleware to allow access to the speakers project path. - Added Space Grotesk font to layout.tsx for enhanced typography. - Improved media route handling by resolving parameters correctly in route.ts. - Adjusted ServiceCard component to use a more specific type for icon handling.
273 lines
7.9 KiB
JSON
273 lines
7.9 KiB
JSON
{
|
|
"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"
|
|
}
|
|
}
|