Aithusa SquadBrand ShowcaseV2.0 Dark Cockpit Edition

PAGETEMPLATES

SHELL, DASHBOARD GRID & CONTENT GRID // STRUCTURAL PATTERNS // 2026

Design System3 Templates2026

DESIGN SYSTEM3 STRUCTURAL TEMPLATES2026

[01]

Page Shell

Estrutura padrão de página com Zone A (Header), Zone B (Conteúdo) e Zone C (Navegação).

Wireframe

Zone A — Page Header

Zone B — Content Section

template.html

<!-- Page Shell Structure -->
<div class="w-full text-foreground">

  <!-- Zone A: Page Header -->
  <BrandbookPageHeader
    titleWhite="PAGE TITLE"
    subtitle="DESCRIPTION // 2026"
    breadcrumb="Section"
    stat="N Items"
  />

  <!-- Section Divider -->
  <SectionDivider num="01" title="SECTION" />

  <!-- Zone B: Content Sections -->
  <section class="px-6 md:px-10 lg:px-16 py-12 border-t border-white/[0.07]">
    <div class="max-w-[1600px] mx-auto">
      <!-- Section content -->
    </div>
  </section>

  <!-- Zone C: Navigation -->
  <nav class="flex items-center justify-between
       border-t border-white/[0.07] px-6 md:px-10 lg:px-16 py-4">
    <!-- <ChevronLeft /> Prev | [ID] Label | Next <ChevronRight /> -->
  </nav>

</div>

[02]

Dashboard Grid

Grid assimétrico bento 4 colunas para dashboards e painéis de métricas.

Preview

col-span-2

row-span-2

1×1

col-span-2

template.html

/* Bento Dashboard Grid — 4-column asymmetric */

/* Tailwind classes */
<div class="grid grid-cols-4 gap-4">

  <!-- Wide card: spans 2 columns -->
  <div class="col-span-2 p-6
       border border-white/5 bg-white/[0.02] rounded-lg">
    <!-- Primary metric or chart -->
  </div>

  <!-- Tall card: spans 2 rows -->
  <div class="row-span-2 p-6
       border border-white/5 bg-white/[0.02] rounded-lg">
    <!-- Activity feed or stats list -->
  </div>

  <!-- Standard 1×1 cell -->
  <div class="p-6 border border-white/5 bg-white/[0.02] rounded-lg"></div>

  <!-- Wide bottom card: spans 3 columns -->
  <div class="col-span-3 p-6
       border border-white/5 bg-white/[0.02] rounded-lg"></div>

</div>

[03]

Content Grid

Grid auto-fit responsivo para listagens de cards e conteúdo modular.

Preview

Performance

98%

Uptime

99.9%

Tasks

1,247

Agents

Efficiency

94%

Score

A+

template.html

/* Auto-fit content grid — responsive card layout */

/* Tailwind responsive utilities */
<div class="grid grid-cols-1 md:grid-cols-2
     lg:grid-cols-3 xl:grid-cols-4 gap-6">

  <!-- Card unit -->
  <div class="p-6 border border-white/5 bg-white/[0.02]
       rounded-lg hover:border-primary/20
       transition-all duration-500">

    <!-- Card header -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-xs font-mono text-white/30
             uppercase tracking-widest">Label</span>
      <Icon class="size-4 text-primary" />
    </div>

    <p class="text-4xl font-black text-primary mb-1">Value</p>
    <p class="text-sm text-white/50">Description</p>

  </div>
</div>