aa489c7eb8
Add detailed landing page development plan in docs/frontend_landing_plan.md: - Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA) - Design guidelines from downloaded skills (typography, color, motion, composition) - Security considerations (XSS prevention, input sanitization, CSP) - Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90) - Responsiveness and accessibility requirements (WCAG 2.1 AA) - Success KPIs and monitoring setup - 3-week development timeline with daily tasks - Definition of Done checklist Download 10+ frontend/UI/UX skills via universal-skills-manager: - frontend-ui-ux: UI/UX design without mockups - frontend-design-guidelines: Production-grade interface guidelines - frontend-developer: React best practices (40+ rules) - frontend-engineer: Next.js 14 App Router patterns - ui-ux-master: Comprehensive design systems and accessibility - ui-ux-systems-designer: Information architecture and interaction - ui-ux-design-user-experience: Platform-specific guidelines - Plus additional reference materials and validation scripts Configure universal-skills MCP with SkillsMP API key for curated skill access. Safety first: All skills validated before installation, no project code modified. Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager) Next: Begin Sprint 3 landing page development
2.8 KiB
2.8 KiB
Color Systems
Color Roles:
- Primary: Brand color, main actions
- Secondary: Supporting elements
- Accent: Highlights, notifications
- Neutral: Text, backgrounds, borders
- Semantic: Success (green), warning (yellow), error (red), info (blue)
Color Palette Creation:
- Start with brand colors
- Create tint and shade variations (50-900 scale)
- Ensure sufficient contrast ratios
- Test for color blindness (8% of males affected)
Color Accessibility:
- WCAG AA: 4.5:1 for normal text, 3:1 for large text
- WCAG AAA: 7:1 for normal text, 4.5:1 for large text
- Never rely solely on color to convey information
Typography
Font Selection:
- Sans-serif for digital interfaces (Roboto, Inter, SF Pro)
- Limit to 2-3 font families maximum
- Consider loading performance (web fonts)
Type Scale:
- Base size: 16px (1rem)
- Scale ratio: 1.25 (major third) or 1.333 (perfect fourth)
- Establish hierarchy: Display, H1-H6, Body, Caption
Best Practices:
- Line length: 45-75 characters
- Line height: 1.4-1.6 for body text
- Letter spacing: Adjust for headings
- Responsive scaling for different devices
Iconography
Icon Styles:
- Outlined, filled, two-tone, duotone
- Consistent stroke width and corner radius
Popular Libraries:
- Material Icons, Feather Icons, Heroicons
- Font Awesome, Phosphor Icons, Tabler Icons
Best Practices:
- Use recognizable, universal symbols
- Maintain consistent style throughout
- Include text labels for critical actions
- Ensure adequate touch target size (44x44px minimum)
Imagery
Types:
- Photography, illustrations, graphics
- Icons, data visualization, backgrounds
Best Practices:
- Use authentic, diverse imagery
- Optimize for web (WebP, compressed)
- Provide meaningful alt text
- Consider loading states and placeholders
Spacing and Layout
Spacing System:
- Base unit: 4px or 8px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96
- Apply consistently for margins, padding, gaps
Layout Principles:
- Grid System: 12-column grid most common, responsive breakpoints
- White Space: Improves readability and focus
- Alignment: Left-align text, consistent element alignment
- Visual Hierarchy: Size, color, contrast guide attention
- Proximity: Group related elements together
Design Systems
Components:
- Design tokens (colors, spacing, typography values)
- Component library (buttons, inputs, cards)
- Pattern library (forms, navigation, layouts)
- Style guide (voice, tone, brand guidelines)
- Documentation (usage guidelines, code examples)
Benefits:
- Consistency across products
- Faster design and development
- Easier maintenance and updates
- Better collaboration between teams
Examples: Material Design (Google), Human Interface Guidelines (Apple), Ant Design, Carbon Design System (IBM)