Skip to main content

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

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:
PatternDescription
HeroBenefit-driven headline, subheadline, primary CTA, optional hero image
Features grid3–4 cards with icon/title/description; stacks on mobile
Split contentImage and text columns that alternate by section
Social proofTestimonials, logos, ratings, or stats near CTAs
CTA bannerHigh-contrast section with concise headline and one clear action
FAQCollapsible 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
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.”