Design System

<button class="btn btn-md btn-primary">Primary</button>
<button class="btn btn-md btn-secondary">Secondary</button>
<button class="btn btn-md btn-ghost">Ghost</button>
<button class="btn btn-md btn-danger">Danger</button>
<button class="btn btn-md btn-primary" disabled>Disabled</button>

<button class="btn btn-sm btn-primary">Small</button>
<button class="btn btn-md btn-primary">Medium</button>
<button class="btn btn-lg btn-primary">Large</button>

<button class="btn btn-md btn-primary">
  <svg width="14" height="14" ...>...</svg>
  New project
</button>

<!-- Icon-only (add title for accessibility) -->
<button class="btn btn-md btn-ghost" style="padding:8px;" title="Settings">
  <svg width="16" height="16" ...>...</svg>
</button>

<!-- Default -->
<div class="field">
  <label class="field-label">Label</label>
  <input class="input" placeholder="Enter value…">
  <span class="field-hint">Helper text</span>
</div>

<!-- Error -->
<div class="field">
  <label class="field-label">Email</label>
  <input class="input is-error" value="bad@@email">
  <span class="field-err-msg">Invalid email address</span>
</div>

<!-- Disabled -->
<input class="input" disabled value="Locked value">

<!-- Textarea -->
<textarea class="input" rows="4" placeholder="Long-form text…"></textarea>

<!-- Select with arrow -->
<div class="select-wrap">
  <select class="input">
    <option value="" disabled selected>Choose…</option>
    <option>Option A</option>
    <option>Option B</option>
  </select>
</div>

<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-neutral">Neutral</span>
<span class="badge badge-brand">Brand</span>

<!-- No dot -->
<span class="badge badge-info badge-no-dot">Info</span>

<!-- Pill shape -->
<span class="badge badge-success badge-pill">Success</span>

<div class="card">
  <div class="card-img-area">
    <!-- image or illustration -->
    <div class="card-badge-overlay">
      <span class="badge badge-success badge-pill">Live</span>
    </div>
  </div>
  <div class="card-body">
    <div class="card-eyebrow">Category</div>
    <div class="card-title">Card Title</div>
    <div class="card-text">Supporting description text.</div>
  </div>
  <div class="card-footer">
    <span class="card-meta">Updated 2h ago</span>
    <button class="btn btn-sm btn-ghost">View</button>
  </div>
</div>

<div class="stat-card">
  <div class="stat-eyebrow">Total projects</div>
  <div class="stat-value">142</div>
  <div class="stat-change up">
    <!-- up arrow svg -->
    +12% this month
  </div>
</div>

<div class="alert alert-success">
  <span class="alert-icon">✓</span>
  <div class="alert-body">
    <div class="alert-title">Changes saved</div>
    <div class="alert-text">Supporting detail.</div>
  </div>
  <button class="alert-dismiss" aria-label="Dismiss">✕</button>
</div>

<!-- Variants: alert-error · alert-warning · alert-info -->

<div class="alert alert-warning">
  <span class="alert-icon">⚠</span>
  <div class="alert-body">
    <div class="alert-title">Unsaved changes</div>
    <div class="alert-text">These will be lost if you navigate away.</div>
    <div style="display:flex;gap:8px;margin-top:10px;">
      <button class="btn btn-sm btn-danger">Discard</button>
      <button class="btn btn-sm btn-ghost">Keep editing</button>
    </div>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-md btn-secondary" onclick="toggleDropdown(this, event)">
    Options
    <svg ...></svg>
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item active">Dashboard</button>
    <button class="dropdown-item">Analytics</button>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item danger">Delete</button>
  </div>
</div>

<!-- Group header -->
<div class="dropdown-header">Account</div>

<!-- With icon -->
<button class="dropdown-item">
  <span class="dropdown-item-icon">✎</span>Edit
</button>

<!-- Disabled -->
<button class="dropdown-item disabled">Manage roles</button>

<div class="dropdown">
  <button class="btn btn-sm btn-ghost" onclick="toggleDropdown(this, event)">
    Status: Active
    <svg ...></svg>
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item">All statuses</button>
    <button class="dropdown-item active">Active</button>
    <button class="dropdown-item">Pending</button>
  </div>
</div>

<!-- Off -->
<label class="toggle-wrap">
  <span class="toggle">
    <input type="checkbox">
    <span class="toggle-slider"></span>
  </span>
  <span class="toggle-label">Notifications</span>
</label>

<!-- On -->
<label class="toggle-wrap">
  <span class="toggle">
    <input type="checkbox" checked>
    <span class="toggle-slider"></span>
  </span>
  <span class="toggle-label">Notifications</span>
</label>

<!-- Disabled -->
<label class="toggle-wrap" style="cursor:not-allowed;opacity:0.5;">
  <span class="toggle">
    <input type="checkbox" disabled>
    <span class="toggle-slider"></span>
  </span>
  <span class="toggle-label">Label</span>
