> ## Documentation Index > Fetch the complete documentation index at: https://fabricate.build/docs/llms.txt > Use this file to discover all available pages before exploring further. # Design Fixes > Prompt patterns for improving the look and feel of your Fabricate app — layout, spacing, color, typography, and responsiveness. Fabricate apps ship with a clean foundation — Tailwind and shadcn/ui — but the look should be *yours*. This page is a toolkit of prompts for refining your app's design. Design changes are visual, so use the [live preview](/build/preview) and its device-size toggle as you go. Make one change, look, then make the next. ## Layout Fix structure and arrangement — how elements sit on the page. ``` Center the main content with a max width of around 1100px and add generous padding on the left and right. ``` ``` Convert the features section into a three-column grid with equal-width cards. ``` ``` Move the sidebar to the left and make the main content fill the remaining space. ``` ## Spacing Uneven or cramped spacing is the most common thing that makes an app feel unfinished. ``` The spacing on the dashboard is inconsistent. Use a consistent spacing scale — equal gaps between cards and even padding inside them. ``` ``` Add more breathing room — increase vertical spacing between sections on the home page. ``` ``` The form fields are too cramped. Add consistent vertical spacing between each field and its label. ``` ## Color Set a palette that matches your brand or mood. ``` Change the primary color to a deep indigo and use it consistently for buttons, links, and active states. ``` ``` Use a softer, warmer neutral palette instead of pure gray for backgrounds and borders. ``` ``` Add a dark mode and a toggle in the navbar to switch between light and dark. ``` Ask for colors to be applied **consistently across the app** rather than page by page. That keeps buttons, links, and accents coherent everywhere. ## Typography Type sets the tone of the whole interface. ``` Make the typography stronger — larger, bolder page headings and a clear size difference between headings and body text. ``` ``` Increase body text size slightly and add a bit more line height so longer text is easier to read. ``` ``` Use a clean, modern sans-serif for headings and keep body text readable and understated. ``` ## Responsiveness Make sure your app looks right on every screen. Use the preview's device-size toggle to check. ``` The board doesn't work on mobile — stack the columns vertically and make cards full width on small screens. ``` ``` Make the navbar collapse into a hamburger menu on screens narrower than tablet size. ``` ``` Tables overflow on mobile. Make them scroll horizontally inside a container instead of breaking the layout. ``` Always check mobile after a layout change. A design that looks great on desktop can break on small screens — the device-size toggle catches this in seconds. ## Use reference images The fastest way to communicate a *look* is to show one. Drag a screenshot or mockup into the prompt box and describe how to use it. ``` [reference design attached] Restyle the landing page to match the style of this design — same card style, color palette, and spacing — but keep my current content. ``` See [Working with Images](/tips/working-with-images) for more on guiding the AI visually. ## A workflow for polishing design Get layout and spacing right before touching color and type. Apply your palette and type scale consistently across the app. Toggle through device sizes and fix anything that breaks. Refine hover states, transitions, and empty states last. Stuck on direction? Switch to Discuss Mode and ask "how could this page look more polished?" — it's free and helps you plan before you build. ## Related Guide design changes with screenshots and mockups. Fix build and runtime errors.