npm - @officexapp/vidfarm-devcli - Versions diffs - 0.21.10 - Mend

@officexapp/vidfarm-devcli 0.21.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (516) hide show

package/.agents/skills/farmville-saas-ux/assets/starter.html ADDED Viewed

@@ -0,0 +1,294 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Farmville SaaS — Starter</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+:root{
+  --font-display:"Hanken Grotesk","blMelody",ui-sans-serif,system-ui,sans-serif;
+  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
+  /* honey gold — the one joy accent */
+  --gold-500:#ffc738;--gold-600:#f6c744;--gold-700:#fcb900;--gold-tint:#fff5e4;--gold-tint2:#ffe9cc;
+  /* ink + neutral scale */
+  --ink:#171717;--n-800:#262626;--n-700:#404040;--n-600:#525252;--n-500:#737373;--n-400:#a3a3a3;
+  --n-300:#d4d4d4;--n-200:#ededed;--n-100:#f5f5f5;--n-50:#fbfbfb;--white:#fff;
+  /* support pastels */
+  --sky:#3f9fe0;--sky-tint:#e2effd;--violet:#9f5bde;--violet-tint:#e4ddfd;--green:#22c55e;--green-tint:#dcfce7;--coral:#f97316;--coral-tint:#ffe9cc;
+  /* semantic */
+  --bg:var(--n-50);--bg-section:var(--n-100);--surface:var(--white);--border:var(--n-200);--border-strong:var(--n-300);
+  --text:var(--n-700);--text-muted:var(--n-500);--text-faint:var(--n-400);
+  /* radius */
+  --r-md:6px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;--r-3xl:24px;--r-full:9999px;
+  /* shadow */
+  --shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
+  --shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
+  --shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
+  --shadow-card:0 1px 2px #0000000d,0 8px 24px -12px #00000014;--shadow-nav:0 4px 24px -8px #00000026,0 1px 2px #0000000d;
+  --ring-gold:0 0 0 3px var(--gold-600),0 0 14px rgba(246,199,68,.4);
+  /* type */
+  --text-sm:.875rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-4xl:2.25rem;--text-5xl:3rem;
+  --display:clamp(3rem,7vw,6rem);
+  /* space + motion */
+  --section-y:clamp(4rem,9vw,7rem);--container:75rem;--gutter:clamp(1rem,4vw,2rem);
+  --glass-blur:16px;--ease:cubic-bezier(.22,1,.36,1);--dur:220ms;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html{font-size:16px}
+body{font-family:var(--font-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
+a{text-decoration:none;color:inherit}
+h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
+.container{width:min(var(--container),100%);margin:0 auto;padding:0 var(--gutter)}
+/* nav */
+.nav-wrap{position:sticky;top:0;z-index:50;padding:16px var(--gutter);display:flex;justify-content:center}
+.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);box-shadow:var(--shadow-nav)}
+.nav{width:min(var(--container),100%);display:flex;align-items:center;gap:24px;padding:10px 12px 10px 24px;border-radius:var(--r-full)}
+.brand{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.02em}
+.nav-links{display:flex;gap:2px;margin:0 auto;list-style:none}
+.nav-links a{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--r-lg);font-size:15px;font-weight:500;color:var(--n-700);transition:background var(--dur) var(--ease)}
+.nav-links a:hover{background:#0000000a}
+.caret{font-size:11px;color:var(--n-400)}
+.nav-cta{display:flex;align-items:center;gap:8px}
+.link-quiet{padding:8px 12px;font-size:15px;font-weight:500;color:var(--n-700)}
+@media(max-width:820px){.nav-links{display:none}}
+/* buttons */
+.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-full);font-family:var(--font-body);font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
+.btn .arrow{transition:transform var(--dur) var(--ease)}
+.btn:hover .arrow{transform:translateX(3px)}
+.btn-ink{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
+.btn-ink:hover{background:#000;box-shadow:var(--shadow-md);transform:translateY(-1px)}
+.btn-gold{background:var(--gold-500);color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
+.btn-gold:hover{background:var(--gold-700);box-shadow:0 6px 18px -6px rgba(252,185,0,.6);transform:translateY(-1px)}
+.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border);box-shadow:var(--shadow-xs)}
+.btn-ghost:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
+.btn-lg{padding:15px 26px;font-size:16px}
+/* badges */
+.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-full);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-xs);font-size:14px;font-weight:500;color:var(--n-700)}
+/* hero (Tier-2 pure-CSS sunny sky, no image asset needed) */
+.hero{position:relative;overflow:hidden;text-align:center;padding:120px var(--gutter) 110px}
+.hero-art{position:absolute;inset:0;z-index:0;background:
+  radial-gradient(58% 46% at 78% 20%,rgba(255,241,204,.9),transparent 60%),
+  linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 55%,#a9dbfb 100%)}
+.hero-art::after{content:"";position:absolute;right:9%;bottom:16%;width:340px;height:130px;
+  background:radial-gradient(ellipse 60% 60% at 30% 60%,#fff,transparent 70%),radial-gradient(ellipse 50% 70% at 66% 50%,#fff,transparent 70%);filter:blur(2px);opacity:.95}
+.hero-art::before{content:"";position:absolute;left:6%;top:30%;width:220px;height:90px;
+  background:radial-gradient(ellipse 60% 60% at 40% 60%,#fff,transparent 72%);filter:blur(3px);opacity:.8}
+.hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto;display:grid;gap:22px;justify-items:center}
+.hero h1{font-size:var(--display);line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.12)}
+.hero h1 .soft{color:rgba(255,255,255,.55)}
+.hero-sub{font-size:var(--text-xl);line-height:1.5;color:rgba(255,255,255,.94)}
+.hero .badge{background:rgba(255,255,255,.9)}
+/* floating screenshot */
+.hero-shot{position:relative;z-index:2;width:min(64rem,100%);margin:-70px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--r-3xl);box-shadow:var(--shadow-xl);padding:20px}
+.shot-row{display:flex;gap:16px;flex-wrap:wrap}
+.shot-pane{flex:1;min-width:220px;background:linear-gradient(180deg,#fafaff,#f4f2fb);border-radius:var(--r-2xl);padding:22px;min-height:180px}
+/* sections */
+.section{padding:var(--section-y) 0}
+.section-tint{background:var(--bg-section)}
+.center-intro{text-align:center;display:grid;gap:16px;justify-items:center;margin-bottom:48px}
+.section-title{font-size:var(--text-5xl);letter-spacing:-.025em}
+.section-sub{font-size:var(--text-xl);color:var(--text-muted)}
+/* cards */
+.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
+@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3xl);padding:32px;box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
+.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
+.card h3{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
+.card p{color:var(--text-muted);font-size:var(--text-lg)}
+.card-media{margin-top:24px;background:var(--n-50);border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px;display:flex;gap:12px;flex-wrap:wrap}
+/* icon tiles + nodes */
+.tile{width:40px;height:40px;border-radius:var(--r-xl);display:grid;place-items:center;font-size:18px;flex:none}
+.tile-violet{background:var(--violet-tint);color:var(--violet)}.tile-green{background:var(--green-tint);color:var(--green)}
+.tile-gold{background:var(--gold-tint2);color:var(--gold-700)}.tile-sky{background:var(--sky-tint);color:var(--sky)}.tile-coral{background:var(--coral-tint);color:var(--coral)}
+.node{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:12px 16px;box-shadow:var(--shadow-sm)}
+.node-title{font-weight:600;font-size:15px;color:var(--ink)}.node-sub{font-size:13px;color:var(--text-muted)}
+/* logo cloud */
+.logo-cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px;margin-bottom:8px}
+.logo{opacity:.5;filter:grayscale(1);font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--n-800);transition:opacity var(--dur) var(--ease)}
+.logo:hover{opacity:.8}
+/* stat cards */
+.trust-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
+@media(max-width:820px){.trust-wrap{grid-template-columns:1fr}}
+.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.stat-card{display:grid;gap:12px}
+.stat-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
+.stat-num{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
+.stars{color:var(--gold-500);font-size:20px;letter-spacing:2px}
+/* integration grid */
+.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:40px}
+.int-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px;box-shadow:var(--shadow-card);text-align:center}
+.int-icons{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
+.int-icon{width:52px;height:52px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--border);display:grid;place-items:center;box-shadow:var(--shadow-xs);font-size:22px}
+.int-label{font-weight:600;color:var(--ink);font-size:15px}
+/* footer */
+.footer{background:var(--ink);color:var(--n-400);padding:80px var(--gutter) 40px}
+.footer-inner{width:min(var(--container),100%);margin:0 auto}
+.footer-top{display:grid;grid-template-columns:1.4fr 3fr;gap:40px;margin-bottom:40px}
+@media(max-width:820px){.footer-top{grid-template-columns:1fr}}
+.footer-brand{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--gold-500)}
+.footer-tagline{color:var(--n-500);margin-top:8px}
+.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
+@media(max-width:560px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
+.footer-col h4{color:var(--n-400);font-size:14px;font-weight:600;margin-bottom:14px;font-family:var(--font-body)}
+.footer-col a{display:block;color:var(--n-300);font-size:15px;padding:6px 0;transition:color var(--dur) var(--ease)}
+.footer-col a:hover{color:#fff}
+.trust-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;padding-top:32px;border-top:1px solid #ffffff1a}
+.trust-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-full);background:#ffffff0d;color:var(--n-400);font-size:14px}
+:where(a,button,input,textarea):focus-visible{outline:none;box-shadow:var(--ring-gold)}
+</style>
+</head>
+<body>
+<!-- NAV -->
+<header class="nav-wrap">
+  <nav class="nav glass">
+    <a class="brand" href="#">Fillout</a>
+    <ul class="nav-links">
+      <li><a href="#">Products <span class="caret">⌄</span></a></li>
+      <li><a href="#">Templates <span class="caret">⌄</span></a></li>
+      <li><a href="#">Integrations <span class="caret">⌄</span></a></li>
+      <li><a href="#">Pricing</a></li>
+    </ul>
+    <div class="nav-cta">
+      <a class="link-quiet" href="#">Log in</a>
+      <a class="btn btn-ink" href="#">Get started <span class="arrow">→</span></a>
+    </div>
+  </nav>
+</header>
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-art"></div>
+  <div class="hero-inner">
+    <span class="badge">📋 Forms by Zite</span>
+    <h1><span class="soft">Forms that</span><br>do it all</h1>
+    <p class="hero-sub">Make any form with Fillout,<br>the all-in-one form solution.</p>
+    <a class="btn btn-ink btn-lg" href="#">Get Started <span class="arrow">→</span></a>
+  </div>
+</section>
+<div class="hero-shot">
+  <div class="shot-row">
+    <div class="shot-pane" style="flex:.9">
+      <div class="node"><span class="tile tile-sky">📄</span><div><div class="node-title">Form submitted</div><div class="node-sub">Submission trigger</div></div></div>
+    </div>
+    <div class="shot-pane">
+      <div class="node"><span class="tile tile-violet">✦</span><div><div class="node-title">AI action</div><div class="node-sub">Qualify lead</div></div></div>
+    </div>
+  </div>
+</div>
+<!-- LOGO CLOUD + TRUST -->
+<section class="section">
+  <div class="container">
+    <div class="logo-cloud">
+      <span class="logo">TrueCar</span><span class="logo">BOMBAS</span><span class="logo">wayfair</span>
+      <span class="logo">The Athletic</span><span class="logo">HACK CLUB</span><span class="logo">HARVARD</span>
+    </div>
+  </div>
+  <div class="container" style="margin-top:56px">
+    <div class="trust-wrap">
+      <div>
+        <h2 style="font-size:var(--text-4xl)">100,000+ organizations trust Fillout for secure data intake</h2>
+        <p style="margin-top:16px;color:var(--text-muted);font-size:var(--text-lg)"><strong style="color:var(--ink)">Average rating of 4.8 out of 5</strong> from hundreds of reviews across G2 Business Reviews and Product Hunt.</p>
+      </div>
+      <div class="stat-row">
+        <div class="card stat-card"><div class="stat-head"><span class="tile tile-coral">G</span> Business reviews</div><div class="stat-num">5/5</div><div class="stars">★★★★★</div></div>
+        <div class="card stat-card"><div class="stat-head"><span class="tile tile-coral">P</span> Product Hunt</div><div class="stat-num">4.7/5</div><div class="stars">★★★★★</div></div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- FEATURES -->
+<section class="section section-tint">
+  <div class="container center-intro">
+    <span class="badge">🔥 Features</span>
+    <h2 class="section-title">It all starts with a form</h2>
+    <p class="section-sub">Build the exact form you need, in minutes.</p>
+  </div>
+  <div class="container grid-2">
+    <div class="card">
+      <h3>Create with drag-and-drop</h3>
+      <p>Choose from pre-built themes or create your own, with your fonts, logo, colors, custom CSS &amp; more.</p>
+      <div class="card-media">
+        <span class="tile tile-gold">Aa</span><span class="tile tile-sky">✉</span><span class="tile tile-violet">▦</span>
+      </div>
+    </div>
+    <div class="card">
+      <h3>Automate with smart forms</h3>
+      <p>Reduce manual work with intelligent routing.</p>
+      <div class="card-media" style="flex-direction:column;align-items:flex-start;gap:10px">
+        <div class="node"><span class="tile tile-violet">✦</span><div><div class="node-title">AI action</div><div class="node-sub">Qualify lead</div></div></div>
+        <div class="node"><span class="tile tile-green">⋔</span><div><div class="node-title">Branch</div><div class="node-sub">Based on priority</div></div></div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- INTEGRATIONS -->
+<section class="section">
+  <div class="container center-intro">
+    <h2 class="section-title">Integrate with all your apps</h2>
+    <p class="section-sub">Get more done with the tools you already use.</p>
+  </div>
+  <div class="container">
+    <div class="int-grid">
+      <div class="int-card"><div class="int-icons"><span class="int-icon">🟠</span><span class="int-icon">☁️</span><span class="int-icon">🅿️</span></div><div class="int-label">Capture and manage leads</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">💬</span><span class="int-icon">📨</span><span class="int-icon">🎮</span></div><div class="int-label">Get notified instantly</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">🔷</span><span class="int-icon">📊</span><span class="int-icon">🟦</span></div><div class="int-label">Track lead conversions</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">📁</span><span class="int-icon">📓</span><span class="int-icon">🟩</span></div><div class="int-label">Create or update records</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">📅</span><span class="int-icon">📞</span><span class="int-icon">🗓️</span></div><div class="int-label">Book more meetings</div></div>
+    </div>
+    <div style="text-align:center;margin-top:40px"><a class="btn btn-ghost" href="#">View all integrations <span class="arrow">→</span></a></div>
+  </div>
+</section>
+<!-- CTA -->
+<section class="section section-tint">
+  <div class="container center-intro" style="margin:0">
+    <h2 class="section-title">Make your first form in minutes</h2>
+    <a class="btn btn-gold btn-lg" href="#" style="margin-top:8px">Get started <span class="arrow">→</span></a>
+  </div>
+</section>
+<!-- FOOTER -->
+<footer class="footer">
+  <div class="footer-inner">
+    <div class="footer-top">
+      <div>
+        <div class="footer-brand">Fillout</div>
+        <div class="footer-tagline">The all-in-one form solution</div>
+      </div>
+      <div class="footer-cols">
+        <div class="footer-col"><h4>General</h4><a href="#">Home</a><a href="#">Pricing</a><a href="#">Careers</a><a href="#">Blog</a></div>
+        <div class="footer-col"><h4>Product</h4><a href="#">Forms</a><a href="#">Scheduling</a><a href="#">Payments</a><a href="#">Workflows</a></div>
+        <div class="footer-col"><h4>AI tools</h4><a href="#">AI Form Builder</a><a href="#">AI Quiz Maker</a><a href="#">AI Survey Maker</a><a href="#">PDF to Form</a></div>
+        <div class="footer-col"><h4>Resources</h4><a href="#">Help Center</a><a href="#">Status</a><a href="#">About</a><a href="#">Compare</a></div>
+      </div>
+    </div>
+    <div class="trust-row">
+      <span class="trust-pill">🛡️ SOC II Type 2 Compliant</span>
+      <span class="trust-pill">🔒 256-bit AES Data encryption</span>
+      <span class="trust-pill">🎧 24/5 Support. Here if you need us</span>
+    </div>
+  </div>
+</footer>
+</body>
+</html>

package/.agents/skills/farmville-saas-ux/references/components.md ADDED Viewed

@@ -0,0 +1,340 @@
+# Farmville SaaS — Component Recipes
+Copy-paste HTML + CSS for every signature component. All of them reference the tokens in `tokens.md`
+(paste that `:root` block first). Class names are plain so you can port them into React/Vue/Tailwind
+easily. `assets/starter.html` assembles most of these into one working page.
+## Table of contents
+1. Floating glass pill nav
+2. Pill buttons (charcoal, gold, ghost, arrow)
+3. Pill badges / eyebrows
+4. Illustrated hero (+ 3 background tiers)
+5. Soft cards & feature-card grid
+6. Colored icon tiles
+7. Workflow / node chips
+8. Logo cloud (grayscale trust bar)
+9. Review / stat cards
+10. Integration grid
+11. Warm-dark footer
+12. Form fields (the product's own surface)
+---
+## 1. Floating glass pill nav
+Detached, frosted, hairline-bordered, softly shadowed pill with margin from the top edge.
+```html
+<header class="nav-wrap">
+  <nav class="nav glass">
+    <a class="brand" href="/">Fillout</a>
+    <ul class="nav-links">
+      <li><a href="#">Products <span class="caret">⌄</span></a></li>
+      <li><a href="#">Templates <span class="caret">⌄</span></a></li>
+      <li><a href="#">Integrations <span class="caret">⌄</span></a></li>
+      <li><a href="#">Pricing</a></li>
+    </ul>
+    <div class="nav-cta">
+      <a class="link-quiet" href="#">Log in</a>
+      <a class="btn btn-ink" href="#">Get started <span class="arrow">→</span></a>
+    </div>
+  </nav>
+</header>
+```
+```css
+.nav-wrap { position: sticky; top: 0; z-index: 50; padding: 16px var(--gutter); display: flex; justify-content: center; }
+.nav {
+  width: min(var(--container), 100%);
+  display: flex; align-items: center; gap: 24px;
+  padding: 10px 12px 10px 24px;
+  border-radius: var(--r-full);
+}
+.brand { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
+.nav-links { display: flex; gap: 4px; margin: 0 auto; list-style: none; }
+.nav-links a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--r-lg);
+  font-size: 15px; font-weight: 500; color: var(--n-700); transition: background var(--dur) var(--ease); }
+.nav-links a:hover { background: #0000000a; }
+.caret { font-size: 11px; color: var(--n-400); }
+.nav-cta { display: flex; align-items: center; gap: 8px; }
+.link-quiet { padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--n-700); }
+```
+Over the illustrated hero, give the nav a whiter fill: `.nav.on-hero { background: rgba(255,255,255,0.72); }`.
+---
+## 2. Pill buttons
+Three variants + the arrow-nudge. Buttons are always fully rounded.
+```css
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 20px; border-radius: var(--r-full);
+  font-family: var(--font-body); font-size: 15px; font-weight: 600;
+  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
+  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
+}
+.btn .arrow { transition: transform var(--dur) var(--ease); }
+.btn:hover .arrow { transform: translateX(3px); }
+/* Charcoal — the workhorse primary on light backgrounds */
+.btn-ink { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
+.btn-ink:hover { background: #000; box-shadow: var(--shadow-md); transform: translateY(-1px); }
+/* Honey-gold — the "joy" CTA. Use sparingly (footer hero CTA, key conversion). */
+.btn-gold { background: var(--gold-500); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm); }
+.btn-gold:hover { background: var(--gold-700); box-shadow: 0 6px 18px -6px rgba(252,185,0,.6); transform: translateY(-1px); }
+/* Ghost — white pill with hairline border, secondary actions */
+.btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-xs); }
+.btn-ghost:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
+```
+```html
+<a class="btn btn-ink">Get started <span class="arrow">→</span></a>
+<a class="btn btn-gold">Get started <span class="arrow">→</span></a>
+<a class="btn btn-ghost">View all integrations <span class="arrow">→</span></a>
+```
+---
+## 3. Pill badges / eyebrows
+Small rounded-full chips with a mini glyph, used to label section intros.
+```css
+.badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 14px; border-radius: var(--r-full);
+  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-xs);
+  font-size: 14px; font-weight: 500; color: var(--n-700);
+}
+```
+```html
+<span class="badge">🔥 Features</span>
+<span class="badge">📋 Forms by Zite</span>
+```
+---
+## 4. Illustrated hero
+The #1 signature move. A warm, sunny, hand-illustrated scene behind a centered, two-tone headline.
+```html
+<section class="hero">
+  <div class="hero-art"><!-- background art: see tiers below --></div>
+  <div class="hero-inner">
+    <span class="badge">📋 Forms by Zite</span>
+    <h1 class="hero-h1"><span class="soft">Forms that</span><br>do it all</h1>
+    <p class="hero-sub">Make any form with Fillout,<br>the all-in-one form solution.</p>
+    <a class="btn btn-ink btn-lg">Get Started <span class="arrow">→</span></a>
+  </div>
+</section>
+```
+```css
+.hero { position: relative; overflow: hidden; text-align: center; padding: 120px var(--gutter) 96px; }
+.hero-art { position: absolute; inset: 0; z-index: 0; }
+.hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; display: grid; gap: 24px; justify-items: center; }
+.hero-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--display); line-height: 1.0; letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.12); }
+.hero-h1 .soft { color: rgba(255,255,255,0.55); }
+.hero-sub { font-size: var(--text-xl); line-height: 1.5; color: rgba(255,255,255,0.92); font-weight: 400; }
+.btn-lg { padding: 15px 26px; font-size: 16px; }
+```
+### Background tiers — pick the highest one you can produce
+**Tier 1 — commissioned/generated illustration (the real signature).** A painterly, Ghibli/storybook
+scene: bright blue sky, golden-hour cumulus clouds, lush green foliage, a soft sunlit city. Warm,
+optimistic, hand-made. Set as `.hero-art { background: url(...) center/cover; }`. Generation prompt to
+reuse: *"soft anime / Studio-Ghibli style illustration, sunny bright blue sky, big fluffy golden-hour
+cumulus clouds, lush green trees framing the sides, gentle sunlit city buildings, warm optimistic,
+painterly, no text, 16:9."*
+**Tier 2 — CSS sunny-sky fallback** (no art asset). A blue gradient sky with a soft sun glow and
+optional SVG clouds:
+```css
+.hero-art {
+  background:
+    radial-gradient(60% 50% at 78% 22%, rgba(255,241,204,0.9), transparent 60%),  /* sun glow */
+    linear-gradient(180deg, #3f9fe0 0%, #6cc0f5 55%, #a9dbfb 100%);               /* sky */
+}
+.hero-art::after { /* soft cloud */
+  content: ""; position: absolute; right: 8%; bottom: 18%; width: 320px; height: 120px;
+  background: radial-gradient(ellipse 60% 60% at 30% 60%, #fff, transparent 70%),
+              radial-gradient(ellipse 50% 70% at 65% 50%, #fff, transparent 70%);
+  filter: blur(2px); opacity: .95;
+}
+```
+**Tier 3 — warm minimal wash** (fastest, still on-brand). Cream/gold radial glow on off-white; use ink
+headline instead of white:
+```css
+.hero-art { background: radial-gradient(80% 70% at 50% -10%, var(--gold-tint), var(--n-50) 60%); }
+/* then: .hero-h1 { color: var(--ink); } .hero-h1 .soft { color: var(--n-400); } .hero-sub { color: var(--n-500); } */
+```
+Under the hero, Fillout floats a product screenshot on a big `--r-3xl` card with `--shadow-xl`,
+overlapping the section boundary — a nice touch: `margin-bottom: -80px; position: relative; z-index: 2`.
+---
+## 5. Soft cards & feature-card grid
+```css
+.card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-3xl); padding: 32px;
+  box-shadow: var(--shadow-card);
+  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
+.card h3 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; }
+.card p  { color: var(--text-muted); font-size: var(--text-lg); line-height: 1.5; margin: 0; }
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
+@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
+```
+The card border is always the uniform `1px solid var(--border)` on all four sides. **Never** add a
+thicker or colored side border (`border-left: 3px solid …` status stripes, edge accents) — it breaks
+the soft, even frame. To mark status/category on a card or list chip, put a pill (`.badge`) or a small
+colored dot inside the card instead.
+Section intro pattern (centered): badge → big title → one-line subhead, then the grid.
+```html
+<section class="section section-tint">
+  <div class="container center-intro">
+    <span class="badge">🔥 Features</span>
+    <h2 class="section-title">It all starts with a form</h2>
+    <p class="section-sub">Build the exact form you need, in minutes.</p>
+  </div>
+  <div class="container grid-2"> …cards… </div>
+</section>
+```
+```css
+.section { padding: var(--section-y) 0; }
+.section-tint { background: var(--bg-section); }
+.container { width: min(var(--container), 100%); margin: 0 auto; padding: 0 var(--gutter); }
+.center-intro { text-align: center; display: grid; gap: 16px; justify-items: center; margin-bottom: 48px; }
+.section-title { font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
+.section-sub { font-size: var(--text-xl); color: var(--text-muted); }
+```
+---
+## 6. Colored icon tiles
+Rounded-square tiles with a pale-tint background and a colored glyph. Used in cards, nodes, and feature
+lists.
+```css
+.tile { width: 40px; height: 40px; border-radius: var(--r-xl); display: grid; place-items: center; font-size: 20px; }
+.tile-violet { background: var(--violet-tint); color: var(--violet); }
+.tile-green  { background: var(--green-tint);  color: var(--green); }
+.tile-gold   { background: var(--gold-tint2);  color: var(--gold-700); }
+.tile-sky    { background: var(--sky-tint);    color: var(--sky); }
+.tile-coral  { background: var(--coral-tint);  color: var(--coral); }
+```
+---
+## 7. Workflow / node chips
+Small connected cards, each a white pill-ish card with an icon tile + title + subtitle. Great for
+"automation" product mockups.
+```html
+<div class="node">
+  <span class="tile tile-violet">✦</span>
+  <div><div class="node-title">AI action</div><div class="node-sub">Qualify lead</div></div>
+</div>
+```
+```css
+.node { display: inline-flex; align-items: center; gap: 12px; background: #fff;
+  border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 12px 16px; box-shadow: var(--shadow-sm); }
+.node-title { font-weight: 600; font-size: 15px; color: var(--ink); }
+.node-sub { font-size: 13px; color: var(--text-muted); }
+```
+Connect nodes with 2px `--n-300` lines/curved SVG paths. A "Publish ⚡" chip uses `.badge` with gold fill.
+---
+## 8. Logo cloud (grayscale trust bar)
+Muted, single-tone logos for social proof.
+```css
+.logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; }
+.logo-cloud img, .logo-cloud .logo { opacity: .55; filter: grayscale(1); height: 28px; transition: opacity var(--dur) var(--ease); }
+.logo-cloud img:hover { opacity: .8; }
+```
+---
+## 9. Review / stat cards
+White cards with a source row, a big number, and gold stars.
+```html
+<div class="card stat-card">
+  <div class="stat-head"><span class="tile tile-coral">G</span> Business reviews</div>
+  <div class="stat-num">5/5</div>
+  <div class="stars">★★★★★</div>
+</div>
+```
+```css
+.stat-card { display: grid; gap: 12px; }
+.stat-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
+.stat-num { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
+.stars { color: var(--gold-500); font-size: 20px; letter-spacing: 2px; }
+```
+---
+## 10. Integration grid
+Cards each holding 2–3 app icons (rounded-square white tiles) with a label below.
+```css
+.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
+.int-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 20px; box-shadow: var(--shadow-card); text-align: center; }
+.int-icons { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
+.int-icon { width: 56px; height: 56px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--border); display: grid; place-items: center; box-shadow: var(--shadow-xs); }
+.int-label { font-weight: 600; color: var(--ink); font-size: 15px; }
+```
+---
+## 11. Warm-dark footer
+Near-black surface, **amber logo**, muted-gray link columns, pill trust badges.
+```css
+.footer { background: var(--ink); color: var(--n-400); padding: 80px var(--gutter) 40px; }
+.footer-inner { width: min(var(--container), 100%); margin: 0 auto; }
+.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--gold-500); }
+.footer-tagline { color: var(--n-500); margin-top: 8px; }
+.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
+.footer-col h4 { color: var(--n-400); font-size: 14px; font-weight: 600; margin-bottom: 16px; font-family: var(--font-body); letter-spacing: 0.02em; }
+.footer-col a { display: block; color: var(--n-300); font-size: 15px; padding: 6px 0; transition: color var(--dur) var(--ease); }
+.footer-col a:hover { color: #fff; }
+.trust-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 32px; border-top: 1px solid #ffffff1a; }
+.trust-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-full); background: #ffffff0d; color: var(--n-400); font-size: 14px; }
+```
+The footer's primary "Get started →" CTA is the **gold** variant — this is the one place gold headlines a
+dark surface and it sings.
+---
+## 12. Form fields (the product's own surface)
+For the app/product UI itself, keep fields soft and friendly.
+```css
+.field label { display: block; font-size: 14px; font-weight: 500; color: var(--n-700); margin-bottom: 6px; }
+.field input, .field textarea {
+  width: 100%; padding: 12px 14px; border-radius: var(--r-md);
+  border: 1px solid var(--border-strong); background: #fff; font: 400 15px var(--font-body); color: var(--ink);
+  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--ring-gold); }
+.field input::placeholder { color: var(--text-faint); }
+```