verdicttank/style-guide.md

# VerdictTank Style Guide — Proposals & Mockups

Last updated: Aug 7, 2026  
Applies to: All proposal pages (proposals.iamgmb.com) and all mockup pages (mockup.iamgmb.com/verdicttank/)

---

## 1. Versioning Convention

Every project gets exactly two proposal URLs:

| Version | Description | URL Pattern | Behavior |
|---|---|---|---|
| **v1** | Original submission — frozen, never edited | `proposals.iamgmb.com/<project-slug>` | Yellow "SUPERSEDED" banner. Footer links to v2 + verdict. |
| **v2** | Post-pipeline rewrite — incorporates all review feedback | `proposals.iamgmb.com/<project-slug>-v2` or rebranded slug | Active proposal. Footer links to v1 + verdict + itself (bolded). |

**Rules:**
- v1 is immutable after submission. Do not edit it — only add the superseded banner.
- v2 is created fresh after the pipeline runs. It is a full rewrite, not a diff.
- The pipeline verdict itself lives at `mockup.iamgmb.com/<project>/critical-review.html`.

---

## 2. Footer Standard (NON-NEGOTIABLE)

Every proposal and every mockup page MUST have exactly this footer (updating the project name and URLs):

```html
<footer>
  <p><strong>PROJECT NAME</strong> — a product of IT Pro Partner</p>
  <p style="margin-top:0.5rem;">
    <a href="https://proposals.iamgmb.com/PROJECT-V1-SLUG">Original Proposal (v1)</a> ·
    <a href="https://mockup.iamgmb.com/PROJECT/critical-review.html">Pipeline Verdict</a> ·
    <a href="https://proposals.iamgmb.com/PROJECT-V2-SLUG" style="font-weight:700;">Post-Review Proposal (v2)</a> ·
    <a href="https://itpropartner.com">IT Pro Partner</a>
  </p>
</footer>
```

**Hard rules:**
- v2 link is ALWAYS bolded (`font-weight:700`)
- v1 link points to the frozen original (NOT the current page on v1 pages — v1 self-links with bold)
- Pipeline Verdict link is ALWAYS present
- IT Pro Partner link is ALWAYS last
- NO "All Proposals" link — removed permanently
- NO "Live Demo" or "Product Landing Page" links in footer
- v1 page footers treat the v1 link as the "current" (bolded) one
- All five pages in a project share this footer: v1 proposal, v2 proposal, landing mockup, critical review, logo exploration

### VerdictTank Implementation Reference

| Page | v1 link | Verdict link | v2 link | Bolded |
|---|---|---|---|---|
| proposals/sharktank | self | critical-review | verdicttank | v1 |
| proposals/verdicttank | sharktank | critical-review | self | v2 |
| mockup/index.html | sharktank | critical-review | verdicttank | v2 |
| mockup/critical-review.html | sharktank | self | verdicttank | v2 |
| mockup/logo-exploration.html | sharktank | critical-review | verdicttank | v2 |

---

## 3. Design Tokens

### Colors

```css
:root {
  --bg:         #ffffff;   /* light bg */
  --bg-dark:    #0a0a0a;   /* dark bg */
  --text:       #171717;   /* light text */
  --text-dark:  #ededed;   /* dark text */
  --text2:      #525252;   /* secondary text */
  --text2-dark: #a1a1a1;
  --text3:      #737373;   /* tertiary/muted */
  --text3-dark: #737373;
  --accent:     #dc2626;   /* crimson — primary brand color */
  --accent-hover: #b91c1c; /* darker crimson for hover states */
  --accent-light: #fef2f2; /* crimson at 5% opacity equivalent */
  --border:     #e5e5e5;   /* light border */
  --border-dark:#262626;   /* dark border */
  --ib:         #e5e5e5;   /* inline border (same as border in light) */
  --ib-dark:    #262626;
  --red:        #dc2626;   /* danger/risk-high */
  --green:      #16a34a;   /* success/risk-low */
  --amber:      #d97706;   /* risk-med */
}
```

