9.0 Design System

Templates

Estruturas de layout reutilizaveis. Page shells, grids de dashboard, content layouts e fluxos de pagina de marketing.

4 Sections · V1.0 · 2026
01

Page Shell

Anatomia de uma pagina: Navigation → Header → Content → Footer.

uebi
Navigation
Page Header
Section Divider
Content Area
Section Divider
Content Area
Footer

template / page-shell / nav + header + content + footer

02

Dashboard Grid

Bento grid: hero span-2, KPIs, chart area, table area.

Hero / Welcome
KPI
KPI
KPI
KPI
Chart Area
Table Area

template / dashboard / bento grid 4-col

03

Content Grid

Layout sidebar + main content.

Sidebar
Main Content

template / content / sidebar 3-col + main 9-col

04

Marketing Page

Fluxo completo: Hero → Ticker → Features → Testimonial → Pricing → CTA → Footer.

Hero Section
Logo Ticker
Features Grid
Testimonial
Pricing Cards
Stats Bar
CTA Section
Footer

template / marketing / full page flow diagram