REIS IA SEÇÕES DESIGN SYSTEM v1.0

Seções

Sections are the top-level layout unit. Each section gets a surface background, generous fluid padding, a container width, and an optional ambient light pool. Sections alternate between Surface-0 and Surface-1 to create visual rhythm without explicit dividers.

[01] Sistema de Container

Four container widths create a content hierarchy. Headlines use container-headline (900px), body text uses container-text (680px), general content uses container-standard (1200px), and full-bleed layouts use container-wide (1280px).

Wide 1280px

Standard 1200px

Headline 900px

Narrow 800px

Text 680px

Container System CSS

/* Section container widths */
.container-standard { max-width: 1200px; }
.container-narrow   { max-width: 800px; }
.container-text     { max-width: 680px; }
.container-wide     { max-width: 1280px; }

/* All containers share: */
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);

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

[02] Wrapper de Seção e Label

Every section follows the same structure: a <section> tag with a surface background, a container <div> with fluid padding, and content inside. The numbered label is adapted from the AIOX structural pattern.

[01] Color System

Section content appears beneath the numbered label.

[02] Typography

Section content appears beneath the numbered label.

[03] Spacing Scale

Section content appears beneath the numbered label.

[04] Surfaces

Section content appears beneath the numbered label.

Section Wrapper

<!-- Section wrapper pattern -->
<section style="background: var(--surface-0);">
  <div class="container-standard"
    style="padding-top: var(--space-3xl);
           padding-bottom: var(--space-3xl);">
    <SectionLabel number="01" title="Section Title" />
    <!-- content -->
  </div>
</section>

Section Label

<!-- Section numbered label -->
<div class="font-mono text-[11px] font-bold uppercase
  tracking-[0.04em] mb-6">
  <span style="color: var(--accent-blue);">[01]</span>
  <span class="ml-2"
    style="color: var(--text-secondary);">
    SECTION TITLE
  </span>
</div>

[03] Alternância de Superfícies

Sections alternate between Surface-0 (#000000) and Surface-1 (#0A0A0A). This subtle shift creates visual rhythm without needing borders or dividers. A gradient divider (1px fading line) adds optional stronger separation.

Section 1 — Surface-0 (#000000)

Section 2 — Surface-1 (#0A0A0A)

Section 3 — Surface-0 (#000000)

Surface Alternation

<!-- Surface alternation pattern -->
<section style="background: var(--surface-0);">
  <!-- Section 1 content -->
</section>
<div class="gradient-divider"></div>
<section style="background: var(--surface-1);">
  <!-- Section 2 content -->
</section>
<div class="gradient-divider"></div>
<section style="background: var(--surface-0);">
  <!-- Section 3 content -->
</section>

[04] Pool Ambiente de Fundo

Blue-tinted radial gradients appear on hero and CTA sections. The alternating positions create visual rhythm and directional depth. Use sparingly — maximum one ambient pool per section.

Hero Section with Blue Ambient

Section Headline

The blue ambient pool creates a subtle glow behind the content, adding depth without distraction.

Ambient Pool CSS

/* Blue ambient pool (hero/CTA sections) */
.section-hero {
  position: relative;
  overflow: hidden;
}
.section-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(
    ellipse at center,
    rgba(74, 144, 255, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

[05] Marca d'Água da Ampulheta

The H1-B Hourglass as a large watermark (200-300px) at 3-5% opacity. Hidden on mobile. Place in sections about time, efficiency, or urgency.

Watermark Demo

Save 100+ Hours Monthly

The hourglass watermark appears subtly behind time/efficiency content, reinforcing the brand motif without competing with readability.

Watermark CSS

/* Hourglass watermark section */
.section-watermark {
  position: relative;
  overflow: hidden;
}

.section-watermark .watermark {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 240px;
  height: 336px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 767px) {
  .section-watermark .watermark {
    display: none;
  }
}

[06] Transições de Seção

Two transition patterns: the gradient divider (a 1px line fading from transparent to border color and back), and the gradient fade (a 120px tall blend from one surface to the next).

Section Transitions CSS

/* Gradient divider (1px line) */
.gradient-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-default) 20%,
    var(--border-default) 80%,
    transparent
  );
}

/* Gradient fade between sections */
.section-transition-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom, transparent,
    var(--surface-next)
  );
  pointer-events: none;
}

[07] Padrão de Seção Hero

The hero section uses the largest spacing (space-4xl top, space-3xl bottom), a blue ambient pool, and contains the badge, display headline (max 900px), body text (max 680px), and CTA button pair.

AI Consulting

Multiply Your Revenue with AI Systems

Strategy, implementation, and ongoing optimization of AI systems that drive measurable business outcomes.

Agendar Reunião Aplicar Agora

Hero Section Pattern

<!-- Hero section pattern -->
<section class="relative overflow-hidden"
  style="background: var(--surface-0);">
  <!-- Ambient pool -->
  <div class="absolute inset-0"
    style="background: radial-gradient(
      ellipse at center,
      rgba(74,144,255,0.06) 0%,
      transparent 70%);
      pointer-events: none;">
  </div>
  <div class="container-standard relative z-10"
    style="padding-top: var(--space-4xl);
           padding-bottom: var(--space-3xl);">
    <span class="badge-accent mb-6 inline-block">
      AI Consulting
    </span>
    <h1 class="max-w-[900px] font-bold"
      style="font-size: var(--text-display);">
      Multiply your revenue with AI systems
    </h1>
    <p class="max-w-[680px] mt-6"
      style="color: var(--text-secondary);">
      Description text here.
    </p>
    <div class="flex flex-wrap gap-4 mt-8">
      <a href="/agendar" class="btn-hero">
        Agendar Reunião
      </a>
      <a href="/aplicar" class="btn-secondary">
        Aplicar Agora
      </a>
    </div>
  </div>
</section>

[08] Padrão de Seção CTA

Centered CTA section with ambient blue pool. Used as a closing section on every page. All routes to /agendar or /aplicar.

Ready to Transform Your Business?

Schedule a free strategy call to discuss your AI implementation goals.

Agendar Reunião

CTA Section Pattern

<!-- CTA section pattern -->
<section class="relative overflow-hidden"
  style="background: var(--surface-1);">
  <div class="absolute inset-0"
    style="background: radial-gradient(
      ellipse at center,
      rgba(74,144,255,0.06) 0%,
      transparent 70%);
      pointer-events: none;">
  </div>
  <div class="container-standard relative z-10 text-center"
    style="padding-top: var(--space-3xl);
           padding-bottom: var(--space-3xl);">
    <h2>Ready to transform your business?</h2>
    <p class="max-w-[600px] mx-auto mb-8">
      Schedule a free strategy call.
    </p>
    <a href="/agendar" class="btn-primary">
      Agendar Reunião
    </a>
  </div>
</section>

[09] Regras de Uso

Alternate Surface-0 and Surface-1 between consecutive sections
Use generous padding — var(--space-3xl) (64-120px) for standard sections
Cap body text at 680px, headlines at 900px within any container
Place ambient blue pools on hero and CTA sections only
Hide watermark motifs on mobile screens

Don't

Jump more than one surface tier between adjacent sections (Surface-0 to Surface-3)
Use less than 48px spacing between sections — premium = spacious
Stack multiple ambient pools in the same section
Place two CTA sections within 2 viewports of each other
Create sections longer than 2 viewports without a CTA touchpoint