### Typography

```
Font stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace
```

Sizing scale:
```
h1: 2rem (proposals), flexible (mockups)
h2: 1.25rem
h3: 1rem
body: 0.95rem (proposals), flexible (mockups)
small/muted: 0.8–0.85rem
```

### Spacing

```
Section gap: 2rem (proposals), 3rem+ (mockup sections)
Card padding: 1.25–1.5rem
Inline gap: 0.5–0.75rem
Footer margin-top: 2–3rem
```

### Borders & Radius

```
Border: 1px solid var(--border)
Border radius: 10px (cards), 8px (buttons), 6px (inputs)
Footer divider: border-top: 1px solid var(--border)
```

---

## 4. Page Structure Template (Proposals)

```html
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Name — Business Proposal</title>
  <!-- CSS vars, typography, layout, tables, pricing, footer styles -->
</head>
<body>
<div class="container">
  <header><!-- project name, tagline, status badge, date --></header>

  <!-- Superseded banner (v1 pages ONLY) -->
  <div class="superseded-banner">
    SUPERSEDED — This is the original proposal.
    <a href="v2-url">Read the post-review version (v2)</a>
  </div>

  <section><!-- content --></section>
  <!-- ... more sections ... -->

  <!-- STANDARD FOOTER -->
  <footer>
    <p><strong>Project Name</strong> — a product of IT Pro Partner</p>
    <p style="margin-top:0.5rem;">
      <a href="v1-url">Original Proposal (v1)</a> ·
      <a href="verdict-url">Pipeline Verdict</a> ·
      <a href="v2-url" style="font-weight:700;">Post-Review Proposal (v2)</a> ·
      <a href="https://itpropartner.com">IT Pro Partner</a>
    </p>
  </footer>
</div>
</body>
</html>
```

---

## 5. Superseded Banner (v1 Pages Only)

```html
<div class="superseded-banner">
  ⚠ SUPERSEDED — This is the original proposal (v1) as submitted.
  <a href="https://proposals.iamgmb.com/PROJECT-V2-SLUG">Read the post-review proposal (v2) →</a>
</div>
```

```css
.superseded-banner {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  text-align: center;
}
```

---

## 6. Theme Toggle (Mockups)

Mockups must support both light and dark themes via `data-theme` attribute on `<html>`:

```html
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
  <!-- sun/moon icon -->
</button>
```

```js
function toggleTheme() {
  const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}
// On load: respect localStorage, fall back to system preference
```

---

## 7. What Is FORBIDDEN

| Rule | Reason |
|---|---|
| Em dashes (—) | Fuse adjacent text on Telegram |
| "All Proposals" link in footer | Removed Aug 7, 2026 — version links provide all navigation |
| "Live Demo" / "Product Landing Page" in footer | Not versioning content — belongs in body |
| Shark emoji or "SharkTank" branding | Rebranded to VerdictTank |
| Model vendor names in public pages | Use functional roles only (e.g., "research model", "deep analysis model") |
| API keys, tokens, or credentials in any page source | Self-explanatory |
| `target="_blank"` without `rel="noopener"` | Security baseline |

---

## 8. Checklist for New Projects

When starting a new proposal project:

- [ ] Create v1 proposal at `proposals.iamgmb.com/<slug>`
- [ ] Submit v1 through the VerdictTank pipeline
- [ ] Save verdict as `mockup.iamgmb.com/<project>/critical-review.html`
- [ ] Create v2 proposal incorporating all pipeline feedback
- [ ] Add superseded banner to v1, linking to v2
- [ ] Apply standard footer to v1, v2, and ALL mockup pages
- [ ] Bold the "current" version link in each footer
- [ ] Create landing mockup at `mockup.iamgmb.com/<project>/`
- [ ] Ensure light/dark theme toggle on mockup
- [ ] Push all changes to Gitea
- [ ] 644 permissions on all web-facing files
- [ ] Verify all five pages return 200