{
  "schemaVersion": "2.0",
  "styles": [
    {
      "id": "5c0df000-0000-4000-8000-000000000001",
      "name": "Heading",
      "kind": "text",
      "properties": {
        "fontFamily": "Playfair Display",
        "fontSize": 26,
        "fontWeight": "bold",
        "fill": "#1c2430",
        "lineHeight": 1.1
      }
    },
    {
      "id": "5c0df000-0000-4000-8000-000000000002",
      "name": "Body",
      "kind": "text",
      "properties": {
        "fontFamily": "Inter",
        "fontSize": 11,
        "fontWeight": "normal",
        "fill": "#5c6663",
        "lineHeight": 1.5
      }
    },
    {
      "id": "5c0df000-0000-4000-8000-000000000003",
      "name": "Eyebrow",
      "kind": "text",
      "properties": {
        "fontFamily": "Montserrat",
        "fontSize": 8,
        "fontWeight": "bold",
        "fill": "#c0643a",
        "charSpacing": 140
      }
    },
    {
      "id": "5c0df000-0000-4000-8000-000000000004",
      "name": "Accent",
      "kind": "paint",
      "properties": {
        "color": "#c0643a"
      }
    }
  ],
  "components": [
    {
      "id": "5c0df000-0000-4000-8000-000000000008",
      "name": "Amenity chip",
      "width": 150,
      "height": 30,
      "elements": [
        {
          "$type": "rectangle",
          "id": "5c0df000-0000-4000-8000-000000000005",
          "name": "Chip background",
          "left": 0,
          "top": 0,
          "width": 150,
          "height": 30,
          "rx": 15,
          "ry": 15,
          "fill": "#ffffff",
          "stroke": "#d0d5dd",
          "strokeWidth": 0.75
        },
        {
          "$type": "circle",
          "id": "5c0df000-0000-4000-8000-000000000006",
          "name": "Chip dot",
          "left": 12,
          "top": 10,
          "width": 10,
          "height": 10,
          "radius": 5,
          "fill": "#23493a"
        },
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000007",
          "name": "Chip label",
          "left": 30,
          "top": 8,
          "width": 110,
          "height": 14,
          "text": "Amenity",
          "fontFamily": "Inter",
          "fontSize": 10,
          "fontWeight": "bold",
          "fill": "#1c2430"
        }
      ]
    },
    {
      "id": "5c0df000-0000-4000-8000-000000000010",
      "name": "Contact line",
      "width": 240,
      "height": 16,
      "elements": [
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000009",
          "name": "Phone",
          "left": 0,
          "top": 0,
          "width": 240,
          "height": 16,
          "text": "Phone",
          "fontFamily": "Inter",
          "fontSize": 10,
          "fill": "#1c2430",
          "placeholder": {
            "id": "5c0df000-0000-4000-8000-000000000011",
            "name": "Phone",
            "code": "phone",
            "placeholderType": "text",
            "required": false
          }
        }
      ]
    }
  ],
  "pages": [
    {
      "id": "5c0df000-0000-4000-8000-000000000025",
      "name": "Style lab",
      "width": 595,
      "height": 380,
      "pageFormat": "Custom",
      "backgroundColor": "#f6f1e7",
      "elements": [
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000012",
          "name": "Eyebrow",
          "left": 40,
          "top": 40,
          "width": 400,
          "height": 12,
          "text": "STYLES AND COMPONENTS",
          "fontFamily": "Montserrat",
          "fontSize": 8,
          "fontWeight": "bold",
          "fill": "#c0643a",
          "charSpacing": 140,
          "styleRefs": {
            "text": "5c0df000-0000-4000-8000-000000000003"
          }
        },
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000013",
          "name": "Title",
          "left": 40,
          "top": 58,
          "width": 515,
          "height": 34,
          "text": "A hotel page built from styles",
          "fontFamily": "Playfair Display",
          "fontSize": 26,
          "fontWeight": "bold",
          "fill": "#1c2430",
          "lineHeight": 1.1,
          "styleRefs": {
            "text": "5c0df000-0000-4000-8000-000000000001"
          }
        },
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000014",
          "name": "Intro",
          "left": 40,
          "top": 100,
          "width": 515,
          "height": 40,
          "text": "Every text on this page takes one of three text styles; the chips below are four copies of one component, each with its own label and dot colour.",
          "fontFamily": "Inter",
          "fontSize": 11,
          "fontWeight": "normal",
          "fill": "#5c6663",
          "lineHeight": 1.5,
          "styleRefs": {
            "text": "5c0df000-0000-4000-8000-000000000002"
          }
        },
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000015",
          "name": "Local override",
          "left": 40,
          "top": 160,
          "width": 515,
          "height": 20,
          "text": "Linked to Heading, but 14 pt on the element",
          "fontFamily": "Playfair Display",
          "fontSize": 14,
          "fontWeight": "bold",
          "fill": "#1c2430",
          "lineHeight": 1.1,
          "styleRefs": {
            "text": "5c0df000-0000-4000-8000-000000000001"
          },
          "styleOverrides": [
            "fontSize"
          ]
        },
        {
          "$type": "rectangle",
          "id": "5c0df000-0000-4000-8000-000000000016",
          "name": "Accent rule",
          "left": 40,
          "top": 190,
          "width": 60,
          "height": 3,
          "fill": "#c0643a",
          "styleRefs": {
            "fill": "5c0df000-0000-4000-8000-000000000004"
          }
        },
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000017",
          "name": "Amenities label",
          "left": 40,
          "top": 210,
          "width": 400,
          "height": 12,
          "text": "AMENITIES",
          "fontFamily": "Montserrat",
          "fontSize": 8,
          "fontWeight": "bold",
          "fill": "#c0643a",
          "charSpacing": 140,
          "styleRefs": {
            "text": "5c0df000-0000-4000-8000-000000000003"
          }
        },
        {
          "$type": "component_instance",
          "id": "5c0df000-0000-4000-8000-000000000018",
          "name": "Chip Wi-Fi",
          "left": 40,
          "top": 230,
          "width": 150,
          "height": 30,
          "componentId": "5c0df000-0000-4000-8000-000000000008",
          "overrides": {
            "5c0df000-0000-4000-8000-000000000007": {
              "text": "Free Wi-Fi"
            }
          }
        },
        {
          "$type": "component_instance",
          "id": "5c0df000-0000-4000-8000-000000000019",
          "name": "Chip parking",
          "left": 200,
          "top": 230,
          "width": 150,
          "height": 30,
          "componentId": "5c0df000-0000-4000-8000-000000000008",
          "overrides": {
            "5c0df000-0000-4000-8000-000000000007": {
              "text": "Parking"
            },
            "5c0df000-0000-4000-8000-000000000006": {
              "fill": "#c0643a"
            }
          }
        },
        {
          "$type": "component_instance",
          "id": "5c0df000-0000-4000-8000-000000000020",
          "name": "Chip garden",
          "left": 360,
          "top": 230,
          "width": 150,
          "height": 30,
          "componentId": "5c0df000-0000-4000-8000-000000000008",
          "overrides": {
            "5c0df000-0000-4000-8000-000000000007": {
              "text": "Garden"
            }
          }
        },
        {
          "$type": "component_instance",
          "id": "5c0df000-0000-4000-8000-000000000021",
          "name": "Chip pets",
          "left": 40,
          "top": 270,
          "width": 150,
          "height": 30,
          "componentId": "5c0df000-0000-4000-8000-000000000008",
          "overrides": {
            "5c0df000-0000-4000-8000-000000000007": {
              "text": "No pets"
            },
            "5c0df000-0000-4000-8000-000000000006": {
              "visible": false
            },
            "5c0df000-0000-4000-8000-000000000005": {
              "fill": "#eef0f3"
            }
          }
        },
        {
          "$type": "text",
          "id": "5c0df000-0000-4000-8000-000000000022",
          "name": "Contacts label",
          "left": 40,
          "top": 320,
          "width": 400,
          "height": 12,
          "text": "A FIELD INSIDE A COMPONENT",
          "fontFamily": "Montserrat",
          "fontSize": 8,
          "fontWeight": "bold",
          "fill": "#c0643a",
          "charSpacing": 140,
          "styleRefs": {
            "text": "5c0df000-0000-4000-8000-000000000003"
          }
        },
        {
          "$type": "component_instance",
          "id": "5c0df000-0000-4000-8000-000000000023",
          "name": "Contact 1",
          "left": 40,
          "top": 338,
          "width": 240,
          "height": 16,
          "componentId": "5c0df000-0000-4000-8000-000000000010",
          "overrides": {}
        },
        {
          "$type": "component_instance",
          "id": "5c0df000-0000-4000-8000-000000000024",
          "name": "Contact 2",
          "left": 300,
          "top": 338,
          "width": 240,
          "height": 16,
          "componentId": "5c0df000-0000-4000-8000-000000000010",
          "overrides": {}
        }
      ]
    }
  ],
  "sampleSets": [
    {
      "id": "5c0df000-0000-4000-8000-000000000999",
      "name": "Lab",
      "values": {
        "phone": "+44 20 7946 0000"
      }
    }
  ]
}