elementor / modules / mcp / static-resources / style / best-practices.md

best-practices.md in Elementor Website Builder – more than just a page builder 4.3.0, at modules/mcp/static-resources/style/best-practices.md

166 lines 7.0 KB

Raw Download Zip

1	# DESIGN QUALITY IMPERATIVE
2
3	You are generating designs for real users who expect distinctive, intentional aesthetics - NOT generic AI output.
4
5	The Core Challenge: Large language models naturally converge toward statistically common design patterns during generation. This creates predictable, uninspired results that users describe as "AI slop": safe color schemes, default typography hierarchies, minimal contrast, and timid spacing.
6
7	Your Mission: Actively resist distributional convergence by making intentional, distinctive design choices across all aesthetic dimensions. Every design decision should have a clear purpose tied to visual hierarchy, brand personality, or user experience goals.
8
9	When in doubt between "safe" and "distinctive," choose distinctive - users can always request refinements, but they cannot salvage generic foundations.
10
11	---
12
13	# DESIGN VECTORS - Concrete Implementation Guidance
14
15	## 1. Typography & Visual Hierarchy
16
17	### Avoid Distributional Defaults:
18	- NO generic sans-serifs as primary typefaces (Inter, Roboto, Arial, Helvetica)
19	- NO timid size ratios (1.2x, 1.5x scaling)
20	- NO uniform font weights (everything at 400 or 600)
21
22	### Intentional Alternatives:
23	- For Technical/Modern: Consider monospace headlines (JetBrains Mono, SF Mono) paired with clean body text
24	- For Editorial/Elegant: Consider serif headlines (Playfair Display, Crimson Text) with sans-serif body
25	- For Playful/Creative: Consider display fonts with character, paired with highly legible body text
26
27	### Scale & Contrast Implementation:
28	- Headline-to-body size ratios: 3x minimum (e.g., 48px headline vs 16px body)
29	- Use extreme weight contrasts: pair weight-100 or 200 with weight-800 or 900
30	- Line height contrasts: tight headlines (1.1) vs. generous body (1.7)
31	- Letter spacing: compressed headlines (-0.02em to -0.05em) vs. open small text (0.03em+)
32
33	## 2. Color & Theme Strategy
34
35	### Avoid Distributional Defaults:
36	- NO purple gradients or blue-purple color schemes (massively overrepresented in AI output)
37	- NO evenly-distributed color palettes (3-4 colors used equally)
38	- NO timid pastels or all-neutral schemes
39	- NO #333333, #666666, #999999 grays
40
41	### Intentional Alternatives:
42	- Commit to a Dominant Color: Choose ONE primary brand color that appears in 60-70% of colored elements
43	- Sharp Accent Strategy: Use 1-2 high-contrast accent colors sparingly (10-15% of colored elements)
44	- Neutrals with Personality: Replace pure grays with warm (#3d3228, #f5f1ed) or cool (#2a2f3d, #f0f2f5) tinted neutrals
45
46	### Color Psychology Mapping:
47	- Energy/Action → Warm reds, oranges, yellows (NOT purple/blue)
48	- Trust/Calm → Deep teals, forest greens (NOT generic blue)
49	- Luxury/Premium → Deep burgundy, emerald, charcoal with gold accents
50	- Playful/Creative → Unexpected combinations (coral + mint, mustard + navy)
51
52	## 3. Spatial Design & White Space
53
54	### Avoid Distributional Defaults:
55	- NO uniform spacing (everything 16px or 24px)
56	- NO cramped layouts that maximize content density
57	- NO default container widths (1200px, 1440px)
58
59	### Intentional Alternatives:
60	- Breathing Room: Use generous white space as a design element (80-120px vertical spacing between sections)
61	- Asymmetric Spacing: Vary padding dramatically (small: 12px, medium: 48px, large: 96px)
62	- Content Width Strategy:
63	- Reading content: max 65-75 characters (600-700px)
64	- Hero sections: asymmetric layouts, not centered blocks
65	- Cards/components: vary sizes intentionally, not uniform grids
66
67	## 4. Motion & Interaction Design
68
69	### Avoid Distributional Defaults:
70	- NO scattered micro-interactions on every element
71	- NO generic fade-in animations
72	- NO 0.3s ease-in-out transitions everywhere
73
74	### Intentional Alternatives:
75	- High-Impact Moments: Use animation for 2-3 key moments (page load hero, primary CTA, section reveals)
76	- Staggered Reveals: When animating multiple items, use staggered delays (0.1s increments)
77	- Purposeful Timing: Fast interactions (0.15s) for responsiveness, slow reveals (0.6s+) for drama
78
79	## 5. Backgrounds & Atmospheric Depth
80
81	### Avoid Distributional Defaults:
82	- NO solid white or light gray backgrounds
83	- NO single-color backgrounds
84	- NO generic gradient overlays
85
86	### Intentional Alternatives:
87	- Layered Gradients: Combine 2-3 subtle gradients for depth
88	- Geometric Patterns: SVG patterns, mesh gradients, or subtle noise textures
89	- Strategic Contrast: Alternate between light and dark sections for rhythm
90
91	## 6. Visual Hierarchy Principles
92
93	### Clear Priority System:
94	1. Primary Focus (1 element): Largest, highest contrast, most visual weight
95	2. Secondary Elements (2-3 elements): 40-60% of primary size, reduced contrast
96	3. Tertiary/Support (everything else): Minimal visual weight, muted colors
97
98	### Contrast Techniques:
99	- Size: 3x+ differences between hierarchy levels
100	- Weight: 300+ difference in font-weight values
101	- Color: Primary gets brand color, secondary gets neutral, tertiary gets muted
102	- Space: Primary gets 2x+ surrounding white space vs. secondary
103
104
105	## 7. Flexbox Gotcha (CAPABILITY-AWARE)
106
107	`e-flexbox` defaults to `flex-direction: row`, not `column` — stacked content
108	(heading + paragraph, footer columns, etc.) needs `"display": "flex",
109	"flex-direction": "column"` set explicitly, or children render side-by-side with
110	no warning. Set `flex-direction` explicitly on every multi-child container.
111
112
113	# IMPLEMENTATION WORKFLOW
114
115	When building a composition:
116
117	1. Define the Visual Goal First
118	- What emotion/brand personality? (Professional, playful, elegant, bold)
119	- What's the single most important element?
120	- What color family (warm/cool/neutral) supports the goal?
121
122	2. Choose Typography Personality
123	- Select font pairings that match the personality (NOT defaults)
124	- Define scale (3x+ headline ratio)
125	- Set weight extremes (light/heavy contrast)
126
127	3. Commit to Color Strategy
128	- Pick ONE dominant color (NOT purple, NOT generic blue)
129	- Choose 1 sharp accent
130	- Define warm or cool neutrals
131
132	4. Design Spatial Rhythm
133	- Use generous white space (3-6rem between sections)
134	- Create asymmetry (not everything centered)
135	- Vary component sizes intentionally
136
137	5. Add Strategic Motion
138	- Identify 2-3 high-impact animation moments
139	- Use staggered timing for multiple elements
140	- Keep interactions purposeful, not decorative
141
142	6. Layer Atmospheric Depth
143	- Use gradient combinations for backgrounds
144	- Add subtle patterns or textures
145	- Alternate light/dark sections for rhythm
146
147
148	# CONTEXT-AWARE DESIGN PERSONALITIES
149
150	Brand personality should influence your choices:
151
152	- Corporate/Professional: Deep neutrals, serif headlines, structured spacing
153	- Creative/Agency: Bold color, display fonts, asymmetric layouts
154	- Tech/Startup: Monospace accents, sharp colors, modern spacing
155	- Elegant/Luxury: Serif dominance, muted colors with metallic accents, generous white space
156
157	# USER OVERRIDE CAPABILITY
158
159	Always respect user specifications:
160
161	If user specifies:
162	- Specific colors → use them
163	- Specific fonts → use them
164	- Specific spacing → use it
165	- "Minimal/simple" → reduce ornamentation but maintain quality principles
166