REIS IA AVANÇADOS DESIGN SYSTEM v1.0

Componentes Avançados

Composite components that combine base elements into complete UI patterns. Each component is built from the design system primitives (surfaces, borders, typography tokens) and follows the same interaction rules.

[01] Accordion FAQ

Expandable FAQ-style sections with smooth max-height animation. The plus icon rotates 45 degrees to form an X when open and shifts to accent blue. Only one item opens at a time (single-select).

Animation: 300ms ease-out Answer max-width: 680px Hover: Surface-2 bg

Reis IA is a high-ticket AI consultancy that helps businesses implement artificial intelligence systems to multiply revenue and save time. Led by Moroni Reis, we focus on strategic AI implementation, not generic tools.

Most implementations follow a 6-week timeline: Week 1 for discovery, Weeks 2-3 for architecture, Weeks 4-5 for implementation and testing, and Week 6 for deployment and handoff. Complex projects may extend to 8-12 weeks.

Typical results include 60-80% reduction in manual processing time, 3-5x increase in content output, and measurable ROI within the first 90 days. Every engagement begins with a strategy call to define specific KPIs.

Yes. After the initial implementation, we offer three levels of ongoing support: monitoring and maintenance, optimization sprints, and full managed AI operations. The right level depends on your team and goals.

Accordion CSS

.accordion {
  border-radius: 12px;
  border: 1px solid var(--border-default);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--border-default);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.accordion-trigger:hover {
  background: var(--surface-2);
}

.accordion-trigger__text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.accordion-trigger__icon {
  transition: transform 300ms var(--ease-out),
              color 200ms;
}

.accordion-item[open] .accordion-trigger__icon {
  transform: rotate(45deg);
  color: var(--accent-blue);
}

[02] Bloco de Depoimento

Quote block with a 2px blue left border, italic text, and attribution. The decorative quote mark appears at 20% accent blue opacity.

“

Reis IA transformed our operations. We automated 80% of our manual processes and saw ROI within 60 days.

Carlos Mendes CTO, TechBrazil Inc.

“

The strategy-first approach is what sets Moroni apart. Every system we built together is still running and generating results.

Ana Vieira Founder, Vieira Digital

Testimonial CSS

.testimonial {
  border-left: 2px solid var(--accent-blue);
  padding-left: 24px;
  position: relative;
}

.testimonial__quote-mark {
  position: absolute;
  top: -8px;
  left: -4px;
  font-size: 48px;
  color: rgba(74, 144, 255, 0.20);
  line-height: 1;
  pointer-events: none;
}

.testimonial__text {
  font-size: 18px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.70;
  margin-bottom: 16px;
}

.testimonial__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.testimonial__role {
  font-size: 14px;
  color: var(--text-tertiary);
}

[03] Bloco de Estatística (Contador Animado)

Large numeric display for key metrics with scroll-triggered counter animation. Value counts up with ease-out cubic when the element enters the viewport. Use in 3-column grids on desktop.

AI Deployments

Across 12 industries

Time Reduction

Average manual process savings

Hours Automated

Annual cumulative impact

Week Timeline

Discovery to deployment

3-5x

ROI Multiple

Within first 90 days

24/7

System Uptime

Continuous monitoring

Stat Block CSS

.stat-block__value {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  color: var(--accent-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-block__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: 8px;
}

[04] Banner de Destaque

A blue-tinted background banner with a badge, text content, and CTA button. Used for announcements, promotions, or mid-page conversion touchpoints.

Limited Availability

Only 3 strategy call slots remaining this month. Book now to secure your AI implementation roadmap.

Agendar Reunião

Highlight Banner CSS

.highlight-banner {
  background: var(--blue-08);
  border: 1px solid var(--blue-20);
  border-radius: 12px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

[05] Sistema de Badges

Five semantic badge variants for status indicators, category labels, and feature flags. All badges share: 12px font, weight 600, uppercase, 0.05em tracking, 6px radius.

Accent Category labels, info tags

Success Active status, verified

Warning Beta, pending, caution

Error Failed, rejected, critical

Neutral Default, archived, generic

AI Consulting

Category label on a card header

Active

Status indicator for projects

Beta

Feature flag or release stage

Badge Variants CSS

/* Badge variants */
.badge-accent {
  background: var(--blue-10);
  border: 1px solid var(--blue-20);
  color: var(--accent-blue);
}

.badge-success {
  background: var(--color-success-bg);
  border: 1px solid rgba(34, 197, 94, 0.20);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-bg);
  border: 1px solid rgba(245, 158, 11, 0.20);
  color: var(--color-warning);
}

.badge-error {
  background: var(--color-error-bg);
  border: 1px solid rgba(239, 68, 68, 0.20);
  color: var(--color-error);
}

.badge-neutral {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-visible);
  color: var(--text-secondary);
}

[06] Componente de Tabs

Tabbed content with keyboard navigation (arrow keys, Enter/Space). The active tab is indicated by a 2px blue underline and bold weight. Follows WAI-ARIA tabs specification for accessibility.

Active: text-primary, weight 600, blue underline Inactive: text-tertiary, weight 500 Transition: 200ms fade

Project Overview

This tab shows a summary of the project status, key metrics, and recent activity. Tabs are ideal for organizing related content into a compact, scannable layout without navigating to a new page.

Deployments

Time Saved

83%

Active Agents

Tabs CSS

.tab-list {
  display: flex;
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
}

.tab-trigger {
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}

.tab-trigger[aria-selected="true"] {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent-blue);
}

[07] Marquee de Logos

Continuously scrolling logo strip for social proof / trust signals. Animation pauses on hover. Edge fade mask using gradient for seamless looping. Logos rendered with reduced opacity, brightening on hover.

Duration: 35s linear infinite Logo opacity: 35%, full on hover Gap: 80px

OpenAI

Anthropic

Google AI

Meta AI

Vercel

Stripe

Linear

Notion

OpenAI

Anthropic

Google AI

Meta AI

Vercel

Stripe

Linear

Notion

Trusted by leading companies

Logo Marquee CSS

.marquee-container {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg, transparent 0%,
    black 8%, black 92%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  gap: 80px;
  animation: marquee 35s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

[08] Padrões de Navegação

The site navigation uses a fixed header with dropdown menus. Three mega-dropdowns group all pages. On mobile, a full-screen overlay replaces the dropdowns. See the site header above for a live reference.

Header Bar

Position: Fixed, z-index 50

Height: 60px

Background: Surface-1 + backdrop-blur(12px)

Border: 1px bottom, border-default

Dropdown Menu

Trigger: Click on nav item

Background: Surface-2

Border: 1px, border-default

Width: auto (min 200px)

Mobile Menu

Type: Full-screen overlay

Background: rgba(0,0,0,0.95) + blur

Links: 24px, weight 600, centered

Breakpoint: Below 1024px

Footer

Layout: 4-column grid

Background: Surface-1

Links: 14px, text-tertiary, hover text-primary

Copyright: 13px, text-quaternary

[09] Regras de Uso

Use single-select accordion — only one item open at a time
Use testimonial blocks with real attribution (name + role)
Duplicate marquee logos for seamless looping
Include keyboard navigation for tabs (arrow keys)
Use semantic badge variants (accent for info, success/warning/error for status)

Don't

Stack more than 8 accordion items — split into sections
Use testimonials without real names and roles
Animate the marquee faster than 30s — it becomes distracting
Create more than 5 tabs — consider a different navigation pattern
Use highlight banners more than once per page

Componentes Avançados

Project Overview

Implementation Details

Configuration