> ## Documentation Index
> Fetch the complete documentation index at: https://impossible.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Design tips

> High-level design guidance for building effective pages with Impossible.

# Design tips

Impossible follows design best practices by default. These tips help you get the most out of your prompts.

## Spacing and layout

* **Section padding:** 64–96px vertical between major sections
* **Between elements:** 16–32px spacing
* **Base scale:** 8px (8, 16, 24, 32, 48, 64, 96, 128px)

When prompting, you can say things like: "Add 64px padding between sections" or "Use consistent 24px spacing between the feature cards."

## Typography

* **Hierarchy:** Headings should be clearly larger than body text (h1 > h2 > h3)
* **Line length:** 65–75 characters for body text (readable)
* **Fonts:** At most 2 font families — one for headings, one for body

Example prompts: "Make the headline 2x larger than the subtitle" or "Use a clear heading hierarchy."

## Color and contrast

* **Balance:** Aim for \~60% neutral, 30% secondary, 10% accent
* **Accessibility:** Body text needs sufficient contrast (WCAG AA: 4.5:1)
* **Consistency:** Use your site's existing palette; extend rather than replace

Example: "Use the site's accent color for the CTA button" or "Ensure the body text has good contrast."

## Design patterns

Impossible knows these common patterns:

| Pattern           | Description                                                            |
| ----------------- | ---------------------------------------------------------------------- |
| **Hero**          | Benefit-driven headline, subheadline, primary CTA, optional hero image |
| **Features grid** | 3–4 cards with icon/title/description; stacks on mobile                |
| **Split content** | Image and text columns that alternate by section                       |
| **Social proof**  | Testimonials, logos, ratings, or stats near CTAs                       |
| **CTA banner**    | High-contrast section with concise headline and one clear action       |
| **FAQ**           | Collapsible questions with short, trust-building answers               |

You can reference these: "Add a hero section" or "Add a features grid with three cards."

## Landing page best practices

* **Primary CTA:** Repeat 2–3 times (hero, mid-page, closing section)
* **Trust signals:** Place near conversion points
* **Proof points:** Use specific numbers ("10,000+ customers," "4.9/5 rating") instead of vague claims
* **Hierarchy:** Left-aligned body text, strong heading contrast, consistent spacing

## Responsive design

Impossible builds mobile-first by default:

* Single-column layouts that enhance at larger breakpoints
* Fluid typography and relative units
* Images that scale (max-width: 100%)
* Touch targets at least 44x44px

Use the preview device toggles (desktop, tablet, mobile) to verify layouts.

## Common mistakes to avoid

* Same-size elements that compete for attention
* Center-aligned body text (harder to read)
* Generic placeholder text (Lorem ipsum)
* Too many fonts or colors

<Tip>
  When you want a specific look, describe it: "Use a two-column layout with the image on the left" or "Match the spacing of the hero section."
</Tip>