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
100 lines
2.8 KiB
Markdown
100 lines
2.8 KiB
Markdown
|
|
### 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)
|
|
|
|
---
|