</label>

<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;">
  <div>
    <div class="toggle-label" style="font-weight:700;">Email notifications</div>
    <div class="toggle-sublabel">Receive updates about your account.</div>
  </div>
  <label class="toggle-wrap" style="margin-left:16px;flex-shrink:0;">
    <span class="toggle">
      <input type="checkbox" checked>
      <span class="toggle-slider"></span>
    </span>
  </label>
</div>

<!-- Small: 32×18px -->
<span class="toggle" style="width:32px;height:18px;"> ... </span>

<!-- Default: 40×22px (no override needed) -->
<span class="toggle"> ... </span>

<!-- Large: 52×28px -->
<span class="toggle" style="width:52px;height:28px;"> ... </span>

<input type="checkbox" class="checkbox-input">
<input type="checkbox" class="checkbox-input" checked>
<input type="checkbox" class="checkbox-input" disabled>
<input type="checkbox" class="checkbox-input" checked disabled>

<!-- Indeterminate requires JS -->
<input type="checkbox" class="checkbox-input" id="chk">
<script>document.getElementById('chk').indeterminate = true;</script>

<!-- Label only -->
<label class="checkbox-wrap">
  <input type="checkbox" class="checkbox-input" checked>
  <span class="checkbox-label">Remember me</span>
</label>

<!-- Label + description -->
<label class="checkbox-wrap">
  <input type="checkbox" class="checkbox-input" checked>
  <span>
    <span class="checkbox-label">Email notifications</span>
    <span class="checkbox-sublabel">Alerts when someone mentions you.</span>
  </span>
</label>

<!-- Select-all header (indeterminate when partial) -->
<div style="display:flex;align-items:center;gap:12px;padding:12px 16px;">
  <input type="checkbox" class="checkbox-input" id="select-all">
  <span class="checkbox-label" style="font-weight:700;">Permissions</span>
</div>

<!-- Row -->
<label style="display:flex;align-items:center;gap:12px;padding:11px 16px;">
  <input type="checkbox" class="checkbox-input" checked>
  <span>
    <span class="checkbox-label">Read</span>
    <span class="checkbox-sublabel">View content and data.</span>
  </span>
</label>

<!-- JS: wire up select-all -->
<script>
const all = document.getElementById('select-all');
const items = document.querySelectorAll('.checkbox-input:not(#select-all)');
all.addEventListener('change', () => items.forEach(c => c.checked = all.checked));
items.forEach(c => c.addEventListener('change', () => {
  const checked = [...items].filter(i => i.checked).length;
  all.indeterminate = checked > 0 && checked < items.length;
  all.checked = checked === items.length;
}));
</script>

<input type="radio" class="radio-input" name="group">
<input type="radio" class="radio-input" name="group" checked>
<input type="radio" class="radio-input" name="group" disabled>
<input type="radio" class="radio-input" name="group" checked disabled>

<!-- All radios in the same group share name="…" -->
<label class="radio-wrap">
  <input type="radio" class="radio-input" name="notify" checked>
  <span>
    <span class="radio-label">Mentions only</span>
    <span class="radio-sublabel">Only when you are directly mentioned.</span>
  </span>
</label>

<label class="radio-wrap">
  <input type="radio" class="radio-input" name="notify">
  <span class="radio-label">Digest</span>
</label>

<label class="radio-card">
  <input type="radio" class="radio-input" name="plan" checked>
  <span style="flex:1;">
    <span class="radio-label">Pro</span>
    <span class="radio-sublabel">Unlimited projects and priority support.</span>
  </span>
</label>

<!-- CSS drives the selected state -->
<!-- .radio-card:has(.radio-input:checked) -->
<!--   border-color: var(--color-brand-primary)   -->
<!--   background:   var(--color-brand-primary-bg) -->

<!-- Backdrop -->
<div class="modal-backdrop" onclick="closeModal(this)">
  <div class="modal" onclick="event.stopPropagation()">

    <div class="modal-header">
      <span class="modal-title">Edit profile</span>
      <button class="modal-close" onclick="closeModal()">✕</button>
    </div>

    <div class="modal-body">
      <!-- content -->
    </div>

    <div class="modal-footer">
      <button class="btn btn-md btn-ghost">Cancel</button>
      <button class="btn btn-md btn-primary">Save changes</button>
    </div>

  </div>
</div>

<!-- Confirm -->
<div class="modal-footer">
  <button class="btn btn-md btn-ghost">Cancel</button>
  <button class="btn btn-md btn-primary">Publish</button>
</div>

