design_guidelines.json

{
  "theme": {
    "mode": "toggle",
    "primary_archetype": "Archetype 4 (Swiss & High-Contrast)",
    "secondary_archetype_influence": "Archetype 5 (Jewel & Luxury) for Dark Mode",
    "rationale": "Robotics and AI engineering demands authority, precision, and clarity (Archetype 4). Dark mode leans into moody, high-end technical luxury (Archetype 5) commonly seen in Godly.website developer portfolios."
  },
  "colors": {
    "dark": {
      "background": "#121212",
      "surface": "#1C1C1E",
      "surface_glass": "bg-black/60",
      "text_primary": "#FFFFFF",
      "text_secondary": "#A1A1AA",
      "accent": "#002FA7",
      "accent_hover": "#3355C0",
      "border": "#27272A"
    },
    "light": {
      "background": "#FAFAFA",
      "surface": "#FFFFFF",
      "surface_glass": "bg-white/70",
      "text_primary": "#0A0A0A",
      "text_secondary": "#52525B",
      "accent": "#FF3B30",
      "accent_hover": "#E0352B",
      "border": "#E4E4E7"
    }
  },
  "typography": {
    "strategy": "The Swiss Brutalist (Tech)",
    "fonts": {
      "headings": "Cabinet Grotesk",
      "body": "IBM Plex Sans",
      "mono": "JetBrains Mono"
    },
    "scale": {
      "h1": "text-4xl sm:text-5xl lg:text-6xl tracking-tighter leading-none font-black",
      "h2": "text-2xl sm:text-3xl lg:text-4xl tracking-tight font-bold",
      "h3": "text-xl sm:text-2xl font-semibold",
      "body": "text-base leading-relaxed",
      "labels": "text-xs uppercase tracking-[0.2em] font-mono"
    }
  },
  "layout_and_spacing": {
    "spacing_scale": "p-1, p-2, p-4, p-8, p-12, p-20, p-32",
    "container": "max-w-7xl mx-auto px-6 md:px-12",
    "grid_modes": {
      "skills": "Bento Grid: grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-6",
      "projects": "Asymmetrical layout: mix of col-span-8 and col-span-4 for featured vs standard projects."
    }
  },
  "surfaces": {
    "header": "Crystal Glass (backdrop-blur-xl + border-b border-border)",
    "cards": "Neumorphism mix: flat solid background, 1px border, subtle ambient shadow, sharp inner contrast.",
    "hover_state": "-translate-y-1 shadow-lg border-opacity-50 transition-all duration-300 ease-out"
  },
  "components": {
    "hero": "Custom HTML/Tailwind. Split layout with massive typography on left and high-contrast profile image on right. Includes dynamic 'System Status: NOMINAL' tech indicators.",
    "about": "Rich text bio with animated stat counters (Commit/Telemetry metrics).",
    "skills": "Bento Grid. Categories (Robotics, AI/ML, Web). Use progress bars or matrix-style data blocks.",
    "projects": "Hover-expanded cards, showing tech stack as mono badges. Large imagery.",
    "experience": "Terminal-style Execution Log. Vertical timeline with glowing nodes.",
    "testimonials": "Carousel using Framer Motion or Swiper. Minimalist quote design.",
    "contact": "Shadcn UI Form, Input, Textarea, Button heavily customized for brutalist aesthetic."
  },
  "motion_and_interactions": {
    "scroll": "Lenis for smooth scrolling",
    "animations": "Framer Motion for page enter, staggered list reveals.",
    "hover": "Text color explicitly set. Interactive elements scale-up slightly. Use 'Tracing Beam' effect on featured project cards."
  },
  "icons_and_assets": {
    "library": "lucide-react",
    "images": {
      "profile": {
        "url": "https://bibinvr.tech/profile-hero.png",
        "description": "Bibin V R Profile Hero Image. Place in Hero section."
      },
      "project_go2w": {
        "url": "https://bibinvr.tech/project-go2w.png",
        "description": "Go2W_ws Robotics Project"
      },
      "project_smart_band": {
        "url": "https://bibinvr.tech/project-band.jpg",
        "description": "Smart Band Athletics Wearable Project"
      },
      "abstract_tech_bg": {
        "url": "https://images.unsplash.com/photo-1760931969401-9bd6ee902798?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjY2NjV8MHwxfHNlYXJjaHwzfHxhYnN0cmFjdCUyMHJvYm90aWNzJTIwYWklMjB0ZWNobm9sb2d5fGVufDB8fHx8MTc3ODI2NzY4NHww&ixlib=rb-4.1.0&q=85",
        "description": "Futuristic robot head. Use for background texture or 404 page, deeply overlayed."
      }
    }
  },
  "instructions_to_main_agent": [
    "Strictly adhere to the dark/light mode color tokens. Do not use generic Tailwind blue/gray classes unless mapped to these.",
    "Never center-align large blocks of text. Left-align for technical readability.",
    "Use data-testid on all interactive elements (e.g. data-testid='contact-submit-button').",
    "Install 'lenis' for smooth scrolling.",
    "Implement a dark/light mode toggle in the header, defaulting to Dark.",
    "For the hero image, apply a subtle gradient overlay so text contrast is preserved without ruining the image.",
    "Use 'react-fast-marquee' for a 'System Status / Tech Stack' ticker below the hero."
  ]
}