Styleguide v0.3.0

Color

Type scale

Spacing & radius

Elevation

Buttons

Badges, chips & meter

Input & callout

Card & sidebar nav

Icons — Lucide, never emoji

The system uses no emoji. Icons come from Lucide (ISC, ~1,600 glyphs): paste the SVG, add class="ds-icon" — it inherits currentColor and sizes to the text beside it, so it themes for free.

Alerts

Table & code

node run.sh   # fetch → ingest → analyze → judge → review

Tabs, segmented, tooltip, skeleton

Lightbox

Click-to-enlarge for screenshots and diagrams. Mark any <img> with data-ds-lightbox and wire it with the snippet below — click pops the image full-size over a theme-aware scrim; a second click or Esc pops it back. Body scroll locks while open; respects reduced motion.

<img src="shot.png" data-ds-lightbox alt="…">

<script>
const lb = document.createElement('div');
lb.className = 'ds-lightbox';
lb.setAttribute('role', 'dialog');
lb.setAttribute('aria-modal', 'true');
lb.innerHTML = '<img alt="">';
document.body.appendChild(lb);
const lbImg = lb.firstChild;
const lbToggle = (open) => {
  lb.classList.toggle('open', open);
  document.documentElement.style.overflow = open ? 'hidden' : '';
};
document.querySelectorAll('img[data-ds-lightbox]').forEach(img => {
  img.addEventListener('click', () => {
    lbImg.src = img.currentSrc || img.src;
    lbImg.alt = img.alt;
    lbToggle(true);
  });
});
lb.addEventListener('click', () => lbToggle(false));
addEventListener('keydown', (e) => { if (e.key === 'Escape') lbToggle(false); });
</script>

KPI tiles & form field

Use-case presets

Same tokens + components, three layouts. Put one preset class on a wrapper.

Signature rail & empty state

The 115° accent→accent-2 gradient is one named token (--grad-signature) reused as the nav rail, meter, progress bar and these. Set accent-2 = accent on a client theme and it collapses to a flat bar — pop, but client-safe.