<!-- Destructive: warning icon in header + btn-danger -->
<div class="modal-header">
  <span style="display:flex;align-items:center;gap:8px;">
    <span style="width:28px;height:28px;border-radius:9999px;
      background:var(--color-error-bg);display:inline-flex;
      align-items:center;justify-content:center;">⚠</span>
    <span class="modal-title">Delete project?</span>
  </span>
  <button class="modal-close">✕</button>
</div>
<div class="modal-footer">
  <button class="btn btn-md btn-ghost">Cancel</button>
  <button class="btn btn-md btn-danger">Delete project</button>
</div>

function openModal(id) {
  document.getElementById(id).style.display = 'flex';
  document.body.style.overflow = 'hidden';
}
function closeModal(id) {
  document.getElementById(id).style.display = 'none';
  document.body.style.overflow = '';
}

// Close on backdrop click
document.querySelectorAll('.modal-backdrop').forEach(el => {
  el.addEventListener('click', e => {
    if (e.target === el) closeModal(el.id);
  });
});

// Close on Escape
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.modal-backdrop')
      .forEach(el => closeModal(el.id));
  }
});

<!-- Add placement class to the anchor -->
<span class="tooltip-anchor tooltip-top">
  <button class="btn btn-sm btn-ghost">Top</button>
  <span class="tooltip-bubble">Tooltip on top</span>
</span>

<!-- tooltip-top | tooltip-right | tooltip-bottom | tooltip-left -->

<!-- Dark (default) -->
<span class="tooltip-anchor tooltip-top">
  <button>...</button>
  <span class="tooltip-bubble">Default dark tooltip</span>
</span>

<!-- Light -->
<span class="tooltip-anchor tooltip-top tooltip-light">
  <button>...</button>
  <span class="tooltip-bubble">Light surface tooltip</span>
</span>

<!-- Multiline -->
<span class="tooltip-bubble" style="white-space:normal;max-width:180px;">
  Longer tooltip that wraps when needed.
</span>

<!-- Icon button -->
<span class="tooltip-anchor tooltip-top">
  <button class="btn btn-sm btn-ghost" aria-label="Download">
    <svg ...></svg>
  </button>
  <span class="tooltip-bubble">Download</span>
</span>

<!-- Disabled button (wrap in span — disabled blocks pointer events) -->
<span class="tooltip-anchor tooltip-top">
  <button class="btn btn-md btn-primary" disabled
          style="pointer-events:none;">Submit</button>
  <span class="tooltip-bubble">Complete all required fields.</span>
</span>

<!-- CSS-only hover (no JS needed) -->
<style>
  .tooltip-bubble { display: none; }
  .tooltip-anchor:hover .tooltip-bubble,
  .tooltip-anchor:focus-within .tooltip-bubble { display: block; }
</style>

<nav class="top-nav">
  <span class="top-nav-logo">Acme</span>

  <div class="top-nav-links">
    <button class="top-nav-link active" onclick="switchNavItem(this)">Dashboard</button>
    <button class="top-nav-link" onclick="switchNavItem(this)">Projects</button>
    <button class="top-nav-link" onclick="switchNavItem(this)">Reports</button>
  </div>

  <div class="top-nav-actions">
    <button class="btn btn-sm btn-ghost">Help</button>
    <button class="btn btn-sm btn-primary">+ New</button>
    <span class="nav-avatar">SC</span>
  </div>
</nav>

<!-- Dark surface variant -->
<nav class="..." style="background:var(--color-brand-primary-dark);">
  <div class="...">
    <button class="dark-nav-link active" onclick="switchNavItem(this)">Dashboard</button>
    <button class="dark-nav-link" onclick="switchNavItem(this)">Projects</button>
  </div>
</nav>

<!-- Underline tabs -->
<div class="tabs-bar">
  <button class="tab-item active" data-panel="tab-overview" onclick="switchTab(this)">Overview</button>
  <button class="tab-item" data-panel="tab-activity" onclick="switchTab(this)">Activity</button>
  <button class="tab-item" data-panel="tab-settings" onclick="switchTab(this)">Settings</button>
</div>
<div class="tab-panel" id="tab-overview">Overview content here.</div>
<div class="tab-panel" id="tab-activity" style="display:none">Activity content here.</div>
<div class="tab-panel" id="tab-settings" style="display:none">Settings content here.</div>

<!-- Pill tabs -->
<div class="pill-tabs">
  <button class="pill-tab active" data-panel="pill-monthly" onclick="switchTab(this)">Monthly</button>
  <button class="pill-tab" data-panel="pill-quarterly" onclick="switchTab(this)">Quarterly</button>
  <button class="pill-tab" data-panel="pill-annually" onclick="switchTab(this)">Annually</button>
</div>
<div class="tab-panel" id="pill-monthly">Monthly billing details.</div>
<div class="tab-panel" id="pill-quarterly" style="display:none">Quarterly billing details.</div>
<div class="tab-panel" id="pill-annually" style="display:none">Annual billing details.</div>

