{ "design_system": { "name": "V7 Industrial Dark Mode System", "version": "1.0", "methodology": { "approach": "Brutalist/Industrial Dark UI", "philosophy": "Grid-visible, high-contrast, typography-forward design with layered content and subtle glassmorphism", "characteristics": [ "Dark mode native (not an option, the default)", "Visible grid structure as design element", "Massive typography as primary visual hierarchy", "Minimal rounded corners (sharp, industrial aesthetic)", "Heavy use of borders and dividers", "Layered content with overlays and blend modes", "Subtle animations and smooth transitions", "Opacity-based depth system", "Technical/monospace accents" ] }, "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": "#FFB84C", "rgb": "255, 184, 76", "name": "Orange/Yellow", "usage": "Primary accent, CTAs, highlights, interactive elements", "opacity_variants": [ { "name": "brand_accent_5", "value": "rgba(255, 184, 76, 0.05)" }, { "name": "brand_accent_20", "value": "rgba(255, 184, 76, 0.2)" }, { "name": "brand_accent_50", "value": "rgba(255, 184, 76, 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": { "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)" } ] } }, "gradients": { "primary_hero": { "type": "linear-gradient", "direction": "to top right", "stops": [ "brand_accent", "orange-500 (via)", "brand_panel" ], "css": "bg-gradient-to-tr from-brand-accent via-orange-500 to-brand-panel" }, "fade_top": { "type": "linear-gradient", "direction": "to top", "stops": [ "brand_dark", "transparent (via)", "transparent" ], "usage": "Image overlays" }, "card_dramatic": { "type": "linear-gradient", "direction": "to bottom right", "stops": [ "orange-600", "rose-700" ], "usage": "Feature cards" } } }, "typography": { "font_families": { "primary": { "name": "Inter", "type": "sans-serif", "weights": [ 300, 400, 500, 600, 700, 800 ], "usage": "Primary UI font", "fallback": "sans-serif" }, "mono": { "name": "system-ui monospace", "usage": "Numbers, technical details, small labels", "examples": [ "font-mono" ] }, "available_alternatives": [ "Geist", "Roboto", "Montserrat", "Poppins", "Playfair Display", "Instrument Serif", "Merriweather", "Bricolage Grotesque", "Plus Jakarta Sans", "Manrope", "Space Grotesk", "Work Sans", "PT Serif", "Geist Mono", "Space Mono", "Quicksand", "Nunito" ] }, "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" }, "5xl": { "size": "3rem", "line_height": "1", "usage": "Large headings" }, "6xl": { "size": "3.75rem", "line_height": "1", "usage": "Hero headings" }, "7xl": { "size": "4.5rem", "line_height": "1", "usage": "Display text (md)" }, "8xl": { "size": "6rem", "line_height": "1", "usage": "Display text (lg)" }, "massive": { "sizes": [ "12rem", "18rem (md)", "22rem (lg)" ], "line_height": "none", "usage": "Hero display, massive branding" } }, "weights": { "light": 300, "normal": 400, "medium": 500, "semibold": 600, "bold": 700, "extrabold": 800 }, "letter_spacing": { "tighter": "-0.05em", "tight": "-0.025em", "normal": "0", "wide": "0.025em", "wider": "0.05em", "widest": "0.1em" }, "text_transforms": { "uppercase": { "usage": "Labels, navigation, tags, metadata", "typical_size": "xs or sm", "typical_tracking": "widest or wider", "typical_weight": "semibold or bold" } }, "line_heights": { "none": "1", "tight": "1.25", "relaxed": "1.625" }, "patterns": { "small_label": { "size": "text-xs", "weight": "font-bold", "transform": "uppercase", "tracking": "tracking-widest", "example": "text-xs font-bold uppercase tracking-widest" }, "hero_title": { "size": "text-[12rem] md:text-[18rem] lg:text-[22rem]", "weight": "font-bold", "line_height": "leading-none", "tracking": "tracking-tighter", "example_modifiers": "text-transparent bg-clip-text bg-gradient-to-tr" }, "section_heading": { "size": "text-4xl md:text-5xl lg:text-6xl", "weight": "font-semibold", "tracking": "tracking-tight", "color": "text-white" }, "body_text": { "size": "text-sm md:text-base", "color": "text-slate-400", "line_height": "leading-relaxed", "weight": "font-normal or font-medium" }, "mono_detail": { "family": "font-mono", "size": "text-xs or text-sm", "weight": "font-medium or font-semibold", "usage": "Numbers, codes, technical info" } } }, "spacing": { "scale": { "0": "0px", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem", "16": "4rem", "20": "5rem", "24": "6rem", "32": "8rem", "48": "12rem" }, "layout_padding": { "mobile": "px-6", "desktop": "lg:px-12", "standard": "px-6 lg:px-12" }, "section_spacing": { "small": "py-8", "medium": "py-12 md:py-16", "large": "py-24", "xlarge": "py-32 lg:py-48" }, "component_spacing": { "tight": "gap-2 or gap-3", "normal": "gap-4 or gap-6", "loose": "gap-8 or gap-12", "extra_loose": "gap-12 md:gap-24" } }, "grid_system": { "overlay": { "enabled": true, "purpose": "Visible design element", "implementation": "Fixed position, pointer-events-none, opacity-10", "columns": { "mobile": 4, "tablet": 6, "desktop": 12 }, "styling": "border-r border-slate-500 h-full" }, "content_grid": { "base": "grid grid-cols-1", "tablet": "md:grid-cols-2 or md:grid-cols-4", "desktop": "lg:grid-cols-12 or lg:grid-cols-2", "gap": "gap-6 or gap-8 or gap-12" }, "column_spans": { "usage": "lg:col-span-{number}", "common_patterns": [ "lg:col-span-3 (sidebar)", "lg:col-span-9 (main content)", "lg:col-span-4 / lg:col-span-8 (2:1 ratio)", "lg:col-span-2 / lg:col-span-5 (asymmetric)" ] } }, "borders": { "widths": { "thin": "border or border-[1px]", "medium": "border-2", "thick": "border-[40px] (decorative)" }, "colors": { "subtle": "border-white/5", "standard": "border-white/10 or border-white/20", "visible": "border-white/30", "slate_system": "border-slate-700 or border-slate-800", "accent": "border-brand-accent" }, "positions": { "all": "border", "top": "border-t or border-t-2", "right": "border-r", "bottom": "border-b", "left": "border-l", "horizontal": "border-x", "vertical": "border-y" }, "usage_patterns": { "section_divider": "border-t border-slate-800", "card": "border border-white/10 or border border-slate-800", "active_state": "border-t-2 border-brand-accent", "hover_state": "hover:border-brand-accent transition-colors" } }, "effects": { "glassmorphism": { "background": "bg-white/3 or rgba(255, 255, 255, 0.03)", "backdrop": "backdrop-filter: blur(10px)", "border": "border border-white/10", "class_example": ".glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); }" }, "shadows": { "accent_glow": "shadow-lg shadow-brand-accent/20", "cyan_glow": "shadow-lg shadow-brand-cyan/20", "red_glow": "shadow-lg shadow-brand-red/20", "custom_glow": "shadow-[0_0_10px_rgba(255,184,76,0.5)]", "drop_shadow": "drop-shadow-2xl" }, "blur": { "small": "blur-sm", "backdrop": "backdrop-blur-sm" }, "blend_modes": { "multiply": "mix-blend-multiply", "overlay": "mix-blend-overlay", "luminosity": "mix-blend-luminosity" }, "opacity": { "scale": [ 0, 5, 10, 20, 30, 40, 60, 90, 100 ], "usage": "opacity-{value}", "common": { "invisible": "opacity-0", "barely_visible": "opacity-5 or opacity-10", "subtle": "opacity-20 or opacity-30", "medium": "opacity-40", "visible": "opacity-60 or opacity-90", "full": "opacity-100" } } }, "animations": { "transitions": { "fast": "duration-300 or transition-all duration-300", "medium": "duration-500", "slow": "duration-700 or duration-1000", "properties": { "all": "transition-all", "colors": "transition-colors", "opacity": "transition-opacity", "transform": "transition-transform" }, "easing": { "standard": "ease-out", "smooth": "ease-in-out" } }, "transforms": { "scale_subtle": "scale-100 hover:scale-105 transition-transform", "scale_medium": "group-hover:scale-105 transition-all duration-700", "scale_bold": "group-hover:scale-110", "translate_x": "group-hover:translate-x-1 or group-hover:translate-x-0.5", "translate_y": "translate-y-4 group-hover:translate-y-0" }, "hover_states": { "opacity_fade": "opacity-0 group-hover:opacity-100 transition-opacity duration-500", "color_shift": "hover:text-white transition-colors", "border_accent": "hover:border-brand-accent transition-all", "background_lift": "hover:bg-white/5 transition-colors", "combined": "hover:bg-brand-accent hover:text-brand-dark transition-all" }, "keyframes": { "pulse": { "animation": "animate-pulse", "usage": "Status indicators, live elements" } }, "delays": { "stagger": "delay-100", "usage": "Sequential reveals" } }, "components": { "buttons": { "primary": { "base": "bg-brand-accent text-brand-dark", "padding": "px-8 py-4", "typography": "text-xs font-bold uppercase tracking-widest", "hover": "hover:bg-amber-400 transition-colors", "full_class": "bg-brand-accent text-brand-dark text-xs font-bold uppercase px-8 py-4 tracking-widest hover:bg-amber-400 transition-colors" }, "secondary": { "base": "bg-white text-brand-dark", "padding": "px-8 py-4", "typography": "text-xs font-bold uppercase tracking-widest", "hover": "hover:bg-slate-100 transition-colors" }, "ghost": { "base": "bg-transparent border border-slate-700", "padding": "px-8 py-4 or p-4", "typography": "text-xs font-bold uppercase tracking-widest", "hover": "hover:border-brand-accent hover:bg-brand-accent/5 transition-all" }, "icon": { "size": "w-12 h-12", "base": "border border-slate-700 flex items-center justify-center", "hover": "hover:bg-white/5 transition-colors", "rounded": "Can be rounded-full for circular buttons" }, "cta_with_icon": { "structure": "inline-flex items-center gap-3", "example": "VIEW CASE STUDY [icon]" } }, "cards": { "glass_card": { "background": "bg-white/3 or rgba(255, 255, 255, 0.03)", "backdrop": "backdrop-blur-sm", "border": "border border-white/5 or border-white/10", "padding": "p-6 or p-8", "hover": "hover:border-brand-accent/50 transition-all" }, "panel_card": { "background": "bg-brand-panel", "border": "border border-slate-800", "padding": "p-12 lg:p-20" }, "project_card": { "structure": "relative overflow-hidden cursor-pointer", "image": "absolute inset-0 bg-cover bg-center", "overlay": "absolute inset-0 bg-brand-dark/80 group-hover:bg-brand-dark/20 transition-colors duration-500", "gradient": "absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-transparent", "content": "absolute bottom-0 left-0 w-full p-8 transform translate-y-4 group-hover:translate-y-0", "hover": "group-hover:scale-105 transition-transform duration-1000" }, "feature_card": { "background": "bg-gradient-to-br from-orange-600 to-rose-700", "overlay": "absolute inset-0 opacity-20 bg-cover bg-center mix-blend-overlay", "padding": "p-12 md:p-16", "min_height": "min-h-[400px]" } }, "navigation": { "header": { "position": "fixed or relative", "padding": "px-6 lg:px-12 pt-8", "structure": "flex items-center justify-between", "logo": "w-10 h-10 border border-white/20 flex items-center justify-center font-bold text-white tracking-tighter" }, "nav_links": { "base": "text-xs font-semibold tracking-widest uppercase text-slate-500", "hover": "hover:text-white transition-colors", "active": "text-brand-accent", "spacing": "gap-12" }, "footer_nav": { "grid": "grid grid-cols-4", "item": "text-[10px] uppercase font-bold text-slate-400 tracking-wider text-center", "hover": "hover:text-white hover:bg-slate-800 transition-colors", "padding": "py-4" } }, "tabs": { "container": "grid grid-cols-2 md:grid-cols-4 border-b border-slate-800", "tab_item": { "base": "p-6 border-t-2 border-transparent cursor-pointer transition-colors group", "inactive": "hover:border-slate-700 bg-transparent", "active": "border-brand-accent bg-white/5" }, "tab_label": { "number": "text-xs block mb-2", "number_inactive": "text-slate-600", "number_active": "text-brand-accent", "text": "text-lg", "text_inactive": "font-medium text-slate-400 group-hover:text-white", "text_active": "font-semibold text-white" } }, "tags": { "accent_tag": { "base": "text-[10px] font-bold uppercase tracking-widest", "background": "bg-brand-accent px-2 py-1", "text": "text-brand-dark", "extras": "rounded-sm shadow-lg shadow-brand-accent/20" }, "category_tag": { "base": "bg-black/20 or bg-slate-800", "text": "text-white or text-slate-400", "padding": "px-3 py-2", "typography": "text-[10px] font-bold uppercase tracking-wider" }, "status_indicator": { "dot": "w-2 h-2 bg-brand-accent rounded-full animate-pulse", "glow": "shadow-[0_0_10px_rgba(255,184,76,0.5)]", "label": "text-xs font-bold text-slate-500 tracking-widest uppercase font-mono" } }, "dividers": { "line": "w-24 h-1 bg-white or bg-slate-600", "hover_expand": "w-16 h-1 hover:w-24 transition-all", "section": "border-t border-slate-800", "decorative": "w-1 h-10 bg-brand-accent or w-0.5 h-12" }, "image_treatments": { "overlay_pattern": { "dark_multiply": "absolute inset-0 bg-brand-dark/80 mix-blend-multiply", "gradient_fade": "absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-transparent opacity-90", "texture": "absolute inset-0 opacity-20 bg-cover bg-center mix-blend-overlay" }, "hover_zoom": "transition-transform duration-1000 group-hover:scale-105", "aspect_ratios": "aspect-[4/3] or md:aspect-auto" }, "metadata_display": { "structure": "Border-t divider with label above content", "label": "text-xs font-bold text-slate-500 uppercase mb-2", "value": "text-white text-lg or text-sm", "example": "

