Design SystemTemplates
Page Templates
Visual wireframes of 6 complete page templates. Each template shows the layout structure using colored blocks representing each functional section.
14
01 · TemplateLanding Page
Complete structure: Navbar · Hero · Features · Testimonials · Stats · CTA · Footer
LANDING PAGE — ambrosiohealth.com
NAVBAR · Logo + Nav + CTA
HERO SECTION
Headline · Subheadline · CTA Buttons · Social Proof
Feature 1
Feature 2
Feature 3
Feature 4
Feature 5
Feature 6
Testimonial 1
Testimonial 2
Testimonial 3
CTA SECTION · Dark background · Headline + Button
Estrutura HTML<header> Navbar </header>
<section class="hero"> ... </section>
<section class="features"> grid 3×2 </section>
<section class="testimonials"> 3 cols </section>
<section class="stats"> 4 KPIs </section>
<section class="cta"> dark bg </section>
<footer> 4 cols </footer>
02 · TemplateDashboard — AVA Health OS
Topbar · Sidebar · 4 Metric Cards · Chart Area · Data Table
DASHBOARD — ava.ambrosiohealth.com
TOPBAR · Search · Notifications · Avatar
CHART AREA · Biological Age Timeline
DATA TABLE · Recent Biomarker Results
Product Page — Protocol Detail
Imagem produto · Info + CTA · Ingredientes · Reviews · Produtos relacionados
PRODUCT PAGE — Longevity Protocol 90D
NAVBAR
Home · Products · Longevity Protocol
PRODUCT IMAGE GALLERY
Category tag
Product Title H1
★★★★★ 4.9
R$ 2.497/mês
Product description text block
QUANTITY + ADD TO CART BUTTON
Free shipping · 30-day guarantee
INGREDIENTS TAB
RESEARCH TAB
REVIEWS TAB
RELATED PRODUCTS · 3 cards
Article / Blog Post
Hero image · Artigo · TOC sidebar · Author bio · Posts relacionados
ARTICLE — The Science of Biological Age Reversal
NAVBAR
HERO IMAGE · Category · Title · Author · Date · Read time
Paragraph text line
Paragraph text line
Paragraph text line
H2 Section Heading
Paragraph text line
Paragraph text line
INLINE IMAGE
Paragraph text
Paragraph text
AUTHOR BIO · Avatar + Name + Bio + Social links
RELATED ARTICLES · 3 cards
Profile Page — Client Health
Cover image · Avatar + Info · Tabs de conteúdo (Biomarkers, Protocol, History)
PROFILE PAGE — Marcus Ribeiro · Patient Profile
NAVBAR
COVER IMAGE
Biomarkers
Protocol
History
Goals
Biomarker Chart
Progress Chart
Checkout — 3-Step Flow
Progress steps · Form esquerda (Contact → Shipping → Payment) · Order summary direita
CHECKOUT — Longevity Protocol Purchase
NAVBAR · Secure checkout badge
✓
Contact
2
Shipping
3
Payment
Shipping Information
Email address
Street address
CONTINUE TO PAYMENT →
Order Summary
SubtotalR$ 2.497
FreteGrátis
TotalR$ 2.497/mês
Coupon code input
🔒 SSL Secured · 30-day money back