Partix AI - Optimized Mobile Layout & Balanced Decorations

# Partix AI - Optimized Mobile Layout & Balanced Decorations

{
  "summary": "A vibrant, neo-brutalist UI featuring thick black borders, playful floating decorations, and a warm cream background with subtle dot patterns. The system balances high-energy colors like pink, turquoise, and lime with structured, bold typography.",
  "style": {
    "description": "The style is 'Neo-Brutalist Playful.' It pairs a soft background (#FFFDF5) with sharp, heavy black borders (#2D3436) and vibrant accents. Typography uses Varela Round for headings to maintain friendliness and Heebo for functional text. Animations are bouncy and floating to create a dynamic, 'alive' interface.",
    "prompt": "### Core Aesthetics\n- **Palette**: \n  - Background: `#FFFDF5` (Play Light)\n  - Borders/Text: `#2D3436` (Play Dark)\n  - Primary Accent: `#FF66D9` (Play Pink)\n  - Secondary Accents: `#00E0FF` (Turquoise), `#A3FF00` (Lime), `#FF9F1C` (Orange), `#9D4EDD` (Purple), `#FFD166` (Yellow).\n- **Background Pattern**: Radial gradient dot pattern using Pink and Turquoise dots (1px size) at 40px intervals.\n- **Typography**:\n  - Headings: `Varela Round`, black weight (900), tracking tight, line-height 1.2.\n  - UI/Body: `Heebo` or `Manrope`, bold weights (600-800) for labels and buttons.\n- **Shadows & Borders**:\n  - `shadow-pop`: 4px 4px 0px 0px rgba(0,0,0,0.1).\n  - `shadow-pop-bold`: 5px 5px 0px 0px #2D3436 (solid hard shadow).\n  - Border Width: 4px solid #2D3436 for all primary containers and buttons.\n- **Animations**:\n  - `float`: `translateY(-20px) rotate(3deg)` over 4s ease-in-out.\n  - `float-alt`: `translateY(-15px) rotate(-8deg) scale(1.1)` over 5s ease-in-out.\n  - `spin-slow`: 12s linear infinite rotation for decorative geometric shapes."
  },
  "layout_and_structure": {
    "description": "A two-column responsive layout for desktop (RTL supported), collapsing to a single centered column on mobile with optimized content density.",
    "prompts": [
      {
        "part": "Hero Section (Left Column)",
        "prompt": "Layout: Vertical stack with RTL alignment. \n1. Logo: Height 64px.\n2. Badge: Rounded pill, Yellow bg, 4px black border, rotated -2 degrees.\n3. Heading: Extra large text (7xl), Pink text span with thick Lime underline (#A3FF00/40 opacity).\n4. Description: Medium weight text (size 2xl), hidden on mobile devices.\n5. Feature Grid: 2-column grid of small cards. Each card: White bg, 4px border, 40px corner radius, small icon in a colored 4px border box (Turquoise or Orange)."
      },
      {
        "part": "Login Card (Right Column)",
        "prompt": "Container: White background, 4px black border, 56px (3.5rem) border radius, heavy solid black shadow (shadow-pop-bold). \nContent: \n1. Title: Large heading with subheading in gray.\n2. Inputs: Rounded-full (pill-shape), 4px light gray border, subtle gray background. On focus: Pink border and 4px pink glow.\n3. Checkbox: Custom square box with 4px border, fills with Pink on check.\n4. Primary Button: Large Pink button, 4px black border, bold shadow. Micro-interaction: translate 1px on hover to 'press' the shadow."
      },
      {
        "part": "Decorative Elements",
        "prompt": "Floating icons: Place 'noto:balloon', 'noto:party-popper', and 'noto:confetti-ball' around the main layout. Use absolute positioning with 'animate-float' and 'animate-float-alt'. Add geometric shapes (Lime square, Purple circle) behind the main card with 'animate-spin-slow' and 'animate-float' to add depth."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "The 'Pop' Badge",
      "description": "A rotated pill-shaped indicator used for highlights.",
      "prompt": "Background: #FFD166; Border: 4px solid #2D3436; Shadow: 4px 4px 0px 0px rgba(0,0,0,0.1); Rotation: -2deg; Padding: 8px 20px; Font-weight: 900; Color: #2D3436; Includes an animated 'lucide:sparkles' icon with pulse effect."
    },
    {
      "component": "Feature Micro-Card",
      "description": "Small informational cards used for USP visualization.",
      "prompt": "White background; Border: 4px solid #2D3436; Radius: 2.5rem; Shadow: 4px 4px 0px 0px rgba(0,0,0,0.1); Interaction: Scale(1.05) on hover. Contains a 48px square icon container with its own 4px border and hard shadow, which rotates +/- 6 degrees on card hover."
    }
  ],
  "special_notes": "MUST: Maintain a 4px border consistency across all interactive elements. MUST: Support RTL layouts natively. MUST: Hide long descriptive text on mobile (screens < 768px) to keep the UI focused. NOT: Do not use soft blurs for shadows; they must be solid and hard. NOT: Avoid thin font weights; the minimum weight should feel substantial (400+)."
}