REIS IA PAGE TEMPLATES DESIGN SYSTEM v1.0

Page Templates

Four page-type templates and three structural templates cover every page in the Reis IA ecosystem. Each defines the section order, surface alternation, spacing rhythm, and responsive behavior.

[01] Page-Type Templates

Every page in the Reis IA ecosystem follows one of four page-type patterns. Toggle breakpoints to preview how each template adapts across screen sizes.

Hero Page

Landing pages, home page

Hero

Badge + H1 + Subtext + CTA

Trust Bar

Logo marquee / Stats

Content Section

[01] Feature grid

Alt Section

[02] Testimonials

CTA Section

Final CTA

1200px viewport

Sales Page

Service pages, offers

Hero

Badge + H1 + CTA

Trust

Logo marquee

Problem

[01] Pain points

Solution

[02] Pillar cards

Proof

[03] Stats / Testimonials

Final CTA

Closing CTA

1200px viewport

Booking Page

/agendar — Cal.com embed

Page Header

REIS IA | AGENDAR | v1.0

2-Column Layout

Checklist | Cal.com Embed

FAQ

Accordion items

1200px viewport

Application Page

/aplicar — Form + sidebar

Page Header

REIS IA | APLICAR | v1.0

3-Column Grid

Form (2/3) | Sidebar (1/3)

Confirmation

Success message

1200px viewport

[02] Hero Section Template

The hero sits on Surface 0 with an optional ambient blue glow. Structure: optional badge, headline (max 900px), subtext (max 680px), CTA cluster.

AI Consulting

Implement AI that actually generates revenue

Strategic AI implementation for businesses ready to scale with intelligence.

Agendar Reunião Saiba Mais

Live Preview — Hero Section

Hero Section Markup

<!-- Hero Section Template -->
<section
  class="relative overflow-hidden"
  style="background: var(--surface-0);"
>
  <!-- Ambient glow -->
  <div
    class="absolute inset-0 pointer-events-none"
    style="background: radial-gradient(
      ellipse at 30% 50%,
      rgba(74, 144, 255, 0.06) 0%,
      transparent 70%
    );"
    aria-hidden="true"
  ></div>

  <div class="container-standard relative"
    style="padding-top: var(--space-4xl);
           padding-bottom: var(--space-4xl);">
    <!-- Optional badge -->
    <span class="badge mb-6">AI Consulting</span>

    <!-- Headline (max container-headline) -->
    <h1 class="max-w-[900px]"
      style="font-size: var(--text-h1);
             color: var(--text-primary);
             margin-bottom: var(--space-md);">
      Your hero headline goes here
    </h1>

    <!-- Subtext (max container-text) -->
    <p class="max-w-[680px]"
      style="font-size: var(--text-body-lg);
             color: var(--text-secondary);
             margin-bottom: var(--space-xl);">
      Supporting copy that expands on the headline
      and builds interest.
    </p>

    <!-- CTA cluster -->
    <div class="flex flex-wrap gap-4">
      <a href="/agendar" class="btn-primary">
        Agendar Reunião
      </a>
      <a href="#" class="btn-secondary">
        Saiba Mais
      </a>
    </div>
  </div>
</section>

[03] Sales Page Template

Direct-response structure adapted for the Reis IA brand. Six sections in fixed order, alternating surfaces, with ambient glow reserved for hero and closing CTA.

Section

Surface

Hero — badge, H1, subtext, CTA

--surface-0 + glow

Trust Bar — logo marquee or stats

--surface-1

Problem — pain points, enemy narrative

--surface-0

Solution — pillar cards, methodology

--surface-1

Proof — testimonials, case studies

--surface-0

Final CTA — closing headline + button

--surface-1 + glow

Sales Page Structure

<!-- Sales Page — Section Order -->

<!-- 1. Hero (Surface 0 + ambient glow) -->
<section style="background: var(--surface-0);">
  <!-- Badge + H1 + subtext + CTA cluster -->
</section>

<div class="gradient-divider"></div>

<!-- 2. Trust Bar (Surface 1) -->
<section style="background: var(--surface-1);">
  <!-- Logo marquee or stat counters -->
</section>

<div class="gradient-divider"></div>

<!-- 3. Problem (Surface 0) -->
<section style="background: var(--surface-0);">
  <SectionLabel number="01" title="The Problem" />
  <!-- Pain points, enemy narrative -->
</section>

<div class="gradient-divider"></div>

<!-- 4. Solution (Surface 1) -->
<section style="background: var(--surface-1);">
  <SectionLabel number="02" title="The Solution" />
  <!-- Pillar cards, methodology -->
</section>

<div class="gradient-divider"></div>

