Create comprehensive visual hierarchy frameworks and spacing systems that guide user attention and establish consistent, scalable design patterns. This prompt generates detailed specifications for typography scales, spatial relationships, and design tokens that create cohesive, professional user interfaces with clear information architecture.
This prompt is designed for UI/UX designers, design system architects, and product teams establishing or refining visual hierarchy and spacing standards. Fill in the bracketed placeholders with your specific project context including product type, brand personality, and content density requirements. The output provides a comprehensive hierarchy and spacing system that serves as the foundation for all design decisions, ensuring consistency and scalability across your product. Use this when starting a design system, auditing existing designs for consistency, or establishing design tokens for developer handoff.
Modern spacing systems rely on mathematical progressions that create visual harmony and predictable relationships between elements [web:36]. The most common approach uses an 8px base unit system, with spacing values at multiples of 8 (8px, 16px, 24px, 32px, 40px, 48px, etc.), providing sufficient variety while maintaining consistency [web:36]. Some systems incorporate half-steps (4px, 12px, 20px) for more granular control in dense interfaces [web:36]. The 8px system aligns with most device pixel grids and scaling factors, preventing subpixel rendering issues. Alternatively, a 4px base system offers more flexibility but requires more tokens to manage. Define your spacing scale as design tokens with semantic names (space-xs, space-s, space-m, space-l, space-xl) rather than pixel values, allowing flexibility to adjust the entire scale while maintaining proportional relationships [web:39].
Visual hierarchy guides users to the most important information first by manipulating design elements including size, color, contrast, spacing, and positioning [web:33][web:35]. Larger elements naturally attract attention before smaller ones, making size the most intuitive hierarchy tool [web:35]. Color contrast creates emphasis, with high-contrast elements standing out against backgrounds while lower contrast recedes [web:38]. Whitespace isolation draws attention by separating important elements from surrounding content [web:38]. Positioning matters significantly, with top and left areas receiving priority attention in Western interfaces following F-pattern or Z-pattern scanning behaviors [web:35]. Weight variations through bold typography, thick borders, or elevated shadows add visual importance [web:38]. Effective hierarchy requires limiting emphasis to avoid competing focal points—if everything is emphasized, nothing stands out [web:33].
Typography hierarchy uses size, weight, spacing, and style variations to organize information and guide reading flow [web:37][web:40]. Establish a type scale with clear distinctions between heading levels (H1 largest for page titles, H6 smallest for minor sections) and body text variants [web:37]. Font weight progression from light to bold creates hierarchy within the same size, allowing emphasis without disrupting layout [web:40]. Line height and letter spacing adjustments improve readability while reinforcing hierarchy—headings benefit from tighter line height (1.2-1.3) while body text needs more breathing room (1.5-1.6) [web:40]. Limit font families to one or two to maintain cohesion, using size and weight for differentiation [web:37]. Create responsive type scales that adjust proportionally across breakpoints, maintaining hierarchy relationships while optimizing readability for each device size [web:37].
Effective visual hierarchy requires validation through multiple testing methods to ensure it functions as intended. The squint test involves blurring your design (literally squinting or using Gaussian blur) to see which elements stand out, revealing whether your hierarchy is strong enough [web:38]. Heatmap testing and eye-tracking studies show actual user attention patterns, validating or contradicting your hierarchy assumptions [web:35]. User testing with task-based scenarios ("Find the pricing information" or "Start a new project") reveals whether users can locate important information quickly [web:35]. A/B testing hierarchy variations measures impact on conversion rates and task completion [web:35]. Test across different devices and screen sizes to ensure hierarchy maintains effectiveness when layouts reflow. Accessibility testing with screen readers ensures hierarchical structure works for users with visual impairments who rely on semantic HTML headings and landmarks [web:38].
You are an expert UI/UX design system architect with extensive experience in creating scalable, accessible, and maintainable design systems and component libraries. Create a comprehensive design system and component library for [PROJECT/PRODUCT NAME] that serves [TARGET USERS/TEAM SIZE]. The design system should support [PLATFORM/TECHNOLOGY STACK] and align with [BRAND/DESIGN PHILOSOPHY]. ## Core Requirements: 1. **Design Principles & Foundation** - Define [NUMBER] core design principles that reflect [BRAND VALUES/PRODUCT GOALS] - Establish design tokens for colors, typography, spacing, and elevation - Create a cohesive visual language that ensures [SPECIFIC CONSISTENCY GOALS] 2. **Component Library Structure** - Design [SPECIFY COMPONENT TYPES: e.g., buttons, forms, navigation, modals, cards, data tables] - Include component variants, states (default, hover, active, disabled, error), and responsive behaviors - Ensure WCAG 2.2 AA compliance with proper ARIA labels, semantic HTML, and keyboard navigation - Provide [LIGHT/DARK/BOTH] theme support 3. **Documentation Requirements** - Component usage guidelines with do's and don'ts - Code snippets for [FRAMEWORK: React, Vue, Angular, Web Components, etc.] - Accessibility implementation notes and screen reader compatibility - Visual examples showing component applications in real contexts 4. **Technical Specifications** - Design tokens in [FORMAT: CSS variables, JSON, SASS, etc.] - Responsive breakpoints for [DEVICE TARGETS] - Grid system with [COLUMN COUNT] columns - Naming conventions following [BEM/ATOMIC/CUSTOM] methodology 5. **Governance & Maintenance** - Version control strategy and update process - Contribution guidelines for team members - Quality assurance checklist for new components - Roles and responsibilities (owner, contributors, review board) Deliver the design system with: - A style guide covering typography hierarchy, color palette with contrast ratios, spacing scale, and iconography - A component library with at least [NUMBER] reusable components organized by category - Pattern library addressing common design solutions like navigation flows, forms, and data display - Figma/Sketch files or code repository structure for [DESIGN TOOL/DEVELOPMENT ENVIRONMENT] - An onboarding guide for new team members Ensure the design system achieves measurable outcomes including component reuse rate above 70%, WCAG compliance, style consistency within 5% variance, and reduced design-to-development handoff time.
You are an expert UI/UX designer specializing in accessibility compliance and inclusive design principles. Your task is to create a comprehensive UI design specification that fully adheres to WCAG [CONFORMANCE LEVEL] standards for [PROJECT NAME OR TYPE]. Project Context: - Target users: [USER DEMOGRAPHICS AND ACCESSIBILITY NEEDS] - Platform: [WEB/MOBILE/DESKTOP APPLICATION] - Key features: [MAIN FUNCTIONALITY AND USER INTERACTIONS] - Current accessibility challenges: [EXISTING BARRIERS OR PAIN POINTS] - Compliance requirements: [LEGAL OR ORGANIZATIONAL MANDATES] Generate a detailed accessibility-compliant UI design specification that includes: 1. WCAG Compliance Analysis - Map design elements to WCAG 2.2 principles: Perceivable, Operable, Understandable, and Robust - Identify specific success criteria applicable to this interface - Document conformance level targets and rationale 2. Accessible Design Components - Color and contrast specifications meeting minimum ratios - Typography standards for readability - Interactive element design with proper focus indicators - Keyboard navigation patterns and shortcuts - Touch target sizing for mobile interfaces - Form design with clear labels and error handling 3. Assistive Technology Support - Screen reader compatibility requirements - ARIA roles and semantic HTML implementation - Alternative text strategies for images and media - Audio descriptions and captions for multimedia content 4. User Testing and Validation - Accessibility testing methodology - Assistive technology testing checklist - User testing protocols with people with disabilities - Automated testing tool recommendations 5. Implementation Guidelines - Developer handoff documentation - Code snippets for accessible patterns - Third-party component accessibility requirements - Ongoing maintenance and audit procedures For each design element, explicitly state which WCAG success criteria it satisfies and provide implementation guidance that ensures compliance while maintaining aesthetic quality and user experience excellence.
You are an expert UI designer with extensive experience in design-to-development workflows and creating comprehensive handoff documentation. Your task is to generate complete design handoff documentation for [PROJECT NAME] that enables developers to accurately implement the design vision. Project Information: - Project type: [WEB APPLICATION/MOBILE APP/DESKTOP SOFTWARE] - Design tool used: [FIGMA/SKETCH/ADOBE XD/OTHER] - Technology stack: [REACT/ANGULAR/VUE/NATIVE/OTHER] - Team size: [NUMBER OF DEVELOPERS] - Timeline: [DEVELOPMENT SPRINT DURATION] - Design system status: [EXISTING SYSTEM/NEW SYSTEM/NO SYSTEM] Generate comprehensive handoff documentation that includes: 1. Design Specifications Overview - Layout structure and grid system details with measurements - Spacing system (margins, padding, gaps) with pixel or rem values - Breakpoints for responsive design across devices - Component hierarchy and naming conventions - Page templates and layout variations 2. Visual Design Standards - Complete color palette with hex codes, RGB values, and usage guidelines - Typography specifications including font families, weights, sizes, line heights, and letter spacing - Icon library with sizing standards and usage context - Imagery guidelines including aspect ratios, file formats, and optimization requirements - Shadow and elevation system with CSS specifications - Border radius and styling specifications 3. Interactive Components Documentation - Component states (default, hover, active, focus, disabled, error) - Animation specifications with timing, easing, and duration details - Transition effects between states - Loading states and skeleton screens - Microinteractions and feedback mechanisms - Touch targets and clickable area specifications 4. Implementation Guidelines - Component code structure and recommended HTML semantic markup - CSS class naming conventions or utility class systems - Reusable component specifications with props or parameters - Z-index layering system for modals, dropdowns, and overlays - Responsive behavior descriptions for each breakpoint - Browser compatibility requirements and fallbacks 5. Assets and Resources Package - Exportable assets list with required formats and resolutions - Icon set with SVG code or sprite sheet references - Image assets with 1x, 2x, 3x versions for different pixel densities - Font files and web font implementation instructions - Design file access links with version control information 6. Interaction Patterns and User Flows - User journey maps for key features - Form validation rules and error message specifications - Navigation behavior and menu interactions - Modal and overlay behavior with entry/exit animations - Scroll behavior and parallax effects if applicable 7. Developer Notes and Edge Cases - Special implementation considerations or technical constraints - Accessibility requirements with ARIA labels and keyboard navigation - Content overflow handling strategies - Empty states and error state designs - Loading and skeleton screen specifications - Data formatting rules for dynamic content 8. Quality Assurance Checklist - Visual QA criteria comparing implementation to design - Cross-browser testing requirements - Responsive testing breakpoints - Accessibility testing criteria - Performance benchmarks for animations and interactions For each section, provide specific, actionable information that eliminates ambiguity and reduces back-and-forth questions. Include visual annotations where measurements or relationships need clarification, and organize information in a logical structure that developers can reference throughout implementation.