{
  "name": "Character Creation — Hair Tab",
  "shapes": {
    "bg": {
      "type": "Rectangle",
      "left": 0, "top": 0, "width": 1140, "height": 780,
      "fillColor": "#1a1e24"
    },
    "title": {
      "type": "Text",
      "parent": "bg",
      "left": 440, "top": 16,
      "text": "CHARACTER CREATION",
      "fontColor": "#c8d0e0", "fontSize": 24
    },
    "preview-panel": {
      "type": "Rectangle",
      "parent": "bg",
      "left": 20, "top": 56, "width": 700, "height": 600,
      "fillColor": "#2a3040", "strokeColor": "#333340",
      "corners": [8, 8, 8, 8]
    },
    "preview-figure": {
      "type": "Rectangle",
      "parent": "preview-panel",
      "left": 260, "top": 110, "width": 220, "height": 460,
      "fillColor": "#3a4050", "strokeColor": "#555568",
      "corners": [4, 4, 4, 4]
    },
    "cam-toggle": {
      "type": "Rectangle",
      "parent": "preview-panel",
      "left": 620, "top": 68, "width": 88, "height": 28,
      "fillColor": "#2a3040", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "cam-toggle-label": {
      "type": "Text",
      "parent": "cam-toggle",
      "left": 632, "top": 73,
      "text": "Frontal",
      "fontColor": "#c8d8f0", "fontSize": 11
    },
    "btn-rot-left": {
      "type": "Rectangle",
      "parent": "preview-panel",
      "left": 270, "top": 590, "width": 80, "height": 36,
      "fillColor": "#2a3040", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "btn-rot-left-label": {
      "type": "Text",
      "parent": "btn-rot-left",
      "left": 288, "top": 597,
      "text": "[Q] <",
      "fontColor": "#c8d8f0", "fontSize": 13
    },
    "btn-rot-right": {
      "type": "Rectangle",
      "parent": "preview-panel",
      "left": 390, "top": 590, "width": 80, "height": 36,
      "fillColor": "#2a3040", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "btn-rot-right-label": {
      "type": "Text",
      "parent": "btn-rot-right",
      "left": 408, "top": 597,
      "text": "> [E]",
      "fontColor": "#c8d8f0", "fontSize": 13
    },

    "right-panel": {
      "type": "Rectangle",
      "parent": "bg",
      "left": 740, "top": 56, "width": 380, "height": 600,
      "fillColor": "#1a1e24", "strokeColor": "#333340",
      "corners": [8, 8, 8, 8]
    },
    "tab-body": {
      "type": "Rectangle",
      "parent": "right-panel",
      "left": 740, "top": 64, "width": 60, "height": 30,
      "fillColor": "#1a1e24", "strokeColor": "#333340",
      "corners": [4, 4, 0, 0]
    },
    "tab-body-label": {
      "type": "Text",
      "parent": "tab-body",
      "left": 750, "top": 71,
      "text": "Body",
      "fontColor": "#c8d0e0", "fontSize": 11
    },
    "tab-head": {
      "type": "Rectangle",
      "parent": "right-panel",
      "left": 802, "top": 64, "width": 58, "height": 30,
      "fillColor": "#1a1e24", "strokeColor": "#333340",
      "corners": [4, 4, 0, 0]
    },
    "tab-head-label": {
      "type": "Text",
      "parent": "tab-head",
      "left": 812, "top": 71,
      "text": "Head",
      "fontColor": "#c8d0e0", "fontSize": 11
    },
    "tab-hair": {
      "type": "Rectangle",
      "parent": "right-panel",
      "left": 862, "top": 64, "width": 52, "height": 30,
      "fillColor": "#2a3040", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 0, 0]
    },
    "tab-hair-label": {
      "type": "Text",
      "parent": "tab-hair",
      "left": 872, "top": 71,
      "text": "Hair",
      "fontColor": "#c8d8f0", "fontSize": 11
    },
    "tab-clothing": {
      "type": "Rectangle",
      "parent": "right-panel",
      "left": 916, "top": 64, "width": 76, "height": 30,
      "fillColor": "#1a1e24", "strokeColor": "#333340",
      "corners": [4, 4, 0, 0]
    },
    "tab-clothing-label": {
      "type": "Text",
      "parent": "tab-clothing",
      "left": 922, "top": 71,
      "text": "Clothing",
      "fontColor": "#c8d0e0", "fontSize": 11
    },
    "tab-accessories": {
      "type": "Rectangle",
      "parent": "right-panel",
      "left": 994, "top": 64, "width": 94, "height": 30,
      "fillColor": "#1a1e24", "strokeColor": "#333340",
      "corners": [4, 4, 0, 0]
    },
    "tab-accessories-label": {
      "type": "Text",
      "parent": "tab-accessories",
      "left": 1000, "top": 71,
      "text": "Accessories",
      "fontColor": "#c8d0e0", "fontSize": 11
    },

    "tab-content": {
      "type": "Rectangle",
      "parent": "right-panel",
      "left": 740, "top": 94, "width": 380, "height": 562,
      "fillColor": "#2a3040", "strokeColor": "#333340",
      "corners": [0, 0, 8, 8]
    },
    "search-bar": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 752, "top": 102, "width": 356, "height": 32,
      "fillColor": "#3a4050", "strokeColor": "#555568",
      "corners": [4, 4, 4, 4]
    },
    "search-placeholder": {
      "type": "Text",
      "parent": "search-bar",
      "left": 762, "top": 109,
      "text": "Search...",
      "fontColor": "#555568", "fontSize": 12
    },

    "hair-section-label": {
      "type": "Text",
      "parent": "tab-content",
      "left": 756, "top": 146,
      "text": "HAIR STYLE",
      "fontColor": "#c8d0e0", "fontSize": 12
    },
    "hair-1": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 756, "top": 164, "width": 104, "height": 90,
      "fillColor": "#3a4050", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "hair-1-label": {
      "type": "Text",
      "parent": "hair-1",
      "left": 772, "top": 234,
      "text": "Short A",
      "fontColor": "#c8d8f0", "fontSize": 10
    },
    "hair-2": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 868, "top": 164, "width": 104, "height": 90,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "hair-2-label": {
      "type": "Text",
      "parent": "hair-2",
      "left": 884, "top": 234,
      "text": "Short B",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "hair-3": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 980, "top": 164, "width": 104, "height": 90,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "hair-3-label": {
      "type": "Text",
      "parent": "hair-3",
      "left": 992, "top": 234,
      "text": "Medium A",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "hair-4": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 756, "top": 262, "width": 104, "height": 90,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "hair-4-label": {
      "type": "Text",
      "parent": "hair-4",
      "left": 768, "top": 332,
      "text": "Medium B",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "hair-5": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 868, "top": 262, "width": 104, "height": 90,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "hair-5-label": {
      "type": "Text",
      "parent": "hair-5",
      "left": 892, "top": 332,
      "text": "Long A",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "hair-6": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 980, "top": 262, "width": 104, "height": 90,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "hair-6-label": {
      "type": "Text",
      "parent": "hair-6",
      "left": 1008, "top": 332,
      "text": "Bald",
      "fontColor": "#c8d0e0", "fontSize": 10
    },

    "facial-label": {
      "type": "Text",
      "parent": "tab-content",
      "left": 756, "top": 366,
      "text": "FACIAL HAIR",
      "fontColor": "#c8d0e0", "fontSize": 12
    },
    "facial-1": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 756, "top": 384, "width": 80, "height": 64,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "facial-1-label": {
      "type": "Text",
      "parent": "facial-1",
      "left": 770, "top": 428,
      "text": "None",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "facial-2": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 844, "top": 384, "width": 80, "height": 64,
      "fillColor": "#3a4050", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "facial-2-label": {
      "type": "Text",
      "parent": "facial-2",
      "left": 854, "top": 428,
      "text": "Stubble",
      "fontColor": "#c8d8f0", "fontSize": 10
    },
    "facial-3": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 932, "top": 384, "width": 80, "height": 64,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "facial-3-label": {
      "type": "Text",
      "parent": "facial-3",
      "left": 948, "top": 428,
      "text": "Beard",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "facial-4": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 1020, "top": 384, "width": 80, "height": 64,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "facial-4-label": {
      "type": "Text",
      "parent": "facial-4",
      "left": 1024, "top": 428,
      "text": "Moustache",
      "fontColor": "#c8d0e0", "fontSize": 10
    },

    "eyebrows-label": {
      "type": "Text",
      "parent": "tab-content",
      "left": 756, "top": 462,
      "text": "EYEBROWS",
      "fontColor": "#c8d0e0", "fontSize": 12
    },
    "brow-1": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 756, "top": 480, "width": 80, "height": 48,
      "fillColor": "#3a4050", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "brow-1-label": {
      "type": "Text",
      "parent": "brow-1",
      "left": 766, "top": 508,
      "text": "Regular",
      "fontColor": "#c8d8f0", "fontSize": 10
    },
    "brow-2": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 844, "top": 480, "width": 80, "height": 48,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "brow-2-label": {
      "type": "Text",
      "parent": "brow-2",
      "left": 854, "top": 508,
      "text": "Female",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "brow-3": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 932, "top": 480, "width": 80, "height": 48,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "brow-3-label": {
      "type": "Text",
      "parent": "brow-3",
      "left": 952, "top": 508,
      "text": "Teen",
      "fontColor": "#c8d0e0", "fontSize": 10
    },
    "brow-4": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 1020, "top": 480, "width": 80, "height": 48,
      "fillColor": "#3a4050", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "brow-4-label": {
      "type": "Text",
      "parent": "brow-4",
      "left": 1038, "top": 508,
      "text": "Thick",
      "fontColor": "#c8d0e0", "fontSize": 10
    },

    "color-dock": {
      "type": "Rectangle",
      "parent": "tab-content",
      "left": 740, "top": 548, "width": 380, "height": 108,
      "fillColor": "#1a1e24", "strokeColor": "#333340",
      "corners": [0, 0, 8, 8]
    },
    "color-dock-label": {
      "type": "Text",
      "parent": "color-dock",
      "left": 756, "top": 554,
      "text": "HAIR COLOR",
      "fontColor": "#c8d0e0", "fontSize": 11
    },
    "color-primary-label": {
      "type": "Text",
      "parent": "color-dock",
      "left": 756, "top": 572,
      "text": "Primary",
      "fontColor": "#555568", "fontSize": 10
    },
    "color-highlight-label": {
      "type": "Text",
      "parent": "color-dock",
      "left": 840, "top": 572,
      "text": "Highlight",
      "fontColor": "#555568", "fontSize": 10
    },
    "color-brow-label": {
      "type": "Text",
      "parent": "color-dock",
      "left": 928, "top": 572,
      "text": "Brow tint",
      "fontColor": "#555568", "fontSize": 10
    },
    "color-facial-label": {
      "type": "Text",
      "parent": "color-dock",
      "left": 1012, "top": 572,
      "text": "Beard tint",
      "fontColor": "#555568", "fontSize": 10
    },
    "color-primary-swatch": {
      "type": "Rectangle",
      "parent": "color-dock",
      "left": 756, "top": 588, "width": 76, "height": 28,
      "fillColor": "#3a2a1a", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "color-highlight-swatch": {
      "type": "Rectangle",
      "parent": "color-dock",
      "left": 840, "top": 588, "width": 76, "height": 28,
      "fillColor": "#5a4a3a", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "color-brow-swatch": {
      "type": "Rectangle",
      "parent": "color-dock",
      "left": 928, "top": 588, "width": 76, "height": 28,
      "fillColor": "#3a2a1a", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "color-facial-swatch": {
      "type": "Rectangle",
      "parent": "color-dock",
      "left": 1012, "top": 588, "width": 76, "height": 28,
      "fillColor": "#3a2a1a", "strokeColor": "#333340",
      "corners": [4, 4, 4, 4]
    },
    "color-auto-hint": {
      "type": "Text",
      "parent": "color-dock",
      "left": 756, "top": 624,
      "text": "Highlight, brow, and beard follow primary if unset.",
      "fontColor": "#555568", "fontSize": 9
    },

    "footer": {
      "type": "Rectangle",
      "parent": "bg",
      "left": 0, "top": 700, "width": 1140, "height": 80,
      "fillColor": "#1a1e24"
    },
    "btn-back": {
      "type": "Rectangle",
      "parent": "footer",
      "left": 20, "top": 720, "width": 120, "height": 40,
      "fillColor": "#2a3040", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "btn-back-label": {
      "type": "Text",
      "parent": "btn-back",
      "left": 36, "top": 730,
      "text": "[ESC] Back",
      "fontColor": "#c8d8f0", "fontSize": 13
    },
    "btn-random": {
      "type": "Rectangle",
      "parent": "footer",
      "left": 290, "top": 720, "width": 160, "height": 40,
      "fillColor": "#2a3040", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "btn-random-label": {
      "type": "Text",
      "parent": "btn-random",
      "left": 310, "top": 730,
      "text": "[R] Randomise",
      "fontColor": "#c8d8f0", "fontSize": 13
    },
    "btn-confirm": {
      "type": "Rectangle",
      "parent": "footer",
      "left": 980, "top": 720, "width": 140, "height": 40,
      "fillColor": "#2a3040", "strokeColor": "#c8d8f0",
      "corners": [4, 4, 4, 4]
    },
    "btn-confirm-label": {
      "type": "Text",
      "parent": "btn-confirm",
      "left": 998, "top": 730,
      "text": "[ENTER] Start",
      "fontColor": "#c8d8f0", "fontSize": 13
    }
  }
}