kino/design_guidelines.json

{
  "theme": "dark",
  "archetype": "5 (Jewel & Luxury)",
  "brand_name": "Kino",
  "colors": {
    "background": "#050505",
    "surface": "#0F0F0F",
    "surface_hover": "#1A1A1A",
    "primary_accent": "#D9381E",
    "primary_accent_hover": "#ED4B32",
    "text_primary": "#F2F2F2",
    "text_secondary": "#8A8A8A",
    "border": "#222222",
    "glass_bg": "rgba(15, 15, 15, 0.6)",
    "glass_border": "rgba(242, 242, 242, 0.08)"
  },
  "typography": {
    "headings": {
      "family": "Fraunces, serif",
      "weights": ["400", "700", "900"],
      "usage": "Movie titles, Hero headlines, Main section dividers. Use with tight tracking (tracking-tighter) for dramatic effect."
    },
    "body": {
      "family": "Geist, sans-serif",
      "weights": ["300", "400", "500", "600"],
      "usage": "UI elements, synopses, metadata, navigation, buttons."
    },
    "scales": {
      "h1": "text-5xl md:text-6xl font-black tracking-tighter leading-none",
      "h2": "text-3xl md:text-4xl font-bold tracking-tight",
      "h3": "text-xl md:text-2xl font-semibold",
      "body": "text-base leading-relaxed text-[#8A8A8A]",
      "metadata": "text-xs uppercase tracking-[0.2em] font-medium"
    }
  },
  "spacing_and_layout": {
    "philosophy": "Generous Spacing Philosophy with tension-driven asymmetry.",
    "section_padding": "py-24 md:py-32",
    "grid_gap": "gap-6 md:gap-8",
    "hero": "100vh height, content pushed to bottom left, max gradient overlay bg-black/40 (DO NOT make it pitch black).",
    "carousels": "Horizontal scroll with visible overflow, items do not stretch fully, padding on left to align with main container.",
    "borders": "No rounded corners for media (sharp, cinematic edges) or maximum rounded-sm (2px) to keep it mature."
  },
  "components_strategy": {
    "navigation": "Crystal Glassmorphism. backdrop-blur-2xl, bg-[#0F0F0F]/60, 1px bottom border-white/5. MUST be sticky with z-50.",
    "hero_banner": "Full width, absolute positioning for background image. Content sits in a relative container at the bottom. Play button must use the primary_accent color.",
    "movie_card": "Sharp edges, 1px border on hover, scale-105 transition (duration 300ms ease-out). No text underneath by default; metadata reveals on hover via a glass overlay.",
    "modal_detail": "Split screen or heavy blurred background. Use Shadcn Dialog but completely remove the default white/black solid background, make it translucent glass or a huge edge-to-edge cinematic frame.",
    "buttons": "Flat solid, no shadows. Primary CTA: bg-[#D9381E] text-white hover:bg-[#ED4B32]. Secondary CTA: glass or border-white/20 hover:bg-white/10.",
    "inputs": "Shadcn standard but with bg-[#0F0F0F] border-[#222222] text-white focus:ring-[#D9381E] focus:border-[#D9381E]."
  },
  "motion_and_interactions": {
    "hover_states": "Images scale up slightly (scale-105), text brightens (text_secondary to text_primary).",
    "transitions": "All state changes must use 'transition-all duration-300 ease-out'.",
    "page_load": "Fade in with slight upward translation."
  },
  "media": {
    "instructions_to_main_agent": "Use ONLY these image URLs. Never use placeholders.",
    "hero_banner": [
      {
        "url": "https://images.unsplash.com/photo-1705147651064-36aedc005020?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2ODh8MHwxfHNlYXJjaHwxfHxjaW5lbWF0aWMlMjBsYW5kc2NhcGUlMjBkYXJrfGVufDB8fHx8MTc3NzQ3MzE2M3ww&ixlib=rb-4.1.0&q=85",
        "description": "Cinematic dark person holding phone - good for a tech-thriller movie hero banner",
        "category": "hero"
      },
      {
        "url": "https://images.unsplash.com/photo-1629474468919-64a55bbae8eb?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NTYxODl8MHwxfHNlYXJjaHwzfHxjaW5lbWF0aWMlMjBtb3ZpZSUyMHBvc3RlciUyMGRhcmt8ZW58MHx8fHwxNzc3NDczMTUyfDA&ixlib=rb-4.1.0&q=85",
        "description": "Movie poster hanging in dark hallway - good for library/browse empty state",
        "category": "background"
      }
    ],
    "movie_posters": [
      {
        "url": "https://images.unsplash.com/photo-1773592612185-bd985ac2bfe2?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NTYxODl8MHwxfHNlYXJjaHwxfHxjaW5lbWF0aWMlMjBtb3ZpZSUyMHBvc3RlciUyMGRhcmt8ZW58MHx8fHwxNzc3NDczMTUyfDA&ixlib=rb-4.1.0&q=85",
        "description": "Woman grimaces",
        "category": "poster"
      },
      {
         "url": "https://images.unsplash.com/photo-1613552777697-18e046be3fbd?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NTYxODl8MHwxfHNlYXJjaHwxfHxtb29keSUyMHBvcnRyYWl0JTIwYWN0b3IlMjBmaWxtfGVufDB8fHx8MTc3NzQ3MzE1Mnww&ixlib=rb-4.1.0&q=85",
         "description": "Man in black shirt",
         "category": "poster"
      },
      {
         "url": "https://images.unsplash.com/photo-1579034655398-ca79a16647ec?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NTYxODl8MHwxfHNlYXJjaHwyfHxtb29keSUyMHBvcnRyYWl0JTIwYWN0b3IlMjBmaWxtfGVufDB8fHx8MTc3NzQ3MzE1Mnww&ixlib=rb-4.1.0&q=85",
         "description": "Grayscale portrait of man",
         "category": "poster"
      },
      {
         "url": "https://images.pexels.com/photos/14599833/pexels-photo-14599833.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
         "description": "Blurred motion Beyoglu",
         "category": "poster"
      },
      {
         "url": "https://images.pexels.com/photos/30704104/pexels-photo-30704104.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
         "description": "Street view cinema",
         "category": "poster"
      }
    ],
    "auth_background": [
       {
          "url": "https://images.unsplash.com/photo-1698159929270-c88bad6346fe?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA1ODR8MHwxfHNlYXJjaHwzfHxhYnN0cmFjdCUyMGRhcmslMjB0ZXh0dXJlJTIwZmlsbSUyMGdyYWlufGVufDB8fHx8MTc3NzQ3MzE2M3ww&ixlib=rb-4.1.0&q=85",
          "description": "Dark fire abstract, good for login split screen",
          "category": "auth"
       }
    ]
  },
  "testing": {
    "data_testid_rule": "All interactive elements, buttons, links, form inputs, menus, error messages MUST include a kebab-case data-testid attribute based on role."
  },
  "iconography": "lucide-react for UI icons. Keep stroke-width to 1.5 for a delicate, premium feel.",
  "textures": "Add a subtle fixed full-screen div with pointer-events-none and a repeating noise SVG background at opacity-5 to give the entire app a tactile, cinematic film grain."
}