REIS IA SISTEMA DE ÍCONES DESIGN SYSTEM v1.0

Sistema de Ícones

A Reis IA usa Lucide Icons — uma biblioteca de ícones com traço consistente, viewBox 24x24, traço 2px e terminações arredondadas. A estética apenas traço complementa nossa marca de arte minimalista.

[01] Tamanhos de Ícones

Cinco tokens de tamanho de 12px a 32px. A largura do traço permanece em 2px em todos os tamanhos. Cada tamanho tem um caso de uso específico.

12px

.icon-xs

Inline with small text

16px

.icon-sm

Buttons, badges

20px

.icon-md

Default UI, nav

24px

.icon-lg

Card headers

32px

.icon-xl

Hero features

[02] Variantes de Cor

Ícones herdam a cor do elemento pai via currentColor. Cinco classes CSS fornecem variantes de cor semânticas.

Default

.icon-default

70% white

Standard UI icons

Primary

.icon-primary

#FFFFFF

Emphasized, active

Accent

.icon-accent

#4A90FF

Brand, CTA indicators

Muted

.icon-muted

35% white

Decorative, disabled

Error

.icon-error

#EF4444

Error indicators

[03] Regras de Uso

Icon System Rules

01 Stroke width: 2px at all sizes (Lucide default). Do not adjust stroke-width per size.
02 Line caps and joins: Round caps, round joins. No square or butt caps.
03 Color inheritance: Icons use currentColor to inherit from parent text color.
04 Minimum touch target: 44x44px container for interactive icons (the icon itself may be smaller).
05 Rendering: Inline SVG preferred over icon fonts (better accessibility, no FOUT).
06 Alignment: Icons align to the center of adjacent text's x-height, not the baseline. Use the .icon-inline helper class.

[04] Conjunto de Ícones

Uma seleção de ícones Lucide comumente usados no ecossistema Reis IA. Todos os ícones renderizam no tamanho padrão MD (20px) com cor de acento.

ArrowRight

Check

ChevronDown

Copy

Settings

Shield

Zap

Layers

Activity

Eye

Clock

Calendar

Brain

[05] Implementação

Inline SVG Pattern

Astro / HTML

<svg
  class="icon-md icon-accent"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <polyline points="20 6 9 17 4 12" />
</svg>

CSS Classes

CSS

/* Sizes */
.icon-xs  { width: 12px; height: 12px; }
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }

/* Colors */
.icon-default { color: var(--text-secondary); }
.icon-primary { color: var(--text-primary); }
.icon-accent  { color: var(--accent-blue); }
.icon-muted   { color: var(--text-quaternary); }
.icon-error   { color: var(--color-error); }

/* Inline alignment */
.icon-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.125em;
}