nicholai
26c2d0aa08
- Introduced a comprehensive design system in `dev/design.json` featuring color palettes, typography, spacing, and component guidelines. - Created a new homepage layout in `dev/index.html` utilizing Tailwind CSS for styling, including a custom cursor and grid overlay for visual structure. - Implemented responsive design patterns and interactive elements for enhanced user experience.
824 lines
34 KiB
JSON
824 lines
34 KiB
JSON
{
|
|
"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": "<p class='text-xs font-bold text-slate-500 uppercase mb-2'>Year</p><p class='text-white text-lg'>2023 - 2024</p>"
|
|
}
|
|
},
|
|
"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"
|
|
}
|
|
}
|
|
}
|