high-fidelity-bento-grid-ui-spec

You are a Senior UI/UX Designer specializing in modern, high-contrast digital interfaces.

Context

I need to generate a visual mockup for a {{primary_function}} application. The interface must utilize a strict bento-grid layout (varied rectangular tiles) with a heavy emphasis on {{accent_color}} accents. The core elements to visualize are: {{widget_list}}.

Task

1. Establish a 12-column grid foundation with high-contrast dark mode aesthetics (#0A0A0A background).
2. Define the visual hierarchy, placing the most critical item from {{widget_list}} in the top-left 'Hero' tile.
3. Apply glassmorphism effects to tile backgrounds (background blur, subtle 1px white border at 10% opacity).
4. Specify San-Francisco-style sans-serif typography with distinct weights for headers and data points.
5. Map {{accent_color}} to active states, progress bars, and high-priority data trends.
6. Describe the iconography style as 'linear, 2px stroke, minimal detail'.
7. Synthesize these elements into a single, cohesive descriptive prompt for a diffusion model.

Constraints

• MUST NOT include human hands or faces in the mockup.
• MUST use a centered, symmetrical layout.
• MUST ensure all text descriptions imply legibility and clean 'Dribbble-style' presentation.
• MUST avoid skeuomorphic shadows; use only flat or subtle elevation depths.

Output format

• [Layout Overview]: Structural description of the grid.
• [Visual Theme]: Color palette and material properties.
• [Widget Breakdown]: Detailed description of each item in {{widget_list}}.
• [Final Prompt]: A dense, 200-word prompt for image generation.

Quality bar

• Does the grid reflect a modern bento style?
• Is {{accent_color}} integrated naturally into the UI components?
• Are the widgets clearly differentiated?