{
    "design_system": {
        "name": "V7 Industrial Dark Mode System",
        "version": "2.0",
        "methodology": {
            "approach": "Brutalist/Industrial Dark UI with System/Terminal Aesthetics",
            "philosophy": "Grid-visible, high-contrast, typography-forward design. Interfaces should feel like high-end technical equipment (F1 telemetry, server racks, terminals).",
            "characteristics": [
                "Dark mode native (not an option, the default)",
                "Visible grid structure as design element (10x10 interactive or 12-col static)",
                "Massive typography as primary visual hierarchy (2-line stacks)",
                "Minimal rounded corners (sharp, industrial aesthetic)",
                "Heavy use of borders, dividers, and technical labels (SYS.01, ///)",
                "Layered content with overlays, video backgrounds, and blend modes",
                "System-like animations: boot-up sequences, grid trails, status pulses",
                "Opacity-based depth system (glass panels)",
                "Technical/monospace accents for metadata (coordinates, time, IDs)"
            ]
        },
        "color_palette": {
            "primary": {
                "brand_dark": {
                    "hex": "#0B0D11",
                    "rgb": "11, 13, 17",
                    "usage": "Primary background, text on light backgrounds",
                    "opacity_variants": [
                        {
                            "name": "brand_dark_80",
                            "value": "rgba(11, 13, 17, 0.8)"
                        },
                        {
                            "name": "brand_dark_20",
                            "value": "rgba(11, 13, 17, 0.2)"
                        }
                    ]
                },
                "brand_panel": {
                    "hex": "#151921",
                    "rgb": "21, 25, 33",
                    "usage": "Secondary backgrounds, panels, cards"
                },
                "brand_accent": {
                    "hex": "#dd4132",
                    "name": "Vibrant Orange",
                    "usage": "Primary accent, CTAs, highlights, interactive elements, status indicators",
                    "opacity_variants": [
                        {
                            "name": "brand_accent_5",
                            "value": "rgba(255, 77, 0, 0.05)"
                        },
                        {
                            "name": "brand_accent_20",
                            "value": "rgba(255, 77, 0, 0.2)"
                        },
                        {
                            "name": "brand_accent_50",
                            "value": "rgba(255, 77, 0, 0.5)"
                        }
                    ]
                },
                "brand_cyan": {
                    "hex": "#22D3EE",
                    "rgb": "34, 211, 238",
                    "usage": "Secondary accent, tags, status indicators"
                },
                "brand_red": {
                    "hex": "#E11D48",
                    "rgb": "225, 29, 72",
                    "usage": "Tertiary accent, warnings, emphasis"
                }
            },
            "neutrals": {
                "white": {
                    "hex": "#FFFFFF",
                    "opacity_scale": {
                        "2": "rgba(255, 255, 255, 0.02)",
                        "5": "rgba(255, 255, 255, 0.05)",
                        "10": "rgba(255, 255, 255, 0.1)",
                        "20": "rgba(255, 255, 255, 0.2)",
                        "30": "rgba(255, 255, 255, 0.3)",
                        "40": "rgba(255, 255, 255, 0.4)",
                        "60": "rgba(255, 255, 255, 0.6)",
                        "80": "rgba(255, 255, 255, 0.8)",
                        "90": "rgba(255, 255, 255, 0.9)",
                        "100": "rgba(255, 255, 255, 1)"
                    },
                    "usage": "Primary text, borders with opacity, overlays"
                },
                "slate": {
                    "300": {
                        "hex": "#CBD5E1",
                        "usage": "Light text on dark"
                    },
                    "400": {
                        "hex": "#94A3B8",
                        "usage": "Body text, secondary text"
                    },
                    "500": {
                        "hex": "#64748B",
                        "usage": "Muted text, placeholders"
                    },
                    "600": {
                        "hex": "#475569",
                        "usage": "Subtle text, disabled states"
                    },
                    "700": {
                        "hex": "#334155",
                        "usage": "Borders, dividers"
                    },
                    "800": {
                        "hex": "#1E293B",
                        "usage": "Backgrounds, panels, borders"
                    },
                    "900": {
                        "hex": "#0F172A",
                        "usage": "Deep backgrounds"
                    }
                },
                "black": {
                    "hex": "#000000",
                    "opacity_variants": [
                        {
                            "name": "black_20",
                            "value": "rgba(0, 0, 0, 0.2)"
                        }
                    ]
                }
            }
        },
        "typography": {
            "font_families": {
                "primary": {
                    "name": "Inter",
                    "type": "sans-serif",
                    "usage": "Primary UI font",
                    "fallback": "sans-serif"
                },
                "mono": {
                    "name": "system-ui monospace",
                    "usage": "Numbers, technical details, small labels, coordinates, clock",
                    "examples": [
                        "font-mono"
                    ]
                }
            },
            "scale": {
                "xs": {
                    "size": "0.75rem",
                    "line_height": "1rem",
                    "usage": "Labels, tags, metadata"
                },
                "sm": {
                    "size": "0.875rem",
                    "line_height": "1.25rem",
                    "usage": "Small body text"
                },
                "base": {
                    "size": "1rem",
                    "line_height": "1.5rem",
                    "usage": "Body text"
                },
                "lg": {
                    "size": "1.125rem",
                    "line_height": "1.75rem",
                    "usage": "Large body text"
                },
                "xl": {
                    "size": "1.25rem",
                    "line_height": "1.75rem",
                    "usage": "Subheadings"
                },
                "2xl": {
                    "size": "1.5rem",
                    "line_height": "2rem",
                    "usage": "Small headings"
                },
                "3xl": {
                    "size": "1.875rem",
                    "line_height": "2.25rem",
                    "usage": "Section headings"
                },
                "4xl": {
                    "size": "2.25rem",
                    "line_height": "2.5rem",
                    "usage": "Page headings"
                },
                "6xl": {
                    "size": "3.75rem",
                    "line_height": "1",
                    "usage": "Hero headings"
                },
                "8xl": {
                    "size": "6rem",
                    "line_height": "1",
                    "usage": "Display text"
                },
                "9xl": {
                    "size": "8rem",
                    "line_height": "0.85",
                    "usage": "Massive Headers (2-line stacks)"
                }
            },
            "patterns": {
                "technical_label": {
                    "size": "text-[10px]",
                    "weight": "font-bold or font-medium",
                    "family": "font-mono",
                    "transform": "uppercase",
                    "tracking": "tracking-widest",
                    "color": "text-slate-500 or text-brand-accent",
                    "example": "SYS.01 /// ACTIVE"
                },
                "massive_stack": {
                    "size": "text-6xl md:text-8xl lg:text-9xl",
                    "weight": "font-bold",
                    "line_height": "leading-[0.85]",
                    "tracking": "tracking-tighter",
                    "structure": "Two or three lines, mixture of solid white and text-stroke or accent color"
                }
            }
        },
        "grid_system": {
            "interactive_overlay": {
                "type": "10x10 Grid",
                "interaction": "mousemove trail effect",
                "style": "border border-white/5",
                "active_state": "bg-brand-accent opacity-15",
                "fade_out": "duration-800 ease-out"
            },
            "data_table": {
                "columns": 12,
                "headers": "text-[10px] font-mono uppercase tracking-widest",
                "rows": "border-b border-white/10 py-10 hover:border-brand-accent/30"
            }
        },
        "components": {
            "buttons": {
                "terminal_action": {
                    "base": "bg-transparent border border-white/20",
                    "hover": "hover:border-brand-accent hover:bg-brand-accent/5",
                    "typography": "font-mono text-xs font-bold uppercase tracking-widest",
                    "icon": "Arrow or chevron, translates on hover"
                }
            },
            "cards": {
                "rack_unit": {
                    "base": "border border-white/10 bg-white/[0.02]",
                    "hover": "hover:border-brand-accent/50 hover:bg-white/[0.04]",
                    "header": "border-b border-white/5 px-8 py-4 flex justify-between",
                    "indicator": "left-border strip (solid or translucent)",
                    "content": "p-8 lg:p-12 grid layout"
                },
                "glass_panel": {
                    "background": "bg-white/[0.02]",
                    "backdrop": "backdrop-blur-sm",
                    "border": "border border-white/10",
                    "hover": "hover:border-brand-accent/30"
                }
            },
            "inputs": {
                "terminal_input": {
                    "style": "border-b border-white/20 bg-transparent py-4 text-xl",
                    "focus": "focus:border-brand-accent focus:outline-none",
                    "label": "floating label (peer-focus:-top-6), font-mono, tracking-widest"
                },
                "industrial_select": {
                    "trigger": "custom div mimicking terminal input",
                    "menu": "bg-brand-dark border border-white/20 shadow-2xl",
                    "option": "hover:bg-white/5 flex items-center gap-3",
                    "indicator": "accent dot reveals on hover"
                }
            },
            "visualizations": {
                "telemetry_overlay": {
                    "usage": "Video backgrounds",
                    "elements": "Top/bottom data bars, grid overlays, F1-style stats",
                    "interaction": "Full card clickable, no modals"
                },
                "status_indicator": {
                    "dot": "w-2 h-2 bg-brand-accent rounded-full animate-pulse",
                    "label": "font-mono text-xs uppercase tracking-widest"
                }
            }
        },
        "animations": {
            "intro_sequence": {
                "trigger": "window.load",
                "order": [
                    "Grid ripple (diagonal)",
                    "Text slide up",
                    "Metadata fade in",
                    "Portrait slow reveal"
                ]
            },
            "interactions": {
                "grid_trail": "Instant active, slow fade out (800ms)",
                "row_highlight": "Border color shift, text color shift",
                "social_arrow": "Translate X+1 Y-1 on hover"
            }
        }
    }
}