TubeSpanner Style Guide

Dashboard 

<header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
    <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);font-size:1.1rem;">TubeSpanner</strong>
    </a>
    <div style="display:flex;align-items:center;gap:8px;">
        <button class="btn btn-primary" style="display:flex;align-items:center;gap:6px;font-size:0.875rem;padding:6px 14px;">
            <span style="font-size:1rem;font-weight:300;">+</span> Create
            <span style="border-left:1px solid rgba(255,255,255,0.4);margin-left:4px;padding-left:8px;font-size:0.7rem;">&#9660;</span>
        </button>
        <div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">DH</div>
    </div>
</header>

<div class="dashaboard-main">

    <div class="app-sidebar-wrapper">
        <div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">

            <ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
                <li class="nav-item active">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid var(--primary-color);background:var(--primary-light);color:var(--primary-color);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:700;">
                        <span style="width:20px;height:20px;border-radius:4px;background:var(--primary-color);flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Dashboard</span>

                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Plan</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Produce</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Promote</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Extras</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">My account</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Beta Tools</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
            </ul>

            <div style="padding:10px 14px 4px;font-family:'Satoshi';font-size:0.68rem;font-weight:700;letter-spacing:0.06em;color:var(--paragraph);text-transform:uppercase;">Most Used Tools</div>
            <ul class="list-unstyled" style="margin:0;padding:0 0 8px;">
                <li>
                    <a href="#" style="display:block;padding:7px 14px;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.8125rem;">Content Ideas</a>
                </li>
                <li>
                    <a href="#" style="display:block;padding:7px 14px;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.8125rem;">HomeRun</a>
                </li>
                <li>
                    <a href="#" style="display:block;padding:7px 14px;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.8125rem;">Viewer Targeting</a>
                </li>
                <li>
                    <a href="#" style="display:block;padding:7px 14px;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.8125rem;">Schedule Posts</a>
                </li>
                <li>
                    <a href="#" style="display:block;padding:7px 14px;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.8125rem;">Create a Title</a>
                </li>
            </ul>

            <div class="mt-auto" style="border-top:1px solid var(--primary-light);padding:12px 14px;">
                <a href="#" style="display:flex;align-items:center;gap:8px;color:var(--paragraph);text-decoration:none;font-family:'Satoshi';font-size:0.8rem;margin-bottom:10px;">
                    <span style="width:16px;height:16px;border-radius:50%;border:1.5px solid var(--paragraph);display:inline-flex;align-items:center;justify-content:center;font-size:0.6rem;flex-shrink:0;">?</span>
                    Feedback and Support
                </a>
                <div style="font-family:'Satoshi';font-size:0.8125rem;font-weight:700;color:var(--title);margin-bottom:2px;">Max</div>
                <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);margin-bottom:8px;">Background removals (Monthly)</div>
                <div style="display:flex;gap:4px;align-items:center;">
                    <span style="width:6px;height:6px;border-radius:50%;background:#ddd;display:inline-block;"></span>
                    <span style="width:6px;height:6px;border-radius:50%;background:var(--primary-color);display:inline-block;"></span>
                    <span style="width:6px;height:6px;border-radius:50%;background:#ddd;display:inline-block;"></span>
                </div>
            </div>

        </div>
    </div>

    <div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
        <div class="dashaboard-inner" style="padding:20px 24px;">

            <div style="display:flex;align-items:center;margin-bottom:12px;">
                <p style="font-family:'Satoshi';font-size:0.9375rem;font-weight:600;color:var(--title);margin:0;flex:1;">Hey Danielle, checkout these tools to help reach your goals.</p>
                <div style="display:flex;align-items:center;gap:10px;">
                    <span style="color:var(--paragraph);font-size:0.85rem;cursor:pointer;">&#9881;</span>
                    <span style="color:var(--paragraph);font-size:1rem;cursor:pointer;line-height:1;">&lsaquo;</span>
                    <span style="color:var(--paragraph);font-size:1rem;cursor:pointer;line-height:1;">&rsaquo;</span>
                </div>
            </div>

            <div style="display:flex;gap:10px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px;">
                <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
                    <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
                        <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">Video script templates</p>
                </a>
                <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
                    <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
                        <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">Thumbnail gallery</p>
                </a>
                <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
                    <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
                        <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">Planner</p>
                </a>
                <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
                    <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
                        <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">Scheduled posts</p>
                </a>
                <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
                    <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
                        <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">Membership perks</p>
                </a>
                <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
                    <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
                        <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">Promo pages</p>
                </a>
                <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
                    <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
                        <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">Smart replies</p>
                </a>
            </div>

            <p style="font-family:'Satoshi';font-size:0.9375rem;font-weight:600;color:var(--title);margin:0 0 12px;">To help meet your objectives, I recommend these tasks today.</p>

            <div style="display:flex;gap:10px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px;">
                <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
                    <div style="background:#6BA3BE;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:85px;border-radius:8px 8px 0 0;">
                        <div style="width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,0.25);margin-bottom:6px;"></div>
                        <span style="font-family:'Satoshi';font-size:0.65rem;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:0.06em;">video optimisation</span>
                    </div>
                    <div style="padding:12px;flex:1;display:flex;flex-direction:column;">
                        <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:6px;">Video missing a description</div>
                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);flex:1;margin-bottom:12px;line-height:1.5;">TubeSpanner has detected a video missing a description.</div>
                        <div style="display:flex;gap:14px;">
                            <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--secondary-color);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Open</a>
                            <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Skip</a>
                        </div>
                    </div>
                </div>
                <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
                    <div style="background:#6BA3BE;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:85px;border-radius:8px 8px 0 0;">
                        <div style="width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,0.25);margin-bottom:6px;"></div>
                        <span style="font-family:'Satoshi';font-size:0.65rem;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:0.06em;">video optimisation</span>
                    </div>
                    <div style="padding:12px;flex:1;display:flex;flex-direction:column;">
                        <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:6px;">Video missing end screen</div>
                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);flex:1;margin-bottom:12px;line-height:1.5;">TubeSpanner has detected a video missing an end screen.</div>
                        <div style="display:flex;gap:14px;">
                            <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--secondary-color);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Open</a>
                            <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Skip</a>
                        </div>
                    </div>
                </div>
                <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
                    <div style="background:#F26419;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:85px;border-radius:8px 8px 0 0;">
                        <div style="width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,0.25);margin-bottom:6px;"></div>
                        <span style="font-family:'Satoshi';font-size:0.65rem;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:0.06em;">content promotion</span>
                    </div>
                    <div style="padding:12px;flex:1;display:flex;flex-direction:column;">
                        <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:6px;">Social share</div>
                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);flex:1;margin-bottom:12px;line-height:1.5;">Sharing your content on social media will help increase engagement and may introduce you to new subscribers.</div>
                        <div style="display:flex;gap:14px;">
                            <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--secondary-color);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Open</a>
                            <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Skip</a>
                        </div>
                    </div>
                </div>

                <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
                    <div style="background:var(--primary-color);opacity:0.4;min-height:85px;border-radius:8px 8px 0 0;"></div>
                    <div style="padding:12px;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;">
                        <div style="font-family:'Satoshi';font-size:0.8rem;font-weight:600;color:var(--paragraph);">More suggestions will be shown regularly.</div>
                    </div>
                </div>
                <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
                    <div style="background:var(--primary-color);opacity:0.4;min-height:85px;border-radius:8px 8px 0 0;"></div>
                    <div style="padding:12px;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;">
                        <div style="font-family:'Satoshi';font-size:0.8rem;font-weight:600;color:var(--paragraph);">More suggestions will be shown regularly.</div>
                    </div>
                </div>
                <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
                    <div style="background:var(--primary-color);opacity:0.4;min-height:85px;border-radius:8px 8px 0 0;"></div>
                    <div style="padding:12px;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;">
                        <div style="font-family:'Satoshi';font-size:0.8rem;font-weight:600;color:var(--paragraph);">More suggestions will be shown regularly.</div>
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="col-xl-6 col-md-12" style="margin-bottom:24px;">
                    <div class="card" style="padding:16px;">
                        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
                            <h4 style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);margin:0;">Recent Milestones</h4>
                            <a href="#" style="font-family:'Satoshi';font-size:0.8rem;color:var(--primary-color);">View all</a>
                        </div>
                        <div style="display:flex;gap:14px;">
                            <div style="align-self:stretch;aspect-ratio:1/1;flex-shrink:0;border-radius:8px;overflow:hidden;background:var(--primary-light);">
                                <img src="https://picsum.photos/seed/milestone/280/200" alt="Create, Connect, Captivate." style="width:100%;height:100%;object-fit:cover;display:block;">
                            </div>
                            <div style="flex:1;display:flex;flex-direction:column;gap:0;">
                                <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                                    <div style="width:28px;height:28px;flex-shrink:0;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;">
                                        <div style="width:12px;height:12px;background:var(--primary-color);border-radius:50%;"></div>
                                    </div>
                                    <div>
                                        <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:1px;">Create, Connect, Captivate.</div>
                                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">19 Mar 2026</div>
                                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">You have reached a Special milestone</div>
                                    </div>
                                </div>
                                <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                                    <div style="width:28px;height:28px;flex-shrink:0;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;">
                                        <div style="width:12px;height:12px;background:var(--primary-color);border-radius:50%;"></div>
                                    </div>
                                    <div>
                                        <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:1px;">Fluffy Kiwi</div>
                                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">18 Mar 2026</div>
                                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">You have reached a Special milestone</div>
                                    </div>
                                </div>
                                <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                                    <div style="width:28px;height:28px;flex-shrink:0;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;">
                                        <div style="width:12px;height:12px;background:var(--primary-color);border-radius:50%;"></div>
                                    </div>
                                    <div>
                                        <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:1px;">90 Uploads</div>
                                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">28 Jan 2026</div>
                                        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">You have reached an Uploads milestone</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 col-md-12" style="margin-bottom:24px;">
                    <div class="card" style="padding:16px;">
                        <h4 style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);margin:0 0 14px;">My Recent Projects</h4>
                        <div style="display:flex;flex-direction:column;gap:0;">
                            <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                                <div style="width:56px;height:56px;flex-shrink:0;border-radius:6px;background:var(--primary-light);overflow:hidden;">
                                    <img src="https://picsum.photos/seed/proj1/60/60" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
                                </div>
                                <div>
                                    <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:2px;">The Ultimate Guide to…</div>
                                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">11th March 2026</div>

                                </div>
                            </div>
                            <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                                <div style="width:56px;height:56px;flex-shrink:0;border-radius:6px;background:var(--primary-light);overflow:hidden;">
                                    <img src="https://picsum.photos/seed/proj2/60/60" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
                                </div>
                                <div>
                                    <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:2px;">The Ultimate Guide to…</div>
                                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">10th March 2026</div>

                                </div>
                            </div>
                            <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                                <div style="width:56px;height:56px;flex-shrink:0;border-radius:6px;background:var(--primary-light);overflow:hidden;">
                                    <img src="https://picsum.photos/seed/proj3/60/60" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
                                </div>
                                <div>
                                    <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:2px;">I Can Only Recommend Macbooks…</div>
                                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">10th March 2026</div>
                                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">1920x1080px</div>
                                </div>
                            </div>
                            <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                                <div style="width:56px;height:56px;flex-shrink:0;border-radius:6px;background:var(--primary-light);overflow:hidden;">
                                    <img src="https://picsum.photos/seed/proj4/60/60" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
                                </div>
                                <div>
                                    <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:2px;">I Can Only Recommend Macbooks…</div>
                                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">10th March 2026</div>
                                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">1920x1080px</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
 
