Illustrations

Não use imagens stock, fotos genéricas ou SVGs fora do Foundations. Use apenas as ilustrações desta página — token sm (76px), md (108px) ou lg (142px).

Boas Práticas

Quando usar

Empty states — listas, tabelas e áreas sem registros.

Tabelas e grids — células/áreas vazias com mensagem de ausência, erro ou orientação.

Cards — dashboards e blocos informativos sem dados.

Widgets — dashboards e componentes compactos, respeitando espaço e hierarquia.

Telas de erro — 404, falhas de carregamento, permissões, conteúdo indisponível.

Quando não usar

Fotos, ilustrações stock ou SVGs exportados manualmente.

Redimensionar fora de 76px / 108px / 142px (área do token).

Alterar cores da paleta das ilustrações manualmente.

Usar ilustração sem mensagem — ela complementa, não substitui texto.

Movimentar elementos e transformar em uma nova ilustração.

Componente

Use o componente EdsIllustration para aplicar ilustrações padronizadas — combina background com padrão de pontos, ilustração de contexto e badge opcional.

Escolha o contexto no catálogo da seção Referências — não desenhe ilustrações avulsas. Se o contexto não existir, solicite ao design.

O componente EdsIllustration é equivalente ao token Illustration do Figma. Configure tamanho, contexto e badge conforme a necessidade da interface.

Configurador

md · chat-1 · badge add (right)

Defina o tamanho do componente:

Selecione a ilustração aprovada para o cenário de uso:

chat-1.svg

Defina se a ilustração terá badge e sua posição:

Selecione o ícone exibido no badge

Catálogo de badges

Use apenas badges aprovados pelo Design System. Eles seguem o mesmo padrão visual definido em Figma Foundations e devem ser aplicados somente quando ajudarem a reforçar o contexto da ilustração.

Referências

As ilustrações estão disponíveis em três tamanhos fixos: sm, md e lg. Use os controles para visualizar, ampliar ou baixar o SVG.

Tamanhos

Size	Token	Camadas	Badge	Uso
sm	76×76px	100×100px	24px	Widgets, cards compactos e células de tabela
md	108×108px	142×142px	42px	Cards, painéis e seções intermediárias
lg	140×140px	140×140px	40px	Empty states, telas de erro e áreas de destaque

Paleta

me-brand-500

#1052E0

Elementos principais da ilustração

me-brand-400

#437FFF

Destaques e volumes secundários

me-brand-300

#7CA8FF

Sombras e profundidade

me-brand-100

#D0E0FF

Fundos internos

me-brand-50

#EDF3FF

Preenchimentos suaves

slate-600

#566574

Detalhes estruturais e texto interno

slate-200

#E2E6E9

Contornos e separadores

slate-50

#F3F5F6

Fundo circular do token

Catálogo de contextos

Regras de aplicação

Cada ilustração deve acompanhar uma mensagem clara — título, descrição ou ação — e usar o tamanho de token adequado ao componente.

Empty states: md ou lg com título e CTA abaixo.
Tabelas e grids: sm ou md centralizado na área vazia.
Widgets compactos: sm para não competir com o conteúdo.
Manter a paleta me-brand + slate intacta — sem ajustes manuais de cor.
Se o contexto não existir no catálogo, solicitar ao design antes de improvisar.

Exemplos de uso

<!-- Empty state -->
<EdsIllustration size="md" context="empty-state" />

<!-- Com badge -->
<EdsIllustration size="lg" context="documento-vazio" badge="i-lucide-plus" badge-position="bottom-right" />

<!-- Widget compacto -->
<EdsIllustration size="sm" context="erro-generico" />