TubeSpanner Style Guide

Plans 

<div style="font-family:'Satoshi',sans-serif;background:#f9fafb;min-height:100vh;">

    <header style="background:#fff;border-bottom:1px solid var(--primary-light);padding:0 32px;height:56px;display:flex;align-items:center;">
        <a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
            <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
            <strong style="display:none;font-family:'Satoshi';color:var(--primary-color);">TubeSpanner</strong>
        </a>
        <a href="#" style="font-family:'Satoshi';font-size:0.875rem;color:var(--paragraph);text-decoration:none;">← Back to dashboard</a>
    </header>

    <div style="max-width:1100px;margin:0 auto;padding:48px 24px;">

        <div style="text-align:center;margin-bottom:12px;">
            <h1 style="font-family:'Satoshi';font-size:2rem;font-weight:900;color:var(--title);margin:0 0 10px;">Choose your plan</h1>
            <p style="font-family:'Satoshi';font-size:1rem;color:var(--paragraph);margin:0 0 24px;">Start free. Upgrade when you're ready to grow faster.</p>
            <div style="display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--primary-light);border-radius:8px;padding:6px 16px;">
                <span style="font-size:0.875rem;font-weight:700;color:var(--title);">Monthly</span>
                <div style="width:40px;height:22px;border-radius:11px;background:#e5e7eb;position:relative;cursor:pointer;">
                    <div style="position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;"></div>
                </div>
                <span style="font-size:0.875rem;font-weight:500;color:var(--paragraph);">Annual <span style="font-size:0.75rem;color:#22c55e;font-weight:700;">Save 20%</span></span>
            </div>
        </div>

        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;">

            <div style="background:#fff;border-radius:12px;border:2px solid var(--primary-light);padding:28px 24px;position:relative;display:flex;flex-direction:column;">

                <div style="margin-bottom:20px;">
                    <div style="font-size:1rem;font-weight:700;color:var(--title);margin-bottom:6px;">Forever Free</div>
                    <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:6px;">
                        <span style="font-size:2.25rem;font-weight:900;color:var(--title);">$0</span>

                    </div>
                    <p style="font-size:0.8125rem;color:var(--paragraph);margin:0;line-height:1.5;">Get started with the essential tools to build your channel.</p>
                </div>

                <a href="#" class="btn btn-light" style="text-align:center;margin-bottom:24px;font-weight:700;">Current plan</a>

                <ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;">
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Video Ideas &amp; Title Suggestions — 30/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Script Generator — 1/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Thumbnail Editor — 1/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Background Removals — 5/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Social Media Planner — 2/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Bio Pages — 1 (watermarked)
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Achievements Showcase — 28 days
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:#c0c0c0;">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">—</span>
                        Upload Assistant
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:#c0c0c0;">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">—</span>
                        Ask TubeSpanner (AI Chat)
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:#c0c0c0;">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">—</span>
                        Channel Audit
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:#c0c0c0;">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">—</span>
                        Promo Pages
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        A/B Testing Assistant — 1/mo
                    </li>
                </ul>

            </div>
            <div style="background:#fff;border-radius:12px;border:2px solid var(--primary-color);padding:28px 24px;position:relative;display:flex;flex-direction:column;">

                <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary-color);color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:4px 14px;border-radius:20px;white-space:nowrap;">Most popular</div>

                <div style="margin-bottom:20px;">
                    <div style="font-size:1rem;font-weight:700;color:var(--title);margin-bottom:6px;">Core</div>
                    <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:6px;">
                        <span style="font-size:2.25rem;font-weight:900;color:var(--title);">$14.99</span>
                        <span style="font-size:0.875rem;color:var(--paragraph);">/mo</span>
                    </div>
                    <p style="font-size:0.8125rem;color:var(--paragraph);margin:0;line-height:1.5;">Everything you need to grow your channel consistently.</p>
                </div>

                <a href="#" class="btn btn-primary" style="text-align:center;margin-bottom:24px;font-weight:700;">Upgrade to Core</a>

                <ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;">
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Video Ideas &amp; Title Suggestions — 250/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Script Generator — 2/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Thumbnail Editor — 25/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Background Removals — 25/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Social Media Planner — 5/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Bio Pages — 1
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Achievements Showcase — 1 Year
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Upload Assistant
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Ask TubeSpanner (AI Chat)
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Channel Audit — Essential
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:#c0c0c0;">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">—</span>
                        Promo Pages
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        A/B Testing Assistant — 10/mo
                    </li>
                </ul>

            </div>
            <div style="background:#fff;border-radius:12px;border:2px solid var(--primary-light);padding:28px 24px;position:relative;display:flex;flex-direction:column;">

                <div style="margin-bottom:20px;">
                    <div style="font-size:1rem;font-weight:700;color:var(--title);margin-bottom:6px;">Pro</div>
                    <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:6px;">
                        <span style="font-size:2.25rem;font-weight:900;color:var(--title);">$39.99</span>
                        <span style="font-size:0.875rem;color:var(--paragraph);">/mo</span>
                    </div>
                    <p style="font-size:0.8125rem;color:var(--paragraph);margin:0;line-height:1.5;">Unlimited access to every tool for your fastest growth.</p>
                </div>

                <a href="#" class="btn btn-light" style="text-align:center;margin-bottom:24px;font-weight:700;">Upgrade to Pro</a>

                <ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;">
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Video Ideas &amp; Title Suggestions — Unlimited
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Script Generator — 50/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Thumbnail Editor — Unlimited
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Background Removals — 100/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Social Media Planner — 15/mo
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Bio Pages — 3
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Achievements Showcase — Forever
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Upload Assistant
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Ask TubeSpanner (AI Chat)
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Channel Audit — Advanced
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        Promo Pages — 10
                    </li>
                    <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:var(--title);">
                        <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">✓</span>
                        A/B Testing Assistant — 100/mo
                    </li>
                </ul>

            </div>

        </div>

        <div style="text-align:center;margin-top:40px;">
            <p style="font-family:'Satoshi';font-size:0.875rem;color:var(--paragraph);">All plans include a 14-day free trial. No credit card required. Cancel anytime.</p>
        </div>

    </div>
