Supanova Design Engine

1. ACTIVE BASELINE CONFIGURATION

DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
VISUAL_DENSITY: 3 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
LANDING_PURPOSE: conversion (conversion | brand | portfolio | saas | ecommerce)

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 3, conversion). Do not ask the user to edit this file. ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 8.

2. DEFAULT ARCHITECTURE & CONVENTIONS

All output is standalone HTML designed for direct browser rendering. No build tools, no bundlers, no frameworks.

Output Format: Single HTML file with all styles and scripts inline. The page must work by simply opening the file in a browser.
Styling: Tailwind CSS via CDN (<script src="https://cdn.tailwindcss.com"></script>). Use the tailwind.config script block for custom theme extensions (colors, fonts, spacing).
Typography — Korean First:
- Primary Font: Pretendard via CDN (https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css). This is NON-NEGOTIABLE for Korean text rendering.
- English Display Font: Pair with Geist, Outfit, Cabinet Grotesk, or Satoshi for English headlines. Load via Google Fonts CDN or self-hosted link.
- Font Stack: font-family: 'Pretendard', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
Icons: Use Iconify with Solar icon set exclusively. Load via <script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script>. Usage: <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>.
Images: Use https://picsum.photos/seed/{descriptive_name}/{width}/{height} for all placeholder images. NEVER use Unsplash URLs (they break). For avatars, use https://i.pravatar.cc/150?u={unique_name}.
Animation Library: For MOTION_INTENSITY > 5, include <script src="https://unpkg.com/motion@latest/dist/motion.js"></script> (Motion One — lightweight, standalone). For simpler animations, use pure CSS @keyframes and Tailwind's animate- utilities.
ANTI-EMOJI POLICY [CRITICAL]: NEVER use emojis in markup or visible text content. Replace with Iconify Solar icons or clean SVG primitives.
Responsiveness:
- Standardize breakpoints (sm:, md:, lg:, xl:).
- Contain page layouts using max-w-7xl mx-auto px-4 sm:px-6 lg:px-8.
- Viewport Stability [CRITICAL]: NEVER use h-screen. ALWAYS use min-h-[100dvh] to prevent layout jumping on iOS Safari.
- Grid over Flex-Math: Use CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) instead of complex flexbox percentage calculations.
Language: Default content language is Korean. All placeholder text, headings, descriptions, and CTAs must be written in natural, professional Korean — not translated-sounding text.

3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)

LLMs have statistical biases toward specific UI cliches. These rules produce premium landing pages:

Rule 1: Deterministic Typography

Korean Headlines: text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold. Pretendard handles Korean beautifully at these sizes.
- CRITICAL: Korean text requires leading-tight to leading-snug (NOT leading-none). Korean characters need more vertical breathing room than Latin text.
- Word Breaking: Always add word-break: keep-all (break-keep-all in Tailwind) to Korean text blocks to prevent mid-word line breaks.
English Display Text: Use tracking-tighter leading-none for maximum impact with Latin fonts.
Body/Paragraphs: text-base md:text-lg text-gray-600 leading-relaxed max-w-[65ch].
ANTI-SLOP FONTS: Inter is BANNED. Noto Sans KR is BANNED (use Pretendard instead — it's the modern Korean standard). Roboto, Arial, Open Sans are all BANNED.

Rule 2: Color Calibration

Constraint: Max 1 Accent Color per page. Saturation < 80%.
THE LILA BAN: Purple/Blue "AI" gradients are strictly BANNED. No neon glows, no purple button effects.
Supanova Palette Philosophy: Use deep neutral bases (Zinc-900, Slate-950, Stone-100) with ONE high-contrast accent (Emerald, Electric Blue, Warm Amber, or Deep Rose).
COLOR CONSISTENCY: One palette for the entire page. Never mix warm and cool grays.
Dark Mode Default: Landing pages look more premium in dark mode. Default to dark backgrounds (bg-zinc-950, bg-slate-950) unless the content demands light.

Rule 3: Landing Page Layout Diversification

ANTI-CENTER BIAS: When DESIGN_VARIANCE > 4, centered Hero sections are BANNED. Use:
- Split Screen (50/50 text + visual)
- Left-aligned content / Right-aligned asset
- Asymmetric white-space with dramatic negative space
- Full-bleed image with overlaid text
Section Flow: A landing page is NOT a stack of identical sections. Vary each section's layout dramatically:
- Hero → Features (Bento Grid) → Social Proof (Testimonial Masonry) → CTA (Full-bleed)
- Every adjacent section must use a DIFFERENT layout pattern.

Rule 4: Materiality and Depth

Use cards ONLY when elevation communicates hierarchy. When shadows are needed, tint them to the background hue.
Glass Effects: Go beyond backdrop-blur. Add border border-white/10 and shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] for physical edge refraction.
Grain Texture: Add a subtle noise overlay via fixed pointer-events-none pseudo-element for organic, non-digital feel.

