Homepage relaunch: contrast fix, heading hierarchy, order widget refactor, final CTA band, depth & polish

.impeccable/critique/2026-08-15T09-22-42Z__index-html.md

@@ -0,0 +1,132 @@
+---
+target: homepage index.html
+total_score: 26
+max_score: 36
+na_heuristics: 10
+p0_count: 3
+p1_count: 3
+timestamp: 2026-08-15T09-22-42Z
+slug: index-html
+---
+# ODOO4projects.com Homepage — Design Critique
+
+Method: dual-agent (A: design review · B: detector + browser evidence)
+
+## Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | 3/4 | Billing toggle gives feedback; order widget never marks server location as required |
+| 2 | Match System / Real World | 3/4 | "No FTP, no shenanigans" is borderline informal for B2B hosting voice |
+| 3 | User Control and Freedom | 2/4 | Order widget: no Escape key, no backdrop-click close, small × target |
+| 4 | Consistency and Standards | 3/4 | Blog post pages still dark/cyan (legacy); order widget uses ~15 inline styles bypassing tokens |
+| 5 | Error Prevention | 2/4 | No validation before Stripe redirect — empty `?location=` possible; no pre-checkout confirm |
+| 6 | Recognition Rather Than Recall | 4/4 | Features fully visible on cards; Most Popular badge kills comparison effort |
+| 7 | Flexibility and Efficiency | 3/4 | Yearly toggle good; domain-count differences buried in feature text |
+| 8 | Aesthetic and Minimalist Design | 3/4 | Blog cards after pricing add density to an already long Persuade page |
+| 9 | Error Recovery | 3/4 | Coupon feedback clear; blog fetch failure shows only "Could not load blog posts." |
+| 10 | Help and Documentation | n/a | Persuade surface; FAQ tab + support link cover it |
+| **Total** | | **26/36** | **Good (72%)** |
+
+## Design Specificity Verdict
+
+**High specificity — composed for THIS product.** Hero headline ("Deploy Odoo in 5 Minutes"), Odoo-specific features (Quick Git, ODOO Settings Panel, 2 Workers), growth-themed plan names (Side Hustle → Empire), real partner instances in the trust bar, Odoo-specific blog topics, and a custom Stripe routing pattern. The skeleton (icon cards + pricing grid) is a familiar hosting-page pattern, but the content is authentically this product.
+
+**Deterministic scan:** Detector exit code 2 (44 findings, regex-only mode — HTML parser modules unavailable, so this is an undercount). Real hits: 12 low-contrast green check icons (#28a745 at 2.9:1–3.1:1), 4 undersized functional labels (9.6–9.92px), 2 skipped heading levels, 5 line-length violations, 17 off-ramp font sizes, 19 off-palette colors. The detector caught the contrast and text-size failures that the human review missed — those are its best catches. False positives: `overused-font` (Inter IS the brand font per DESIGN.md), hero gradient midpoint #2a1a26 (within palette family), rgba(33,37,41,X) opacity tones (intentional accessibility variants), em-dash count (moderate for marketing copy).
+
+**Visual overlays:** Browser injection succeeded; 17 anti-patterns reported in console. No reliable user-visible overlay persists (servers auto-exited after idle).
+
+## Overall Impression
+
+A warm, confident, genuinely specific landing page with a working pricing widget and honest social proof. The bones are good. The problems cluster at the edges: legibility (green checks, tiny labels), dismissal (order widget trap), and ending (blog after the conversion point). The single biggest opportunity: turn the post-pricing ending from content exploration back into a conversion moment.
+
+## What's Working
+
+1. **The pricing widget plays.** Billing toggle live-updates all four prices; location selector is Odoo-contextual; coupon defaults to "FREE TRIAL" — warm hand-holding most hosts don't do.
+2. **The dark hero band with Warm Sand CTA** creates sharp hierarchy; the "5 Minutes" highlight in #f0cda8 draws the eye to the value prop; Holland.webp at 8% adds texture without noise.
+3. **"Your Company" placeholder in the trust bar** is strategically honest — it invites the visitor to imagine themselves there and links to pricing.
+
+## Priority Issues
+
+**[P0] Low-contrast green check icons fail WCAG AA** (detector)
+- **What**: 12 `fa-check` icons in #28a745 on pricing cards — 2.9:1 on Warm Paper, 3.1:1 on white.
+- **Why**: Below 4.5:1; fails accessibility and reads washed-out on the featured card.
+- **Fix**: Darken the success green (e.g. #1e7a34) or switch checks to Plum Velvet with green reserved for savings text.
+- **Command**: /impeccable colorize
+
+**[P0] Undersized functional text** (detector)
+- **What**: "1 month free" and "up to -10%" at 9.92px; badge labels "guide"/"news" at 9.6px — below the 10–11px floor.
+- **Why**: These are decision-relevant (savings, content type); unreadable on mobile.
+- **Fix**: Raise to ≥0.72rem with 11px minimum; give the toggle sub-labels room.
+- **Command**: /impeccable typeset
+
+**[P0] Order widget traps users** (design review)
+- **What**: `#orderWidgetOverlay` closes only via a 2.4rem × button — no Escape, no backdrop click, undersized touch target.
+- **Why**: Accidentally opened widget = forced path; mobile users have no convenient exit.
+- **Fix**: Backdrop click + Escape listener in script.js; enlarge close hit area to ≥2.8rem.
+- **Command**: /impeccable harden
+
+**[P1] Hero stats waste prime real estate on redundancy** (design review)
+- **What**: "Deploy in 5 min" and "Instant setup" say the same thing; two of four stat slots.
+- **Why**: The hero is the only place for credibility metrics; redundancy forfeits it.
+- **Fix**: Replace "Instant setup" with a real metric (uptime, instances deployed, avg deploy time).
+- **Command**: /impeccable layout
+
+**[P1] Empire plan: blank feature row + weakest CTA on the highest-margin plan** (design review)
+- **What**: `<li><br/></li>` blank entry in the feature list; "Contact Us" as outline button vs "Buy Now" primaries below it.
+- **Why**: Blank row reads as "ran out of things to say"; the custom plan should be the most confident ask.
+- **Fix**: Replace blank row with a concrete feature; make CTA "Get Custom Quote" in primary style.
+- **Command**: /impeccable clarify
+
+**[P1] Skipped heading levels hurt structure** (detector)
+- **What**: h1→h3 (missing h2) at hero→features; h3→h5 (missing h4) at blog→footer; footer uses h5s.
+- **Why**: Screen-reader navigation and outline integrity for assistive tech.
+- **Fix**: Promote features-strip headings to h2; footer headings to h3/p.
+- **Command**: /impeccable audit
+
+**[P2] Blog after pricing weakens the conversion ending** (design review + synthesis)
+- **What**: Page ends on content exploration ("Read more →") right after the pricing decision.
+- **Why**: Peak-end rule — the emotional close should reinforce the decision, not invite second-guessing.
+- **Fix**: Replace trailing blog grid with a final CTA band ("Ready to deploy?" + pricing link), or move blog above pricing.
+- **Command**: /impeccable layout
+
+**[P2] "Satisfied or reimbursed" is undefined** (design review)
+- **What**: Strong claim with no qualifier anywhere.
+- **Why**: "Reimbursed for what, when?" introduces a tiny trust question at the exact conversion moment.
+- **Fix**: Add a time qualifier ("within 7 days") or link to legal.html.
+- **Command**: /impeccable clarify
+
+**[P2] Weak features-strip hierarchy** (design review)
+- **What**: Feature h3s at 0.9rem compete with their own descriptions; line-height 1.
+- **Why**: The first value-prop section after social proof should lead the eye, not whisper.
+- **Fix**: h3 to 1rem+, line-height 1.3, tighter tracking.
+- **Command**: /impeccable typeset
+
+## Persona Red Flags
+
+**Jordan (first-timer)**:
+- Tab 1 contains nested `<strong>` tags ("Full management through your <strong>ODOO Settings Panel</strong>") — invalid HTML, visually noisy, and "ODOO Settings Panel" is unexplained jargon.
+- FAQ tab has only 4 questions — no "What is Odoo?" or "Do I need to know code?"; feels like a teaser, not help.
+
+**Riley (stress tester / comparison shopper)**:
+- On the Rise (featured, $36.25) is 87% more than Side Hustle ($19.40) with the only listed difference being Git module installs — the price jump needs a clearer justification or feature gap.
+- Empire: "Our service on your server" doesn't answer who provides infrastructure or whether it's BYO cloud.
+
+**Casey (mobile, on-the-go)**:
+- Trust bar partner row (7 items, 2rem gaps) forces horizontal scrolling on 390px viewports; logos read as tiny unlabeled icons.
+- Billing toggle sub-labels at 0.62rem are barely legible; 48×26px switch is a tight thumb target.
+
+## Minor Observations
+
+- Order widget ~15 inline styles bypass the CSS custom properties — theming drift.
+- Footer uses h5 headings ("Useful Links," "About us," "Follow us on") — odd semantics.
+- "AccellerSales" spelling (double l) in the trust bar — verify.
+- Chat widget (agent.js) overlaps the footer on narrow viewports.
+- Holland.webp hero texture's purpose is unclear — if it signals the NL data region, label it.
+- script.js `isEmpire` param naming is unclear (controls CTA style, not price).
+
+## Questions to Consider
+
+- Why does "On the Rise" carry "Most Popular" when Side Hustle is 47% cheaper — is that badge conversion data or a guess? Would "Recommended — best value for growing teams" be more honest?
+- The page says "No DevOps required" then features "Git-based module deployment" — who is actually reading this page, the owner or their technical contact?
+- What if the highest-priced plan made the strongest ask instead of the weakest?

.impeccable/design.json

@@ -0,0 +1,216 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-08-15T09:01:14Z",
+  "title": "Design System: ODOO4projects",
+  "extensions": {
+    "colorMeta": {
+      "plum-velvet": {
+        "role": "primary",
+        "displayName": "Plum Velvet",
+        "canonical": "#714b67",
+        "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"]
+      },
+      "deep-plum": {
+        "role": "primary",
+        "displayName": "Deep Plum",
+        "canonical": "#65435c",
+        "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"]
+      },
+      "warm-sand": {
+        "role": "secondary",
+        "displayName": "Warm Sand",
+        "canonical": "#f0cda8",
+        "tonalRamp": ["#c0b5aa","#c8b6a2","#d1b699","#d9b691","#e2b788","#eab780","#f3b777","#fbb76f"]
+      },
+      "ink-cocoa": {
+        "role": "neutral",
+        "displayName": "Ink Cocoa",
+        "canonical": "#1b1319",
+        "tonalRamp": ["#32252f","#372031","#3c1b34","#411636","#461139","#4b0c3b","#50073e","#550240"]
+      },
+      "warm-paper": {
+        "role": "neutral",
+        "displayName": "Warm Paper",
+        "canonical": "#f6f5f4",
+        "tonalRamp": ["#acaaa9","#bab7b5","#c8c4c1","#d5d1ce","#e3dfdb","#f1ece7","#f8f3ef","#fefaf5"]
+      },
+      "parchment": {
+        "role": "neutral",
+        "displayName": "Parchment",
+        "canonical": "#e5e3e0",
+        "tonalRamp": ["#9e9c9a","#acaaa7","#bab8b5","#c9c6c2","#d7d4d0","#e5e2de","#f4f0eb","#fefaf6"]
+      }
+    },
+    "typographyMeta": {
+      "display": {
+        "displayName": "Display",
+        "purpose": "Hero H1 only. Inter Tight 800, clamp(2rem, 4.5vw, 3.2rem), 1.15 line-height."
+      },
+      "headline": {
+        "displayName": "Headline",
+        "purpose": "Section H2s. Inter Tight 600, clamp(1.8rem, 3.2vw, 2.8rem), 1.25 line-height."
+      },
+      "title": {
+        "displayName": "Title",
+        "purpose": "Card H3s, plan names, tab headers. Inter Tight 600, clamp(1.1rem, 2vw, 1.4rem), 1.25."
+      },
+      "body": {
+        "displayName": "Body",
+        "purpose": "Paragraph text. Inter 400, 1rem, 1.6 line-height. Max ~580-680ch in prose."
+      },
+      "label": {
+        "displayName": "Label",
+        "purpose": "Meta text, plan features, small-print, tab subtitles. Inter Tight 500, 0.82rem, 0.04em letter-spacing."
+      }
+    },
+    "shadows": [
+      {
+        "name": "card-rest",
+        "value": "0 1px 3px rgba(0,0,0,0.06)",
+        "purpose": "Baseline pricing card shadow at rest."
+      },
+      {
+        "name": "card-hover",
+        "value": "0 4px 16px rgba(0,0,0,0.08)",
+        "purpose": "Interactive card hover, paired with translateY(-2px/-3px)."
+      },
+      {
+        "name": "toggle-thumb",
+        "value": "0 1px 3px rgba(0,0,0,0.15)",
+        "purpose": "Billing toggle thumb shadow."
+      },
+      {
+        "name": "blog-hover",
+        "value": "0 4px 20px rgba(113,75,103,0.08)",
+        "purpose": "Blog card hover on the light theme variant (homepage)."
+      }
+    ],
+    "motion": [
+      {
+        "name": "state-transition",
+        "value": "all 0.2s",
+        "purpose": "Default easing for state transitions (hover, focus, active)."
+      },
+      {
+        "name": "partner-scroll",
+        "value": "40s linear infinite",
+        "purpose": "Seamless partner logo carousel animation."
+      },
+      {
+        "name": "spinner",
+        "value": "0.8s linear infinite",
+        "purpose": "Loading spinner rotation."
+      },
+      {
+        "name": "toggle",
+        "value": "left 0.25s, background 0.25s",
+        "purpose": "Billing toggle switch animation."
+      }
+    ],
+    "breakpoints": [
+      { "name": "lg", "value": "992px" },
+      { "name": "md", "value": "768px" },
+      { "name": "sm", "value": "576px" }
+    ]
+  },
+  "components": [
+    {
+      "name": "Primary Button",
+      "kind": "button",
+      "refersTo": "button-primary",
+      "description": "Primary call-to-action on light surfaces. Use once per section.",
+      "html": "<button class=\"ds-btn-primary\">See Plans & Pricing</button>",
+      "css": ".ds-btn-primary{display:inline-block;padding:0.6rem 1.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;background:#714b67;color:#fff;border:1px solid #714b67;border-radius:0.5rem;cursor:pointer;text-decoration:none;transition:all 0.2s}.ds-btn-primary:hover{background:#65435c;border-color:#65435c;transform:translateY(-1px)}"
+    },
+    {
+      "name": "Hero Button",
+      "kind": "button",
+      "refersTo": "button-hero",
+      "description": "Primary call-to-action inside the dark hero band. Warm Sand on Ink Cocoa.",
+      "html": "<a class=\"ds-btn-hero\">Deploy in 5 Minutes</a>",
+      "css": ".ds-btn-hero{display:inline-block;padding:0.85rem 2.5rem;background:#f0cda8;color:#1b1319;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:1rem;font-weight:700;text-decoration:none;transition:opacity 0.2s,transform 0.2s}.ds-btn-hero:hover{opacity:0.9;transform:translateY(-2px)}"
+    },
+    {
+      "name": "Outline Button",
+      "kind": "button",
+      "refersTo": "button-outline",
+      "description": "Secondary/ghost action. Deep Plum border.",
+      "html": "<button class=\"ds-btn-outline\">How It Works</button>",
+      "css": ".ds-btn-outline{display:inline-block;padding:0.85rem 1.5rem;background:transparent;color:#65435c;border:1px solid #65435c;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;text-decoration:none;transition:all 0.2s;cursor:pointer}.ds-btn-outline:hover{background:#65435c;color:#fff}"
+    },
+    {
+      "name": "Pricing Card",
+      "kind": "card",
+      "refersTo": "card-pricing",
+      "description": "Pricing plan card. Featured variant adds Plum Velvet border + Most Popular pill.",
+      "html": "<div class=\"ds-card-pricing featured\"><div class=\"ds-card-badge\">Most Popular</div><h3>On the Rise</h3><div class=\"ds-card-price\"><strong>$36.25</strong> <small>/month</small></div><p class=\"ds-card-desc\">I need some modules and professional reports</p><ul><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> ODOO CE Hosting</li><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> Automatic Backups</li><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> Module installation via GIT</li></ul><button class=\"ds-btn-primary\" style=\"width:100%;box-sizing:border-box\">Buy Now</button></div>",
+      "css": ".ds-card-pricing{background:#fff;border:1px solid #e5e3e0;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.06)}.ds-card-pricing.featured{border:2px solid #714b67;position:relative}.ds-card-pricing:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-3px)}.ds-card-badge{position:absolute;top:0.75rem;right:0.75rem;background:#714b67;color:#fff;padding:0.2rem 0.6rem;border-radius:2rem;font-size:0.6rem;font-weight:600}.ds-card-pricing h3{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:700;margin:0 0 0.5rem}.ds-card-price{margin:0.5rem 0}.ds-card-price strong{font-size:clamp(1.28rem,2vw,1.92rem);color:#1b1319}.ds-card-price small{color:rgba(33,37,41,0.55);font-size:0.82rem}.ds-card-desc{font-size:0.82rem;color:rgba(33,37,41,0.6);font-style:italic;min-height:3rem}.ds-card-pricing ul{list-style:none;padding:0;margin:0;flex-grow:1}.ds-card-pricing li{padding:0.4rem 0;font-size:0.82rem;border-bottom:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;gap:0.4rem}.ds-card-pricing .ds-btn-primary{margin-top:0.75rem}"
+    },
+    {
+      "name": "Search Input",
+      "kind": "input",
+      "refersTo": "input",
+      "description": "Blog search / general text input on light surfaces.",
+      "html": "<div style=\"position:relative\"><svg style=\"position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:rgba(33,37,41,0.35)\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg><input class=\"ds-input\" type=\"text\" placeholder=\"Search posts...\"></div>",
+      "css": ".ds-input{width:100%;padding:0.75rem 1rem 0.75rem 2.5rem;font-size:0.85rem;font-family:Inter,sans-serif;background:#fff;border:1px solid #e5e3e0;border-radius:0.5rem;color:#212529;outline:none;transition:border-color 0.2s;box-sizing:border-box}.ds-input:focus{border-color:#714b67;box-shadow:0 0 0 2px rgba(113,75,103,0.15)}.ds-input::placeholder{color:rgba(33,37,41,0.35)}"
+    },
+    {
+      "name": "Navigation Tab (Active)",
+      "kind": "nav",
+      "refersTo": "tab-active",
+      "description": "Mission tab navigation — vertical rail on desktop, horizontal scroll on mobile.",
+      "html": "<nav style=\"display:flex;flex-direction:column;gap:0.25rem;width:220px\"><button class=\"ds-tab active\">Our Mission<small>What makes us different</small></button><button class=\"ds-tab\">Competitive Edge<small>We practice what we preach</small></button><button class=\"ds-tab\">Infrastructure<small>How we scale with you</small></button></nav>",
+      "css": ".ds-tab{display:block;padding:0.6rem 1rem;color:#212529;border-radius:0.6rem;border:none;background:none;width:100%;text-align:left;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.2s}.ds-tab:hover{background:#f6f5f4}.ds-tab.active{background:linear-gradient(135deg,rgba(113,75,103,0.08),rgba(113,75,103,0.03));color:#714b67;font-weight:600;border-left:3px solid #714b67}.ds-tab small{display:block;color:rgba(33,37,41,0.55);font-size:0.72rem;margin-top:0.1rem}.ds-tab.active small{color:rgba(113,75,103,0.6)}"
+    },
+    {
+      "name": "Billing Toggle",
+      "kind": "custom",
+      "refersTo": "toggle-switch",
+      "description": "Monthly / Yearly billing toggle with sliding thumb.",
+      "html": "<div style=\"display:flex;align-items:center;justify-content:center;gap:0.75rem\"><span class=\"ds-toggle-label active\">Monthly<small>1 month free</small></span><div class=\"ds-toggle-switch\"><div class=\"ds-toggle-thumb\"></div></div><span class=\"ds-toggle-label\">Yearly<small>up to -10%</small></span></div>",
+      "css": ".ds-toggle-label{font-size:0.82rem;font-weight:500;color:rgba(33,37,41,0.6);cursor:pointer;transition:color 0.2s;user-select:none}.ds-toggle-label.active{color:#1b1319;font-weight:600}.ds-toggle-label small{display:block;font-size:0.62rem;font-weight:400;color:#28a745;margin-top:0.1rem}.ds-toggle-switch{width:48px;height:26px;background:#e5e3e0;border-radius:13px;cursor:pointer;position:relative;transition:background 0.25s;flex-shrink:0}.ds-toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left 0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.15)}"
+    },
+    {
+      "name": "Blog Card",
+      "kind": "card",
+      "refersTo": "card-blog",
+      "description": "Blog post card on the homepage (light theme variant).",
+      "html": "<div class=\"ds-card-blog\"><div class=\"ds-card-blog-top\"><span class=\"ds-badge-guide\">guide</span><span class=\"ds-badge-agent\">AI</span></div><div class=\"ds-card-blog-date\">June 27, 2026</div><h3><a href=\"#\">Odoo Community vs. Enterprise: The Real Cost Breakdown (2026)</a></h3><p class=\"ds-card-blog-teaser\">A transparent cost comparison including hosting, licensing, and hidden costs for 5, 10, and 25-user teams.</p><a href=\"#\" class=\"ds-card-blog-link\">Read more &rarr;</a></div>",
+      "css": ".ds-card-blog{background:#fff;border:1px solid #e5e3e0;border-radius:0.6rem;padding:1.25rem;display:flex;flex-direction:column;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s}.ds-card-blog:hover{transform:translateY(-2px);border-color:#714b67;box-shadow:0 4px 20px rgba(113,75,103,0.08)}.ds-card-blog-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap}.ds-badge-guide{display:inline-block;padding:0.15rem 0.5rem;border-radius:3rem;font-size:0.6rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#08080c;background:#a78bfa}.ds-badge-agent{display:inline-block;padding:0.15rem 0.45rem;border-radius:3rem;font-size:0.56rem;font-weight:600;background:rgba(113,75,103,0.1);color:#714b67;border:1px solid rgba(113,75,103,0.2)}.ds-card-blog-date{font-size:0.82rem;color:rgba(33,37,41,0.45);margin-bottom:0.4rem}.ds-card-blog h3{margin:0 0 0.5rem}.ds-card-blog h3 a{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:600;line-height:1.35;color:#1b1319;text-decoration:none;transition:color 0.2s}.ds-card-blog h3 a:hover{color:#714b67}.ds-card-blog-teaser{font-size:0.9rem;color:rgba(33,37,41,0.6);line-height:1.55;margin:0 0 1rem;flex:1}.ds-card-blog-link{font-size:0.85rem;color:#714b67;text-decoration:none;font-weight:500;transition:opacity 0.2s;margin-top:auto}.ds-card-blog-link:hover{opacity:0.75}"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Global Workbench",
+    "overview": "ODOO4projects is a managed Odoo hosting brand built on a warm, quietly premium plum-and-sand palette. The system's personality is warm, trustworthy, quietly premium — infrastructure that feels approachable and dependable for business owners who are not sysadmins. The North Star — The Global Workbench — names the promise: tools are pre-configured, the bench is set up, and the work is ready to start anywhere in the world. The interface is light by default: Warm Paper surfaces on white, Ink Cocoa text, with Plum Velvet as the single strong accent and Warm Sand as its warm counterpoint. Components are tactile and confident: rounded corners, solid buttons, immediate hover feedback, small upward lifts. Depth is currently subtle (flat at rest, gentle lift on interaction) and is slated to deepen.",
+    "keyCharacteristics": [
+      "Light, warm surfaces with one strong plum accent and a peach counterpoint",
+      "Generous, centered layout with clear vertical rhythm",
+      "Tactile, confident components with rounded corners (0.5–1rem)",
+      "Subtle interaction-driven elevation — flat at rest, lift on hover",
+      "Inter Tight for display/headings, Inter for body",
+      "No emojis, no gradients-as-decoration, no dark surfaces in the brand system (legacy dark blog theme is being phased out)"
+    ],
+    "rules": [
+      { "name": "The One-Accent Rule", "body": "Plum Velvet is the only full-strength accent. Green is reserved exclusively for functional success states.", "section": "colors" },
+      { "name": "The Warmth Rule", "body": "Every neutral must land warm — plum-tinted grays, never cold blue-grays.", "section": "colors" },
+      { "name": "The Small-Print Silence Rule", "body": "Label text is always one or two steps quieter in color so it never raises its voice over headline content.", "section": "typography" },
+      { "name": "The Flat-By-Default Rule", "body": "Surfaces are flat at rest. Shadow and lift appear only as a response to hover, focus, or active state.", "section": "elevation" }
+    ],
+    "dos": [
+      "Do lead with Plum Velvet for any single accent moment — the button, the active tab, the featured border.",
+      "Do keep all neutrals warm; any gray on the page should read as plum-tinted or sand-tinted, not blue.",
+      "Do use warm, client-focused copy with short sentences and bullets; no tech jargon, no emojis.",
+      "Do keep section containers centered at 80% / max 1300px and let sections breathe at 2–3rem padding.",
+      "Do give interactive elements an immediate hover response — a lift, a fill change, or a border shift within 0.2s.",
+      "Do use the pill for badges and the lg radius for cards; consistency of the radius ladder is what makes the system feel composed."
+    ],
+    "donts": [
+      "Don't use the legacy dark/cyan blog theme (#08080c background, #00f5ff cyan accents) — it is an older style being phased out; the brand is the plum/peach light system only.",
+      "Don't paint large areas Plum Velvet; it is an accent, not a surface.",
+      "Don't introduce additional accent colors; green belongs to success states only.",
+      "Don't use sharp rectangular corners (0 radius) on interactive elements.",
+      "Don't decorate with gradients other than the established hero band and the primary-to-secondary 'hr' divider.",
+      "Don't add permanent shadows to resting surfaces; depth responds to interaction."
+    ]
+  }
+}