Dashboard Lab

1. Stats Overview — sidebar + top bar + stat cards (classic admin layout)

Users

8,247

↑ 12.4% this month

Revenue

$42.8k

↑ 8.1%

Orders

1,128

↓ 3.2%

Conversion

4.72%

↑ 21%

Welcome back, Ada 👋

You have 3 new messages and 12 pending tasks.

<div class="dash-layout">
  <aside class="side">...</aside>

  <div>
    <header class="topbar">...</header>
    <main>
      <div class="stats">
        <div class="stat"></div>
      </div>
    </main>
  </div>
</div>
.dash-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

2. Analytics — pure CSS bar chart + KPI cards

Visits

124,392

↑ 18.4% vs previous period

Top referrer

Google

54.2% of traffic

Avg session

3m 42s

↑ 14s longer

<div class="bars">
  <div class="bar" style="height:40%"></div>
  <div class="bar" style="height:60%"></div>
  <div class="bar" style="height:80%"></div>
</div>
/* Pure-CSS bar chart — each .bar is a gradient rectangle */
.bars {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 120px;
}

.bar {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #ec4899, #8b5cf6);
}

/* Height is set inline via style — one line of JS to update */

3. Kanban Board — 3 columns of draggable task cards

To Do 3

Design

Onboarding wireframes v2

Priya · Due Mar 20

Dev

API rate-limit refactor

Kenji · Due Mar 21

Bug

Auth redirect loop on Safari

Marco · Urgent

In Progress 2

Design

Settings page redesign

Priya

Dev

Billing webhook integration

Marco

Done 4

Dev

Dark mode toggle

Marco ✓

Design

Logo refresh

Priya ✓

Dev

Drag & drop file upload

Kenji ✓

<div class="board">
  <div class="col">
    <h4>To Do</h4>
    <div class="card">
      <span class="tag design">Design</span>
      Task title
    </div>
  </div>
</div>
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.tag.design { background: #fce7f3; color: #be185d; }
.tag.dev    { background: #dbeafe; color: #1e40af; }
.tag.bug    { background: #fee2e2; color: #991b1b; }

4. Inbox — message list + preview pane (Gmail/Superhuman style)

Priya Patel2m ago

Re: Design review Friday

Hey Ada — I'd love to include the new onboarding...

Stripe1h ago

Invoice #4821 is paid

Successful payment of $299.00...

Marco R.Mon

Bug fix shipped

Just merged the Safari redirect fix...

GitHubMon

PR #847 approved

Your pull request was approved by...

From Priya Patel · March 14, 2026

Re: Design review Friday

Hey Ada — I'd love to include the new onboarding screens in Friday's review. Could you push the latest Figma file by Thursday so I can comment overnight?

Also, Marco mentioned he fixed the Safari redirect bug — should we close that ticket?

Thanks!
Priya

<div class="inbox">
  <div class="inbox-list">
    <div class="msg active unread">
      <div class="from">Priya</div>
      <div class="subj">Subject</div>
    </div>
  </div>
  <div class="viewer">...</div>
</div>
.inbox {
  display: grid;
  grid-template-columns: 320px 1fr;
}

/* Active message gets a colored left border */
.msg.active {
  background: #fdf2f8;
  border-left: 3px solid #ec4899;
}

/* Unread dot on the subject */
.msg.unread .from::after {
  content: "●";
  color: #ec4899;
}

5. Calendar — month grid with today highlight + event dots

March 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

26

27

28

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

<div class="days">
  <div class="h">Sun</div>
  <!-- ...7 day headers -->

  <div class="day dim">26</div>
  <div class="day">1</div>
  <div class="day today has-event">14</div>
</div>
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
}

.day.today {
  background: #ec4899;
  color: #fff;
}

/* Event dot at the bottom of the cell */
.day.has-event::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background: #ec4899;
  border-radius: 50%;
}

6. User Table — data table with avatars, status badges, and actions

User	Role	Status	Last active
AL Ada Lovelaceada@company.com	Admin	Active	Just now
GH Grace Hoppergrace@company.com	Editor	Active	2 hours ago
AT Alan Turingalan@company.com	Viewer	Invited	Pending
MC Margaret Hamiltonmargaret@company.com	Editor	Suspended	3 days ago

<table>
  <thead><tr>
    <th>User</th><th>Role</th><th>Status</th>
  </tr></thead>
  <tbody><tr>
    <td><div class="user">
      <div class="avatar">AL</div>
      <strong>Ada Lovelace</strong>
    </div></td>
    <td><span class="badge active">Active</span></td>
  </tr></tbody>
</table>
table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  background: #fafafa;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge.active    { background: #dcfce7; color: #166534; }
.badge.invited   { background: #fef3c7; color: #854d0e; }
.badge.suspended { background: #fee2e2; color: #991b1b; }

7. Settings Page — vertical tabs + form fields + toggles

Profile

Your public profile and display preferences.

Display name

Email

Show profile publiclyLet anyone find your profile by username

Weekly digest emailA summary of your activity every Monday

Marketing updatesProduct news, tips, and launches

<div class="settings">
  <nav>
    <button class="active">Profile</button>
    <button>Security</button>
  </nav>
  <div class="panel">
    <div class="toggle-row">
      <div><strong>Setting</strong></div>
      <div class="switch on"></div>
    </div>
  </div>
</div>
.settings {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
}

.switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: #d4d4d8;
  border-radius: 999px;
}

.switch.on { background: #10b981; }

.switch::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform .2s;
}
.switch.on::after { transform: translateX(18px); }

Dashboard

Welcome back, Ada 👋

Analytics · Last 30 days

Visits

Top referrer

Avg session

Sprint 24 · Board

To Do 3

In Progress 2

Done 4

Inbox (12)

Re: Design review Friday

March 2026

March 2026

Users (247)

Settings

Profile