workbuddy_skills/open-design/design-templates/live-dashboard/references/components.md

Components

Copy these markup shapes verbatim. Re-skin via the active DESIGN.md (color, typography, spacing tokens). Do not invent new component shapes — that's where AI-slop sneaks in.

All snippets assume the CSS custom properties defined in assets/template.html (--ink, --ink-2, --bg-soft, --accent, --line, --pill-*-bg/ink, …).

---

live-pill (top-right of the topbar)

<div class="pill-live" id="livePill">
  <span class="dot"></span>
  <span id="liveText">Live · synced</span>
</div>

Three states:

State	Class on .pill-live	Dot color	Text
Idle	(none)	green	Live · synced
Syncing	.syncing	accent	Syncing…
Stale	.stale	amber	Stale · 2 min ago

The green dot animates a 1.8s pulse keyframe. Disable on prefers-reduced-motion.

---

kpi card (one cell of the KPI grid)

<div class="kpi">
  <div class="label">Total tasks</div>
  <div class="value" id="kTotal">142</div>
  <div class="delta up"><span class="arr">↑</span> 6 vs last week</div>
</div>

Rules:

• .value is font-size: 32px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums
• .label is 12px uppercase letter-spacing .03em color --ink-2
• .delta.up → green; .delta.down → red; neutral .delta is grey
• On refresh, tween value between old and new with a 600ms cubic ease-out, and add .flash for 700ms (turns the number --accent-ink briefly).
• Never put a colored progress bar under the number.
• Never put a sparkline inside a KPI card — sparklines belong in the two-column block.

---

sparkline (SVG, hand-rolled)

<svg class="spark" viewBox="0 0 600 140" preserveAspectRatio="none">
  <g class="spark-grid">
    <line x1="0" y1="35"  x2="600" y2="35"/>
    <line x1="0" y1="70"  x2="600" y2="70"/>
    <line x1="0" y1="105" x2="600" y2="105"/>
  </g>
  <path class="spark-fill" d=""></path>
  <path class="spark-line" d=""></path>
  <g id="sparkDots"></g>
  <g id="sparkLabels" class="spark-axis"></g>
</svg>

CSS:

• .spark-fill is fill: rgba(<accent-rgb>, 0.10)
• .spark-line is fill: none; stroke: var(--accent); stroke-width: 2
• .spark-grid line is stroke: var(--line); stroke-dasharray: 2 3
• .spark-dot (circles, r=3) is fill: var(--accent)

Compute paths from a length-7 series with padding 24/16/10/24 (L/R/T/B) inside the 600×140 viewBox. Today's bucket is at the right.

Do not use Chart.js / Recharts / D3 — single artifact, no external deps.

---

activity-feed row

<div class="feed-row">
  <span class="av" style="background:#f1c40f">SC</span>
  <div class="body">
    <span class="who">Sarah Chen</span>
    <span class="what"> moved</span>
    <span class="target"> 🚀 Q3 Roadmap planning</span>
    <span class="what"> to In progress</span>
  </div>
  <div class="time">3 min ago</div>
</div>

• Avatar: 26px round, two-letter initials, color stable per person.
• .target gets a 1px dotted underline and cursor: pointer.
• A "just inserted" row gets the .new class for 2s — applies a soft rgba(<accent>, .06) background and a • bullet before the name.
• Re-render relative timestamps every 15s.

---

status pills (Notion canonical five-color set)

<span class="pill done">Done</span>
<span class="pill progress">In progress</span>
<span class="pill blocked">Blocked</span>
<span class="pill review">In review</span>
<span class="pill todo">To do</span>

Class	Background	Foreground	Notion label
done	#dbeddb	#2b593f	Done
progress	#fdecc8	#976d23	In progress
blocked	#ffe2dd	#b13b2c	Blocked
review	#d3e5ef	#1f5b78	In review
todo	#e9e5e3	#5a534f	To do

Do not introduce extra states. Map any project-specific state into one of these five.

---

linked-database row

<div class="db-row">
  <div class="db-cell">📐</div>
  <div class="db-cell title"><span class="t">Design tokens v2 spec</span></div>
  <div class="db-cell"><span class="pill review">In review</span></div>
  <div class="db-cell"><span class="person">…avatar…<span>Lisa Zhao</span></span></div>
  <div class="db-cell due">May 14</div>
  <div class="db-cell priority">Med</div>
</div>

• 6-column grid: 32px 2.4fr 1fr 1fr 0.9fr 0.9fr
• .db-row.changed triggers a 1.4s row-flash via the rowflash keyframe.
• Hover: background: var(--bg-soft). No transform / shadow.

---

refresh button (page header, primary)

<button class="btn primary" id="refreshBtn">
  <span class="ico" id="refreshIco">↻</span>
  <span>Refresh from Notion</span>
</button>

• Default: background: var(--accent); color: #fff;
• Hover: background: var(--accent-ink)
• During poll: add .spin to .ico, disable button taps via the busy flag in JS (do not rely on [disabled] so visuals stay identical).
• Label adapts to connector: "Refresh from Notion" / "Refresh from Linear" / "Refresh from Stripe" — never just "Refresh" alone.

---

auto-toggle (page header, ghost)

<button class="btn ghost" id="autoBtn" title="Auto refresh every 30s">
  <span>⏱</span><span id="autoLbl">Auto · on</span>
</button>

Toggles setInterval(refresh, refresh_seconds * 1000). Persists to localStorage.live_dashboard_auto so a reload restores the state.

---

toast (bottom-center, transient)

<div class="toast" id="toast">Synced — 3 changes from Notion</div>

position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); 1800ms auto-dismiss. Dark #1f1f1f background, white text. One toast at a time; subsequent calls reset the timer.

---

callout (Notion idiom)

<div class="callout">
  <div class="emj">💡</div>
  <div>
    <div><strong>This page is a Live Artifact.</strong> Numbers below are pulled from
    your <strong>Acme Studio</strong> Notion workspace via the Composio connector.</div>
    <small>Refreshes on demand or when the page opens. Last 7 days only.</small>
  </div>
</div>

One short, declarative sentence + a smaller meta line. No marketing copy, no "Powered by", no exclamation marks.