</div>
 
{{! Standalone page — no sidebar }}
<div style="font-family:'Satoshi',sans-serif;background:#f9fafb;min-height:100vh;">

  {{! Header }}
  <header style="background:#fff;border-bottom:1px solid var(--primary-light);padding:0 32px;height:56px;display:flex;align-items:center;">
    <a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
      <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
      <strong style="display:none;font-family:'Satoshi';color:var(--primary-color);">TubeSpanner</strong>
    </a>
    <a href="#" style="font-family:'Satoshi';font-size:0.875rem;color:var(--paragraph);text-decoration:none;">← Back to dashboard</a>
  </header>

  <div style="max-width:1100px;margin:0 auto;padding:48px 24px;">

    {{! Heading }}
    <div style="text-align:center;margin-bottom:12px;">
      <h1 style="font-family:'Satoshi';font-size:2rem;font-weight:900;color:var(--title);margin:0 0 10px;">Choose your plan</h1>
      <p style="font-family:'Satoshi';font-size:1rem;color:var(--paragraph);margin:0 0 24px;">Start free. Upgrade when you're ready to grow faster.</p>
      {{! Billing toggle }}
      <div style="display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--primary-light);border-radius:8px;padding:6px 16px;">
        <span style="font-size:0.875rem;font-weight:{{#if annualBilling}}500{{else}}700{{/if}};color:{{#if annualBilling}}var(--paragraph){{else}}var(--title){{/if}};">Monthly</span>
        <div style="width:40px;height:22px;border-radius:11px;background:{{#if annualBilling}}var(--primary-color){{else}}#e5e7eb{{/if}};position:relative;cursor:pointer;">
          <div style="position:absolute;top:3px;{{#if annualBilling}}right:3px{{else}}left:3px{{/if}};width:16px;height:16px;border-radius:50%;background:#fff;"></div>
        </div>
        <span style="font-size:0.875rem;font-weight:{{#if annualBilling}}700{{else}}500{{/if}};color:{{#if annualBilling}}var(--title){{else}}var(--paragraph){{/if}};">Annual <span style="font-size:0.75rem;color:#22c55e;font-weight:700;">Save 20%</span></span>
      </div>
    </div>

    {{! Plan cards }}
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;">

      {{#each plans}}
      <div style="background:#fff;border-radius:12px;border:2px solid {{#if this.highlighted}}var(--primary-color){{else}}var(--primary-light){{/if}};padding:28px 24px;position:relative;display:flex;flex-direction:column;">

        {{#if this.badge}}
        <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary-color);color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:4px 14px;border-radius:20px;white-space:nowrap;">{{this.badge}}</div>
        {{/if}}

        <div style="margin-bottom:20px;">
          <div style="font-size:1rem;font-weight:700;color:var(--title);margin-bottom:6px;">{{this.name}}</div>
          <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:6px;">
            <span style="font-size:2.25rem;font-weight:900;color:var(--title);">{{this.price}}</span>
            {{#if this.period}}<span style="font-size:0.875rem;color:var(--paragraph);">/{{this.period}}</span>{{/if}}
          </div>
          <p style="font-size:0.8125rem;color:var(--paragraph);margin:0;line-height:1.5;">{{this.tagline}}</p>
        </div>

        <a href="#" class="btn {{#if this.highlighted}}btn-primary{{else}}btn-light{{/if}}" style="text-align:center;margin-bottom:24px;font-weight:700;">{{this.cta}}</a>

        <ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;">
          {{#each this.features}}
          <li style="display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;color:{{#if this.included}}var(--title){{else}}#c0c0c0{{/if}};">
            <span style="flex-shrink:0;font-size:0.75rem;margin-top:1px;">{{#if this.included}}✓{{else}}—{{/if}}</span>
            {{this.label}}
          </li>
          {{/each}}
        </ul>

      </div>
      {{/each}}

    </div>

    {{! FAQ / reassurance }}
    <div style="text-align:center;margin-top:40px;">
      <p style="font-family:'Satoshi';font-size:0.875rem;color:var(--paragraph);">All plans include a 14-day free trial. No credit card required. Cancel anytime.</p>
    </div>

  </div>
</div>
 
{
  "annualBilling": false,
  "plans": [
    {
      "name": "Forever Free",
      "price": "$0",
      "period": null,
      "tagline": "Get started with the essential tools to build your channel.",
      "cta": "Current plan",
      "highlighted": false,
      "badge": null,
      "features": [
        {
          "label": "Video Ideas & Title Suggestions — 30/mo",
          "included": true
        },
        {
          "label": "Script Generator — 1/mo",
          "included": true
        },
        {
          "label": "Thumbnail Editor — 1/mo",
          "included": true
        },
        {
          "label": "Background Removals — 5/mo",
          "included": true
        },
        {
          "label": "Social Media Planner — 2/mo",
          "included": true
        },
        {
          "label": "Bio Pages — 1 (watermarked)",
          "included": true
        },
        {
          "label": "Achievements Showcase — 28 days",
          "included": true
        },
        {
          "label": "Upload Assistant",
          "included": false
        },
        {
          "label": "Ask TubeSpanner (AI Chat)",
          "included": false
        },
        {
          "label": "Channel Audit",
          "included": false
        },
        {
          "label": "Promo Pages",
          "included": false
        },
        {
          "label": "A/B Testing Assistant — 1/mo",
          "included": true
        }
      ]
    },
    {
      "name": "Core",
      "price": "$14.99",
      "period": "mo",
      "tagline": "Everything you need to grow your channel consistently.",
      "cta": "Upgrade to Core",
      "highlighted": true,
      "badge": "Most popular",
      "features": [
        {
          "label": "Video Ideas & Title Suggestions — 250/mo",
          "included": true
        },
        {
          "label": "Script Generator — 2/mo",
          "included": true
        },
        {
          "label": "Thumbnail Editor — 25/mo",
          "included": true
        },
        {
          "label": "Background Removals — 25/mo",
          "included": true
        },
        {
          "label": "Social Media Planner — 5/mo",
          "included": true
        },
        {
          "label": "Bio Pages — 1",
          "included": true
        },
        {
          "label": "Achievements Showcase — 1 Year",
          "included": true
        },
        {
          "label": "Upload Assistant",
          "included": true
        },
        {
          "label": "Ask TubeSpanner (AI Chat)",
          "included": true
        },
        {
          "label": "Channel Audit — Essential",
          "included": true
        },
        {
          "label": "Promo Pages",
          "included": false
        },
        {
          "label": "A/B Testing Assistant — 10/mo",
          "included": true
        }
      ]
    },
    {
      "name": "Pro",
      "price": "$39.99",
      "period": "mo",
      "tagline": "Unlimited access to every tool for your fastest growth.",
      "cta": "Upgrade to Pro",
      "highlighted": false,
      "badge": null,
      "features": [
        {
          "label": "Video Ideas & Title Suggestions — Unlimited",
          "included": true
        },
        {
          "label": "Script Generator — 50/mo",
          "included": true
        },
        {
          "label": "Thumbnail Editor — Unlimited",
          "included": true
        },
        {
          "label": "Background Removals — 100/mo",
          "included": true
        },
        {
          "label": "Social Media Planner — 15/mo",
          "included": true
        },
        {
          "label": "Bio Pages — 3",
          "included": true
        },
        {
          "label": "Achievements Showcase — Forever",
          "included": true
        },
        {
          "label": "Upload Assistant",
          "included": true
        },
        {
          "label": "Ask TubeSpanner (AI Chat)",
          "included": true
        },
        {
          "label": "Channel Audit — Advanced",
          "included": true
        },
        {
          "label": "Promo Pages — 10",
          "included": true
        },
        {
          "label": "A/B Testing Assistant — 100/mo",
          "included": true
        }
      ]
    }
  ]
}

Pricing and plan comparison page. Three tiers: Forever Free, Core ($14.99/mo), Pro ($39.99/mo). Shown to logged-in users on upgrade prompts and on the /checkout page. Also used in the marketing site.