<nav class="breadcrumb" aria-label="Breadcrumb">
  <button class="breadcrumb-item">Home</button>
  <span class="breadcrumb-sep">/</span>
  <button class="breadcrumb-item">Projects</button>
  <span class="breadcrumb-sep">/</span>
  <span class="breadcrumb-item current"
        aria-current="page">Brand Guidelines</span>
</nav>

<!-- Collapsed: replace middle items with ··· -->
<span style="background:var(--color-neutral-100);
  border-radius:var(--radius-sm);padding:0 4px;
  cursor:pointer;">···</span>

<div class="ds-table-wrap">
  <table class="ds-table">
    <thead>
      <tr>
        <th class="sortable sorted">Name <span class="sort-icon">↑</span></th>
        <th class="sortable">Role</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Sarah Chen</strong></td>
        <td>Product Designer</td>
        <td class="td-muted">San Francisco, CA</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- td-mono: monospace cell (dates, IDs, code) -->
<!-- td-muted: de-emphasised secondary text     -->
<!-- th.sortable + th.sorted: sort affordance   -->

<!-- Status badge in cell -->
<td><span class="badge badge-success">Active</span></td>

<!-- Progress bar in cell -->
<td>
  <div style="display:flex;align-items:center;gap:8px;">
    <div style="flex:1;height:4px;background:var(--color-neutral-100);
      border-radius:9999px;overflow:hidden;">
      <div style="width:72%;height:100%;
        background:var(--color-success-main);"></div>
    </div>
    <span style="font-size:11px;font-weight:700;">72%</span>
  </div>
</td>

<!-- Row actions -->
<td>
  <div class="table-row-actions">
    <button class="row-action">Edit</button>
    <button class="row-action row-action-danger">Delete</button>
  </div>
</td>

<!-- Bulk action bar (shown when rows are selected) -->
<div style="display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--color-brand-primary-bg);
  border:1px solid var(--color-brand-primary-light);">
  <span style="font-weight:700;color:var(--color-brand-primary);">2 selected</span>
  <div style="margin-left:auto;display:flex;gap:8px;">
    <button class="btn btn-sm btn-ghost">Export</button>
    <button class="btn btn-sm btn-danger">Delete</button>
  </div>
</div>

<!-- Checkbox column header (indeterminate = partial selection) -->
<th><input type="checkbox" class="checkbox-input" id="select-all"></th>

<!-- Selected row -->
<tr class="row-selected">
  <td><input type="checkbox" class="checkbox-input" checked></td>
  ...
</tr>

<div class="form-block">
  <div class="form-block-header">
    <div class="form-block-title">Sign in</div>
    <div class="form-block-desc">Enter your credentials.</div>
  </div>
  <div class="form-block-body">
    <div class="field">
      <label class="field-label">Email <span class="req">*</span></label>
      <input class="input" type="email" placeholder="[email protected]">
    </div>
    <div class="field">
      <label class="field-label">Password <span class="req">*</span></label>
      <input class="input" type="password">
      <span class="field-hint">Minimum 8 characters.</span>
    </div>
  </div>
  <div class="form-block-footer">
    <button class="btn btn-md btn-primary">Sign in</button>
  </div>
</div>

<div class="form-block-body">

  <!-- Equal two-column row -->
  <div class="form-row form-row-2">
    <div class="field"> ... </div>
    <div class="field"> ... </div>
  </div>

  <!-- Unequal: 2fr 1fr 1fr (address + city + postcode) -->
  <div class="form-row"
       style="grid-template-columns:2fr 1fr 1fr;">
    <div class="field"> ... </div>
    <div class="field"> ... </div>
    <div class="field"> ... </div>
  </div>

</div>

<!-- Footer: cancel left, save right -->
<div class="form-block-footer">
  <button class="btn btn-md btn-ghost">Cancel</button>
  <div class="form-footer-right">
    <button class="btn btn-md btn-primary">Save changes</button>
  </div>
</div>

<!-- Each section is its own form-block -->
<div class="form-block"> ... </div>
<div class="form-block"> ... </div>

<!-- Danger zone: tinted header + coloured border -->
<div class="form-block"
     style="border-color:var(--color-error-light);">
  <div class="form-block-header"
       style="background:var(--color-error-bg);
              border-bottom-color:var(--color-error-light);">
    <div class="form-block-title"
         style="color:var(--color-error-dark);">Danger zone</div>
  </div>
  ...
</div>

<!-- Sticky save footer -->
<div style="position:sticky;bottom:0;
  background:var(--color-neutral-0);
  border:1px solid var(--color-neutral-200);
  border-radius:var(--radius-lg);
  padding:14px 20px;
  box-shadow:var(--shadow-md);">
  <button class="btn btn-md btn-ghost">Discard</button>
  <button class="btn btn-md btn-primary">Save all changes</button>
</div>