# gdb-hub / gdb__layout-1-s63

- taskset: [gdb-hub](https://harnessreport.com/tasks/gdb-hub.md)
- difficulty: hard
- category: design
- language: 
- runnable from the site: no
- agent timeout: 3600s

## Results by harness

_none yet_

## Instruction

```
# GDB: layout-1

## Task

You are an expert end-to-end layout designer.
User intent: Create a professional presentation slide or report cover that introduces a new section or topic, featuring a brief summary of content, prominent branding information, and an engaging, partially obscured background image with a clear graphic highlight or placeholder.
Image description: The image displays a two-column layout, divided vertically down the center. The left column is further divided horizontally into two sections: an upper light beige (or off-white) panel and a lower vibrant orange panel. The upper beige panel contains the title "INTRODUCTION" in black, centrally aligned at the top, followed by a multi-line paragraph of placeholder text (Lorem ipsum) in a serif font, left-aligned. The lower orange panel features "COMPANY NAME" in white, left-aligned towards the bottom. The right column is entirely occupied by a photograph featuring a person from behind, wearing a yellow long-sleeved top and black tights, kneeling on a wooden floor marked with red and green lines, reminiscent of a sports court. Overlaid on this photograph, obscuring part of the person's lower back and the floor, is a large, solid yellow square placeholder. At the bottom-right corner of the photographic section, "MONTH XX YEAR" is displayed in white text.
Aesthetic/style cues: The design exhibits a modern and clean aesthetic with a strong emphasis on asymmetric balance and bold color blocking. The typography uses a classic serif font for the main text, conveying a sense of formality, contrasted with a clean sans-serif for titles and metadata, ensuring readability and a contemporary touch. Spacing is generous, providing ample negative space around text elements, particularly in the left panel, which enhances legibility and gives the layout a sophisticated feel. The composition is intentionally asymmetrical, with the text-heavy, color-blocked left side balancing the dominant, photographic right side. The vibrant orange and bright yellow square create a dynamic color palette against the muted beige and the natural tones of the wooden floor and the green/red court lines, adding visual interest and guiding the eye. The yellow square acts as a prominent focal point, suggesting a placeholder for a key graphic, logo, or interactive element. The overall style feels professional yet creative, suitable for a contemporary presentation or report cover.
Required texts to include in the layout (verbatim, legible):
- "INTRODUCTION"
- "A brief summary of what's to come. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis velit mi teugiat dolor pharetra ac."
- "Company name"
- "Month XX YEAR"
Target ratio: 1920:1080 (~1.778).

Requirements:
- Produce one cohesive layout image.
- Keep typography readable and hierarchy clear.
- Use a consistent visual and color system.
- Include all required texts with exact spelling.
- Avoid gibberish text artifacts.

## Output

Write your answer to `/workspace/output.png`.
Write ONLY the answer — no explanation, no markdown fences, no extra text.

### Image output requirements

- You MUST produce a real rasterized image at `/workspace/output.png`.
- `python3` is available. `Pillow`, `cairosvg`, and `numpy` are installed in the environment and importable.
- Preferred approach: build an SVG describing the design, then rasterize it with `python3 -c "import cairosvg; cairosvg.svg2png(url='design.svg', write_to='/workspace/output.png', output_width=1024)"`.
- Alternatively, use Pillow's `ImageDraw`/`ImageFont` to draw directly and save a PNG.
- Do NOT write natural-language descriptions or SVG-as-text into `output.png` — the file must be a valid image.
```
---
Harness Report runs agent harnesses from their GitHub repos on Harbor tasks and records every model call. Every page is also `.md` and `.json`; index: https://harnessreport.com/llms.txt · MCP: https://harnessreport.com/mcp