# gdb-hub / gdb__template-4-s13

- 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: template-4

## Input Files

- `/workspace/inputs/input_0.png`
- `/workspace/inputs/input_1.png`

## Task

You are a design system assistant. Given several example layouts from the same template as style context, and one skeleton layout with structural data but missing visual styles, complete the skeleton by filling in the missing style properties (fontFamily, fontSize, color, backgroundColor, opacity, textAlign) to match the template's style. Return ONLY a valid JSON layout object.

Style context (sibling layouts):
[
  {
    "components": [
      {
        "type": "TEXT",
        "text": "CONSECT",
        "left": "87.6936px",
        "top": "116.99343px",
        "width": "160.613px",
        "height": "26.8863px",
        "transform": "none",
        "color": "rgb(243, 243, 243)",
        "fontSize": "23px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "31.496000000000002px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "fashion & style",
        "left": "83.514235px",
        "top": "145.18262000000001px",
        "width": "170.942px",
        "height": "15.6192px",
        "transform": "none",
        "color": "rgb(243, 243, 243)",
        "fontSize": "13px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "18.288px",
        "letterSpacing": "0.15em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "S",
        "left": "115.608px",
        "top": "36.69363px",
        "width": "54.6688px",
        "height": "86.9991px",
        "transform": "rotate(90deg)",
        "color": "rgb(243, 243, 243)",
        "fontSize": "73px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "101.6px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "C",
        "left": "151.096px",
        "top": "64.45557px",
        "width": "48.6407px",
        "height": "39.1161px",
        "transform": "rotate(-180deg)",
        "color": "rgb(243, 243, 243)",
        "fontSize": "33px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "right",
        "lineHeight": "45.72px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "S",
        "left": "165.723px",
        "top": "6.171030000000001px",
        "width": "54.6688px",
        "height": "86.9991px",
        "transform": "rotate(-90deg)",
        "color": "rgb(243, 243, 243)",
        "fontSize": "73px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "101.6px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "C",
        "left": "136.264px",
        "top": "34.16317px",
        "width": "48.6407px",
        "height": "39.1161px",
        "transform": "none",
        "color": "rgb(243, 243, 243)",
        "fontSize": "33px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "right",
        "lineHeight": "45.72px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(60, 60, 60)",
    "width": "336px",
    "height": "192px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/9912b041-34ca-4cbd-a398-e34b68e4a3bb.png",
        "left": "301.726px",
        "top": "148.18px",
        "width": "10.2745px",
        "height": "10.2745px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/8848c214-05fa-41e9-95e6-ba216e462a39.png",
        "left": "162.816px",
        "top": "148.086px",
        "width": "10.368px",
        "height": "10.368px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/254db55f-0c6c-4333-8ebf-24440b9e4bf2.png",
        "left": "24.0px",
        "top": "148.086px",
        "width": "10.368px",
        "height": "10.368px",
        "transform": "none",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "CONSECT.",
        "left": "130.002px",
        "top": "56.50533px",
        "width": "75.9953px",
        "height": "12.0431px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "10px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "14.081620000000001px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "fashion & life",
        "left": "133.999px",
        "top": "70.68177px",
        "width": "72.4024px",
        "height": "7.06762px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "5px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "8.247806px",
        "letterSpacing": "0.15em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "S",
        "left": "144.766px",
        "top": "12.1223px",
        "width": "24.1752px",
        "height": "38.6044px",
        "transform": "rotate(90deg)",
        "color": "rgb(60, 60, 60)",
        "fontSize": "32px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "45.061184000000004px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "C",
        "left": "160.525px",
        "top": "31.414740000000002px",
        "width": "21.5095px",
        "height": "17.3974px",
        "transform": "rotate(-180deg)",
        "color": "rgb(60, 60, 60)",
        "fontSize": "14px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "right",
        "lineHeight": "20.317766000000002px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "S",
        "left": "167.059px",
        "top": "-1.3751000000000015px",
        "width": "24.1752px",
        "height": "38.6044px",
        "transform": "rotate(-90deg)",
        "color": "rgb(60, 60, 60)",
        "fontSize": "32px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "45.061184000000004px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "C",
        "left": "153.966px",
        "top": "18.118840000000002px",
        "width": "21.5095px",
        "height": "17.3974px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "14px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "right",
        "lineHeight": "20.317766000000002px",
        "letterSpacing": "0em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Olivia Wilson",
        "left": "104.956px",
        "top": "97.08761px",
        "width": "126.087px",
        "height": "19.1008px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "16px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "22.352px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "CONSECT CO. Manager",
        "left": "105.376px",
        "top": "116.588px",
        "width": "126.087px",
        "height": "9.21173px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "8px",
        "fontFamily": "Belleza--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "10.837328px",
        "letterSpacing": "0.07em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "lorem@ipsum.co",
        "left": "24.0px",
        "top": "161.23600000000002px",
        "width": "88.1446px",
        "height": "7.67643px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "6px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "left",
        "lineHeight": "9.031104px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "+531-842",
        "left": "136.161px",
        "top": "161.23600000000002px",
        "width": "63.6777px",
        "height": "7.67643px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "6px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "center",
        "lineHeight": "9.031104px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Viae Lorem 42, Dol.",
        "left": "219.146px",
        "top": "161.23600000000002px",
        "width": "92.8539px",
        "height": "7.67643px",
        "transform": "none",
        "color": "rgb(60, 60, 60)",
        "fontSize": "6px",
        "fontFamily": "Cardo--400",
        "fontWeight": "400",
        "textAlign": "right",
        "lineHeight": "9.031104px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(243, 243, 243)",
    "width": "336px",
    "height": "192px",
    "duration": 3
  }
]

Skeleton to style:
{
  "width": "336px",
  "height": "192px",
  "components": [
    {
      "type": "TEXT",
      "text": "CONSECT",
      "left": "87.4248px",
      "top": "114.19533px",
      "width": "161.15px",
      "height": "27.2338px",
      "transform": "none"
    },
    {
      "type": "TEXT",
      "text": "fashion & style",
      "left": "88.1312px",
      "top": "143.56267px",
      "width": "164.138px",
      "height": "15.9824px",
      "transform": "none"
    },
    {
      "type": "TEXT",
      "text": "S",
      "left": "115.459px",
      "top": "27.6813px",
      "width": "54.6688px",
      "height": "87.2983px",
      "transform": "rotate(90deg)"
    },
    {
      "type": "TEXT",
      "text": "C",
      "left": "151.096px",
      "top": "60.22144px",
      "width": "48.6407px",
      "height": "39.3418px",
      "transform": "rotate(-180deg)"
    },
    {
      "type": "TEXT",
      "text": "S",
      "left": "165.872px",
      "top": "-2.841300000000002px",
      "width": "54.6688px",
      "height": "87.2983px",
      "transform": "rotate(-90deg)"
    },
    {
      "type": "TEXT",
      "text": "C",
      "left": "136.264px",
      "top": "30.15464px",
      "width": "48.6407px",
      "height": "39.3418px",
      "transform": "none"
    }
  ]
}

## Output

Write your answer to `/workspace/answer.json`.
Write ONLY the answer — no explanation, no markdown fences, no extra text.
```
---
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