Starter FrameworkPAGE TEMPLATESV1.0 // STARTER FRAMEWORK EDITION

Template Grid

Shell, Dashboard Grid & Content Grid // Structural Patterns // 2026

Layout Templates3 Sections2026
01Starter TemplatesShells · Dashboards · Content Systems
Framework Intent

Esta página agora funciona como um catálogo de estruturas, não como uma sequência de blocos longos. O objetivo é mostrar rapidamente onde o starter é forte: shell institucional, grids densos e composições de conteúdo reaproveitáveis.

Em vez de vender layouts prontos, ela mostra padrões estruturais que podem ser remixados para brandbooks, documentação, dashboards e showcases sem reinventar a base a cada página.

03Archetypes
12Cols Max
CSSGrid First
Template Logic

Use shell para páginas canônicas, bento para densidade e grid adaptativo para bibliotecas. A escolha deve seguir o ritmo da informação, não só a estética.

HierarchyShell First

Comece por header, divider e blocos principais. O resto encaixa depois.

CompositionGrid Density

A malha precisa refletir prioridade informacional, não simetria por hábito.

MaintenanceReusable Parts

Cada template deve gerar seções reaproveitáveis, não páginas fechadas demais.

01 // Shell

Page Shell

Estrutura-base para páginas institucionais e de documentação com header forte, divisores claros e ritmo vertical consistente.

Starter Frameworknav / header / sections / footer
Page Shell
01 // Hero
02 // System
03 // Footer

Melhor para guidelines, foundations e páginas canônicas do brandbook.

Cria uma cadência previsível entre header, divider e blocos de conteúdo.

Evita páginas improvisadas com hierarquia visual inconsistente.

Best ForGuidelines, foundations, documentation and canonical brandbook routes.
SignalHigh clarity, low ambiguity, strong top-to-bottom reading order.
Build RuleCompose sections vertically and keep each block semantically explicit.
<BrandbookSiteNav />
<PageHeader />
<SectionDivider />
<main>{sections}</main>
<FooterBar />
02 // Dense Grid

Bento Dashboard

Grid assimétrico para superfícies com densidade informacional alta, combinando hero, KPI, chart e áreas auxiliares sem perder ordem.

Hero KPI
Stat
Trend
Chart
Sidebar
Panel
Panel
Feed

Ideal para workspaces, dashboards de operação e páginas de showcase técnico.

Permite células com span diferentes sem quebrar a leitura.

Funciona melhor quando cada bloco tem prioridade visual explícita.

Best ForOperational views, data-heavy surfaces and high-density dashboards.
SignalStrong visual hierarchy with hero, side rails and priority modules.
Build RuleAssign spans by importance, not by symmetry or equal card sizing.
display: grid
grid-template-columns: repeat(3, 1fr)
hero -> grid-column: span 2
sidebar -> grid-row: span 2
cards -> blocks modulares
03 // Adaptive Grid

Content Grid

Grade adaptativa para catálogos, cards e módulos repetíveis, com foco em responsividade limpa e manutenção simples.

Bom para bibliotecas de componentes, listas de assets e showcases visuais.

Escala bem entre desktop e mobile com auto-fit ou colunas pré-definidas.

Mantém consistência sem exigir regras específicas por item.

Best ForComponent catalogs, asset libraries and modular editorial collections.
SignalBalanced repetition, simpler maintenance and responsive elasticity.
Build RuleKeep item anatomy stable so the grid can collapse without custom fixes.
display: grid
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
gap: 1px
cards -> preview + meta + actions