_zen-doodle.html

<style>
  :host {
    display: flex;
    flex-direction: column;
  }

  .canvas-container {
    position: relative;
    flex: 1;
    margin: 0 24px;
  }

  .canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .buttons {
    padding: 16px;
    display: flex;
    justify-content: space-around;
    min-height: 0;
  }

  .buttons button,
  .buttons .wrapper {
    padding: 8px 16px;
    border-radius: 12px;
    border: solid 2px black;
    font-family: var(--gotham);
    background: white;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
  }

  .buttons button:hover,
  .buttons button:focus {
    border: solid 2px black;
     box-shadow: 2px 2px 8px rgba(0, 0, 0, .4); 
  }

  .buttons .wrapper input {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: none;
    font-size: 20px;
  }

  .buttons .wrapper input::-webkit-color-swatch-wrapper {
    padding: 0;
  }
</style>
<div class="canvas-container" role="img" alt="drawing canvas">
  <canvas class="output" as="canvas"></canvas>
</div>
<div class="buttons">
  <button as="saveButton">Save</button>
  <button as="resetButton">Reset</button>
  <button as="undoButton">Undo</button>
  <div class="wrapper" as="colorWrapper">
    Ink:
    <input type="color" as="color" value="#CD8ED4">
  </div>
</div>
<a as="download" hidden></a>