design_guidelines.json

{
  "project_name": "TeraPlayer",
  "theme_strategy": {
    "mode": "dark-first",
    "description": "Premium cinematic dark mode avoiding pure black. Inspired by Netflix and modern SaaS (Vercel/Godly-tier). Uses deep midnight slate for backgrounds and crisp white/desaturated cyan for accents to reduce eye strain while retaining a luxury vibe."
  },
  "colors": {
    "palette_name": "Obsidian & Electric Azure",
    "background": {
      "light": "210 40% 98%",
      "dark": "222 47% 6%"
    },
    "foreground": {
      "light": "222 47% 11%",
      "dark": "210 40% 98%"
    },
    "card": {
      "light": "0 0% 100%",
      "dark": "222 30% 10%"
    },
    "primary": {
      "light": "210 100% 50%",
      "dark": "210 100% 55%"
    },
    "accent": {
      "light": "189 94% 43%",
      "dark": "189 94% 48%"
    },
    "destructive": {
      "light": "350 89% 60%",
      "dark": "350 89% 65%"
    },
    "border": {
      "light": "214 32% 91%",
      "dark": "217 33% 17%"
    },
    "rules": [
      "Never use pure black (#000000). Stick to the HSL tokens.",
      "Gradients are allowed for backgrounds but must be subtle and premium. Keep them low-opacity radial or linear gradients that enhance depth without overpowering content.",
      "Always set text colors explicitly on hover states."
    ]
  },
  "typography": {
    "strategy": "The 'Editorial Future' pairing. High contrast between wide display sans and ultra-clean geometric body.",
    "headings": {
      "font_family": "'Outfit', sans-serif",
      "weights": ["300", "500", "700"],
      "tracking": "tracking-tight"
    },
    "body": {
      "font_family": "'Manrope', sans-serif",
      "weights": ["400", "500", "600"],
      "tracking": "tracking-normal"
    },
    "scale": {
      "h1": "text-5xl sm:text-6xl font-bold tracking-tighter",
      "h2": "text-3xl sm:text-4xl font-semibold tracking-tight",
      "body": "text-base leading-relaxed",
      "label": "text-xs font-bold tracking-[0.2em] uppercase"
    }
  },
  "spacing_and_layout": {
    "grid_system": "Bento Grid (Asymmetric)",
    "container": "max-w-7xl mx-auto px-6 md:px-12",
    "gaps": "gap-6 md:gap-8 lg:gap-12",
    "paddings": "p-6 md:p-10 lg:p-16",
    "surface_styles": {
      "glass": "backdrop-blur-2xl bg-black/60 border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
      "solid": "bg-card border border-border shadow-sm",
      "interactive_card": "transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-xl hover:border-primary/50"
    }
  },
  "components": {
    "hero_paste_input": {
      "layout": "Massive central focal point. No standard borders.",
      "style": "h-20 md:h-24 text-2xl md:text-3xl bg-card border border-border rounded-2xl px-8 shadow-2xl focus-within:ring-2 focus-within:ring-primary focus-within:border-primary transition-colors duration-300",
      "button": "Absolute right-2 top-2 bottom-2 bg-primary text-white rounded-xl px-8 font-semibold text-lg flex items-center gap-2 hover:bg-primary/90 transition-colors"
    },
    "video_player": {
      "wrapper": "rounded-2xl overflow-hidden relative group bg-black shadow-2xl",
      "controls_overlay": "absolute bottom-0 inset-x-0 p-6 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300",
      "progress_bar": "h-1.5 bg-white/20 rounded-full cursor-pointer hover:h-2 transition-colors",
      "progress_filled": "h-full bg-primary rounded-full relative",
      "floating_play": "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-white/10 backdrop-blur-md border border-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-transform duration-300 ease-out hover:scale-110"
    },
    "preview_card": {
      "layout": "Bento Grid style. col-span-full md:col-span-8 for thumbnail, col-span-full md:col-span-4 for metadata.",
      "thumbnail": "aspect-video rounded-2xl object-cover border border-border/50",
      "metadata": "flex flex-col justify-center p-8 bg-card rounded-2xl border border-border"
    },
    "download_ui": {
      "style": "flex items-center justify-between p-4 bg-card rounded-xl border border-border",
      "progress_bar": "h-1 w-full bg-muted rounded-full overflow-hidden mt-3",
      "progress_fill": "h-full bg-accent transition-all duration-300 ease-out"
    }
  },
  "motion": {
    "libraries": ["framer-motion"],
    "page_transition": {
      "initial": { "opacity": 0, "y": 20 },
      "animate": { "opacity": 1, "y": 0 },
      "transition": { "duration": 0.5, "ease": [0.16, 1, 0.3, 1] }
    },
    "hover": "Never use 'transition: all'. Use 'transition-transform duration-300 ease-out' or 'transition-colors duration-200'."
  },
  "media": {
    "placeholder_images": [
      {
        "url": "https://images.unsplash.com/photo-1498429089284-41f8cf3ffd39?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA1ODR8MHwxfHNlYXJjaHwxfHw0ayUyMG1vdmllJTIwbGFuZHNjYXBlfGVufDB8fHx8MTc4NDExNTAzMXww&ixlib=rb-4.1.0&q=85",
        "description": "Valley landscape (use for 4K nature video preview)"
      },
      {
        "url": "https://images.unsplash.com/photo-1682687218147-9806132dc697?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA1ODR8MHwxfHNlYXJjaHwzfHw0ayUyMG1vdmllJTIwbGFuZHNjYXBlfGVufDB8fHx8MTc4NDExNTAzMXww&ixlib=rb-4.1.0&q=85",
        "description": "Desert landscape (use for high-res documentary preview)"
      },
      {
        "url": "https://images.pexels.com/photos/4220817/pexels-photo-4220817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
        "description": "Vintage camera with red lighting (use for cinematic/indie film preview)"
      },
      {
        "url": "https://images.unsplash.com/photo-1766267190666-5d49e5a9c2a7?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NTYxOTJ8MHwxfHNlYXJjaHwyfHxjaW5lbWF0aWMlMjBtb3ZpZSUyMHBvc3RlciUyMG5lb258ZW58MHx8fHwxNzg0MTE1MDQ3fDA&ixlib=rb-4.1.0&q=85",
        "description": "Studio-kino babylon cinema (use for movie folder/collection)"
      },
      {
        "url": "https://images.unsplash.com/photo-1676994836537-5c18e7cf3dbf?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjY2NzV8MHwxfHNlYXJjaHw0fHxjaW5lbWF0aWMlMjBmaWxtJTIwY2FtZXJhfGVufDB8fHx8MTc4NDExNTAzMXww&ixlib=rb-4.1.0&q=85",
        "description": "Cinematic film camera hands (use for generic video placeholder)"
      }
    ],
    "icons": {
      "library": "lucide-react",
      "style": "stroke-width: 1.5. Clean, scalable vectors."
    }
  },
  "accessibility": {
    "contrast": "Ensure all text overlaid on video thumbnails has a text-shadow or a dark gradient behind it. Minimum contrast ratio 4.5:1.",
    "focus": "All interactive elements must have a visible focus ring (focus-visible:ring-2).",
    "motion": "Respect 'prefers-reduced-motion'. Add fallbacks to opacity transitions instead of translations if enabled."
  },
  "instructions_to_main_agent": [
    "CRITICAL: Use .js or .jsx extensions for React components. Do not use .tsx.",
    "CRITICAL: Include data-testid attributes on all interactive elements (e.g., data-testid='paste-input', data-testid='preview-btn').",
    "CRITICAL: Do NOT center-align the app container. Remove '.App { text-align: center; }' from CSS.",
    "CRITICAL: Never use 'transition: all' as it breaks transforms. Use 'transition-transform duration-300 ease-out' or 'transition-colors duration-200'.",
    "CRITICAL: Import Google Fonts 'Outfit' and 'Manrope' in index.css.",
    "CRITICAL: Do NOT use pure transparent backgrounds for floating navigation or overlays over content; always use backdrop-blur + semi-transparent bg.",
    "Implement Sonner for toast notifications for states like 'Link copied' or 'Download started'.",
    "Use Phosphor Icons or Lucide-React for crisp iconography.",
    "Ensure the hero link input feels massive, frictionless, and inviting.",
    "Theme: Prefer dark mode layout default, ensuring the user feels immersed in a cinematic environment."
  ],
  "universal_guidelines": [
    "Create depth through layered design elements with z-index hierarchy.",
    "Use glass-morphism effects with backdrop filters (12-24px blur).",
    "Avoid generic centered layouts, simplistic gradients, and uniform styling.",
    "Every interaction needs micro-animations - hover states, transitions, parallax effects, and entrance animations.",
    "Never use AI assistant Emoji characters (🤖🧠💭💡) for icons."
  ]
}