Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Dashboard

The screen someone opens every morning to ask one question: did anything change since yesterday?

Example screens

Live preview

Source

<script>document.body.className="dc-bleed"</script>
<div class="dc-db">

  <header class="dc-db__top">
    <a class="dc-db__brand" href="#dc-db-overview">결산kr</a>
    <form class="dc-db__search" action="#dc-db-orders" method="get" role="search">
      <label class="dc-sr" for="dc-db-q">주문번호나 고객 이름으로 찾기</label>
      <input class="dc-db__search-input" id="dc-db-q" type="search" name="q" placeholder="주문번호, 고객 이름">
    </form>
    <div class="dc-db__top-right">
      <button class="dc-db__icon" type="button">
        <svg class="dc-db__icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0-6 6c0 4-2 5-2 5h16s-2-1-2-5a6 6 0 0 0-6-6z"/><path d="M10 18a2 2 0 0 0 4 0"/></svg>
        <span class="dc-sr">읽지 않은 알림 3건</span>
        <span class="dc-db__dot" aria-hidden="true"></span>
      </button>
      <span class="dc-db__avatar" aria-hidden="true">박</span>
      <span class="dc-db__who">박서윤<span class="dc-db__who-sub">구월동점 · 관리자</span></span>
    </div>
  </header>

  <div class="dc-db__body">
    <nav class="dc-db__side" aria-label="작업 영역">
      <ul class="dc-db__menu">
        <li><a class="dc-db__menu-link dc-db__menu-link--on" id="dc-db-overview" href="#dc-db-overview" aria-current="page">개요</a></li>
        <li><a class="dc-db__menu-link" id="dc-db-orders" href="#dc-db-orders">주문<span class="dc-db__menu-num">12</span></a></li>
        <li><a class="dc-db__menu-link" href="#dc-db-settle">정산</a></li>
        <li><a class="dc-db__menu-link" href="#dc-db-customer">고객</a></li>
        <li><a class="dc-db__menu-link" href="#dc-db-product">상품</a></li>
        <li><a class="dc-db__menu-link" href="#dc-db-setting">설정</a></li>
      </ul>
    </nav>

    <main class="dc-db__main">
      <div class="dc-db__head">
        <div class="dc-db__head-text">
          <h1 class="dc-db__h1">개요</h1>
          <p class="dc-db__period">2026년 8월 1일 – 8월 31일 · 오늘 09:10 기준</p>
        </div>
        <div class="dc-db__head-act">
          <label class="dc-sr" for="dc-db-range">기간 고르기</label>
          <select class="dc-db__select" id="dc-db-range" name="range">
            <option selected>이번 달</option>
            <option>지난 달</option>
            <option>최근 90일</option>
            <option>올해</option>
          </select>
          <button class="dc-db__btn" type="button">엑셀로 내보내기</button>
        </div>
      </div>

      <ul class="dc-db__stats">
        <li class="dc-db__stat">
          <p class="dc-db__stat-label">총 매출</p>
          <p class="dc-db__stat-value">38,420,900원</p>
          <p class="dc-db__stat-delta dc-db__stat-delta--good">지난달보다 12.4% 늘었습니다</p>
        </li>
        <li class="dc-db__stat">
          <p class="dc-db__stat-label">주문</p>
          <p class="dc-db__stat-value">1,284건</p>
          <p class="dc-db__stat-delta dc-db__stat-delta--good">지난달보다 86건 많습니다</p>
        </li>
        <li class="dc-db__stat">
          <p class="dc-db__stat-label">환불률</p>
          <p class="dc-db__stat-value">1.8%</p>
          <p class="dc-db__stat-delta dc-db__stat-delta--good">지난달보다 0.3%p 줄었습니다</p>
        </li>
        <li class="dc-db__stat">
          <p class="dc-db__stat-label">평균 결제액</p>
          <p class="dc-db__stat-value">29,900원</p>
          <p class="dc-db__stat-delta dc-db__stat-delta--bad">지난달보다 1,200원 줄었습니다</p>
        </li>
      </ul>

      <section class="dc-db__panel">
        <div class="dc-db__panel-head">
          <h2 class="dc-db__h2">최근 주문</h2>
          <a class="dc-db__more" href="#dc-db-orders">주문 전체 보기</a>
        </div>
        <div class="dc-db__scroll">
          <table class="dc-db__table">
            <caption class="dc-sr">최근 주문 8건. 주문번호, 고객, 상품, 결제 금액, 상태, 결제 시각 순서입니다.</caption>
            <thead>
              <tr>
                <th class="dc-db__th" scope="col">주문번호</th>
                <th class="dc-db__th" scope="col">고객</th>
                <th class="dc-db__th" scope="col">상품</th>
                <th class="dc-db__th dc-db__th--num" scope="col">결제 금액</th>
                <th class="dc-db__th" scope="col">상태</th>
                <th class="dc-db__th" scope="col">결제 시각</th>
              </tr>
            </thead>
            <tbody>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260831-4812</td>
              <td class="dc-db__td">김도윤</td>
              <td class="dc-db__td">원두 정기배송 · 1kg</td>
              <td class="dc-db__td dc-db__td--num">38,000원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--ok">결제 완료</span></td>
              <td class="dc-db__td dc-db__td--time">8월 31일 21:14</td>
            </tr>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260831-4811</td>
              <td class="dc-db__td">이서아</td>
              <td class="dc-db__td">콜드브루 원액 500ml 2개</td>
              <td class="dc-db__td dc-db__td--num">24,600원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--info">배송 준비</span></td>
              <td class="dc-db__td dc-db__td--time">8월 31일 20:02</td>
            </tr>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260831-4809</td>
              <td class="dc-db__td">최민준</td>
              <td class="dc-db__td">드립백 12입 선물세트</td>
              <td class="dc-db__td dc-db__td--num">19,900원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--warn">입금 대기</span></td>
              <td class="dc-db__td dc-db__td--time">8월 31일 18:47</td>
            </tr>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260831-4806</td>
              <td class="dc-db__td">한지우</td>
              <td class="dc-db__td">에티오피아 예가체프 200g</td>
              <td class="dc-db__td dc-db__td--num">14,500원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--ok">결제 완료</span></td>
              <td class="dc-db__td dc-db__td--time">8월 31일 17:21</td>
            </tr>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260830-4798</td>
              <td class="dc-db__td">강예준</td>
              <td class="dc-db__td">원두 정기배송 · 2kg</td>
              <td class="dc-db__td dc-db__td--num">71,000원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--danger">환불 완료</span></td>
              <td class="dc-db__td dc-db__td--time">8월 30일 15:08</td>
            </tr>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260830-4795</td>
              <td class="dc-db__td">정하린</td>
              <td class="dc-db__td">케냐 AA 200g 3개</td>
              <td class="dc-db__td dc-db__td--num">43,500원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--ok">결제 완료</span></td>
              <td class="dc-db__td dc-db__td--time">8월 30일 12:33</td>
            </tr>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260830-4790</td>
              <td class="dc-db__td">오태윤</td>
              <td class="dc-db__td">하리오 드리퍼 세트</td>
              <td class="dc-db__td dc-db__td--num">56,000원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--info">배송 준비</span></td>
              <td class="dc-db__td dc-db__td--time">8월 30일 10:12</td>
            </tr>
            <tr class="dc-db__tr">
              <td class="dc-db__td dc-db__td--id">20260829-4782</td>
              <td class="dc-db__td">윤소율</td>
              <td class="dc-db__td">디카페인 원두 200g</td>
              <td class="dc-db__td dc-db__td--num">15,800원</td>
              <td class="dc-db__td"><span class="dc-db__badge dc-db__badge--ok">결제 완료</span></td>
              <td class="dc-db__td dc-db__td--time">8월 29일 22:41</td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="dc-db__panel-foot">
          <p class="dc-db__foot-note">1,284건 가운데 8건을 보고 있습니다</p>
          <div class="dc-db__pager">
            <button class="dc-db__page" type="button" disabled>이전</button>
            <button class="dc-db__page" type="button">다음</button>
          </div>
        </div>
      </section>
    </main>
  </div>