<!-- 5. Proof (Surface 0) -->
<section style="background: var(--surface-0);">
  <SectionLabel number="03" title="Results" />
  <!-- Testimonials, case studies -->
</section>

<div class="gradient-divider"></div>

<!-- 6. Final CTA (Surface 1 + ambient glow) -->
<section style="background: var(--surface-1);">
  <!-- Closing headline + CTA -->
</section>

[04] Booking Page Template

The booking page (/agendar) uses a 2-column layout. Left column: meeting expectations and checklist. Right column: Cal.com scheduling embed. On mobile, columns stack vertically.

Agende sua reuniao estratégica

Uma sessao de 30 minutos para entender sua situação atual com IA.

AI posture diagnostic
Quick-win identification
Custom roadmap preview

Cal.com Embed

Live Preview — Booking Layout

Booking Page Markup

<!-- Booking Page — 2-column layout (/agendar) -->
<section style="background: var(--surface-0);">
  <div class="container-standard"
    style="padding-top: var(--space-3xl);
           padding-bottom: var(--space-3xl);">

    <div class="grid grid-cols-1 lg:grid-cols-2
      gap-16">
      <!-- Left: What to expect -->
      <div>
        <h2 style="color: var(--text-primary);
          margin-bottom: var(--space-lg);">
          Agende sua reuniao estratégica
        </h2>
        <p style="color: var(--text-secondary);
          margin-bottom: var(--space-xl);">
          Uma sessao de 30 minutos para entender
          sua situação atual com IA.
        </p>

        <!-- Checklist -->
        <ul class="space-y-4">
          <li class="flex items-start gap-3">
            <svg class="icon-md icon-accent mt-0.5">
              <!-- check icon -->
            </svg>
            <span style="color: var(--text-secondary);">
              Diagnostic of your current AI posture
            </span>
          </li>
        </ul>
      </div>

      <!-- Right: Cal.com embed -->
      <div class="rounded-xl overflow-hidden border"
        style="background: var(--surface-2);
               border-color: var(--border-default);
               min-height: 500px;">
        <div id="cal-embed"></div>
      </div>
    </div>
  </div>
</section>

[05] Application Page Template

The application page (/aplicar) uses a 3-column grid. The form takes 2 columns, a sticky sidebar takes 1 column with post-submission context.

Apply to Reis IA Partners

Full Name

John Doe

Company

Acme Corp

Message

We need help with...

Submit Application

What happens next

1. We review your application
2. Strategy call within 48h
3. Custom proposal delivered

Live Preview — Application Layout

Application Page Markup

<!-- Application Page — Form + Sidebar (/aplicar) -->
<section style="background: var(--surface-0);">
  <div class="container-standard"
    style="padding-top: var(--space-3xl);
           padding-bottom: var(--space-3xl);">

    <div class="grid grid-cols-1 lg:grid-cols-3
      gap-12">
      <!-- Main: Form (2/3 width) -->
      <div class="lg:col-span-2">
        <h2 style="margin-bottom: var(--space-lg);">
          Apply to Reis IA Partners
        </h2>

        <form class="space-y-6">
          <div>
            <label class="input-label">
              Full Name
            </label>
            <input type="text" class="input"
              placeholder="Your full name" />
          </div>
          <div>
            <label class="input-label">
              Tell us about your AI needs
            </label>
            <textarea class="input input-textarea"
              placeholder="Describe your goals..."
            ></textarea>
          </div>
          <button type="submit" class="btn-primary">
            Submit Application
          </button>
        </form>
      </div>

      <!-- Sidebar (1/3 width) -->
      <aside>
        <div class="rounded-xl p-6 border
          sticky top-24"
          style="background: var(--surface-2);
                 border-color: var(--border-default);">
          <h4 style="margin-bottom: var(--space-md);">
            What happens next
          </h4>
          <ol class="space-y-3 text-sm"
            style="color: var(--text-secondary);">
            <li>1. We review your application</li>
            <li>2. Strategy call within 48h</li>
            <li>3. Custom proposal delivered</li>
          </ol>
        </div>
      </aside>
    </div>
  </div>
</section>

[06] Structural Templates

Three structural templates define the chrome and layout pattern for every page in the design system. Each page-type template (above) is built on one of these structural foundations.

Template A — Token / Component Page

The workhorse template. Page Header Bar, title area, numbered sections with alternating surfaces. Used by foundations, spacing, surfaces, buttons, cards, forms, effects, motion, and all other documentation pages.

Fixed Header (60px)

Page Header Bar

Title Area (Surface 0)

[01] Section (Surface 1)

[02] Section (Surface 0)

Footer (Surface 1)

FoundationsSpacing ScaleSurfacesSemantic TokensEffectsPatternsMotionVFXButtonsCardsFormsSectionsAdvancedIconsLogoMoodboardTemplatesSEO

