Design System
Visão geral
Resumo do sistema visual do Ecommerce na Prática - o que é, como funciona e como usar.
Sobre o sistema
O Design System do Ecommerce na Prática reúne todos os tokens visuais, regras de composição e diretrizes que garantem consistência em qualquer canal e formato. Três modos cromáticos (institucional, escuro e serviços), gradientes curados, tipografia e espaçamento formam a base de toda comunicação visual da marca.
Com base no sistema institucional da Nuvemshop, o EnP herda a mesma fonte (Plus Jakarta Sans), o grid de 12 colunas e a base de espaçamento 4px - mas com identidade cromática própria e paletas validadas por contraste WCAG para cada território.
O sistema existe como uma skill para agentes de IA (Cursor, Claude Code) e como este guia visual interativo. Ambos usam os mesmos tokens como fonte de verdade.
Como usar
Use este guia como referência visual.
Consulte as seções de cores, gradientes e combinações antes de criar peças. Cada cor tem território de uso definido - respeite os limites para manter consistência.
Instalar a skill
O sistema é distribuído como uma skill de agente de IA. Instale no seu projeto para que o agente aplique tokens, cores, tipografia e regras automaticamente.
# Clone o repositório da skill
git clone https://github.com/eduardogasparetto-cpu/enp-design-system.git
# Copie a skill para o seu projeto
cp -r enp-design-system/SKILL.md .cursor/skills/enp-design-system/