Hybrid Tab +FAB Navigation

# Hybrid Tab +FAB Navigation

{
  "summary": "A high-fidelity mobile UI system focused on a minimal hybrid navigation structure. It combines a sticky 'glass' header with a fixed bottom navigation bar and a high-contrast Floating Action Button. The design prioritizes content clarity using the Manrope font family, generous white space, and subtle 'click-pop' micro-interactions for a premium feel.",
  "style": {
    "description": "Modern Minimalist / Clean Tech. Primarily monochrome (#FFFFFF and #111827) with soft gray accents (#F9FAFB, #F3F4F6) and high-saturation highlights (Blue-600, Orange-600) for categorization. Typography uses 'Manrope' extensively, ranging from 800-weight headers to 10px bold captions. Animations are snappy (200ms) with scale-down effects on active states and subtle opacity fades for tab transitions.",
    "prompt": "Implement a design system using the 'Manrope' font family. Palette: Background: #FFFFFF; Surface: #F9FAFB; Text-Primary: #111827; Text-Secondary: #6B7280; Border: #F3F4F6. Typography: H1: 24px/800; H2: 18px/700; Body: 14px/500; Captions: 10px/700 (uppercase with 0.05em tracking). Borders: 1px solid #F3F4F6 with 1rem (16px) or 1.5rem (24px) border-radius for containers. Interactions: All interactive elements must have an 'active:scale-95' transition (duration: 150ms). Use 'backdrop-blur-md' on fixed headers. Shadows should be ultra-soft: '0 2px 8px -2px rgba(0,0,0,0.05)'."
  },
  "layout_and_structure": {
    "description": "A strictly mobile-first layout (max 375px-414px width) utilizing a four-tier vertical architecture: Sticky Header, Scrollable Main Content, Floating Action Button, and Fixed Bottom Navigation.",
    "prompts": [
      {
        "part": "Header Section",
        "prompt": "Sticky top container with 'backdrop-blur-md' and #FFFFFF/90 opacity. Height: ~80px. Left side includes a date label (12px, tracking-wider, #6B7280) and a primary title (24px font-bold). Right side features a 40x40px rounded-full notification button with a thin #F3F4F6 border."
      },
      {
        "part": "Search & Stats Grid",
        "prompt": "Directly below header: A search bar placeholder (rounded-xl, #F9FAFB, 48px height) with a leading icon. Following this, a 2-column grid. Each grid item: 16px padding, rounded-2xl, #F9FAFB background, 1px border. Icon containers inside grid items are 32x32px, white, with a soft shadow."
      },
      {
        "part": "Content Cards",
        "prompt": "Cards use #FFFFFF with a '0 2px 8px -2px rgba(0,0,0,0.05)' shadow and 1px #F3F4F6 border. Padding: 20px. Includes a top row for a pill-shaped category tag (text-10px bold, uppercase, 4px/8px padding) and a timestamp. H3 titles at 16px/bold, followed by 14px/leading-relaxed body text with line-clamping."
      },
      {
        "part": "Bottom Navigation",
        "prompt": "Fixed at bottom. Background: #F9FAFB. Border-top: 1px solid #E5E7EB. Height: ~84px (including 34px bottom safe area). Four evenly spaced items. Active state: Icon and Label both #111827 and Label font-weight 700. Inactive state: #6B7280 and Label font-weight 500. Label font-size: 10px."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive FAB",
      "description": "A high-contrast floating button with rotational feedback.",
      "prompt": "56x56px circle, background #111827, icon color #FFFFFF. On click, the icon (plus) must rotate 45 degrees. Location: Bottom-right, 24px from edge. Shadow: large/soft. include 'active:scale-90' for tactile feedback."
    },
    {
      "component": "Floating Toast",
      "description": "A temporary feedback notification.",
      "prompt": "Pill-shaped notification, 48px height, background #111827, text #FFFFFF (14px font-bold). Position: centered horizontally, 96px from bottom. Animation: translate-y-4/opacity-0 to translate-y-0/opacity-100."
    },
    {
      "component": "Category Pills",
      "description": "Subtle color-coded metadata tags.",
      "prompt": "Small rectangular tags with 4px radius. Use pastel backgrounds (e.g., #EFF6FF for Blue, #FFF7ED for Orange) with high-contrast text of the same hue at 600 weight. Font: 10px Manrope Bold, all caps."
    }
  ],
  "special_notes": "Must maintain consistent 16px (4rem) horizontal padding across all containers. Transition between content tabs must use an opacity fade (0 to 1) over 200ms. Floating Action Button must always sit exactly 100px from the bottom to avoid overlap with the nav bar. Never use pure black (#000000); always use #111827 for deep text and backgrounds."
}