Template A Structure

<!-- Template A: Token / Component Page -->
<BrandbookLayout title="Page Name"
  pageName="PAGE NAME">

  <!-- Title Area (Surface 0) -->
  <section style="background: var(--surface-0);">
    <div class="container-standard"
      style="padding-top: var(--space-3xl);
             padding-bottom: var(--space-2xl);">
      <h1 style="font-size: var(--text-display);">
        Page Title
      </h1>
      <p style="font-size: var(--text-body-lg);">
        Description text.
      </p>
    </div>
  </section>

  <div class="gradient-divider"></div>

  <!-- [01] Section (Surface 1) -->
  <section style="background: var(--surface-1);">
    <div class="container-standard"
      style="padding-top: var(--space-3xl);
             padding-bottom: var(--space-3xl);">
      <SectionLabel number="01"
        title="Section Title" />
      <!-- Content grid / demos -->
    </div>
  </section>

  <div class="gradient-divider"></div>

  <!-- [02] Section (Surface 0) -->
  <section style="background: var(--surface-0);">
    ...
  </section>
</BrandbookLayout>

Template B — Overview / Index Page

Used for the home page and component overview. Hero with ambient glow, followed by a bento grid of navigational cards. No Page Header Bar — uses BaseLayout directly.

Fixed Header (60px)

Hero + Ambient Glow (Surface 0)

Card

Footer (Surface 1)

Home (Index)Components Overview

Template B Structure

<!-- Template B: Overview / Index Page -->
<BaseLayout title="Design System Overview">

  <!-- Hero (Surface 0 + ambient glow) -->
  <section class="relative overflow-hidden"
    style="background: var(--surface-0);">
    <div class="container-standard relative
      py-24 md:py-32 lg:py-40">
      <div class="font-mono text-[11px]
        font-semibold uppercase tracking-[0.08em]
        mb-6" style="color: var(--accent-blue);">
        Eyebrow Label
      </div>
      <h1 style="font-size: var(--text-display);">
        Main Headline
      </h1>
    </div>
  </section>

  <div class="gradient-divider"></div>

  <!-- Bento Grid (12-column) -->
  <section style="background: var(--surface-0);">
    <div class="container-standard py-16 md:py-24">
      <div class="grid grid-cols-12 gap-[1px]
        rounded-xl border overflow-hidden"
        style="background: var(--border-default);
               border-color: var(--border-default);">
        <!-- Cards: col-span-12 md:col-span-6
             lg:col-span-4 -->
      </div>
    </div>
  </section>
</BaseLayout>

Template C — Strategy / Brand Page

For brand narrative pages. Ambient glow hero with eyebrow label, manifesto-style headline, and long-form content sections with generous vertical spacing (container-text width).

Fixed Header (60px)

Page Header Bar

Hero + Eyebrow + Ambient (space-4xl top)

Long-form Content (max-w-680px)

Footer (Surface 1)

GuidelinesStrategy

Template C Structure

<!-- Template C: Strategy / Brand Page -->
<BrandbookLayout title="Page Title"
  pageName="PAGE NAME">

  <!-- Hero with ambient glow -->
  <section class="relative"
    style="background: var(--surface-0);">
    <div class="absolute top-1/2 left-1/2
      -translate-x-1/2 -translate-y-1/2
      w-[800px] h-[600px] pointer-events-none"
      style="background:
        var(--gradient-blue-ambient);
        opacity: 0.5;"
      aria-hidden="true">
    </div>

    <div class="container-standard relative"
      style="padding-top: var(--space-4xl);
             padding-bottom: var(--space-3xl);">
      <div class="font-mono text-[11px]
        font-semibold uppercase
        tracking-[0.08em] mb-6"
        style="color: var(--accent-blue);">
        Eyebrow
      </div>
      <h1 style="font-size: var(--text-display);">
        Manifesto-style headline
      </h1>
    </div>
  </section>

  <!-- Long-form sections -->
  <section style="background: var(--surface-1);">
    <div class="container-standard"
      style="padding-top: var(--space-3xl);
             padding-bottom: var(--space-3xl);">
      <div class="max-w-[680px] space-y-8">
        <!-- Long-form content -->
      </div>
    </div>
  </section>
</BrandbookLayout>

[07] Section Composition Rules

How sections connect to form cohesive pages. These rules ensure visual rhythm, proper surface alternation, and consistent spacing.

Rule

Description

Surface Alternation

Alternate --surface-0 and --surface-1 for consecutive sections. Never use the same surface for adjacent sections.

Gradient Dividers

Place a 1px gradient divider between every section. Uses --gradient-divider which fades from transparent at edges.

Ambient Glow

