304 lines
12 KiB
JSON
304 lines
12 KiB
JSON
{
|
|
"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": "#ff4d00",
|
|
"rgb": "255, 77, 0",
|
|
"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"
|
|
}
|
|
}
|
|
}
|
|
}
|