settled-reach/docs/design/wireframes/menus/v01-main-menu.json

{
  "name": "v01-main-menu",
  "shapes": {
    "bg": {
      "type": "Rectangle",
      "left": 0, "top": 0, "width": 1140, "height": 760,
      "fillColor": "#0e1218",
      "strokeColor": "#0e1218"
    },
    "bg-grid-h1": {
      "type": "Line",
      "left": 0, "top": 188, "width": 1140, "height": 0,
      "strokeColor": "#13171e"
    },
    "bg-grid-h2": {
      "type": "Line",
      "left": 0, "top": 376, "width": 1140, "height": 0,
      "strokeColor": "#13171e"
    },
    "bg-grid-h3": {
      "type": "Line",
      "left": 0, "top": 564, "width": 1140, "height": 0,
      "strokeColor": "#13171e"
    },
    "bg-grid-v1": {
      "type": "Line",
      "left": 380, "top": 0, "width": 0, "height": 760,
      "strokeColor": "#13171e"
    },
    "bg-grid-v2": {
      "type": "Line",
      "left": 760, "top": 0, "width": 0, "height": 760,
      "strokeColor": "#13171e"
    },
    "title-block": {
      "type": "Rectangle",
      "left": 350, "top": 200, "width": 440, "height": 120,
      "fillColor": "#00000000",
      "strokeColor": "#00000000"
    },
    "title-line-top": {
      "type": "Line",
      "left": 350, "top": 200, "width": 440, "height": 0,
      "strokeColor": "#333340"
    },
    "title-line-bottom": {
      "type": "Line",
      "left": 350, "top": 320, "width": 440, "height": 0,
      "strokeColor": "#333340"
    },
    "title-text": {
      "type": "Text",
      "left": 360, "top": 220,
      "text": "THE SETTLED REACH",
      "fontColor": "#c8d0e0",
      "fontSize": 28
    },
    "title-subtitle": {
      "type": "Text",
      "left": 360, "top": 262,
      "text": "SOVA TRANSIT DISTRICT  //  KRENN SYSTEM",
      "fontColor": "#556677",
      "fontSize": 13
    },
    "title-version": {
      "type": "Text",
      "left": 360, "top": 292,
      "text": "v0.1  //  EARLY ACCESS BUILD",
      "fontColor": "#3a4455",
      "fontSize": 11
    },
    "menu-list": {
      "type": "Rectangle",
      "left": 400, "top": 360, "width": 340, "height": 220,
      "fillColor": "#00000000",
      "strokeColor": "#00000000"
    },
    "btn-new": {
      "type": "Rectangle",
      "left": 400, "top": 360, "width": 340, "height": 40,
      "fillColor": "#12161e",
      "strokeColor": "#c8d0e0",
      "corners": [2, 2, 2, 2]
    },
    "btn-new-text": {
      "type": "Text",
      "left": 416, "top": 372,
      "text": "NEW GAME",
      "fontColor": "#c8d0e0",
      "fontSize": 16
    },
    "btn-continue": {
      "type": "Rectangle",
      "left": 400, "top": 408, "width": 340, "height": 40,
      "fillColor": "#0e1118",
      "strokeColor": "#333340",
      "corners": [2, 2, 2, 2]
    },
    "btn-continue-text": {
      "type": "Text",
      "left": 416, "top": 420,
      "text": "CONTINUE",
      "fontColor": "#8899aa",
      "fontSize": 16
    },
    "btn-load": {
      "type": "Rectangle",
      "left": 400, "top": 456, "width": 340, "height": 40,
      "fillColor": "#0e1118",
      "strokeColor": "#333340",
      "corners": [2, 2, 2, 2]
    },
    "btn-load-text": {
      "type": "Text",
      "left": 416, "top": 468,
      "text": "LOAD GAME",
      "fontColor": "#8899aa",
      "fontSize": 16
    },
    "btn-options": {
      "type": "Rectangle",
      "left": 400, "top": 504, "width": 340, "height": 40,
      "fillColor": "#0e1118",
      "strokeColor": "#333340",
      "corners": [2, 2, 2, 2]
    },
    "btn-options-text": {
      "type": "Text",
      "left": 416, "top": 516,
      "text": "OPTIONS",
      "fontColor": "#8899aa",
      "fontSize": 16
    },
    "btn-quit": {
      "type": "Rectangle",
      "left": 400, "top": 552, "width": 340, "height": 40,
      "fillColor": "#0e1118",
      "strokeColor": "#333340",
      "corners": [2, 2, 2, 2]
    },
    "btn-quit-text": {
      "type": "Text",
      "left": 416, "top": 564,
      "text": "QUIT",
      "fontColor": "#8899aa",
      "fontSize": 16
    },
    "corner-tl": {
      "type": "Line",
      "left": 16, "top": 16, "width": 32, "height": 0,
      "strokeColor": "#333340"
    },
    "corner-tl-v": {
      "type": "Line",
      "left": 16, "top": 16, "width": 0, "height": 32,
      "strokeColor": "#333340"
    },
    "corner-br": {
      "type": "Line",
      "left": 1092, "top": 744, "width": 32, "height": 0,
      "strokeColor": "#333340"
    },
    "corner-br-v": {
      "type": "Line",
      "left": 1124, "top": 712, "width": 0, "height": 32,
      "strokeColor": "#333340"
    },
    "corner-tr": {
      "type": "Line",
      "left": 1092, "top": 16, "width": 32, "height": 0,
      "strokeColor": "#333340"
    },
    "corner-tr-v": {
      "type": "Line",
      "left": 1124, "top": 16, "width": 0, "height": 32,
      "strokeColor": "#333340"
    },
    "annotation-title": {
      "type": "Text",
      "left": 16, "top": 720,
      "text": "v0.1 MAIN MENU",
      "fontColor": "#556677",
      "fontSize": 11
    },
    "annotation-notes": {
      "type": "Text",
      "left": 16, "top": 734, "width": 1100,
      "text": "Dark bg with subtle grid. Title block. Vertical menu list. Corner chrome (insert visual language). Continue greyed if no save exists.",
      "fontColor": "#3a4455",
      "fontSize": 10,
      "wordWrap": true
    }
  }
}