DESIGN.md for E-commerce
Padrões de design system para e-commerce: paletas quentes que transmitem confiança, tipografia com hierarquia forte para preços, espaçamento generoso em catálogos e componentes de conversão.
Design patterns
Palette
Paletas quentes para confiança (warm neutrals, deep rose, amber). Accent forte para CTAs de compra. Backgrounds claros para catálogo. Badges coloridos para promoções.
Typography
Sans-serif com personalidade (Outfit, DM Sans). Hierarquia forte: preço em destaque (bold, larger). Descrições em regular weight. Reviews em italic.
Spacing
Base 4px. Espaçamento generoso em grids de produto (16-24px gap). Cards com padding confortável. Seções de checkout com espaçamento amplo para reduzir fricção.
Key Components
Exemplo DESIGN.md
DESIGN.md mínimo para E-commerce. Copie, customize e coloque na raiz do projeto.
# Design System — E-commerce
## Overview
Loja online com foco em conversão. Visual quente, confiável.
## Colors
- **Primary** (#E11D48): CTAs de compra
- **Surface** (#FFFFFF): Background principal
- **Accent** (#F59E0B): Estrelas de review
## Typography
- Headlines: DM Sans, 700, 24-40px
- Body: DM Sans, 400, 15pxDESIGN.md para E-commerce
Ver todos →
Estilo Fluent AI
Estilo Fluent AI — Design tech-inspired com ai, productivity, cloud. Template e…
Estilo de Experiência de Compra Contínua
Estilo de Experiência de Compra Contínua — Design tech-inspired com e-commerce,…
Industrial Workbench Schematic
Industrial Workbench Schematic — Design technical com industrial, workbench, gar…
Minimalismo Chic de Luxo
Minimalismo Chic de Luxo — Design minimalism com luxury, fashion, e-commerce. Te…
Hero-Centric Design
Hero-Centric Design — Design landing page com large hero section, compelling hea…
Precisa de um DESIGN.md customizado para seu projeto E-commerce? A skill design-md gera um a partir do seu codebase → skill.dev.br/skills/design-md