nguyenphp UI/UX Pro Max - Marketing Design
Design principles for high-converting marketing interfaces.
1. Design System Generation
When creating marketing sites or professional reports, generate a cohesive design system. If brand data is provided from a browser_subagent crawl, prioritize those values (Logo, Colors) over defaults.
Color Palette
| Token | Light Mode | Dark Mode | Use |
|---|---|---|---|
| Primary | Brand color | Adjusted | CTAs, links |
| Secondary | Accent | Adjusted | Highlights |
| Background | White/Light | Dark gray | Base |
| Surface | Light gray | Medium gray | Cards |
| Text | Dark gray | Light gray | Content |
| Muted | Medium gray | Medium gray | Secondary text |
Typography Scale
| Level | Size | Weight | Use |
|---|---|---|---|
| Display | 64-80px | Bold | Hero headlines |
| H1 | 48-56px | Bold | Page titles |
| H2 | 32-40px | Semibold | Section titles |
| H3 | 24-28px | Semibold | Subsections |
| Body | 16-18px | Regular | Content |
| Small | 14px | Regular | Captions |
2. Marketing Page Structure
Above the Fold
| Element | Priority |
|---|---|
| Headline | Clear value proposition |
| Subheadline | Supporting benefit |
| CTA | Primary action visible |
| Social proof | Trust indicators |
| Visual | Hero image/video |
Page Flow
Hero → Social Proof → Problem → Solution → Features → Testimonials → Pricing → FAQ → CTA
3. Conversion Principles
CTA Design
| Element | Best Practice |
|---|---|
| Color | High contrast to background |
| Size | Large, not overwhelming |
| Position | Above fold, repeated |
| Copy | Action + benefit |
| Whitespace | Room to breathe |
Trust Signals
| Type | Placement |
|---|---|
| Logos | Below hero |
| Numbers | Near CTAs |
| Reviews | Before pricing |
| Guarantees | Near CTAs |
| Security | Forms, checkout |
4. Visual Hierarchy
Size Hierarchy
| Level | Relative Size |
|---|---|
| Primary | 1.5-2x |
| Secondary | 1.25x |
| Body | 1x |
| Caption | 0.875x |
Color Hierarchy
| Emphasis | Treatment |
|---|---|
| High | Brand color, bold |
| Medium | Dark text |
| Low | Gray text |
5. Spacing System
8-Point Grid
| Token | Value | Use |
|---|---|---|
| xs | 4px | Inline elements |
| sm | 8px | Related items |
| md | 16px | Section internal |
| lg | 24px | Card padding |
| xl | 32px | Between sections |
| 2xl | 48px | Section spacing |
| 3xl | 64px | Major sections |
6. Component Patterns
Card Anatomy
┌─────────────────────────┐
│ Icon/Image │
│ │
│ Title │
│ Description │
│ │
│ [CTA Button] │
└─────────────────────────┘
Form Best Practices
| Element | Guidance |
|---|---|
| Labels | Above field, not inside |
| Fields | Full width on mobile |
| Errors | Below field, red text |
| Submit | Full width, prominent |
7. Animation Guidelines
Timing
| Type | Duration |
|---|---|
| Micro | 100-200ms |
| Standard | 200-300ms |
| Complex | 300-500ms |
Easing
| Type | Use |
|---|---|
| ease-out | Enter |
| ease-in | Exit |
| ease-in-out | Move |
Scroll Animations
| Animation | When |
|---|---|
| Fade in | Content enters |
| Slide up | Cards, features |
| Scale | Images, icons |
8. Responsive Breakpoints
| Breakpoint | Target |
|---|---|
| Mobile | < 640px |
| Tablet | 640-1024px |
| Desktop | 1024-1280px |
| Wide | > 1280px |
Mobile Considerations
| Element | Mobile Treatment |
|---|---|
| Hero text | 40-50% smaller |
| Navigation | Hamburger menu |
| CTAs | Full width |
| Images | Stack vertically |
| Cards | Single column |
9. Accessibility
Color Contrast
| Text Type | Minimum Ratio |
|---|---|
| Normal text | 4.5:1 |
| Large text | 3:1 |
| UI components | 3:1 |
Interactive Elements
| Element | Requirements |
|---|---|
| Links | Underline or distinct color |
| Buttons | Focus visible state |
| Forms | Labels, error messages |
| Images | Alt text |
10. Pre-Delivery Checklist
Visual Quality
- Consistent spacing
- Aligned elements
- Color consistency
- Typography hierarchy
Interaction
- Hover states
- Focus states
- Loading states
- Error states
Responsive
- Mobile layout
- Tablet layout
- Desktop layout
Accessibility
- Color contrast
- Alt text
- Keyboard navigation
Remember: Great marketing design is invisible. It guides users to action without friction.