Only use the blue ambient glow on hero and final CTA sections. Maximum two glowing sections per page.

Section Spacing

Use --space-3xl for standard sections. Use --space-4xl for hero sections only. Never use fixed pixel values.

Section Labels

Every content section (not hero or CTA) starts with a numbered SectionLabel: [01], [02], [03]...

Card Surfaces

Cards: --surface-2 (hover: --surface-3). Dropdowns/tooltips: --surface-4. Never place cards on their own surface tier.

Surface Alternation

/* Surface Alternation Rules */

Section 1  ->  var(--surface-0)   /* #000000 */
Section 2  ->  var(--surface-1)   /* #0A0A0A */
Section 3  ->  var(--surface-0)
Section 4  ->  var(--surface-1)   /* ...repeat */

/* Gradient dividers between sections */
.gradient-divider {
  height: 1px;
  background: var(--gradient-divider);
}

/* Cards inside sections */
Cards      ->  var(--surface-2)   /* #111111 */
Card:hover ->  var(--surface-3)   /* #161616 */
Dropdowns  ->  var(--surface-4)   /* #1A1A1A */

/* Ambient glow: hero + final CTA only */
/* Never stack two glowing sections adjacent */

Container Hierarchy

/* Container Width Hierarchy */

.container-wide     { max-width: 1280px; }
/* Full-width sections, hero backgrounds */

.container-standard { max-width: 1200px; }
/* Default content container */

.container-headline { max-width: 900px; }
/* Hero headlines */

.container-narrow   { max-width: 800px; }
/* Article-style content */

.container-text     { max-width: 680px; }
/* Body copy, optimal line length */

/* All containers share: */
margin-inline: auto;
padding-inline: var(--container-padding);
/* clamp(20px, 5vw, 48px) */

[08] Grid Systems

Two primary grid patterns: the hairline grid (1px gap with parent background as dividers) and the bento grid (12-column with hairline gaps for dashboard-style layouts).

Hairline Grid (3-column)

Cell

Bento Grid (12-column)

col-span-8

col-span-4

Grid Patterns

/* Hairline grid — 1px gap dividers */
<div class="grid-hairline grid-hairline-3
  rounded-xl overflow-hidden">
  <div class="p-6">Cell 1</div>
  <div class="p-6">Cell 2</div>
  <div class="p-6">Cell 3</div>
</div>

/* Bento grid — 12-column with 1px gap */
<div class="grid grid-cols-12 gap-[1px]
  rounded-xl border overflow-hidden"
  style="background: var(--border-default);
         border-color: var(--border-default);">
  <div class="col-span-12 md:col-span-6
    lg:col-span-4 p-6"
    style="background: var(--surface-1);">
    Card content
  </div>
</div>

[09] Responsive Behavior

All templates are mobile-first. Fluid spacing tokens and clamp() values handle most responsive needs. Grid layouts collapse naturally; no hard breakpoint jumps.

Breakpoint

Width

Behavior

Mobile

< 768px

Single column, full-width CTAs, reduced headlines, stacked grids

Tablet

768-1023px

2-column card grids, booking page stacks, sidebar below form

Desktop

>= 1024px

Full multi-column layouts, sticky sidebars, max container widths

Container Width Hierarchy

container-wide 1280px

container-standard 1200px

container-headline 900px

container-narrow 800px

container-text 680px

Responsive Patterns

/* Responsive Behavior */

/* Fluid container padding */
--container-padding: clamp(20px, 5vw, 48px);

/* Fluid section spacing */
--space-3xl: clamp(64px, 7vw + 36px, 120px);
--space-4xl: clamp(80px, 10vw + 40px, 160px);

/* Mobile (< 768px) */
/* - Stack all grids to 1 column */
/* - Hero headline: reduce via clamp() */
/* - CTA buttons: full-width on mobile */
/* - Hairline grids: collapse to 1-2 cols */

/* Tablet (768-1023px) */
/* - 2-column card grids */
/* - Booking page: stack columns */
/* - Sidebar moves below form */

/* Desktop (>= 1024px) */
/* - Full multi-column layouts */
/* - Sticky sidebar positioning */
/* - Max container widths enforced */

[10] Template Guidelines

Alternate surfaces (0, 1, 0, 1) for visual rhythm
Use gradient dividers between every section
Reserve ambient glow for hero and final CTA only
Use fluid spacing tokens (--space-3xl, --space-4xl)
Start content sections with numbered SectionLabels
All CTAs link to /agendar or /aplicar

Don't

Use the same surface for adjacent sections
Stack two ambient-glow sections next to each other
Use hard pixel values for section padding
Place cards on --surface-2 inside a --surface-2 section
Create pricing tables, tier cards, or SaaS patterns
Add more than 6 sections to a single page template