TubeSpanner Style Guide

Modal: Upgrade prompt 

<div style="background:rgba(0,0,0,0.5);padding:2rem;border-radius:8px;">
    <div class="modal fade show modal-do-next do-next-custom-popup" style="display:block;position:relative;z-index:1;">
        <div class="modal-dialog modal-dialog-centered" style="margin:0 auto;">
            <div class="modal-content" style="box-shadow:0 8px 32px rgba(0,0,0,0.18);">
                <div class="modal-header pb-0 border-0">
                    <button type="button" class="btn-close" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>Upgrade to Pro</h4>
                    <p>This feature is available on the Pro plan. Upgrade now to unlock unlimited access.</p>
                </div>
                <div class="modal-footer justify-content-center border-0 pt-0" style="flex-wrap:nowrap;gap:0.5rem;">
                    <a href="#" class="btn btn-primary" style="flex:1;min-width:0;">Upgrade now</a>
                    <a href="#" class="btn btn-primary btn-light btn-skip" style="flex:1;min-width:0;">Maybe later</a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div style="background:rgba(0,0,0,0.5);padding:2rem;border-radius:8px;">
  <div class="modal fade show modal-do-next do-next-custom-popup" style="display:block;position:relative;z-index:1;">
    <div class="modal-dialog modal-dialog-centered" style="margin:0 auto;">
      <div class="modal-content" style="box-shadow:0 8px 32px rgba(0,0,0,0.18);">
        <div class="modal-header pb-0 border-0">
          <button type="button" class="btn-close" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {{#if image}}
          <div class="img-figure text-center d-flex justify-content-center flex-column align-items-center" style="margin-bottom:1rem;">
            <img src="{{image}}" alt="" style="max-width:100%;border-radius:8px;">
          </div>
          {{/if}}
          <h4>{{title}}</h4>
          <p>{{body}}</p>
        </div>
        {{#if footer}}
        <div class="modal-footer justify-content-center border-0 pt-0" style="flex-wrap:nowrap;gap:0.5rem;">
          {{#each footer}}
          <a href="#" class="btn {{this.classes}}" style="flex:1;min-width:0;">{{this.label}}</a>
          {{/each}}
        </div>
        {{/if}}
      </div>
    </div>
  </div>
</div>
 
{
  "title": "Upgrade to Pro",
  "body": "This feature is available on the Pro plan. Upgrade now to unlock unlimited access.",
  "image": null,
  "footer": [
    {
      "label": "Upgrade now",
      "classes": "btn-primary"
    },
    {
      "label": "Maybe later",
      "classes": "btn-primary btn-light btn-skip"
    }
  ]
}

Bootstrap modal. Always use modal-dialog-centered. Header has borderless close button, footer is borderless and centred.

Button hierarchy:

  • Purple (btn-primary) — primary action, what the user is most likely to want
  • Orange (btn-primary btn-secondary) — secondary/alternative flow
  • Light (btn-primary btn-light btn-skip) — dismiss or low-priority action

Note: the production app currently uses orange as the prominent action in some modals — this is incorrect and should be updated to match this pattern.

Appears in: Do Next prompts (nudge user towards a recommended action), upgrade prompts (upsell when hitting a plan limit), onboarding steps, tool-specific info overlays (e.g. Homerun Analysis explainer).