KAFKASDER Login

# KAFKASDER Login

{
  "summary": "A professional and modern authentication page featuring a centered card with a high border-radius (32px), animated organic background blobs, and a refined teal primary color scheme (#22837A).",
  "style": {
    "description": "The style is defined by its clean, high-contrast palette of Teal (#22837A) and Slate (varying from #020617 to #94a3b8). It utilizes the 'Plus Jakarta Sans' font family across multiple weights (400-800). Visual depth is achieved through layering white cards over light slate backgrounds, enhanced by 0.6s cubic-bezier entrance animations and persistent 'blob' background movements. Button states include shadow-glow effects and subtle scaling on click.",
    "prompt": "### Design Language: Professional Modern Teal & Slate\n\n**Colors:**\n- Primary Teal: `#22837A` (Base), `#18645C` (Dark), `#E6F4F2` (Light/Backgrounds)\n- Neutral Slate: `#f8fafc` (Page BG), `#ffffff` (Card BG), `#94a3b8` (Icons/Muted), `#475569` (Subtext), `#020617` (Headers)\n- Accent: `#22837A` (2px top bar on cards)\n\n**Typography (Plus Jakarta Sans):**\n- Headers: Font-weight 800, tracking-tight, 24px (1.5rem)\n- Labels: Font-weight 700, 14px (0.875rem), Slate-900\n- Body/Inputs: Font-weight 500, 14px (0.875rem), Slate-600\n- Links: Font-weight 700, 14px (0.875rem), Brand Teal\n\n**Shapes & Spacing:**\n- Main Card Radius: 32px (2rem)\n- Input/Button Radius: 12px (0.75rem)\n- Padding: Card internal 48px (3rem), Input padding 14px vertical x 16px horizontal\n\n**Animations:**\n- Entrance: Card slides up 20px with opacity fade using `cubic-bezier(0.16, 1, 0.3, 1)` over 600ms\n- Background: 3-point 'blob' animation (translate and scale) rotating over 7s infinitely\n- Interactions: Button `active:scale(0.98)`, focus-ring expansion `ring-4 ring-brand/10`"
  },
  "layout_and_structure": {
    "description": "A full-screen responsive layout centered on a single max-width card (480px). The background is a living canvas with blurred organic shapes, while the foreground is a crisp, layered card with a structured header, form, and secondary footer.",
    "prompts": [
      {
        "part": "Background Canvas",
        "prompt": "Create a `min-h-screen` viewport with a background of `#f8fafc`. Insert three large blurred circular elements (384px wide) with `mix-blend-multiply`, `filter: blur(64px)`, and `opacity: 0.7`. Element 1 (Top Left): Teal-100. Element 2 (Right Mid): Slate-200. Element 3 (Bottom Left): Teal-100. Animate these elements using a 'blob' keyframe that translates them slightly and scales them between 0.9x and 1.1x over 7s."
      },
      {
        "part": "Authentication Card",
        "prompt": "A container card with `max-width: 480px`, background `#ffffff`, and border-radius `32px`. Apply a heavy shadow (`shadow-2xl shadow-slate-200/50`). Feature a 2px horizontal accent line at the very top in `#22837A`. Inside, provide a header area with a large brand logo (h-32), a title (24px, weight 800), and a description (14px, weight 500, Slate-500)."
      },
      {
        "part": "Form Inputs",
        "prompt": "Vertical stack with 24px spacing. Labels are 14px, bold, Slate-900. Input containers use `#f8fafc` background, `#e2e8f0` borders, and 12px radius. Left-aligned icons (18px) in Slate-400 that change to Teal when parent container is focused. The focus state changes background to pure white, border to Teal, and adds a soft Teal glow ring."
      },
      {
        "part": "CTA and Actions",
        "prompt": "Primary button: Full width, height ~56px, Teal background, weight 700 white text. Includes a 12px radius and a right-pointing arrow icon. Below the inputs, include a 'Remember Me' checkbox and a bold Teal 'Forgot Password' link on the same row."
      },
      {
        "part": "Card Footer",
        "prompt": "A separate section at the bottom of the card with a light gray background (`#f8fafc`) and a thin top border. Center-aligned text asking if the user has an account, with a bold link that changes from Slate-950 to Teal on hover."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Password Input",
      "description": "A secure input field with an integrated visibility toggle.",
      "prompt": "Build an input with `type='password'`. Place an absolute-positioned button on the right side using a 20px 'eye' icon from Lucide. The icon should be Slate-400 and transition to Slate-600 on hover. The input field must have `tracking-widest` for the bullet masking to maintain clean spacing."
    },
    {
      "component": "Floating Support Badge",
      "description": "A subtle help link anchored to the bottom right of the screen.",
      "prompt": "Create a fixed-position link at bottom-6 right-8. Style it with `backdrop-blur-sm`, background `rgba(255, 255, 255, 0.5)`, a 1px border of Slate-200, and fully rounded corners. Text should be 14px Semibold Slate-400 with a Lucide 'help-circle' icon."
    }
  ],
  "special_notes": "MUST use a 2px solid teal bar at the top of the card for brand identity. MUST NOT use standard blue for links; stick strictly to the Teal/Slate palette. Ensure the background blobs are 'pointer-events-none' to prevent interaction blocking. Use 'Plus Jakarta Sans' to maintain the specific professional-modern aesthetic."
}