Unsplash — Linear/Zed Redesign

# Unsplash — Linear/Zed Redesign

{
  "summary": "A clean, monochromatic photography platform redesign utilizing a fixed sidebar navigation, surgical typography, and a dense masonry image grid. The interface prioritizes content through a flat UI, using #111111 for primary actions and #E5E5E5 for structural borders.",
  "style": {
    "description": "Flat, high-contrast monochromatic theme with a focus on 'surgical' typography and strict spacing. Uses General Sans for headings and Instrument Sans for utility text. Animation is limited to subtle fade-ups and sharp transition states.",
    "prompt": "Create a design system using a monochromatic palette: Background #FFFFFF, Primary Text #111111, Secondary Text #767676, Muted Text #A3A3A3, and Borders #E5E5E5. \n- **Typography**: Use 'General Sans' for headers (font-size: 32px, weight: 700, tracking: tight) and 'Instrument Sans' for UI elements (font-size: 12px-15px). \n- **Interactions**: Implement 0.15s ease transitions for hover states. Active states should use a background of #F0F0F0. \n- **Animations**: Use a standard 'fade-up' entrance (400ms cubic-bezier(0.4, 0, 0.2, 1)) for all content blocks with 50ms incremental delays. \n- **Borders**: Strictly 1px solid #E5E5E5 for all separators and card outlines. \n- **Shadows**: None. Rely on borders and background shifts for depth."
  },
  "layout_and_structure": {
    "description": "A multi-layered layout featuring a fixed ultra-narrow sidebar, a sticky top-bar, a scrolling category sub-navigation, and a masonry content grid.",
    "prompts": [
      {
        "part": "Left Sidebar",
        "prompt": "A fixed 52px width sidebar on the left. Background #FFFFFF, border-right 1px #E5E5E5. Contains 36x36px square-ish icon buttons (rounded-lg) with #111111 icons. Include a top section for branding/core navigation and a bottom section for user/settings icons."
      },
      {
        "part": "Top Header",
        "prompt": "A 52px height sticky header. Contains a centered search bar (max-width 560px) with a #F5F5F5 background, rounded-lg corners, and 14px text. Right side contains utility links in 12px bold typography."
      },
      {
        "part": "Category Navigation",
        "prompt": "A 42px height horizontal scrolling bar below the header. Border-bottom 1px #E5E5E5. Use 12px medium weight text links with a 20px gap. Active state features a 1.5px solid #111111 underline directly below the text."
      },
      {
        "part": "Hero Section",
        "prompt": "A two-column layout with 40px top padding. Left column: 480px width, containing a 32px bold title and 15px secondary text. Right column: A feature card (border #E5E5E5) containing a text area and a 3-column micro-grid of thumbnail images."
      },
      {
        "part": "Masonry Grid",
        "prompt": "A 3-column masonry layout with a 20px gap between items. Images should have a 6px border-radius. On hover, show a 30% black overlay with utility buttons (heart, plus, download) positioned at the corners."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Image Card",
      "description": "Masonry card with smart hover overlay controls.",
      "prompt": "Create an image container with 6px border radius. On hover, apply a transition: opacity 0.2s ease to an overlay. The overlay must contain: Top-right: two 32x32px buttons (#FFFFFF/90 bg, rounded) with icons. Bottom-left: User avatar (28px circle) and username (12px white). Bottom-right: Download button (32x32px, #FFFFFF/90 bg)."
    },
    {
      "component": "Surgical Search Input",
      "description": "Minimalist input box with focus highlight.",
      "prompt": "Design a search box with background #F5F5F5, 14px Instrument Sans text, and Lucide search/scan icons. On focus, apply a 1.5px solid #111111 outline without changing the box size."
    }
  ],
  "special_notes": "MUST NOT use gradients, drop shadows, or rounded corners exceeding 8px. MUST maintain strict vertical and horizontal alignment based on the 52px header/sidebar unit. ALL icons must be monochromatic Lucide-style line icons."
}