From 812a74e199635b6d69662703062f10f5c1ebb544 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 7 Aug 2026 23:13:21 -0400 Subject: [PATCH] Add proposal/mockup style guide v1.0 --- style-guide.md | 238 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 style-guide.md diff --git a/style-guide.md b/style-guide.md new file mode 100644 index 0000000..6d909b1 --- /dev/null +++ b/style-guide.md @@ -0,0 +1,238 @@ +# 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/` | Yellow "SUPERSEDED" banner. Footer links to v2 + verdict. | +| **v2** | Post-pipeline rewrite — incorporates all review feedback | `proposals.iamgmb.com/-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//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 + +``` + +**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 + + + + + + Project Name — Business Proposal + + + +
+
+ + +
+ SUPERSEDED — This is the original proposal. + Read the post-review version (v2) +
+ +
+ + + + +
+ + +``` + +--- + +## 5. Superseded Banner (v1 Pages Only) + +```html +
+ ⚠ SUPERSEDED — This is the original proposal (v1) as submitted. + Read the post-review proposal (v2) → +
+``` + +```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 + +``` + +```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/` +- [ ] Submit v1 through the VerdictTank pipeline +- [ ] Save verdict as `mockup.iamgmb.com//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//` +- [ ] 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