UI & interface design

Visual Hierarchy and Spacing System Design Generator

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.

7 blanks to fill in · Added December 2025 · visual-hierarchy · spacing-system · design-tokens · typography · ui-design

The prompt

7 blanks

You are an expert UI designer specializing in visual hierarchy, typography systems, and spatial design principles. Your task is to create a comprehensive visual hierarchy and spacing system specification for [PROJECT NAME OR PRODUCT TYPE].

Project Context:
- Product type: [WEB APPLICATION/MOBILE APP/DASHBOARD/MARKETING SITE]
- Brand personality: [MODERN/PLAYFUL/PROFESSIONAL/MINIMALIST/BOLD]
- Content density: [HIGH/MEDIUM/LOW]
- Target audience: [USER DEMOGRAPHICS AND TECHNICAL PROFICIENCY]
- Design system status: [BUILDING NEW/EXPANDING EXISTING/AUDIT AND REFINE]
- Primary use cases: [KEY USER TASKS AND CONTENT TYPES]

Generate a detailed visual hierarchy and spacing system specification that includes:

1. Visual Hierarchy Principles and Strategy
- Core hierarchy philosophy aligned with user goals and content priorities
- Information architecture approach (flat vs deep hierarchy)
- Attention flow patterns (F-pattern, Z-pattern, or custom)
- Primary, secondary, and tertiary content classification system
- Principles for distinguishing interactive vs static elements
- Hierarchy adaptation strategy across different screen sizes

2. Typography Hierarchy System
- Complete type scale with specific sizes, weights, and line heights
- Heading levels (H1 through H6) with use cases and context
- Body text variations (large, regular, small) with applications
- Display typography for hero sections and promotional content
- Supporting text styles (captions, labels, helper text, footnotes)
- Font weight progression system (light, regular, medium, semibold, bold)
- Letter spacing adjustments for different sizes and weights
- Text decoration styles (links, emphasis, code, strikethrough)
- Paragraph spacing and text block composition rules
- Responsive typography scaling across breakpoints

3. Spacing System Foundation
- Base unit selection and mathematical progression (4px, 8px system)
- Spacing scale with values and naming conventions (XS, S, M, L, XL, etc.)
- Design tokens for spacing (margin, padding, gap values)
- Vertical rhythm system for consistent baseline alignment
- Horizontal spacing rules for layouts and grid gutters
- Component-specific spacing standards (form fields, cards, lists)
- Relationship between spacing and visual grouping (proximity principle)
- Responsive spacing adjustments (denser on mobile, airier on desktop)

4. Size and Scale Hierarchy
- Element sizing system beyond typography (icons, buttons, inputs)
- Icon size scale with contextual usage (16px, 24px, 32px, etc.)
- Button sizing variants (small, medium, large) with touch targets
- Image and media sizing guidelines
- Container and card sizing standards
- Scale relationships creating visual importance (large = important)
- Proportional scaling rules maintaining hierarchy across breakpoints

5. Color Hierarchy and Emphasis
- Color application strategy for hierarchy (primary, secondary, tertiary)
- Contrast ratios creating visual separation and importance
- Background color layering system (elevation and depth)
- Color coding for different content types or status indicators
- Accent color usage for calls-to-action and important elements
- Neutral color progression for de-emphasizing content
- Text color hierarchy (headings darker, body text medium, captions lighter)

6. Visual Weight and Emphasis Techniques
- Font weight as hierarchy indicator
- Border weight system (1px, 2px, 4px) and applications
- Shadow and elevation system creating depth hierarchy
- Opacity variations for de-emphasis and disabled states
- Negative space (whitespace) as a hierarchy tool
- Containment strategies (boxes, borders, backgrounds) for grouping
- Visual markers (icons, badges, indicators) drawing attention

7. Layout and Compositional Hierarchy
- Content block spacing creating clear sections
- Grid column allocation reflecting content importance
- Positioning strategies (top-left priority in Western interfaces)
- Alignment rules reinforcing visual relationships
- Grouping and proximity patterns (related items closer together)
- Separation techniques (dividers, whitespace, color blocks)
- Container hierarchy (cards within sections within pages)
- Z-index layering system for overlapping elements

8. Interactive Element Hierarchy
- Button hierarchy (primary, secondary, tertiary, ghost)
- Link styling differentiating from body text
- Form input visual weight and focus states
- Navigation prominence (main nav vs utility nav vs footer)
- Call-to-action emphasis techniques
- Icon button vs text button hierarchy
- Hover and active state visual changes

9. Content Scanning and Readability Optimization
- Scannable patterns using hierarchy (headings, bullets, bold keywords)
- Line length limits for optimal reading (45-75 characters)
- Paragraph length recommendations
- Visual breaks preventing wall-of-text syndrome
- Progressive disclosure hierarchy (show less, expand for more)
- Summary-to-detail hierarchy patterns
- Table and data visualization hierarchy within dense information

10. Design Tokens and Implementation
- Token naming conventions for spacing and typography
- CSS custom properties or variable structure
- Documentation format for developers
- Figma or design tool variable setup
- Component library integration
- Validation rules ensuring hierarchy consistency
- Version control and evolution strategy

11. Testing and Validation Methods
- Squint test technique (blur to check hierarchy)
- Heatmap analysis expectations
- User testing protocols for information finding
- A/B testing hierarchy variations
- Accessibility testing ensuring hierarchy works for screen readers
- Cross-device hierarchy validation

12. Common Patterns and Applications
- Card component hierarchy (image, title, description, action)
- Form layout hierarchy (labels, inputs, help text, errors)
- Dashboard hierarchy (KPIs, charts, tables, filters)
- Article/blog post hierarchy (title, metadata, body, related content)
- Navigation hierarchy (primary items, dropdowns, utility links)
- Modal and overlay hierarchy (title, content, actions)

For each component of the system, provide specific values (pixel sizes, rem units, spacing tokens), usage guidelines, and visual examples or descriptions. Ensure the system is scalable, maintainable, and creates clear visual relationships that guide users naturally through content and interactions.

Open in ChatGPT

Blanks: Project name or product type · Web application/mobile app/dashboard/marketing site · Modern/playful/professional/minimalist/bold · High/medium/low · User demographics and technical proficiency · Building new/expanding existing/audit and refine · Key user tasks and content types

How to use it

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.

Tips

Use the 8px spacing system as your foundation, creating a scale that doubles or increases by 1.5x at each step to maintain clear visual distinctions between spacing tiers
Limit your type scale to 5-7 distinct sizes to maintain clarity and prevent overwhelming choice paralysis for designers implementing your system
Apply the proximity principle rigorously: items with less space between them appear related, while larger gaps signal separate groups or sections
Establish button hierarchy through both visual weight and color, with primary actions using high-contrast colors and secondary actions using outlined or ghost styles
Create responsive hierarchy by adjusting spacing and typography proportionally rather than making dramatic jumps, ensuring visual relationships remain consistent across breakpoints
Document the why behind hierarchy decisions, not just the what, helping teams understand when to follow rules strictly versus when contextual adaptation makes sense

Mathematical Spacing Systems

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].

Creating Clear Visual Hierarchy

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 Fundamentals

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].

Testing and Validating Hierarchy

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].