design_guidelines.json

{
  "theme": "LIGHT",
  "archetype": "Archetype 4 (Swiss & High-Contrast)",
  "vibe": "High fashion editorial, Godly-level minimalist, stark, cinematic, and functional.",
  "typography": {
    "heading_font": "Cabinet Grotesk",
    "body_font": "Manrope",
    "logo_text": "V O I D",
    "rules": [
      "H1 (Hero): text-5xl md:text-6xl+, tracking-tighter, font-black, entirely uppercase or highly structured.",
      "H2 (Section): text-3xl md:text-4xl, tracking-tight, font-medium.",
      "Body: text-base or text-sm, highly legible, generous line-height (leading-relaxed).",
      "Overlines/Labels (Filters, Categories): text-xs, uppercase, tracking-[0.2em], font-bold.",
      "CRITICAL: Never use Inter for any headings. Typography must feel structural and confident."
    ]
  },
  "colors": {
    "background": "#FFFFFF",
    "surface": "#FAFAFA",
    "text_primary": "#0A0A0A",
    "text_secondary": "#525252",
    "borders": "#E5E5E5",
    "accent_cta": "#0A0A0A",
    "accent_cta_text": "#FFFFFF",
    "rules": [
      "Strict monochrome. NO gradients. NO purple or teal.",
      "Tint neutrals slightly towards cool gray if necessary, but keep it almost purely grayscale.",
      "Buttons must be stark black (bg-black text-white) with sharp corners (rounded-none).",
      "Focus rings should be sharp black 1px offsets."
    ]
  },
  "layout_and_spacing": {
    "container_padding": "px-6 md:px-12 lg:px-24",
    "section_spacing": "py-24 md:py-32",
    "grid_system": {
      "product_catalog": "grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 md:gap-12",
      "hero_layout": "grid-cols-1 lg:grid-cols-12 gap-8. Split layout: text span 5, image span 7."
    },
    "rules": [
      "Generous Spacing: Use 2-3x more spacing than typical AI designs.",
      "Asymmetry: In the product grid, occasionally span a featured product across 2 columns.",
      "Cardless: Do NOT use Card components for products. Just raw image with text directly underneath, separated by 12px margin.",
      "Hero Overlay: Avoid dark blankets. Keep images raw, place text in solid white space next to it or over clear negative space."
    ]
  },
  "components": {
    "header": "Sticky header (z-50), crystal clear white background (bg-white/90 backdrop-blur-md) with a sharp 1px bottom border. Mega menu dropdowns using pure HTML/Tailwind over custom Shadcn for maximum architectural layout freedom. Typographic logo centered.",
    "footer": "Massive py-32 padding. Background black, text white (Contrast Shift rule). Includes large 'V O I D' logomark at the bottom.",
    "buttons": "rounded-none, border border-black, high contrast hover (invert colors).",
    "inputs": "Shadcn components heavily customized: rounded-none, border-b only (no full box), focus:outline-none focus:border-b-2.",
    "filters": "Sticky sidebar or top bar with stark dropdown menus. Use Shadcn accordion/select, strip the borders and radii."
  },
  "motion_and_interactions": {
    "entrance": "Staggered fade-up (opacity: 0, y: 15) using Framer Motion.",
    "hover_products": "No generic scaling. Image hover should slightly dim or reveal a secondary alternate image. Product title underlines on hover.",
    "infinite_scroll": "Implement a seamless intersection observer. When the user reaches the bottom of the product grid, mock a 800ms loading state (simple ASCII or minimalist text 'LOADING...') and append 12 more products to the grid.",
    "accessibility": "Ensure focus states are prominent (1px black outline)."
  },
  "media": {
    "hero_image": {
      "url": "https://images.unsplash.com/photo-1764698192249-641a17d7a4fe",
      "description": "Woman leaning against wall, high fashion editorial. Use in Hero section.",
      "category": "Hero"
    },
    "category_featured_1": {
      "url": "https://images.unsplash.com/photo-1768123881596-8451eb40608c",
      "description": "Woman in white dress. Use for 'New Arrivals' or featured collection CTA on homepage.",
      "category": "Collection"
    },
    "category_featured_2": {
      "url": "https://images.pexels.com/photos/10328038/pexels-photo-10328038.jpeg",
      "description": "Woman sitting against white background. Use for 'Essentials' collection.",
      "category": "Collection"
    },
    "product_thumbnails": [
      "https://images.unsplash.com/photo-1467043237213-65f2da53396f",
      "https://images.pexels.com/photos/33633245/pexels-photo-33633245.jpeg",
      "https://images.unsplash.com/photo-1556905055-8f358a7a47b2",
      "https://images.unsplash.com/photo-1761896902115-49793a359daf",
      "https://images.pexels.com/photos/934063/pexels-photo-934063.jpeg"
    ]
  },
  "instructions_to_main_agent": [
    "You are building a high-end fashion e-commerce site. Start by generating a set of 30-50 mock products with names, categories, price, and assigning them the provided product_thumbnail URLs (cycle through them).",
    "Install 'lucide-react' for thin, minimalist icons. Use stroke-width='1'.",
    "Install 'framer-motion' for staggered layout entrances.",
    "Install '@radix-ui/react-icons' if you need alternative sharper arrows.",
    "Global layout: DO NOT center-align product info. Left-align product name, price, and category directly under the image.",
    "Mega Menu: Create a hoverable element in the Header that drops down a full-width div showing categories (Tops, Bottoms, Outerwear, Accessories) in a stark grid layout.",
    "Infinite Scroll: Build a 'ProductGrid' component. Use an intersection observer at the bottom of the grid. When triggered, slice the next 8-12 products from your mock data array and append them.",
    "Filters: Build a functional multi-criteria filter state (e.g. selectedCategories = [], priceRange = [min, max], sort = 'newest'). The grid must update dynamically based on this state.",
    "No auth or cart functionality needed. Focus purely on the browse, filter, and scroll experience.",
    "Ensure all interactive elements have data-testid attributes (e.g. data-testid='filter-category-tops', data-testid='product-card-12')."
  ]
}