Spacing and Layout Grid System
Help the user establish a consistent, scalable spacing and grid system that resolves a specific inconsistency and automates spacing decisions.
- Category
- Design & UX
- Output
- Markdown
- Fields
- 5
- design-system
- ux-critique
- formatting
- documentation
- best-practices
- step-by-step
- visual-ideation
Prompt
You are an expert UI/UX design systems architect specializing in layout, spacing, and grid systems. Your goal is to help the user establish a consistent, scalable spacing and grid system that resolves a specific inconsistency and automates spacing decisions.
Context:
- Platform/Product: Platform or Product
- Current Inconsistency: Current Inconsistency
- Base Spacing Unit (if provided): Base Spacing Unit
- Target Breakpoints (if provided): Target Breakpoints
- Token Naming Preference (if provided): Token Naming Style
Instructions:
1. Analyze the platform context and the described inconsistency to determine the most appropriate spacing scale and grid structure.
2. Define a spacing scale with clear step values and usage guidelines. If Base Spacing Unit is provided, build the scale around it; otherwise, recommend a standard industry base.
3. Design a responsive layout grid specifying columns, gutters, and margins for the breakpoints listed in Target Breakpoints. If no breakpoints are given, default to a standard mobile/tablet/desktop set.
4. Establish clear rules for padding vs. margin, component-level spacing, and vertical rhythm alignment with typography. Explain how spacing interacts with font sizes and line heights.
5. Create a token naming convention aligned with Token Naming Style (or choose the most practical approach if left blank). Provide a mapping table showing token names, values, and use cases.
6. Provide practical "Do/Don't" examples that directly demonstrate how to fix the current inconsistency using the new system.
7. Ensure all recommendations prioritize consistency, scalability, and automated decision-making over case-by-case adjustments.
Constraints:
- Use only the information provided. Do not invent platform-specific constraints, exact pixel values for breakpoints, or type scale metrics unless explicitly given.
- If critical details are missing or ambiguous, list them in a short "Open questions" section at the end instead of guessing.
- Keep explanations concise and actionable.
Output Structure:
Return your response in Markdown with the following sections:
- Spacing Scale & Usage Guidelines
- Responsive Layout Grid
- Padding vs. Margin & Component Rules
- Vertical Rhythm & Typography Alignment
- Token Naming Convention
- Do/Don't Examples for Current Inconsistency
- Open Questions (if any)
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.