# gdb-hub / gdb__template-4-s46

- 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`
- `/workspace/inputs/input_2.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": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/background_image_ced52ad4-9bb9-461b-89d6-0ff3f17ab96d.png",
        "left": "-793.714px",
        "top": "-85.3521px",
        "width": "1873.71px",
        "height": "1250.7px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "visible"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/2944e58c-3c3f-49c3-9bf9-70a0971ede0a.jpg",
        "id": "0-0",
        "left": "110.956px",
        "top": "108.0px",
        "width": "538.578px",
        "height": "972.0px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/d7a750e7-9ab7-4d5b-b0a6-9c287bacba8d.jpg",
        "id": "0-0",
        "left": "573.568px",
        "top": "197.027px",
        "width": "506.432px",
        "height": "685.9459999999999px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/80c8ef00-db26-4f67-9b27-bce16a60e9a9.jpg",
        "id": "0-0",
        "left": "573.568px",
        "top": "802.037px",
        "width": "506.432px",
        "height": "80.9357px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "Fran",
        "left": "649.534px",
        "top": "493.681px",
        "width": "400.837px",
        "height": "63px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "53px",
        "fontFamily": "Montserrat--900",
        "fontWeight": "900",
        "textAlign": "left",
        "lineHeight": "47.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Andrad",
        "left": "649.534px",
        "top": "553.681px",
        "width": "347.277px",
        "height": "39px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "33px",
        "fontFamily": "Montserrat--900",
        "fontWeight": "900",
        "textAlign": "left",
        "lineHeight": "29.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "italic"
      },
      {
        "type": "TEXT",
        "text": "SR. MARKETING",
        "left": "648.0px",
        "top": "598.76233px",
        "width": "347.277px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Ensure social media content is backed by accurate data & research.",
        "left": "648.0px",
        "top": "671.20733px",
        "width": "420.25px",
        "height": "100.267px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "@LOREMIPSUM",
        "left": "648.0px",
        "top": "829.50533px",
        "width": "325.31px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(16, 43, 78)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "GREAT COMPANY",
        "left": "689.71634px",
        "top": "106.13333px",
        "width": "281.601px",
        "height": "48.2667px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "right",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/535526ee-2480-44c7-be28-83b4b2f2fadb.jpg",
        "id": "0-0",
        "left": "0.0px",
        "top": "0.0px",
        "width": "110.956px",
        "height": "685.946px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "LOREMIPSUM.CO",
        "left": "623.70767px",
        "top": "947.86633px",
        "width": "345.743px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "right",
        "lineHeight": "26.0px",
        "letterSpacing": "0.1em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(252, 252, 252)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/background_image_8a4f09bb-6ae8-439b-8fb7-221f678de2fd.jpeg",
        "left": "-270.0px",
        "top": "0.0px",
        "width": "1620.0px",
        "height": "1080.0px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "visible"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/99895d1f-6afa-46c8-9a82-7fe56410c476.jpg",
        "id": "0-0",
        "left": "0.0px",
        "top": "0.0px",
        "width": "614.432px",
        "height": "1080.0px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/fa856bf2-7e79-4ee9-b462-b526d68dbefc.jpg",
        "id": "0-0",
        "left": "467.027px",
        "top": "108.0px",
        "width": "612.973px",
        "height": "864.0px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/27c4115a-6792-4b04-ba00-89297cdb2ee8.jpg",
        "id": "0-0",
        "left": "108.0px",
        "top": "197.027px",
        "width": "506.432px",
        "height": "685.9459999999999px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/476861c8-c231-4bfc-9431-5d62d1ef7636.jpg",
        "id": "0-0",
        "left": "108.0px",
        "top": "802.037px",
        "width": "506.432px",
        "height": "80.9357px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "Kim",
        "left": "183.966px",
        "top": "493.681px",
        "width": "400.837px",
        "height": "63px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "53px",
        "fontFamily": "Montserrat--900",
        "fontWeight": "900",
        "textAlign": "left",
        "lineHeight": "47.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Ng",
        "left": "183.966px",
        "top": "553.681px",
        "width": "347.277px",
        "height": "39px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "33px",
        "fontFamily": "Montserrat--900",
        "fontWeight": "900",
        "textAlign": "left",
        "lineHeight": "29.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "italic"
      },
      {
        "type": "TEXT",
        "text": "FINANCE/HR",
        "left": "182.432px",
        "top": "598.76233px",
        "width": "347.277px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Importantly, ensure social media content is backed by accurate data and research and is always updated.",
        "left": "182.432px",
        "top": "671.20733px",
        "width": "420.25px",
        "height": "100.267px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "@LOREMIPSUM",
        "left": "182.432px",
        "top": "829.50533px",
        "width": "325.31px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(16, 43, 78)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "GREAT COMPANY",
        "left": "110.956px",
        "top": "106.13333px",
        "width": "281.601px",
        "height": "48.2667px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "LOREMIPSUM.CO",
        "left": "109.534px",
        "top": "947.86633px",
        "width": "345.743px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.1em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      }
    ],
    "background": "rgb(252, 252, 252)",
    "width": "1080px",
    "height": "1080px",
    "duration": 3
  },
  {
    "components": [
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/background_image_c24273ee-14f8-43b1-9172-cf3483000bbc.png",
        "left": "-268.989px",
        "top": "0.0px",
        "width": "1617.98px",
        "height": "1080.0px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "visible"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/17035fb7-3b8a-4631-947e-6aeca4b9201e.jpg",
        "id": "0-0",
        "left": "0.0px",
        "top": "0.0px",
        "width": "540.0px",
        "height": "864.0px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/9a282dd0-5c18-4129-a540-946ac993643a.jpg",
        "id": "0-0",
        "left": "465.568px",
        "top": "197.027px",
        "width": "506.432px",
        "height": "685.9459999999999px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "IMAGE",
        "src": "https://storage.googleapis.com/lica-video/e868cfa3-74f3-492a-aba1-470bec91957c.jpg",
        "id": "0-0",
        "left": "465.568px",
        "top": "802.037px",
        "width": "506.432px",
        "height": "80.9357px",
        "transform": "rotate(0deg)",
        "opacity": 1,
        "overflow": "hidden"
      },
      {
        "type": "TEXT",
        "text": "Val",
        "left": "541.534px",
        "top": "493.681px",
        "width": "400.837px",
        "height": "63px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "53px",
        "fontFamily": "Montserrat--900",
        "fontWeight": "900",
        "textAlign": "left",
        "lineHeight": "47.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Kilmer",
        "left": "541.534px",
        "top": "553.681px",
        "width": "347.277px",
        "height": "39px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "33px",
        "fontFamily": "Montserrat--900",
        "fontWeight": "900",
        "textAlign": "left",
        "lineHeight": "29.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "italic"
      },
      {
        "type": "TEXT",
        "text": "VP",
        "left": "540.0px",
        "top": "598.76233px",
        "width": "347.277px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "Ensure social media shares are backed by accurate data & research.",
        "left": "540.0px",
        "top": "671.20733px",
        "width": "420.25px",
        "height": "100.267px",
        "transform": "none",
        "color": "rgb(252, 252, 252)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0em",
        "textTransform": "none",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text": "@LOREMIPSUM",
        "left": "540.0px",
        "top": "829.50533px",
        "width": "325.31px",
        "height": "22.2667px",
        "transform": "none",
        "color": "rgb(16, 43, 78)",
        "fontSize": "18px",
        "fontFamily": "Montserrat--500",
        "fontWeight": "500",
        "textAlign": "left",
        "lineHeight": "26.0px",
        "letterSpacing": "0.2em",
        "textTransform": "uppercase",
        "fontStyle": "normal"
      },
      {
        "type": "TEXT",
        "text":
```
_instruction cut at 16k characters_
---
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