TubeSpanner Style Guide

Empty State: Default — with CTA 

<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;font-family:'Satoshi',sans-serif;max-width:360px;margin:0 auto;">

    <div style="width:72px;height:72px;border-radius:16px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0;">
        <div style="width:36px;height:36px;border-radius:8px;background:var(--primary-color);opacity:0.4;"></div>
    </div>

    <h3 style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);margin:0 0 8px;">No scripts yet</h3>

    <p style="font-family:'Satoshi';font-size:0.875rem;color:var(--paragraph);margin:0 0 24px;line-height:1.55;">Generate your first script to get started. TubeSpanner will help you write engaging content for your channel.</p>

    <a href="#" class="btn btn-primary" style="font-size:0.875rem;padding:8px 20px;">Create a script</a>

</div>
 
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;font-family:'Satoshi',sans-serif;max-width:360px;margin:0 auto;">

  {{! Icon area }}
  <div style="width:72px;height:72px;border-radius:16px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0;">
    <div style="width:36px;height:36px;border-radius:8px;background:var(--primary-color);opacity:0.4;"></div>
  </div>

  {{! Title }}
  <h3 style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);margin:0 0 8px;">{{title}}</h3>

  {{! Description }}
  <p style="font-family:'Satoshi';font-size:0.875rem;color:var(--paragraph);margin:0 0 24px;line-height:1.55;">{{description}}</p>

  {{! CTA }}
  {{#if ctaText}}
  <a href="#" class="btn btn-primary" style="font-size:0.875rem;padding:8px 20px;">{{ctaText}}</a>
  {{/if}}

</div>
 
{
  "title": "No scripts yet",
  "description": "Generate your first script to get started. TubeSpanner will help you write engaging content for your channel.",
  "ctaText": "Create a script"
}

Shown when a list or tool has no content yet. Appears in: Script Library (no scripts), Thumbnail Library, Video Suggestions (no channel connected), Social Planner (no posts scheduled), Achievements (no milestones yet).