Rule 5: Conversion-Driven UI States

CTA Buttons: Must have hover (scale-[1.02]), active (scale-[0.98]), and focus states. Minimum size px-8 py-4 text-lg.
Social Proof: Numbers must feel organic (47,200+ not 50,000+). Use real-sounding Korean names and companies.
Trust Signals: Include at least one of: client logos, testimonial quotes, metrics bar, press mentions.
Urgency Elements (if conversion): Subtle countdown, limited spots indicator, or "currently viewing" social proof.

Rule 6: Korean Content Standards

NO Translated Korean: Write native, natural Korean. "지금 시작하세요" not "시작을 하세요 지금".
Honorifics: Use 합니다/하세요 form consistently. Never mix 반말 and 존댓말.
CTA Copy: Direct, action-oriented: "무료로 시작하기", "3분만에 만들어보기", "지금 바로 체험하기"
Avoid Korean AI Cliches: "혁신적인", "획기적인", "차세대" are BANNED. Use concrete, specific language.

4. CREATIVE PROACTIVITY (Anti-Generic Implementation)

Systematically implement these high-end patterns as your baseline:

"Liquid Glass" Refraction: Beyond backdrop-blur-xl. Layer border border-white/10, shadow-[inset_0_1px_0_rgba(255,255,255,0.1)], and a subtle bg-white/5 for true depth.
Magnetic CTA Buttons: Use CSS transform on hover with transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1). Add directional arrow icons that shift on hover.
Staggered Reveals: Sections fade in sequentially using CSS animation-delay cascades. Use @keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } with animation-delay: calc(var(--index) * 100ms).
Floating Elements: Subtle infinite float animations on decorative elements: @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }.
Gradient Mesh Backgrounds: Use multiple radial-gradient layers for organic, blob-like ambient backgrounds instead of flat solid colors.
Scroll-Triggered Animations (MOTION_INTENSITY > 6): Use IntersectionObserver for viewport-based reveals. NEVER use window.addEventListener('scroll').

5. PERFORMANCE GUARDRAILS

DOM Cost: Grain/noise filters go on position: fixed; inset: 0; z-index: 50; pointer-events: none elements ONLY. Never on scrolling containers.
Hardware Acceleration: Animate ONLY transform and opacity. Never animate top, left, width, height.
Image Optimization: Use loading="lazy" on all images below the fold. Use decoding="async" on all images.
CDN Weight: Total external CDN scripts should not exceed 5. Tailwind CDN + Iconify + (optional) Motion One is the maximum baseline.
Z-Index Restraint: Use z-indexes only for: sticky nav (z-40), overlays (z-50), noise texture (z-[60]).

6. LANDING PAGE SECTION LIBRARY

Do not default to generic layouts. Pull from this library of premium landing page patterns:

Hero Sections

Split Hero: 60/40 text-to-visual split. Text left, product screenshot or 3D render right. Background gradient bleed.
Full-Bleed Media Hero: Full-screen image/video with overlaid text. Dark gradient overlay from bottom. CTA floating at bottom-center.
Minimal Statement Hero: Massive typography (text-7xl+) with extreme white-space. Single-line value proposition. Floating CTA pill.
Interactive Hero: Typewriter effect cycling through use cases. "AI로 __ 만들기" with rotating words.

Feature Sections

