<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img"
     aria-label="A main project with three subcontractor packages as subprojects, each with its own progress, documents and requests, rolling up to a project total">
  <defs>
    <style>
      .s  { font-family: 'Helvetica Neue', Arial, sans-serif; }
      .m  { font-family: Menlo, 'DejaVu Sans Mono', monospace; letter-spacing: .08em; }
      .ttl{ font-weight: 600; fill: #071a33; }
      .met{ fill: #66798d; }
      .sub{ fill: #8b9bab; }
      .nav{ fill: #8fa6ba; }
    </style>
  </defs>

  <rect width="800" height="500" fill="#f7f9fc"/>

  <!-- sidebar -->
  <rect x="0" y="0" width="164" height="500" fill="#071a33"/>
  <g transform="translate(24 32)">
    <rect x="0" y="0" width="10" height="10" fill="#f5b335"/>
    <rect x="0" y="14" width="10" height="10" fill="#3c6382"/>
    <rect x="14" y="0" width="10" height="10" fill="#3c6382"/>
    <rect x="14" y="14" width="10" height="10" fill="#159669"/>
    <text class="m" x="34" y="18" font-size="10" fill="#fff">PROJECT</text>
  </g>
  <g class="s" font-size="12.5">
    <text class="nav" x="32" y="114">Overview</text>
    <rect x="12" y="126" width="140" height="30" rx="5" fill="#0f2c4b"/>
    <rect x="12" y="126" width="3" height="30" fill="#f5b335"/>
    <text x="32" y="146" fill="#ffffff" font-weight="600">Subprojects</text>
    <text class="nav" x="32" y="182">Requests</text>
    <text class="nav" x="32" y="214">Documents</text>
    <text class="nav" x="32" y="246">Quantities</text>
    <text class="nav" x="32" y="278">Reports</text>
  </g>
  <line x1="24" y1="312" x2="140" y2="312" stroke="#ffffff" stroke-opacity=".12"/>
  <text class="m" x="24" y="336" font-size="9" fill="#5f7b93">PACKAGES</text>
  <g class="s" font-size="11.5">
    <text fill="#ffffff" x="24" y="360">Structure</text>
    <text class="nav" x="24" y="382">MEP</text>
    <text class="nav" x="24" y="404">Finishes</text>
  </g>
  <text class="m" x="24" y="452" font-size="9" fill="#5f7b93">3 SUBCONTRACTORS</text>
  <text class="m" x="24" y="468" font-size="9" fill="#5f7b93">1 MAIN PROJECT</text>

  <!-- top bar -->
  <rect x="164" y="0" width="636" height="60" fill="#fff"/>
  <line x1="164" y1="60" x2="800" y2="60" stroke="#e3e9f0"/>
  <text class="s ttl" x="192" y="37" font-size="18">Subprojects</text>
  <text class="m sub" x="776" y="35" font-size="9" text-anchor="end">MAIN CONTRACTOR VIEW</text>

  <!-- main project roll-up -->
  <rect x="192" y="84" width="584" height="92" rx="6" fill="#071a33"/>
  <text class="m" x="212" y="110" font-size="9" fill="#f5b335">MAIN PROJECT · ROLLED UP FROM 3 SUBPROJECTS</text>
  <text class="s" x="212" y="142" font-size="19" font-weight="600" fill="#fff">Project total</text>
  <text class="s" x="600" y="142" font-size="30" font-weight="600" fill="#fff" text-anchor="end">62%</text>
  <text class="m" x="756" y="140" font-size="9" fill="#8fa6ba" text-anchor="end">18 OPEN ITEMS</text>
  <rect x="212" y="156" width="544" height="6" rx="3" fill="#12324a"/>
  <rect x="212" y="156" width="337" height="6" rx="3" fill="#f5b335"/>

  <!-- roll-up arrows -->
  <g stroke="#cfd8e3" stroke-width="1.4" fill="none">
    <path d="M300 210v-18M484 210v-18M668 210v-18"/>
    <path d="M296 196l4-4 4 4M480 196l4-4 4 4M664 196l4-4 4 4" stroke="#8b9bab"/>
  </g>
  <text class="m sub" x="192" y="204" font-size="9">ROLLS UP</text>

  <!-- subproject cards -->
  <g>
    <!-- structure -->
    <rect x="192" y="216" width="184" height="248" rx="6" fill="#fff" stroke="#f5b335" stroke-opacity=".5"/>
    <rect x="192" y="216" width="184" height="3" rx="1.5" fill="#f5b335"/>
    <text class="m sub" x="212" y="244" font-size="9">PACKAGE 01</text>
    <text class="s ttl" x="212" y="268" font-size="16">Structure</text>
    <text class="s met" x="212" y="288" font-size="11.5">Subcontractor · 6 users</text>
    <line x1="212" y1="304" x2="356" y2="304" stroke="#e3e9f0"/>
    <text class="m sub" x="212" y="326" font-size="9">PROGRESS</text>
    <text class="s ttl" x="356" y="328" font-size="15" text-anchor="end">74%</text>
    <rect x="212" y="336" width="144" height="6" rx="3" fill="#eef3f8"/>
    <rect x="212" y="336" width="107" height="6" rx="3" fill="#159669"/>
    <g class="m" font-size="10">
      <text class="sub" x="212" y="372">DOCUMENTS</text><text class="met" x="356" y="372" text-anchor="end">124</text>
      <text class="sub" x="212" y="396">REQUESTS</text><text class="met" x="356" y="396" text-anchor="end">6 OPEN</text>
      <text class="sub" x="212" y="420">QUANTITIES</text><text class="met" x="356" y="420" text-anchor="end">LINKED</text>
    </g>
    <rect x="212" y="436" width="88" height="20" rx="3" fill="#e6f5ee"/>
    <text class="m" x="256" y="450" font-size="9" fill="#0f6e4d" text-anchor="middle">ON PLAN</text>

    <!-- mep -->
    <rect x="392" y="216" width="184" height="248" rx="6" fill="#fff" stroke="#e3e9f0"/>
    <text class="m sub" x="412" y="244" font-size="9">PACKAGE 02</text>
    <text class="s ttl" x="412" y="268" font-size="16">MEP</text>
    <text class="s met" x="412" y="288" font-size="11.5">Subcontractor · 4 users</text>
    <line x1="412" y1="304" x2="556" y2="304" stroke="#e3e9f0"/>
    <text class="m sub" x="412" y="326" font-size="9">PROGRESS</text>
    <text class="s ttl" x="556" y="328" font-size="15" text-anchor="end">30%</text>
    <rect x="412" y="336" width="144" height="6" rx="3" fill="#eef3f8"/>
    <rect x="412" y="336" width="43" height="6" rx="3" fill="#d65b4c"/>
    <g class="m" font-size="10">
      <text class="sub" x="412" y="372">DOCUMENTS</text><text class="met" x="556" y="372" text-anchor="end">68</text>
      <text class="sub" x="412" y="396">REQUESTS</text><text class="met" x="556" y="396" text-anchor="end">9 OPEN</text>
      <text class="sub" x="412" y="420">QUANTITIES</text><text class="met" x="556" y="420" text-anchor="end">LINKED</text>
    </g>
    <rect x="412" y="436" width="88" height="20" rx="3" fill="#fdf1ef"/>
    <text class="m" x="456" y="450" font-size="9" fill="#a8412f" text-anchor="middle">BEHIND</text>

    <!-- finishes -->
    <rect x="592" y="216" width="184" height="248" rx="6" fill="#fff" stroke="#e3e9f0"/>
    <text class="m sub" x="612" y="244" font-size="9">PACKAGE 03</text>
    <text class="s ttl" x="612" y="268" font-size="16">Finishes</text>
    <text class="s met" x="612" y="288" font-size="11.5">Subcontractor · 3 users</text>
    <line x1="612" y1="304" x2="756" y2="304" stroke="#e3e9f0"/>
    <text class="m sub" x="612" y="326" font-size="9">PROGRESS</text>
    <text class="s ttl" x="756" y="328" font-size="15" text-anchor="end">12%</text>
    <rect x="612" y="336" width="144" height="6" rx="3" fill="#eef3f8"/>
    <rect x="612" y="336" width="17" height="6" rx="3" fill="#0b2b4d"/>
    <g class="m" font-size="10">
      <text class="sub" x="612" y="372">DOCUMENTS</text><text class="met" x="756" y="372" text-anchor="end">31</text>
      <text class="sub" x="612" y="396">REQUESTS</text><text class="met" x="756" y="396" text-anchor="end">3 OPEN</text>
      <text class="sub" x="612" y="420">QUANTITIES</text><text class="met" x="756" y="420" text-anchor="end">DRAFT</text>
    </g>
    <rect x="612" y="436" width="88" height="20" rx="3" fill="#eef3f8"/>
    <text class="m met" x="656" y="450" font-size="9" text-anchor="middle">STARTING</text>
  </g>
</svg>
