Files

T

root 812a74e199 Add proposal/mockup style guide v1.0

2026-08-07 23:13:21 -04:00

7.5 KiB

Raw Blame History

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):

<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

: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)

<!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)

<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>

.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>:

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

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

7.5 KiB Raw Blame History Unescape Escape