NS Design System
v3.0.0 · 257 tokens

131Admin shell

The builder's console: fixed topbar, side nav, scrolling main — one CSS grid, no JS. Below lg the nav becomes a top strip. The mono env tag says which site this console edits.

Use it for

  • Every admin screen — dashboard, lists, editors all render inside it

Not for

  • The learner-facing app — that uses the marketing navbar + page layouts

Topbar fragment

Namaste Salesforce admin · production
markup
<div style="border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;inline-size:100%">
  <header class="ns-admin__topbar" style="position:static">
    <strong>Namaste Salesforce</strong>
    <span class="ns-admin__env">admin · production</span>
    <span class="ns-admin__spacer"></span>
    <button type="button" class="ns-btn ns-btn--quiet ns-btn--icon" aria-label="Notifications"><i class="ph ph-bell" aria-hidden="true"></i></button>
    <button type="button" class="ns-btn ns-btn--outline ns-btn--sm">swarnil@…</button>
  </header>
</div>

Full screens

The three admin surfaces as full-screen demos — the framework-agnostic templates rendered with the real stylesheet.

Dashboard Create a course Lesson editor

markup
<p><a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-admin-dashboard.html" target="_blank" rel="noopener">Dashboard <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a>
<a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-admin-course-new.html" target="_blank" rel="noopener">Create a course <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a>
<a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-admin-lesson-editor.html" target="_blank" rel="noopener">Lesson editor <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a></p>

Accessibility contract

  • Topbar is a
    , nav an