UMA MARCA.
MIL
POSSIBILIDADES.

A horizontal sem slogans é a assinatura principal. Escolha a composição pela área disponível e pelo tamanho de leitura.

HORIZONTAL / USO DIÁRIO

Proteção mínima: X = 10% da largura visível.

COMPACTAÁreas quadradas e verticais.

MONOGRAMA MCAvatares e ícones.

Amarelo e violeta conduzem. Laranja e vermelho pontuam. Clique em uma cor para copiar seu HEX.

Referência de composição: 60% neutros · 20% amarelo · 10% violeta · 8% laranja · 2% vermelho. Ajuste ao contexto.

Verde, vermelho de erro, tons de interação e neutros adicionais são extensões funcionais. Não substituem as oito cores institucionais.

Escala digital proposta dentro das faixas do guia. Em telas pequenas, display usa 40 px e h1 usa 40 px. Preços e tabelas usam números tabulares; informações essenciais partem de 16 px.

Uma base de 4 px organiza os detalhes. A composição digital parte das seis colunas sugeridas no guia.

Gutters: 24 px; conteúdo máximo: 1.200 px. Em comunicação visual, use a margem de referência de 6% da menor dimensão. A área de proteção da logo sempre prevalece.

Traço Elétrico nas seis ações de colecionar. Lucide nas 18 funções de interface. Clique em um ícone para acessar seu SVG.

Grade 24 × 24 · traço 1,75 em 24 px. Em 16 px, traço de 1,5 px na tela e desenhos ópticos autorais. Use 24 px como base para 32 e 48 px. SVG inline e sprite herdam currentColor; imagens via img preservam a cor do arquivo. Licença Lucide.

Componentes de referência em HTML e CSS. Teste as interações, alterne o tema e veja os estados de cada elemento.

Estados estáticos de hover e foco estão identificados para consulta. O restante dos controles responde a teclado e ponteiro. A área de toque mínima adotada pelo sistema é 44 × 44 px.

Exemplos para descoberta e coleção. As imagens de catálogo não indicam estoque ou estado de uma unidade.

REFERÊNCIA DE CATÁLOGO

Pikachu

Scarlet & Violet 151

025/165InglêsIlustração de catálogo

Adicionar à coleção

Exemplo de interface · sem oferta comercial.

A PRÓXIMA CONEXÃO

BORA
TROCAR?

Qual carta ainda falta
na sua coleção?

Criar lista de desejos

O conteúdo vem primeiro.

• Nome, coleção, número e idioma legíveis.
• Em ofertas reais: estado, marcas, fotos da unidade, preço e disponibilidade.
• Um protagonista e uma ação principal por peça.
• Padrões e personagens fora da área de leitura.

Repita o módulo inteiro, sem espaços. O fundo opaco faz parte da arte. Recortes ampliados são adequados para campanhas; mantenha textos, logos e dados em áreas limpas.

Direta, próxima e informada. A My Card recebe quem está começando e conversa com quem já coleciona há anos.

Escreva My Card e Pokémon. Use caixa alta em títulos curtos e verbos ativos. Evite promessas de valorização futura e urgência sem motivo.

Contraste, teclado e clareza fazem parte da experiência. Estes pares da marca atendem ao contraste de texto corrente.

Texto grande: a partir de 24 px regular ou aproximadamente 18,7 px em negrito. Limites visuais essenciais de controles: ≥3:1. O mínimo WCAG 2.2 AA para alvos é 24 × 24 px, com exceções; o sistema adota 44 px. Referências: contraste de texto, contraste não textual e tamanho de alvo. A aplicação final precisa de avaliação própria.

Primitivos guardam os valores. Tokens semânticos definem a função. Componentes consomem a função e acompanham o tema.

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="system.css">

<button class="mc-button">
  Adicionar à coleção
</button>

Mantenha assets/ ao lado dos estilos para carregar fontes. Os ícones são SVGs independentes; esta documentação utiliza icons-data.js para renderizá-los inline. Exemplos de integração e regras de atualização em README.md.