generated from Nicholai/astro-template
305 lines
12 KiB
JSON
305 lines
12 KiB
JSON
{
|
|
"_readme": "This design system is provided as an example and starting point. All colors, typography, spacing, and components are fully customizable to match your brand. Edit this file to document your own design decisions, then update the corresponding CSS in src/styles/global.css to implement your changes.",
|
|
"design_system": {
|
|
"name": "V7 Industrial Dark Mode System",
|
|
"version": "2.0",
|
|
"note": "Template design system - customize to match your brand",
|
|
"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"
|
|
}
|
|
}
|
|
}
|
|
}
|