Wireframe — Dashboard

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
  <style>
    text { font: 12px Inter, sans-serif; fill:#0f172a; }
    .hd { font-size:14px; font-weight:600; }
    rect.box { fill:#f1f5f9; stroke:#94a3b8; }
    rect.kpi { fill:#dbeafe; stroke:#3666ff; }
    rect.chart { fill:#fefce8; stroke:#a16207; }
    rect.row { fill:#ffffff; stroke:#cbd5e1; }
    line.divider { stroke:#94a3b8; stroke-width:1; }
  </style>
  <!-- Top nav -->
  <rect class="box" x="0" y="0" width="800" height="44"/>
  <text class="hd" x="20" y="28">★ Brand</text>
  <text x="660" y="28">Search   Profile</text>

  <!-- Sidebar -->
  <rect class="box" x="0" y="44" width="160" height="456"/>
  <text class="hd" x="20" y="70">Nav</text>
  <text x="20" y="98">Overview</text>
  <text x="20" y="118">Customers</text>
  <text x="20" y="138">Reports</text>
  <text x="20" y="158">Settings</text>

  <!-- KPIs -->
  <rect class="kpi" x="180" y="64" width="170" height="80" rx="6"/>
  <text class="hd" x="200" y="92">KPI · Revenue</text>
  <text x="200" y="118">$1.2M (+8%)</text>
  <rect class="kpi" x="360" y="64" width="170" height="80" rx="6"/>
  <text class="hd" x="380" y="92">KPI · Users</text>
  <text x="380" y="118">42,310 (+3%)</text>
  <rect class="kpi" x="540" y="64" width="170" height="80" rx="6"/>
  <text class="hd" x="560" y="92">KPI · Churn</text>
  <text x="560" y="118">1.8% (-0.3pp)</text>

  <!-- Chart placeholder -->
  <rect class="chart" x="180" y="160" width="340" height="200" rx="6"/>
  <text class="hd" x="200" y="184">Revenue · last 6m</text>
  <polyline points="200,330 240,310 280,300 320,280 360,250 400,235 440,210 480,190" fill="none" stroke="#a16207" stroke-width="2"/>

  <!-- Table -->
  <rect class="box" x="540" y="160" width="240" height="200" rx="6"/>
  <text class="hd" x="560" y="184">Top accounts</text>
  <line class="divider" x1="540" y1="200" x2="780" y2="200"/>
  <text x="560" y="220">Acme Co       $48k</text>
  <text x="560" y="244">Globex        $32k</text>
  <text x="560" y="268">Initech       $28k</text>
  <text x="560" y="292">Umbrella      $21k</text>
  <text x="560" y="316">Massive Dynamic $19k</text>

  <!-- Bottom strip -->
  <rect class="row" x="180" y="380" width="600" height="100" rx="6"/>
  <text class="hd" x="200" y="404">Recent activity</text>
  <text x="200" y="428">• 12:05  New signup — alice@acme.co</text>
  <text x="200" y="448">• 11:42  Upgrade — Globex (Pro → Enterprise)</text>
  <text x="200" y="468">• 11:14  Refund issued — Initech</text>
</svg>