{{! Header is position:fixed in the real app, occupying 56px at the top.
    dashaboard-main uses margin-top:56px from the CSS to sit below it. }}

{{! Top header bar }}
<header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
  <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);font-size:1.1rem;">TubeSpanner</strong>
  </a>
  <div style="display:flex;align-items:center;gap:8px;">
    <button class="btn btn-primary" style="display:flex;align-items:center;gap:6px;font-size:0.875rem;padding:6px 14px;">
      <span style="font-size:1rem;font-weight:300;">+</span> Create
      <span style="border-left:1px solid rgba(255,255,255,0.4);margin-left:4px;padding-left:8px;font-size:0.7rem;">&#9660;</span>
    </button>
    <div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">{{userInitials}}</div>
  </div>
</header>

{{! dashaboard-main picks up display:flex and margin-top:56px from styleguide.css }}
<div class="dashaboard-main">

  {{! Sidebar — app-sidebar gets width:250px and flex-direction:column from styleguide.css }}
  <div class="app-sidebar-wrapper">
    <div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">

      {{! Main nav }}
      <ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
        {{#each navGroups}}
        <li class="nav-item{{#if this.active}} active{{/if}}">
          <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};background:{{#if this.active}}var(--primary-light){{else}}transparent{{/if}};color:{{#if this.active}}var(--primary-color){{else}}var(--title){{/if}};text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:{{#if this.active}}700{{else}}500{{/if}};">
            {{! Icon placeholder — real app uses SVG icons }}
            <span style="width:20px;height:20px;border-radius:4px;background:{{#if this.active}}var(--primary-color){{else}}#e5e7eb{{/if}};flex-shrink:0;margin-right:10px;display:inline-block;"></span>
            <span style="flex:1;">{{this.label}}</span>
            {{#if this.expandable}}<span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>{{/if}}
          </a>
        </li>
        {{/each}}
      </ul>

      {{! Most Used Tools }}
      <div style="padding:10px 14px 4px;font-family:'Satoshi';font-size:0.68rem;font-weight:700;letter-spacing:0.06em;color:var(--paragraph);text-transform:uppercase;">Most Used Tools</div>
      <ul class="list-unstyled" style="margin:0;padding:0 0 8px;">
        {{#each mostUsedTools}}
        <li>
          <a href="#" style="display:block;padding:7px 14px;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.8125rem;">{{this.label}}</a>
        </li>
        {{/each}}
      </ul>

      {{! Sidebar footer }}
      <div class="mt-auto" style="border-top:1px solid var(--primary-light);padding:12px 14px;">
        <a href="#" style="display:flex;align-items:center;gap:8px;color:var(--paragraph);text-decoration:none;font-family:'Satoshi';font-size:0.8rem;margin-bottom:10px;">
          <span style="width:16px;height:16px;border-radius:50%;border:1.5px solid var(--paragraph);display:inline-flex;align-items:center;justify-content:center;font-size:0.6rem;flex-shrink:0;">?</span>
          Feedback and Support
        </a>
        <div style="font-family:'Satoshi';font-size:0.8125rem;font-weight:700;color:var(--title);margin-bottom:2px;">{{userName}}</div>
        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);margin-bottom:8px;">{{usageLabel}}</div>
        <div style="display:flex;gap:4px;align-items:center;">
          {{#each usageDots}}
          <span style="width:6px;height:6px;border-radius:50%;background:{{#if this.active}}var(--primary-color){{else}}#ddd{{/if}};display:inline-block;"></span>
          {{/each}}
        </div>
      </div>

    </div>
  </div>

  {{! Main content — dashaboard-content gets width:calc(100%-250px) from styleguide.css }}
  <div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
    <div class="dashaboard-inner" style="padding:20px 24px;">

      {{! Toolbox section }}
      <div style="display:flex;align-items:center;margin-bottom:12px;">
        <p style="font-family:'Satoshi';font-size:0.9375rem;font-weight:600;color:var(--title);margin:0;flex:1;">{{greeting}}</p>
        <div style="display:flex;align-items:center;gap:10px;">
          <span style="color:var(--paragraph);font-size:0.85rem;cursor:pointer;">&#9881;</span>
          <span style="color:var(--paragraph);font-size:1rem;cursor:pointer;line-height:1;">&lsaquo;</span>
          <span style="color:var(--paragraph);font-size:1rem;cursor:pointer;line-height:1;">&rsaquo;</span>
        </div>
      </div>

      <div style="display:flex;gap:10px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px;">
        {{#each toolboxItems}}
        <a href="#" class="card" style="min-width:110px;max-width:130px;padding:16px 10px 12px;text-align:center;text-decoration:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;">
          <div style="width:44px;height:44px;border-radius:8px;background:#f0f0f0;margin-bottom:10px;display:flex;align-items:center;justify-content:center;">
            <div style="width:24px;height:3px;background:#bbb;border-radius:2px;box-shadow:0 5px 0 #bbb, 0 -5px 0 #bbb;"></div>
          </div>
          <p style="font-family:'Satoshi';font-size:0.75rem;color:var(--title);margin:0;line-height:1.3;">{{this.name}}</p>
        </a>
        {{/each}}
      </div>

      {{! Do Next section }}
      <p style="font-family:'Satoshi';font-size:0.9375rem;font-weight:600;color:var(--title);margin:0 0 12px;">{{doNextHeading}}</p>

      <div style="display:flex;gap:10px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px;">
        {{#each doNextCards}}
        <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
          <div style="background:{{this.headerColor}};padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:85px;border-radius:8px 8px 0 0;">
            <div style="width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,0.25);margin-bottom:6px;"></div>
            <span style="font-family:'Satoshi';font-size:0.65rem;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:0.06em;">{{this.category}}</span>
          </div>
          <div style="padding:12px;flex:1;display:flex;flex-direction:column;">
            <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:6px;">{{this.title}}</div>
            <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);flex:1;margin-bottom:12px;line-height:1.5;">{{this.description}}</div>
            <div style="display:flex;gap:14px;">
              <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--secondary-color);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Open</a>
              <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;text-transform:uppercase;letter-spacing:0.05em;">Skip</a>
            </div>
          </div>
        </div>
        {{/each}}

        {{! Locked placeholder cards }}
        {{#each lockedCards}}
        <div class="card" style="min-width:195px;max-width:210px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;">
          <div style="background:var(--primary-color);opacity:0.4;min-height:85px;border-radius:8px 8px 0 0;"></div>
          <div style="padding:12px;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;">
            <div style="font-family:'Satoshi';font-size:0.8rem;font-weight:600;color:var(--paragraph);">More suggestions will be shown regularly.</div>
          </div>
        </div>
        {{/each}}
      </div>

      {{! Bottom two columns }}
      <div class="row">

        {{! Recent Milestones }}
        <div class="col-xl-6 col-md-12" style="margin-bottom:24px;">
          <div class="card" style="padding:16px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
              <h4 style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);margin:0;">Recent Milestones</h4>
              <a href="#" style="font-family:'Satoshi';font-size:0.8rem;color:var(--primary-color);">View all</a>
            </div>
            <div style="display:flex;gap:14px;">
              {{#if featuredMilestone}}
              <div style="align-self:stretch;aspect-ratio:1/1;flex-shrink:0;border-radius:8px;overflow:hidden;background:var(--primary-light);">
                <img src="{{featuredMilestone.image}}" alt="{{featuredMilestone.title}}" style="width:100%;height:100%;object-fit:cover;display:block;">
              </div>
              {{/if}}
              <div style="flex:1;display:flex;flex-direction:column;gap:0;">
                {{#each milestones}}
                <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                  <div style="width:28px;height:28px;flex-shrink:0;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;">
                    <div style="width:12px;height:12px;background:var(--primary-color);border-radius:50%;"></div>
                  </div>
                  <div>
                    <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:1px;">{{this.title}}</div>
                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">{{this.date}}</div>
                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">{{this.description}}</div>
                  </div>
                </div>
                {{/each}}
              </div>
            </div>
          </div>
        </div>

        {{! My Recent Projects }}
        <div class="col-xl-6 col-md-12" style="margin-bottom:24px;">
          <div class="card" style="padding:16px;">
            <h4 style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);margin:0 0 14px;">My Recent Projects</h4>
            <div style="display:flex;flex-direction:column;gap:0;">
              {{#each recentProjects}}
              <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--primary-light);">
                <div style="width:56px;height:56px;flex-shrink:0;border-radius:6px;background:var(--primary-light);overflow:hidden;">
                  {{#if this.thumbnail}}<img src="{{this.thumbnail}}" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">{{/if}}
                </div>
                <div>
                  <div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);margin-bottom:2px;">{{this.title}}</div>
                  <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">{{this.date}}</div>
                  {{#if this.dimensions}}<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">{{this.dimensions}}</div>{{/if}}
                </div>
              </div>
              {{/each}}
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</div>
 
{
  "userInitials": "DH",
  "userName": "Max",
  "usageLabel": "Background removals (Monthly)",
  "usageDots": [
    {
      "active": false
    },
    {
      "active": true
    },
    {
      "active": false
    }
  ],
  "greeting": "Hey Danielle, checkout these tools to help reach your goals.",
  "navGroups": [
    {
      "icon": "🏠",
      "label": "Dashboard",
      "active": true,
      "expandable": false
    },
    {
      "icon": "📅",
      "label": "Plan",
      "active": false,
      "expandable": true
    },
    {
      "icon": "🎬",
      "label": "Produce",
      "active": false,
      "expandable": true
    },
    {
      "icon": "📣",
      "label": "Promote",
      "active": false,
      "expandable": true
    },
    {
      "icon": "⚙️",
      "label": "Extras",
      "active": false,
      "expandable": true
    },
    {
      "icon": "👤",
      "label": "My account",
      "active": false,
      "expandable": true
    },
    {
      "icon": "🧪",
      "label": "Beta Tools",
      "active": false,
      "expandable": true
    }
  ],
  "mostUsedTools": [
    {
      "label": "Content Ideas"
    },
    {
      "label": "HomeRun"
    },
    {
      "label": "Viewer Targeting"
    },
    {
      "label": "Schedule Posts"
    },
    {
      "label": "Create a Title"
    }
  ],
  "toolboxItems": [
    {
      "icon": "📄",
      "name": "Video script templates"
    },
    {
      "icon": "🖼️",
      "name": "Thumbnail gallery"
    },
    {
      "icon": "📅",
      "name": "Planner"
    },
    {
      "icon": "📆",
      "name": "Scheduled posts"
    },
    {
      "icon": "🎁",
      "name": "Membership perks"
    },
    {
      "icon": "📃",
      "name": "Promo pages"
    },
    {
      "icon": "💬",
      "name": "Smart replies"
    }
  ],
  "doNextHeading": "To help meet your objectives, I recommend these tasks today.",
  "doNextCards": [
    {
      "icon": "🎚️",
      "category": "video optimisation",
      "headerColor": "#6BA3BE",
      "title": "Video missing a description",
      "description": "TubeSpanner has detected a video missing a description."
    },
    {
      "icon": "🎚️",
      "category": "video optimisation",
      "headerColor": "#6BA3BE",
      "title": "Video missing end screen",
      "description": "TubeSpanner has detected a video missing an end screen."
    },
    {
      "icon": "📣",
      "category": "content promotion",
      "headerColor": "#F26419",
      "title": "Social share",
      "description": "Sharing your content on social media will help increase engagement and may introduce you to new subscribers."
    }
  ],
  "lockedCards": [
    1,
    2,
    3
  ],
  "featuredMilestone": {
    "image": "https://picsum.photos/seed/milestone/280/200",
    "title": "Create, Connect, Captivate."
  },
  "milestones": [
    {
      "title": "Create, Connect, Captivate.",
      "date": "19 Mar 2026",
      "description": "You have reached a Special milestone"
    },
    {
      "title": "Fluffy Kiwi",
      "date": "18 Mar 2026",
      "description": "You have reached a Special milestone"
    },
    {
      "title": "90 Uploads",
      "date": "28 Jan 2026",
      "description": "You have reached an Uploads milestone"
    }
  ],
  "recentProjects": [
    {
      "title": "The Ultimate Guide to…",
      "date": "11th March 2026",
      "thumbnail": "https://picsum.photos/seed/proj1/60/60"
    },
    {
      "title": "The Ultimate Guide to…",
      "date": "10th March 2026",
      "thumbnail": "https://picsum.photos/seed/proj2/60/60"
    },
    {
      "title": "I Can Only Recommend Macbooks…",
      "date": "10th March 2026",
      "dimensions": "1920x1080px",
      "thumbnail": "https://picsum.photos/seed/proj3/60/60"
    },
    {
      "title": "I Can Only Recommend Macbooks…",
      "date": "10th March 2026",
      "dimensions": "1920x1080px",
      "thumbnail": "https://picsum.photos/seed/proj4/60/60"
    }
  ]
}

The main TubeSpanner dashboard — the first screen a logged-in user sees.

Appears in: App (/dashboard), available to Core and Pro subscribers.

Header bar — sticky top bar with logo left, “Create” button and avatar right. The Create button opens a quick-access dropdown for starting new scripts, thumbnails etc.

Sidebar — collapsible nav groups (Plan, Produce, Promote, Extras, My Account, Beta Tools), plus a “Most Used Tools” section that shows the user’s most frequently accessed tools. Footer shows user name and a plan usage metric (e.g. background removals remaining).

Toolbox row — personalised, horizontal-scrolling tool shortcuts. The gear icon opens toolbox settings so the user can pin/unpin tools.

Do Next cards — AI-generated priority actions. Cards are colour-coded by category (blue = video optimisation, orange = content promotion). Each has OPEN and SKIP actions. Locked cards appear for plans that haven’t generated enough history yet.

Recent Milestones — Achievement cards awarded automatically when the user hits channel growth milestones. Shows a shareable milestone image and a list of recent awards.

My Recent Projects — The user’s most recently edited script/thumbnail projects.