data-table-component
rendered
the brief, redacted

Design a dense data table with sorting affordances and a selected row state. Tests whether a model can make information density feel calm rather than cramped.

559 chars · 82 words · fingerprint 3b4a4ef0b3ee

raw output — byte exact

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deployments Table</title>
<style>
  :root {
    color-scheme: light;
    --bg: #eef0f3;
    --surface: #ffffff;
    --line: #e3e7ec;
    --line-strong: #d4dae2;
    --text: #202832;
    --muted: #687383;
    --subtle: #f7f8fa;
    --blue: #2f67c7;
    --blue-soft: #f0f5ff;
    --blue-line: #b8cdf2;
    --hover: #f8fafc;
    --green: #27734e;
    --green-soft: #edf8f1;
    --amber: #936b18;
    --amber-soft: #fff8e8;
    --red: #a13d3d;
    --red-soft: #fff1f1;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-width: 1000px;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 72px;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .table-card {
    width: 1040px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(31, 42, 55, 0.07), 0 1px 2px rgba(31, 42, 55, 0.04);
    overflow: hidden;
  }

  .table-header {
    height: 68px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  .heading-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.01em;
  }

  .record-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
  }

  .toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .filter {
    height: 31px;
    min-width: 178px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: #8a94a2;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
  }

  .filter-icon {
    width: 13px;
    height: 13px;
    position: relative;
    border: 1.5px solid currentColor;
    border-radius: 50%;
  }

  .filter-icon::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 1.5px;
    right: -4px;
    bottom: -2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 2px;
  }

  .table-wrap {
    overflow: hidden;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
  }

  col.status { width: 16%; }
  col.service { width: 24%; }
  col.region { width: 16%; }
  col.deployed { width: 17%; }
  col.duration { width: 12%; }
  col.timestamp { width: 15%; }

  thead {
    background: var(--subtle);
  }

  th {
    height: 42px;
    padding: 0 20px;
    color: #677282;
    text-align: left;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
  }

  th:first-child,
  td:first-child {
    padding-left: 22px;
  }

  th:last-child,
  td:last-child {
    padding-right: 22px;
  }

  .sort-button {
    height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0 7px;
    color: #3d4a5a;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: #edf2f9;
    border: 1px solid #d5dfed;
    border-radius: 4px;
  }

  .sort-arrow {
    display: inline-block;
    color: var(--blue);
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
  }

  tbody tr {
    height: 54px;
    border-bottom: 1px solid var(--line);
    transition: background 120ms ease;
  }

  tbody tr:last-child {
    border-bottom: 0;
  }

  tbody tr.hovered,
  tbody tr:hover {
    background: var(--hover);
  }

  tbody tr.selected {
    background: var(--blue-soft);
    box-shadow: inset 3px 0 0 var(--blue);
  }

  tbody tr.selected:hover {
    background: #edf4ff;
  }

  td {
    padding: 0 20px;
    color: var(--text);
    vertical-align: middle;
    white-space: nowrap;
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 92px;
    font-size: 12px;
    font-weight: 600;
  }

  .status-mark {
    width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
  }

  .status-badge.success { color: var(--green); }
  .status-badge.success .status-mark {
    color: #fff;
    background: var(--green);
  }

  .status-badge.progress { color: var(--amber); }
  .status-badge.progress .status-mark {
    color: var(--amber);
    background: var(--amber-soft);
    border: 1px solid #e5cc84;
  }

  .status-badge.failed { color: var(--red); }
  .status-badge.failed .status-mark {
    color: #fff;
    background: var(--red);
  }

  .status-badge.queued { color: #5f6977; }
  .status-badge.queued .status-mark {
    color: #5f6977;
    background: #eef1f4;
    border: 1px solid #cbd2db;
  }

  .service-name {
    font-weight: 620;
    letter-spacing: -0.01em;
  }

  .service-detail,
  .region-detail {
    margin-left: 6px;
    color: var(--muted);
    font-size: 12px;
  }

  .region-cell,
  .deployed-cell {
    color: #4f5b6b;
  }

  .avatar {
    width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    margin-right: 7px;
    color: #425268;
    background: #e9eef5;
    border: 1px solid #dbe2eb;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 750;
    vertical-align: middle;
  }

  .duration {
    color: #394656;
    font-variant-numeric: tabular-nums;
  }

  .timestamp {
    color: #657181;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }

  .table-footer {
    height: 39px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    color: #7a8491;
    background: #fbfcfd;
    border-top: 1px solid var(--line);
    font-size: 11px;
  }

  .legend {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .legend-dot.selected {
    background: var(--blue);
  }

  .legend-dot.hovered {
    background: #aeb8c5;
  }
</style>
</head>
<body>
  <main class="table-card" aria-label="Server deployments">
    <header class="table-header">
      <div class="heading-group">
        <h1>Deployments</h1>
        <span class="record-count">8 records</span>
      </div>
      <div class="toolbar">
        <div class="filter" aria-label="Filter deployments">
          <span class="filter-icon" aria-hidden="true"></span>
          <span>Filter deployments</span>
        </div>
      </div>
    </header>

    <div class="table-wrap">
      <table>
        <colgroup>
          <col class="status">
          <col class="service">
          <col class="region">
          <col class="deployed">
          <col class="duration">
          <col class="timestamp">
        </colgroup>
        <thead>
          <tr>
            <th scope="col">Status</th>
            <th scope="col">Service name</th>
            <th scope="col">Region</th>
            <th scope="col">Deployed by</th>
            <th scope="col" aria-sort="descending">
              <button class="sort-button" type="button" aria-label="Duration, sorted descending">
                Duration <span class="sort-arrow" aria-hidden="true">↓</span>
              </button>
            </th>
            <th scope="col">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="status-badge success"><span class="status-mark">✓</span>Deployed</span></td>
            <td><span class="service-name">edge-api</span><span class="service-detail">v2.18.4</span></td>
            <td class="region-cell">us-east-1</td>
            <td class="deployed-cell"><span class="avatar">MC</span>Maya Chen</td>
            <td class="duration">4m 12s</td>
            <td class="timestamp">Today, 14:42:08</td>
          </tr>
          <tr>
            <td><span class="status-badge success"><span class="status-mark">✓</span>Deployed</span></td>
            <td><span class="service-name">billing-worker</span><span class="service-detail">v1.9.1</span></td>
            <td class="region-cell">eu-west-1</td>
            <td class="deployed-cell"><span class="avatar">OR</span>Owen Reed</td>
            <td class="duration">8m 37s</td>
            <td class="timestamp">Today, 13:56:41</td>
          </tr>
          <tr class="selected" aria-selected="true">
            <td><span class="status-badge progress"><span class="status-mark">↻</span>Deploying</span></td>
            <td><span class="service-name">search-indexer</span><span class="service-detail">v3.4.0</span></td>
            <td class="region-cell">ap-southeast-1</td>
            <td class="deployed-cell"><span class="avatar">PS</span>Priya Shah</td>
            <td class="duration">11m 05s</td>
            <td class="timestamp">Today, 13:44:19</td>
          </tr>
          <tr>
            <td><span class="status-badge success"><span class="status-mark">✓</span>Deployed</span></td>
            <td><span class="service-name">notifications</span><span class="service-detail">v5.2.7</span></td>
            <td class="region-cell">us-west-2</td>
            <td class="deployed-cell"><span class="avatar">JL</span>Jonas Lee</td>
            <td class="duration">3m 48s</td>
            <td class="timestamp">Today, 12:31:54</td>
          </tr>
          <tr>
            <td><span class="status-badge failed"><span class="status-mark">!</span>Failed</span></td>
            <td><span class="service-name">catalog-api</span><span class="service-detail">v4.7.2</span></td>
            <td class="region-cell">eu-central-1</td>
            <td class="deployed-cell"><span class="avatar">NK</span>Noah Kim</td>
            <td class="duration">2m 16s</td>
            <td class="timestamp">Today, 11:08:27</td>
          </tr>
          <tr class="hovered">
            <td><span class="status-badge success"><span class="status-mark">✓</span>Deployed</span></td>
            <td><span class="service-name">web-frontend</span><span class="service-detail">v8.11.0</span></td>
            <td class="region-cell">us-east-2</td>
            <td class="deployed-cell"><span class="avatar">AM</span>Ana Martins</td>
            <td class="duration">6m 22s</td>
            <td class="timestamp">Today, 10:47:02</td>
          </tr>
          <tr>
            <td><span class="status-badge queued"><span class="status-mark">•</span>Queued</span></td>
            <td><span class="service-name">data-exporter</span><span class="service-detail">v2.1.5</span></td>
            <td class="region-cell">ap-northeast-1</td>
            <td class="deployed-cell"><span class="avatar">LB</span>Leo Brooks</td>
            <td class="duration">—</td>
            <td class="timestamp">Today, 09:22:36</td>
          </tr>
          <tr>
            <td><span class="status-badge success"><span class="status-mark">✓</span>Deployed</span></td>
            <td><span class="service-name">auth-service</span><span class="service-detail">v6.0.3</span></td>
            <td class="region-cell">us-central-1</td>
            <td class="deployed-cell"><span class="avatar">EM</span>Elena Morales</td>
            <td class="duration">5m 09s</td>
            <td class="timestamp">Yesterday, 18:16:44</td>
          </tr>
        </tbody>
      </table>
    </div>

    <footer class="table-footer">
      Updated automatically
      <div class="legend" aria-label="Table state legend">
        <span class="legend-item"><span class="legend-dot selected"></span>Selected</span>
        <span class="legend-item"><span class="legend-dot hovered"></span>Hovered</span>
      </div>
    </footer>
  </main>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.6-luna",
  "system": "Respond with a single complete, self-contained HTML document rendering the component and nothing else. No markdown fences, no explanation. Inline all CSS and JavaScript, reference no external resource. Render the component at its natural size on a neutral background, with enough surrounding space that it can be photographed.",
  "messages": [
    {
      "role": "user",
      "content": "«REDACTED — 87 words, 559 chars»"
    }
  ],
  "maxOutputTokens": 32000,
  "gatewayStringId": "cb3bc47b-271f-4c9b-a222-cd70fff1d39b"
}
Design component · data-table-component · Benchmark Prompts