Social Campaign Asset Studio

# Social Campaign Asset Studio

{
  "summary": "An interactive campaign asset management studio that allows users to toggle between multiple aesthetic themes (Bold, Nostalgic, Minimalist, Dark, Professional) while previewing content in side-by-side aspect ratios (1:1 and 9:16). The UI is structured as a professional creative workspace with a high-contrast sidebar, a clean preview canvas, and utility-driven footer controls.",
  "style": {
    "description": "The design follows a modern Swiss/Minimalist philosophy. Primary typography uses 'Archivo' for bold, impactful headings, while 'JetBrains Mono' handles metadata and technical indicators. The color scheme is anchored in a neutral #FDFDFD background with deep #1A1A1A text and a signature #0047FF accent. UI elements use thin borders (1px black/10%), sharp corners, and a 40px x 40px grid overlay to create a structured, 'Studio' feel.",
    "prompt": "Create a design system with a 'Swiss Minimalist' aesthetic. \n- **Typography:** Headings in 'Archivo' (Weights: 600, 800; tracking: -0.05em). Technical metadata in 'JetBrains Mono' (Weight: 400, size: 12px). \n- **Color Palette:** Background: #FDFDFD; Text: #1A1A1A; Accent Blue: #0047FF; Grid Lines: rgba(0,0,0,0.05). \n- **Borders & Shapes:** 1px solid black at 10% opacity for containers; 0px border-radius for a brutalist/architectural look. \n- **Animations:** Use a custom cubic-bezier(0.23, 1, 0.32, 1) for all transitions. Content should 'slide-up' with opacity 0 to 1 over 0.6s. \n- **Effects:** Use 'shadow-2xl' for preview containers to lift them from the light gray workspace (#F4F4F5)."
  },
  "layout_and_structure": {
    "description": "A three-part vertical layout consisting of a fixed utility header, a split-view workspace (sidebar controls + main canvas), and a fixed status-bar footer.",
    "prompts": [
      {
        "part": "Header",
        "prompt": "A thin, high-contrast header (64px height). Left: Logo with a black square icon and bold uppercase text 'STUDIO' in blue. Right: Navigation links (Asset Manager, History) in 14px font with a 2px active indicator, and a black 'EXPORT ALL' button with a download icon."
      },
      {
        "part": "Sidebar Controls",
        "prompt": "A 320px wide left sidebar. Contains three vertical sections: 1. 'Select Campaign' using a stack of full-width buttons that invert to solid black when active. 2. 'Format Preview' toggle using 50/50 split buttons for SQUARE and STORY formats. 3. 'Active Aesthetic' info card at the bottom with an italicized description in a light zinc-50 box."
      },
      {
        "part": "Main Preview Canvas",
        "prompt": "A light gray (#F4F4F5) workspace. Top: Section header with H2 title (30px, black, uppercase) and navigation arrows (12x12 grid squares). Center: A grid-based preview area showing a 1:1 Feed Post and a 9:16 Story Post side-by-side. Both containers feature white backgrounds and heavy shadows."
      },
      {
        "part": "Footer Control Bar",
        "prompt": "A 60px height footer. Left: 5-dot pagination indicator (black for active, 20% opacity for inactive). Right: Utility actions ('PREVIEW ANIMATION' as a border-only button, 'COPY HEX CODES' as a solid black button)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Swiss-Grid Slide Canvas",
      "description": "The primary preview container featuring an architectural grid background.",
      "prompt": "Design a canvas with a 40px x 40px background grid (linear-gradient lines). Elements include a monospaced slide counter (e.g., '03') in a black pill, a 48px thick heading with a 4px solid border-left accent, and a footer-aligned 'Swipe to see more' text with a tracking of 0.4em."
    },
    {
      "component": "Campaign Select Button",
      "description": "A high-state feedback button for switching themes.",
      "prompt": "A 56px tall button with 1px border. Default: Transparent background, black text, 50% opacity icon. Active: Black background, white text, 100% opacity icon. Font: 14px bold. Interaction: Border color shifts on hover before background fill."
    }
  ]
}