Year

2023 - 2024

" } }, "layout_patterns": { "hero_section": { "structure": "min-h-[90vh] flex flex-col justify-center", "padding": "px-6 lg:px-12 pt-20", "background": "Massive typography with background image at opacity-20", "grid": "lg:grid-cols-12 with asymmetric column spans", "title_treatment": "Text-transparent with gradient background-clip, drop-shadow", "decorative_elements": "Blurred duplicate text layer beneath main text" }, "two_column_split": { "grid": "grid grid-cols-1 lg:grid-cols-2", "borders": "border-t border-r border-b border-slate-800", "min_height": "min-h-[600px] or min-h-[800px]", "left_content": "Visual/image with overlays", "right_content": "Details/text content with vertical padding" }, "sidebar_layout": { "grid": "lg:grid-cols-12", "sidebar": "lg:col-span-3 border-r border-slate-800 p-8 lg:p-10 flex flex-col justify-between", "main": "lg:col-span-9", "sidebar_content": "Metadata, stats, navigation" }, "masonry_grid": { "base": "grid grid-cols-1 md:grid-cols-2", "items": "aspect-[4/3] md:aspect-auto with hover effects", "borders": "border-b border-r border-slate-800 pattern" }, "full_width_section": { "padding": "px-6 lg:px-12 py-24 or py-32 lg:py-48", "border": "border-t border-slate-800", "max_width": "max-w-7xl mx-auto (optional)" } }, "responsive_behavior": { "breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px" }, "patterns": { "hide_mobile": "hidden md:block or hidden lg:flex", "show_mobile_only": "lg:hidden", "responsive_grid": "grid-cols-1 md:grid-cols-2 lg:grid-cols-12", "responsive_text": "text-3xl md:text-5xl lg:text-6xl", "responsive_spacing": "px-6 lg:px-12 or py-8 md:py-12 lg:py-16" }, "mobile_considerations": { "touch_targets": "Minimum 44px (h-12 w-12)", "simplified_grids": "Single column on mobile, multi-column on tablet+", "navigation": "Mobile controls shown below lg breakpoint", "typography": "Scales down but maintains hierarchy" } }, "content_hierarchy": { "levels": { "1_mega_branding": { "size": "text-[12rem] to text-[22rem]", "treatment": "Gradient, transparent, decorative", "purpose": "Brand presence, visual anchor" }, "2_page_title": { "size": "text-5xl to text-8xl", "color": "text-white with optional text-slate-500 spans", "weight": "font-semibold or font-bold" }, "3_section_heading": { "size": "text-4xl to text-6xl", "color": "text-white", "weight": "font-semibold" }, "4_subsection": { "size": "text-2xl to text-4xl", "color": "text-white", "weight": "font-medium to font-semibold" }, "5_body": { "size": "text-sm to text-lg", "color": "text-slate-400 or text-slate-300", "line_height": "leading-relaxed" }, "6_metadata": { "size": "text-xs or text-[10px]", "transform": "uppercase", "tracking": "tracking-widest or tracking-wider", "color": "text-slate-500 or text-slate-600", "weight": "font-bold or font-semibold" } } }, "interactive_states": { "hover": { "color_shift": "hover:text-white hover:text-brand-accent", "background": "hover:bg-white/5 hover:bg-slate-700", "border": "hover:border-brand-accent hover:border-white", "scale": "hover:scale-105", "opacity": "hover:opacity-100 (from lower opacity)" }, "active": { "indicators": "Border-t-2 border-brand-accent, bg-white/5, text color change", "emphasis": "Brighter text, accent color borders" }, "disabled": { "opacity": "opacity-40 or opacity-60", "cursor": "cursor-default", "colors": "text-slate-600" }, "focus": { "treatment": "Follow hover states, no default focus rings visible in design" } }, "special_effects": { "text_stroke": { "css": "-webkit-text-stroke: 1px rgba(255,255,255,0.1); color: transparent;", "usage": "Outlined text effect for decorative elements" }, "gradient_text": { "classes": "text-transparent bg-clip-text bg-gradient-to-tr from-brand-accent via-orange-500 to-brand-panel", "usage": "Hero titles, emphasis text" }, "animated_background": { "transition": "duration-700 ease-out", "hover": "opacity changes, scale transforms", "example": "Image backgrounds that fade/zoom on interaction" }, "layered_depth": { "technique": "Multiple absolute positioned divs with different opacities, blend modes", "layers": [ "Base image (bg-cover)", "Multiply blend overlay (bg-brand-dark/80)", "Gradient overlay (bg-gradient-to-t opacity-90)", "Content layer (z-10 or z-20)" ] } }, "accessibility_notes": { "contrast": "High contrast maintained throughout (white on dark backgrounds)", "focus_states": "Should be added for keyboard navigation", "alt_text": "Images need descriptive alt text", "aria_labels": "Interactive elements need proper labels", "semantic_html": "Use proper heading hierarchy (currently div-heavy)", "color_alone": "Don't rely on color alone for information" }, "design_tokens_summary": { "primary_background": "#0B0D11", "secondary_background": "#151921", "primary_accent": "#FFB84C", "primary_text": "#FFFFFF", "secondary_text": "#94A3B8", "border_subtle": "rgba(255, 255, 255, 0.1)", "border_standard": "#334155", "font_primary": "Inter, sans-serif", "font_mono": "monospace", "radius_minimal": "0 or 2px (rarely used)", "shadow_glow": "0 0 10px rgba(255,184,76,0.5)", "transition_fast": "300ms", "transition_medium": "500ms", "transition_slow": "700ms" }, "implementation_notes": { "framework": "Tailwind CSS with custom config", "icons": "Iconify (solar, lucide sets primarily)", "responsive_images": "Multiple sizes served, lazyload recommended", "performance": "Optimize large background images, consider lazy loading for below-fold content", "browser_support": "Modern browsers (backdrop-filter, blend modes require recent versions)", "dark_mode_only": "No light mode variant in this system" } } }