Neural Match Brutalist Profile

# Neural Match Brutalist Profile

{
  "summary": "A data-centric, brutalist profile interface characterized by pure black backgrounds, oversized uppercase headers, and intricate metadata sections. The design relies on high-contrast white text, subtle zinc-gray accents, and 1px borders to define hierarchy, creating a look that is both clinical and premium.",
  "style": {
    "description": "The style is built on 'Inter' typography, utilizing font weights from Light (300) to Black (900). It features a monochrome palette (#000000, #FFFFFF) with zinc grays (#18181b to #71717a) used for secondary elements and borders. Animations are limited to smooth color transitions and grayscale-to-color shifts on hover, maintaining a disciplined, non-distracting user experience.",
    "prompt": "Create a design based on a Pure Black (#000000) background. Use 'Inter' as the primary font. Typography rules: Hero headers in font-weight 900 (Black), uppercase, tracking-tighter; section headers in font-weight 900, uppercase, tracking-tighter; labels and metadata in 10px font-weight 900, uppercase, tracking-[0.3em] (wide letter spacing). Border style: 1px solid using Zinc-800 (#27272a) for structural elements and Zinc-900 (#18181b) for subtle separators. Interactive elements: Buttons use a 1px white border with an 'inverted' hover effect (white background, black text). Micro-interactions: Images should default to grayscale and transition to full color on hover over their parent container. Spacing: Use a 4px-based grid with large vertical gaps (24 units/96px) between major sections."
  },
  "layout_and_structure": {
    "description": "A top-heavy profile layout with a massive hero identity section, followed by a multi-column detailed configuration area and a primary content feed for matches and interactions.",
    "prompts": [
      {
        "part": "Header / Identity Section",
        "prompt": "Layout: Flex container with large circular avatar (200px diameter) on the left/center. Avatar includes a high-contrast 1px border and a status indicator dot (Green-500) positioned bottom-right with a 4px black border stroke. To the right: a stack containing a small uppercase 'Role' badge (1px white border), an ID string in 12px Mono font, followed by a massive H1 (font-size: 8rem) and an italic light-weight bio paragraph (font-size: 1.5rem, max-width: 40rem). An 'Edit' button sits top-right."
      },
      {
        "part": "Profile Configuration Grid",
        "prompt": "Layout: Two-column grid (1/3 to 2/3 ratio). Left column: Configuration data. Use 10px uppercase labels above a series of rows; each row has a label (Zinc-600) and a value (Bold White) separated by a 1px Zinc-900 bottom border. Below this, an 'Interests' tag cloud using 10px bold uppercase text inside 1px zinc-800 bordered boxes. Right column: Primary content area for list-based and grid-based feeds."
      },
      {
        "part": "Matches Grid",
        "prompt": "Layout: 3-column grid of square cards. Each card: 1px Zinc-800 border, 16px padding. Elements: Square image container with 80% opacity and grayscale filter. On hover: card border becomes white, image becomes 100% opacity and full color. Below image: 12px bold uppercase title and a tiny monospaced 'score' or secondary label."
      },
      {
        "part": "Conversations List",
        "prompt": "Layout: Vertical stack with 1px Zinc-900 separators. Each item: Flex row with 48px circular grayscale avatar, name in bold uppercase (12px), and a truncated message in 14px Zinc-500. Interaction: On hover, add 16px left/right padding and change the right-aligned chevron icon color to white. Use a 'time-ago' label in 9px mono font."
      },
      {
        "part": "Footer",
        "prompt": "Layout: Horizontal flex bar at the bottom. Typography: 9px font-weight 900, uppercase, tracking-[0.4em], Zinc-700. Content: System versioning, 'Last Synchronized' timestamp, and legal links separated by wide gaps."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Inverted Brutalist Button",
      "description": "A stark, high-contrast action button.",
      "prompt": "1px solid White border, no background, white text, 12px font-weight: bold, uppercase, tracking-widest, transition-duration: 300ms. On hover: background-color: #FFFFFF, color: #000000."
    },
    {
      "component": "Data Tag Pill",
      "description": "Minimalist identification tag.",
      "prompt": "Border: 1px solid #27272a; padding: 4px 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #71717a; transition: all 200ms. On hover: border-color: #ffffff, color: #ffffff."
    }
  ]
}