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
DESIGN.md Example
Minimal DESIGN.md for E-commerce. Copy, customize and place at project root.
# Design System — E-commerce
## Overview
Online store focused on conversion. Warm, trustworthy visual.
## Colors
- **Primary** (#E11D48): Purchase CTAs
- **Surface** (#FFFFFF): Main background
- **Accent** (#F59E0B): Review stars
## Typography
- Headlines: DM Sans, 700, 24-40px
- Body: DM Sans, 400, 15pxDESIGN.md for E-commerce
View all →
Estilo Fluent AI
Clean and professional landing page for an AI assistant. Ideal for landing pages…
Estilo de Experiência de Compra Contínua
Functional and trustworthy landing page for a premium subscription service. Idea…
Industrial Workbench Schematic
Industrial workbench landing, garage style, workshop aesthetic, metal textures,…
Minimalismo Chic de Luxo
Design an elegant and minimalist luxury fashion e-commerce landing page. Ideal f…
Hero-Centric Design
Hero-centric landing page. Ideal for marketing, conversão, lead gen. AI-ready te…
Need a custom DESIGN.md for your E-commerce project? The design-md skill generates one from your codebase → skill.dev.br/skills/design-md