frontend-design

Loaded when designing without an existing brand system. Push for a committed, distinctive aesthetic. Generic defaults are a failure state.

Output location

Write all output files to ./opendesign/mockups/<task-slug>/. Derive the slug from the page or feature name (e.g. landing-page, pricing-redesign).

Pre-build thinking

Before touching HTML, answer three questions in your plan:

• Purpose. What job does this page do in one sentence?
• Tone. Which human adjective describes the feeling — clinical, warm, severe, playful, reverent, brash?
• Differentiation. What would make a viewer remember this over a generic SaaS landing page?

Pick an extreme direction and execute it with precision: brutalist, maximalist, editorial, retro-futuristic, organic, industrial, anti-design, swiss-modernist, zine-punk. Indecisive middles read as stock templates.

Typography

Pair a distinctive display face with a refined body face. Avoid Inter, Roboto, Arial, and generic system stacks. Candidates: editorial serifs (Fraunces, GT Sectra, Tiempos), geometric display (Space Grotesk, PP Neue Montreal, Söhne Breit), mono accents (JetBrains Mono, IBM Plex Mono), quirky unicase and variable fonts where the direction supports it. Set a real type scale with intentional ratios; do not rely on default browser sizes.