Blog Page- Knowledge Hub

# Blog Page- Knowledge Hub

{
  "summary": "A professional editorial blog wireframe with a classic newspaper-meets-digital-interface aesthetic. It uses strictly grayscale tones (#000000 to #FFFFFF), high-contrast borders, and a sophisticated mix of serif headlines and monospaced or sans-serif metadata. The layout is structured around a 12-column grid with a clear visual hierarchy from a large hero feature to a detailed sidebar.",
  "style": {
    "description": "The style is 'Editorial Brutalism-Lite', using a grayscale color palette and sharp geometric shapes. Typography pairs a classic Serif for headlines (emphasizing authority) with a tracking-heavy Sans-Serif for navigation and labels (emphasizing modern UI). Key elements include 1px solid borders for section separation and custom CSS-driven image placeholders with diagonal cross-lines.",
    "prompt": "Create a design system using a strictly grayscale palette: Primary Black (#111827), Pure White (#FFFFFF), and a range of Grays (#F3F4F6, #E5E7EB, #9CA3AF, #6B7280). Typography: Headlines use a Medium weight Serif font (e.g., Georgia or similar) with tight leading (1.1); Navigation and UI labels use a Sans-Serif font (e.g., Inter) in uppercase with letter-spacing 0.1em; Body text is font-light sans-serif at 18px with 1.6 leading. Borders must be 1px solid #E5E7EB. Animations are limited to color transitions (text-gray-400 to text-black) and simple border-color changes over 200ms ease-in-out. Hover states on titles should trigger a simple 1px underline with a 4px offset."
  },
  "layout_and_structure": {
    "description": "A responsive 12-column grid layout with a sticky header, a wide hero section, and a primary content area split into an 8-column article feed and a 4-column sidebar.",
    "prompts": [
      {
        "part": "Sticky Header",
        "prompt": "Height: 80px. Background: #FFFFFF with 1px bottom border (#E5E7EB). Elements: Mobile menu icon (left, hidden on desktop), Centered/Left Logo (black block, 128x32px), Desktop Nav (centered, uppercase text-sm, 32px spacing), Actions (search icon and 'Subscribe' button with 1px black border and no-fill)."
      },
      {
        "part": "Hero Featured Section",
        "prompt": "Grid: 12-column. Image: 8-column span, 16:9 aspect ratio, wireframe 'X' styling. Content: 4-column span, vertical alignment center. Include a 'Design' category tag (#F3F4F6 background), a Serif title (text-5xl), and a light-weight excerpt with a 2px left border (#E5E7EB)."
      },
      {
        "part": "Article Feed",
        "prompt": "8-column span. Section header: Uppercase tracking-widest text-xl with 1px black bottom border. Article cards: 2-column grid (within the 8-column span), 3:2 aspect ratio images, Serif titles (text-2xl), 3-line excerpt limit (line-clamp)."
      },
      {
        "part": "Sidebar",
        "prompt": "4-column span, 48px left padding. Components: 1. About Box (#F9FAFB background, serif description). 2. Category List (flex justify-between, 1px bottom gray-100 borders). 3. Trending list (small thumbnails 80x80px). 4. Newsletter Box (2px solid black border, input with gray-50 background)."
      },
      {
        "part": "Pagination & Footer",
        "prompt": "Pagination: Centered numeric blocks, active state #111827 with white text. Footer: #F9FAFB background, 1px top border, text-xs mono-spaced copyright, flex social icons (lucide:twitter, etc.) in gray-400."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Wireframe Image Placeholder",
      "description": "A geometric placeholder indicating where an image will be placed, featuring an 'X' across the box.",
      "prompt": "Element with background #F3F4F6 and a container-relative size. Apply two CSS linear-gradient backgrounds to create a 1px diagonal cross from corner to corner (#E5E7EB color). Center a small white label with a black 1px border inside the box (e.g., 'IMG' or '1280x720')."
    },
    {
      "component": "Brutalist Newsletter Box",
      "description": "High-impact subscription form for the sidebar.",
      "prompt": "A container with a 2px solid #111827 border. Inside: a large mail icon, bold uppercase heading, and a full-width input field with a 1px gray border. The primary button is solid #111827 with white uppercase text, filling the container width."
    }
  ],
  "special_notes": "MUST: Maintain a strict grayscale theme; no accent colors. MUST: Use specific wireframe image placeholders with CSS-generated 'X' patterns. MUST: Ensure all buttons and tags are uppercase with tracking-widest. DO NOT: Use rounded corners (keep it 0px or very minimal 2px). DO NOT: Use heavy drop shadows; use 1px borders instead."
}