</div>
.dc-db { min-height:100%; font-family:var(--dc-font); background:var(--dc-sunken); color:var(--dc-text); }
.dc-db__top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:var(--dc-4); padding:var(--dc-3) var(--dc-5); border-bottom:1px solid var(--dc-line); background:var(--dc-surface); }
.dc-db__brand { font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); text-decoration:none; }
.dc-db__search { flex:1; max-width:360px; }
.dc-db__search-input { width:100%; min-height:40px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; }
.dc-db__search-input::placeholder { color:var(--dc-text-mute); }
.dc-db__search-input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-db__top-right { display:flex; align-items:center; gap:var(--dc-3); margin-left:auto; }
.dc-db__icon { position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text-sub); }
.dc-db__icon:hover { background:var(--dc-sunken); color:var(--dc-text); }
.dc-db__icon-svg { width:20px; height:20px; }
.dc-db__dot { position:absolute; top:7px; right:9px; width:8px; height:8px; border:2px solid var(--dc-surface); border-radius:var(--dc-r-full); background:var(--dc-danger); }
.dc-db__avatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:14px; font-weight:700; }
.dc-db__who { display:flex; flex-direction:column; font-size:13px; font-weight:600; line-height:1.3; }
.dc-db__who-sub { font-size:12px; font-weight:400; color:var(--dc-text-mute); }
.dc-db__body { display:grid; grid-template-columns:208px minmax(0,1fr); align-items:start; }
.dc-db__side { position:sticky; top:65px; padding:var(--dc-4) var(--dc-3); border-right:1px solid var(--dc-line); background:var(--dc-surface); min-height:calc(100vh - 65px); }
.dc-db__menu { display:flex; flex-direction:column; gap:2px; }
.dc-db__menu-link { display:flex; align-items:center; gap:var(--dc-2); min-height:40px; padding:0 var(--dc-3); border-radius:var(--dc-r-sm); font-size:14px; font-weight:600; color:var(--dc-text-sub); text-decoration:none; }
.dc-db__menu-link:hover { background:var(--dc-sunken); color:var(--dc-text); }
.dc-db__menu-link--on { background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-db__menu-num { margin-left:auto; padding:0 var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text-sub); font-size:12px; font-weight:700; }
.dc-db__main { display:flex; flex-direction:column; gap:var(--dc-5); padding:var(--dc-6); min-width:0; }
.dc-db__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--dc-3); }
.dc-db__head-text { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-db__h1 { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.dc-db__period { font-size:13px; color:var(--dc-text-mute); }
.dc-db__head-act { display:flex; align-items:center; gap:var(--dc-2); }
.dc-db__select { min-height:40px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; }
.dc-db__btn { min-height:40px; padding:0 var(--dc-4); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:700; transition:background var(--dc-fast); }
.dc-db__btn:hover { background:var(--dc-brand-hi); }
.dc-db__stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--dc-3); }
.dc-db__stat { display:flex; flex-direction:column; gap:var(--dc-1); padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-db__stat-label { font-size:13px; color:var(--dc-text-sub); }
.dc-db__stat-value { font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dc-db__stat-delta { font-size:12px; color:var(--dc-text-mute); }
.dc-db__stat-delta--good { color:var(--dc-ok); }
.dc-db__stat-delta--bad { color:var(--dc-danger); }
.dc-db__panel { border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); overflow:hidden; }
.dc-db__panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); padding:var(--dc-4); border-bottom:1px solid var(--dc-line); }
.dc-db__h2 { font-size:16px; font-weight:700; }
.dc-db__more { font-size:13px; font-weight:600; color:var(--dc-brand); text-decoration:none; }
.dc-db__more:hover { text-decoration:underline; }
.dc-db__scroll { overflow-x:auto; }
.dc-db__table { width:100%; min-width:680px; border-collapse:collapse; }
.dc-db__th { padding:var(--dc-3) var(--dc-4); border-bottom:1px solid var(--dc-line); background:var(--dc-sunken); color:var(--dc-text-sub); font-size:12px; font-weight:700; text-align:left; white-space:nowrap; }
.dc-db__th--num { text-align:right; }
.dc-db__tr:hover { background:var(--dc-sunken); }
.dc-db__td { padding:var(--dc-3) var(--dc-4); border-bottom:1px solid var(--dc-line); font-size:14px; vertical-align:middle; }
.dc-db__td--id { font-family:var(--dc-mono); font-size:13px; color:var(--dc-text-sub); white-space:nowrap; }
.dc-db__td--num { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dc-db__td--time { color:var(--dc-text-mute); font-size:13px; white-space:nowrap; }
.dc-db__badge { display:inline-block; padding:2px var(--dc-2); border-radius:var(--dc-r-full); font-size:12px; font-weight:700; white-space:nowrap; }
.dc-db__badge--ok { background:var(--dc-ok-soft); color:var(--dc-ok); }
.dc-db__badge--info { background:var(--dc-info-soft); color:var(--dc-info); }
.dc-db__badge--warn { background:var(--dc-warn-soft); color:var(--dc-warn); }
.dc-db__badge--danger { background:var(--dc-danger-soft); color:var(--dc-danger); }
.dc-db__panel-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); padding:var(--dc-3) var(--dc-4); }
.dc-db__foot-note { font-size:12px; color:var(--dc-text-mute); }
.dc-db__pager { display:flex; gap:var(--dc-2); }
.dc-db__page { min-height:36px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:13px; font-weight:600; }
.dc-db__page:hover:enabled { background:var(--dc-sunken); }
.dc-db__page:disabled { border-color:var(--dc-line); color:var(--dc-text-mute); cursor:not-allowed; }
@media (max-width:900px) {
  .dc-db__stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px) {
  .dc-db__body { grid-template-columns:1fr; }
  .dc-db__side { position:static; min-height:0; border-right:0; border-bottom:1px solid var(--dc-line); }
  .dc-db__menu { flex-direction:row; overflow-x:auto; }
  .dc-db__who { display:none; }
  .dc-db__main { padding:var(--dc-4); }
}

How to use it

  • Four numbers across the top, no more; claiming everything matters makes nothing matter
  • Put the change in words under each number — "12.4%" alone never says whether that is good news
  • Right-align money, mute timestamps: a scanning eye should travel straight down one column

Watch out for

  • Never carry status by color alone — the badge must say the word too
  • Keep the table in its own horizontally scrolling box so a wide table cannot push the whole layout sideways

Next