REIS IA
REIS IA PADRÕES DESIGN SYSTEM v1.0

Biblioteca de Padrões

Reusable compositions that combine tokens, components, and effects into consistent UI patterns. Each pattern includes a live demo, usage guidance, and implementation code.

[01] Padrões de Cards

Six card tiers for different emphasis levels. All with real hover states -- interact with each card to see the transition behavior.

01 Standard
Default Card S-2 bg, 8% border. Hover: S-3, 12%.
02 Accented
Featured Card 2px blue top border. Same hover behavior.
03 Glass
Glass Card blur(16px), saturate(180%), 5% white bg.
04 Featured Glow
Blue Glow Card Hover: accent border + blue glow shadow.
hover me
05 KPI Card
Client Retention
97%
+2.3%
06 Rotating Border
Sapphire Scanner Highest emphasis. Max 1-2 per page.
Card Patterns CSS
/* Standard card hover */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 32px;
  transition: border-color 300ms var(--ease-base),
              background-color 300ms var(--ease-base);
}
.card:hover {
  border-color: var(--border-visible);
  background-color: var(--surface-3);
}

/* Accented card */
.card-accented {
  border-top: 2px solid var(--accent-blue);
}

/* Glass card */
.card-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(180%);
}

/* Featured card (rotating border) */
.card-rotating-border {
  /* See effects page for full implementation */
  animation: rotate-border 8s linear infinite;
}
[02] Padrões de Layout de Seções

Sections alternate between Surface-0 and Surface-1. Gradient dividers provide smooth transitions. Padding uses fluid spacing tokens for responsive behavior.

Hero Section -- Surface-0

Padding: var(--space-4xl) top, var(--space-3xl) bottom

Content Section -- Surface-1

Padding: var(--space-3xl) vertical

Feature Section -- Surface-0

Padding: var(--space-3xl) vertical

CTA Section -- Surface-1

Padding: var(--space-3xl) vertical

Section Pattern HTML
<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 here -->
  </div>
</section>

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

<section style="background: var(--surface-1);">
  <!-- Next section content -->
</section>
[03] Padrões de Grid

The hairline grid technique uses 1px gap with the parent background color as dividers. This is the primary grid pattern across the design system -- the technique itself is demonstrated here.

Hairline Grid (gap-1px)

01

Cell with 1px hairline divider. Parent bg shows through gap.

.grid-hairline
02

Cell with 1px hairline divider. Parent bg shows through gap.

.grid-hairline
03

Cell with 1px hairline divider. Parent bg shows through gap.

.grid-hairline
04

Cell with 1px hairline divider. Parent bg shows through gap.

.grid-hairline
05

Cell with 1px hairline divider. Parent bg shows through gap.

.grid-hairline
06

Cell with 1px hairline divider. Parent bg shows through gap.

.grid-hairline

Responsive Column Layouts

2-Column (6+6)
Column 1
Column 2
3-Column (4+4+4)
Column 1
Column 2
Column 3
4-Column (3+3+3+3)
Column 1
Column 2
Column 3
Column 4
Hairline Grid CSS
.grid-hairline {
  display: grid;
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
}

.grid-hairline > * {
  background: var(--surface-0);
}

/* On Surface-1 sections */
.grid-hairline-s1 > * {
  background: var(--surface-1);
}

.grid-hairline-2 { grid-template-columns: repeat(2, 1fr); }
.grid-hairline-3 { grid-template-columns: repeat(3, 1fr); }
.grid-hairline-4 { grid-template-columns: repeat(4, 1fr); }
[04] Padrões de CTA

All conversion paths lead to /agendar (booking) or /aplicar (application). The blue accent exists primarily for CTA elements -- max 2 accent-colored elements per viewport.

Hero CTA (Dual Button)

Ready to Transform?

Book a strategy call to explore AI implementation.

Agendar Reunião Aplicar
Ghost CTA (In-Card)

AI Implementation

Custom AI systems for enterprise clients.

Explore case studies
[05] Padrões de Badge

5 badge variants for semantic labeling. Each uses its own color token for background, border, and text.

Accent Success Warning Error Neutral
AI IMPLEMENTATION

Feature labels, tech tags

COMPLETED

Status, confirmations

BETA

Early access, experimental

DEPRECATED

Removed, breaking changes

V1.0

Versions, metadata

Badge CSS
.badge-accent {
  background: rgba(74, 144, 255, 0.10);
  border: 1px solid rgba(74, 144, 255, 0.20);
  color: #4A90FF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
}

.badge-success { /* green */ }
.badge-warning { /* amber */ }
.badge-error   { /* red */ }
.badge-neutral { /* white/gray */ }
[06] Padrões de Formulário

Form inputs with consistent states: default, hover, focus, error, success, and disabled. All inputs use Surface-3 background. Click into inputs to see focus states.

As it appears on your business card.
Click to see blue border + ring focus state.
Please enter a valid URL.
Auto-generated. Cannot be edited.
Form Input CSS
.input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  transition: border-color 200ms, box-shadow 200ms;
}

.input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.15);
}

.input-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
[07] Padrões de Divisor

Sections use gradient fade dividers rather than hard borders. Three variants for different contexts.

Gradient Divider (Primary)
.gradient-divider
Solid Border (Subtle)
border-bottom: 1px solid var(--border-default)
Accent Divider
background: linear-gradient(to right, var(--accent-blue), transparent)
[08] Regras de Uso
Do
  • Use standard cards for most content; reserve accented/rotating for emphasis
  • Alternate sections between Surface-0 and Surface-1
  • Use gradient dividers between sections for smooth transitions
  • Keep max 2 blue accent CTA elements per viewport
  • All CTAs lead to /agendar or /aplicar
Don't
  • Put more than 2 rotating border cards on a single page
  • Use hard 1px borders between sections (use gradient dividers)
  • Create pricing tables or tier comparison patterns
  • Mix badge semantic colors (e.g., green badge for errors)
  • Use form inputs without labels -- accessibility requirement
See Also
CardsFormsButtonsSections