bible/rules/patterns/web-visual-baseline

Web Visual Baseline — Starter Assets

This file keeps copyable starter code. The normative rules live in contract.md.

Canonical reference files (full, production version of the style) are in assets/:

• assets/view.css
• assets/view.html
• assets/upload.html

Prefer copying assets/view.css directly and adapting tokens. The starter below is a minimal distilled subset for very small apps.

Copyable Starter CSS

Use this as the default starting point for new web apps:

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --border: rgba(34, 36, 38, 0.15);
  --border-lite: rgba(34, 36, 38, 0.1);
  --ink: rgba(0, 0, 0, 0.87);
  --muted: rgba(0, 0, 0, 0.6);
  --accent: #2185d0;
  --accent-dark: #1678c2;
  --accent-bg: #dff0ff;
  --ok: #16ab39;
  --warn: #f2711c;
  --crit: #db2828;
  --header-bg: #1b1c1d;
  --radius: 4px;
  --shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  --content-width: 1500px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--header-bg);
}

.page-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.page-main {
  width: min(var(--content-width), calc(100vw - 48px));
  margin: 28px auto 56px;
}

.panel {
  margin-bottom: 28px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel > h2 {
  margin: 0;
  padding: 13px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}

.table-wrap {
  overflow-x: auto;
}

.kv-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.kv-table th,
.kv-table td,
.data-table th,
.data-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--border-lite);
}

.kv-table th,
.data-table th {
  background: var(--surface-2);
  border-top: 0;
  border-bottom: 1px solid var(--border-lite);
  font-weight: 700;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.04);
}

.button-primary {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button-primary:hover {
  background: var(--accent-dark);
}

.header-action {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.header-action:hover {
  background: rgba(255, 255, 255, 0.2);
}

.status-ok { color: var(--ok); }
.status-warning { color: var(--warn); }
.status-critical { color: var(--crit); }
.status-unknown { color: rgba(0, 0, 0, 0.45); }

@media (max-width: 720px) {
  .page-header {
    flex-direction: column;
    padding: 12px 16px;
  }

  .page-main {
    width: calc(100vw - 24px);
    margin-top: 20px;
  }
}

Copyable Starter HTML

<header class="page-header">
  <h1>Application Title</h1>
  <a class="header-action" href="/back">Back</a>
</header>

<main class="page-main">
  <section class="panel">
    <h2>Overview</h2>
    <div class="table-wrap">
      <table class="kv-table">
        <tbody>
          <tr>
            <th>Host</th>
            <td>server-01</td>
          </tr>
          <tr>
            <th>Status</th>
            <td><span class="status-ok">OK</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <section class="panel">
    <h2>Devices</h2>
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Vendor</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>NIC 1</td>
            <td>Intel</td>
            <td><span class="status-warning">Warning</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</main>