ippadmin/verdicttank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add proposal/mockup style guide v1.0

Browse Source
This commit is contained in:
root
2026-08-07 23:13:21 -04:00
parent 9b9c903037
commit 812a74e199
1 changed files with 238 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style-guide.md
+238
View File
@@ -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/<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