REIS IA
REIS IA CARDS DESIGN SYSTEM v1.0

Cards

Cards are the primary content container. Six variants handle everything from basic content blocks to featured showcases with the Sapphire Scanner effect. All cards use the Surface system for depth and white-alpha borders for structure.

[01] Todas as Variantes

Six card variants organized in a hairline grid. Hover each card to see its interactive behavior. The featured card has a continuously rotating blue border.

Standard

Card Title

Surface-2 background with border hover.

Accented
Featured

Card Title

Blue top border draws attention.

Glass

Card Title

Translucent with backdrop blur.

Featured

Card Title

Sapphire Scanner rotating border.

KPI
Deployments
50+
+12%
Content

Title

Icon + title + desc + CTA.

Learn more →
[02] Card Standard

The foundational card variant. Surface-2 background with 8% white-alpha border. On hover, the border brightens to 12% and background lifts to Surface-3. This is the default — use it unless a specific variant is needed.

AI Strategy

Map your business processes and identify the highest-impact AI implementation opportunities.

System Design

Architect AI systems that integrate with your existing tools and scale with your growth.

Implementation

Build, test, and deploy AI systems with measurable KPIs and clear timelines.

Standard Card CSS
.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: var(--surface-3);
}

@media (max-width: 767px) {
  .card { padding: 24px; }
}
[03] Card Featured (Sapphire Scanner)

The highest-emphasis card uses the Sapphire Scanner rotating border effect. A blue light segment slowly orbits the card perimeter over 8 seconds. Use on 1-2 featured cards per page maximum — overuse dilutes the effect.

Animation: 8s linear infinite Max per page: 1-2 cards

Featured Project

This card uses the Sapphire Scanner rotating border. The subtle blue scanning beam evokes systematic precision and analytical methodology.

View case study →

Gradient Border

A static accent border variant. The blue-tinted border creates subtle emphasis without animation.

Learn more →
Featured Card CSS (Rotating Border)
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card-rotating-border {
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface-3)) padding-box,
    conic-gradient(
      from var(--border-angle),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.08) 75%,
      rgba(74,144,255,0.5) 85%,
      rgba(74,144,255,0.8) 90%,
      rgba(74,144,255,0.5) 95%,
      rgba(255,255,255,0.08) 100%
    ) border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  animation: rotateBorder 8s linear infinite;
}

@keyframes rotateBorder {
  to { --border-angle: 360deg; }
}
[04] Card Glass

Translucent card with blur and saturate backdrop filters. Best used over sections with ambient light pools or gradient backgrounds where the translucency effect is visible.

Glass Card

The backdrop-filter creates a frosted glass effect. The saturate(180%) boost prevents blur from washing out the underlying ambient pools.

Glass Card CSS
.card-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(180%);
  padding: 32px;
}
[05] Card KPI

Compact data-display card for key performance indicators. Features a label, large value with tabular-nums, optional trend indicator, and context line.

Deployments
50+
+12% this quarter
Time Saved
83%
Average reduction in manual processing time
Hours Automated
245K
+38% year-over-year
KPI Card CSS
.kpi-card {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 200ms var(--ease-base),
              background-color 200ms var(--ease-base);
}

.kpi-card:hover {
  border-color: var(--border-visible);
  background: var(--surface-3);
}

.kpi-card__label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.kpi-card__value {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
[06] Estrutura de Card de Conteúdo

The standard internal structure for content cards: icon (32-40px, accent blue), title (H4), description (body, text-secondary), and an optional ghost CTA pushed to the bottom with mt-auto.

Time Multiplication

AI systems that give you back 10x the hours you invest in implementation.

Learn more →

Revenue Systems

Automated funnels, lead scoring, and conversion optimization at scale.

Learn more →

Process Architecture

Map, automate, and monitor your core business processes with AI.

Learn more →

Team Enablement

Train your team to operate and optimize AI systems independently.

Learn more →
[07] Layouts em Grid

Three standard grid configurations using auto-fit with minmax for responsive behavior. Cards flow naturally from the configured maximum down to single-column on mobile.

2-Column Grid (minmax 340px)
Card 1
Card 2
3-Column Grid (minmax 300px)
Card 1
Card 2
Card 3
4-Column Grid (minmax 260px)
Card 1
Card 2
Card 3
Card 4
Card Grid CSS
/* Card grid layouts */
.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
[08] Regras de Uso
Do
  • Use standard cards as the default — only upgrade to accented/featured when content demands it
  • Maintain consistent padding within a card grid (all cards same padding)
  • Use Surface-2 background for cards on Surface-0/Surface-1 sections
  • Limit Sapphire Scanner cards to 1-2 per page
  • Use auto-fit grids for responsive card layouts
Don't
  • Use box-shadows for card elevation — use the surface system instead
  • Mix card variants within the same grid (e.g., glass + standard)
  • Place cards directly on Surface-2 background — no visual separation
  • Skip the hover state — every card must respond to interaction
  • Nest cards inside cards — keep the hierarchy flat
See Also
PatternsEffects