design_guidelines.json

{
  "theme": "dark",
  "archetype": "THE PERFORMANCE PRO / SWISS & HIGH-CONTRAST",
  "typography": {
    "headings": {
      "font_family": "Outfit, sans-serif",
      "weights": ["300", "500", "700"],
      "styles": "Tight letter spacing (tracking-tight), never centered by default, expressive sizes (text-4xl to text-6xl for marketing, text-2xl to text-3xl for dashboard)."
    },
    "body": {
      "font_family": "IBM Plex Sans, sans-serif",
      "weights": ["400", "500"],
      "styles": "High readability, loose line height (leading-relaxed) for paragraphs, tight for UI elements. text-slate-300 for secondary text."
    },
    "overlines": {
      "styles": "Uppercase, tiny (text-xs), wide spacing (tracking-[0.2em]), text-blue-400 or text-slate-400."
    }
  },
  "colors": {
    "background": {
      "base": "#0B0F19",
      "surface": "#12141D",
      "surface_elevated": "#1A1D27"
    },
    "brand": {
      "primary": "#007AFF",
      "primary_hover": "#3395FF",
      "accent": "#00E5FF"
    },
    "text": {
      "primary": "#FFFFFF",
      "secondary": "#94A3B8",
      "muted": "#64748B"
    },
    "border": {
      "default": "rgba(255, 255, 255, 0.08)",
      "hover": "rgba(255, 255, 255, 0.15)",
      "active": "rgba(0, 122, 255, 0.5)"
    },
    "status": {
      "success": "#10B981",
      "warning": "#F59E0B",
      "error": "#EF4444"
    }
  },
  "surfaces": {
    "dashboard_cards": {
      "background": "bg-[#12141D]",
      "border": "border border-white/5",
      "radius": "rounded-xl",
      "shadow": "shadow-sm",
      "hover": "hover:border-white/10 hover:shadow-[0_8px_30px_rgba(0,122,255,0.06)] hover:-translate-y-0.5 transition-all duration-300 ease-out"
    },
    "sidebar": {
      "background": "bg-[#0B0F19]",
      "border": "border-r border-white/5",
      "layout": "w-64 h-screen fixed left-0 top-0 flex flex-col gap-4 p-6"
    },
    "glass_header": {
      "background": "bg-[#0B0F19]/70",
      "blur": "backdrop-blur-xl backdrop-saturate-150",
      "border": "border-b border-white/5"
    },
    "cv_upload_zone": {
      "background": "bg-blue-500/5",
      "border": "border-2 border-dashed border-blue-500/30",
      "hover": "hover:border-blue-500 hover:bg-blue-500/10",
      "radius": "rounded-2xl",
      "padding": "p-12",
      "animation": "pulse on drag-over"
    }
  },
  "layouts": {
    "spacing_scale": "Use generous spacing. p-6 or p-8 inside cards. gap-6 or gap-8 in grids.",
    "dashboard_grid": "High Density Grid: grid-cols-1 md:grid-cols-12 gap-6. Main content typically col-span-12 or col-span-8 with side panels col-span-4.",
    "bento_grid": "For CV Editing: Left panel (PDF preview) col-span-1 lg:col-span-5. Right panel (Edit Form) col-span-1 lg:col-span-7.",
    "alignment": "Mobile-first. Left-align dense forms and tabular data. Top-align grid items to prevent awkward stretching unless explicitly needed."
  },
  "components": {
    "buttons": {
      "primary": "bg-[#007AFF] text-white hover:bg-[#3395FF] rounded-lg px-6 py-2.5 font-medium transition-colors duration-200",
      "secondary": "bg-white/5 text-white border border-white/10 hover:bg-white/10 rounded-lg px-6 py-2.5 font-medium transition-colors duration-200",
      "ghost": "bg-transparent text-slate-300 hover:text-white hover:bg-white/5 rounded-lg px-4 py-2 transition-colors duration-200"
    },
    "inputs": {
      "style": "bg-black/20 border border-white/10 rounded-lg text-white placeholder-slate-500 focus:border-[#007AFF] focus:ring-1 focus:ring-[#007AFF] transition-all duration-200"
    },
    "toggles": {
      "style": "Shadcn switch overridden to use #007AFF when active, dark grey when inactive."
    }
  },
  "motion": {
    "page_transitions": "Framer Motion: initial={opacity: 0, y: 10} animate={opacity: 1, y: 0} exit={opacity: 0, y: -10} transition={duration: 0.3}",
    "staggered_lists": "Framer Motion: parent variants staggerChildren=0.05, child variants fade and slight slide up.",
    "micro_interactions": "Hover states on all buttons and cards. Active states scale down slightly (scale: 0.98)."
  },
  "icons_and_media": {
    "icon_library": "lucide-react",
    "icon_style": "Stroke width 1.5 or 2. Clean, unopinionated.",
    "image_urls": {
      "avatar_female": {
        "url": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA1NzB8MHwxfHNlYXJjaHwyfHxwcm9mZXNzaW9uYWwlMjBwb3J0cmFpdHxlbnwwfHx8fDE3NzQyNjU2OTN8MA&ixlib=rb-4.1.0&q=85",
        "description": "Professional woman in gray jacket",
        "category": "user_avatar"
      },
      "avatar_male": {
        "url": "https://images.pexels.com/photos/30535621/pexels-photo-30535621.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
        "description": "Professional man indoor setting",
        "category": "user_avatar_alt"
      },
      "auth_background": {
        "url": "https://images.pexels.com/photos/7230895/pexels-photo-7230895.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
        "description": "Dark abstract geometric facade",
        "category": "login_register_hero"
      }
    }
  },
  "instructions_to_main_agent": [
    "You are building 'Job Hunt Duo'. The app requires 6 user stories: Auth (Reg/Login), Dashboard, CV Upload, CV Data Editing, Job Preferences, Job Source Selection.",
    "Start by setting up the Router and the base layout (Sidebar + Topbar for authenticated routes, full screen for Auth routes).",
    "Use standard HTML tags tailored with Tailwind for complex layout, use Shadcn for standard interactive elements (Inputs, Dialogs, Selects, Switches).",
    "Import 'Outfit' and 'IBM Plex Sans' from Google Fonts in index.html or global css.",
    "For the Landing/Auth page: Split screen. Left side is a branding area with the 'login_register_hero' image overlaid with a dark gradient. Right side is the Auth form (Login/Register Tabs using Shadcn Tabs).",
    "For CV Upload: Create a highly tactile drag-and-drop zone using the 'cv_upload_zone' surface style.",
    "For Job Source Selection: Render a grid of cards for Adzuna, RemoteOK, Arbeitnow, HN Who's Hiring, with Shadcn Switch components.",
    "Implement Framer Motion for basic route transitions and staggered list item loading."
  ],
  "universal_guidelines": [
    "NEVER use generic 'transition: all'. Explicitly state 'transition-colors', 'transition-transform', 'transition-opacity'.",
    "DO NOT center align the app container (.App { text-align: center; } is strictly forbidden).",
    "Layered design: Use borders and background lightness to distinguish overlapping elements, avoid drop shadows in dark mode except for subtle glows.",
    "Always explicitly set hover text colors when changing background on hover (e.g. hover:bg-white hover:text-black).",
    "All interactive and key informational elements MUST include a 'data-testid' attribute (kebab-case, role-based).",
    "DO NOT use completely transparent backgrounds for elements overlapping other content (dropdowns, sticky headers). Always use a solid color or heavy backdrop blur.",
    "Left-align forms, paragraphs, and tabular data. Only center items if mathematically balanced in the layout.",
    "No AI emojis in UI. Use lucide-react icons instead.",
    "Use sonner for toasts notifications.",
    "Ensure input fields have sufficient contrast against the background."
  ]
}