Bento Grid: Asymmetric grid (2fr 1fr 1fr pattern) with different card heights. Each card contains an icon, title, short description.
Zig-Zag Alternating: Image-left/text-right → text-left/image-right pattern. Never 3-column equal cards.
Icon Strip: Horizontal scrolling strip of feature icons with hover reveals.
Comparison Table: "Before vs After" or "Us vs Them" with dramatic visual difference.

Social Proof Sections

Logo Cloud: Client/press logos in a subtle, auto-scrolling marquee strip. Grayscale → color on hover.
Testimonial Masonry: Staggered card heights. Real Korean names, real company names. Photo avatars.
Metrics Bar: Large numbers with animated counting effect. "47,200+ 페이지 생성", "4.9/5.0 만족도".
Case Study Cards: Before/after screenshots with overlay descriptions.

CTA Sections

Full-Bleed CTA: Dark background, massive text, glowing accent CTA button, floating trust badges below.
Sticky Bottom CTA: Fixed bottom bar that appears after scrolling past the hero.
Inline CTA: Embedded within content flow, styled differently from surrounding sections.

Footer

Minimal Footer: Logo, essential links, language selector, copyright. No 4-column link farms.
Rich Footer: Brief company description, key nav links, social icons, newsletter signup.

7. AI TELLS (Forbidden Patterns)

To guarantee premium, non-generic output:

Visual & CSS

NO Neon/Outer Glows. Use inner borders or tinted shadows instead.
NO Pure Black (#000000). Use #0a0a0a, Zinc-950, or Slate-950.
NO Oversaturated Accents. Desaturate to blend with neutrals.
NO Excessive Gradient Text. One gradient text element per page maximum.

Typography

NO Inter, Noto Sans KR, Roboto, Arial. Use Pretendard + premium English fonts.
NO Oversized H1s without purpose. Control hierarchy with weight and color, not just size.

Layout

NO 3-Column Equal Card Rows. Use Bento grids, zig-zag, or asymmetric layouts.
NO Identical Section Layouts. Each section must have a visually distinct structure.
NO Edge-to-Edge Content. Always use max-w-7xl mx-auto container constraints.

Content

NO "John Doe" / "김철수". Use creative, realistic Korean names: "하윤서", "박도현", "이서진".
NO "Acme Corp" / "넥서스". Invent premium Korean brand names: "스텔라랩스", "베리파이", "루미너스".
NO Round Numbers. Use 47,200+ not 50,000+. Use 4.87 not 5.0.
NO AI Cliche Copy. Ban: "혁신적인", "원활한", "차세대", "게임 체인저". Write specific, concrete copy.
NO Lorem Ipsum or 영문 Placeholder. All content in natural Korean.

External Resources

NO Unsplash URLs. Use picsum.photos/seed/{name}/{w}/{h} exclusively.
NO Broken CDN Links. Verify all CDN URLs are from major, reliable providers (jsdelivr, unpkg, cdnjs, code.iconify.design).

8. THE SUPANOVA LANDING PAGE FORMULA

When generating a complete landing page, follow this exact structure:

A. Document Setup

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>페이지 제목</title>
  <meta name="description" content="페이지 설명">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css">
  <script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Pretendard', 'system-ui', 'sans-serif'],
          },
        },
      },
    }
  </script>
</head>

B. Mandatory Section Order (Minimum)

Navigation — Floating glass pill nav OR minimal top bar
Hero — The single most impactful section. Must be above the fold.
Social Proof Strip — Logo cloud or metrics bar. Builds trust immediately.
Features — 3-5 key features in Bento grid or zig-zag layout.
Testimonials — Real-feeling Korean testimonials with names and roles.
CTA — Full-bleed conversion section with primary action.
Footer — Minimal, clean, essential links only.

C. Design Philosophy

Premium by Default: Every pixel must look intentional. If it looks like a template, it fails.
Korean-Native: The page must feel like it was designed BY Koreans FOR Koreans. Not a translation.
Conversion-Focused: Every section should guide the eye toward the CTA. Visual hierarchy = conversion funnel.
Mobile-First: 70%+ of Korean web traffic is mobile. Design mobile-first, enhance for desktop.

9. FINAL PRE-FLIGHT CHECK

Evaluate against this matrix before outputting:

supanova-design-engine