Design inconsistencies

Overview

Design inconsistencies - misaligned elements, inconsistent spacing, broken layouts on different screen sizes - are common when building visually complex apps. Emergent's agents can fix these issues when you describe what's wrong or share a screenshot.

The agent has full access to your app's design system, components, and styling. Treating it as a collaborative designer usually resolves issues faster than trying to edit code manually.

Common design issues

Layout breaks on mobile or desktop

If your app looks correct on one screen size but broken on another, describe the problem in chat:

• "The sidebar overlaps content on mobile"
• "Cards stack vertically on desktop - they should be in a grid"
• "Navigation menu doesn't collapse on small screens"

The agent will adjust responsive breakpoints, Flexbox/Grid rules, or component variants.

Inconsistent spacing or alignment

Spacing drift happens when components use hard-coded margins instead of design tokens. Tell the agent:

• "Button spacing is uneven across pages"
• "Card padding looks different in the dashboard vs. settings"
• "Headings don't align with the left edge of content"

The agent will normalize spacing using your design system's tokens (

spacing-4

gap-md

Colors or fonts don't match the design

If brand colors, typography, or button styles vary:

• "Primary button color is inconsistent - some are blue, some teal"
• "Headings use different fonts on different pages"
• "This section should use the brand green, not gray"

The agent will update components to reference theme variables and ensure consistency.

Elements overlap or have incorrect z-index

Overlapping modals, dropdowns hidden behind other elements, or fixed headers covering content are z-index issues. Describe what you see:

• "The dropdown menu appears behind the modal backdrop"
• "Fixed header covers the top of the page content"
• "Tooltip is cut off by the card container"

The agent will adjust stacking contexts and

z-index

Images or icons are missing, broken, or incorrectly sized

If assets don't display properly:

• "Profile images are stretched/squashed"
• "Icons are too large in the navigation"
• "Hero image doesn't load"

The agent can fix aspect ratios, apply

object-fit

How to report design issues

/dashboard

UserCard

The agent will propose a fix, update the code, and you'll see changes in the preview immediately. To push those changes to your live app, publish explicitly using the Publish/Re-publish button.

Preventing design drift

Request a design system early

Ask the agent to scaffold a design system with reusable tokens for colors, typography, spacing, and shadows:

"Create a design system with our brand colors (primary: #3B82F6, secondary: #10B981) and consistent spacing."

The agent will generate theme files and apply them across components.

Use design system tokens consistently

When requesting new features, reference the design system:

• "Use

  primary-600

  for the button background"
• "Apply

  spacing-lg

  between sections"

This keeps styling predictable.

Review on multiple viewports

Emergent's preview updates in real time. Test your app at different screen sizes (rclick the icon on the preview pane or open the live URL on your phone). Report layout issues as you spot them.

Consolidate one-off styles

If you notice repeated custom styles ("This heading is bold and 24px in three places"), ask the agent to extract a reusable component or style:

"Create a `SectionHeading` component for these repeated bold 24px headings."

When to escalate

Most design issues resolve with a chat message and optional screenshot. If the agent's fix doesn't work after 2-3 attempts:

• Describe what changed and what's still broken
• Share before/after screenshots
• Ask the agent to explain its approach: "Why is this element still misaligned?"

The agent can reason through CSS specificity conflicts, framework quirks, or inherited styles.

Related resources