# Supanova Premium Aesthetic

> Teaches AI to design landing pages that feel like $150k agency work. Defines exact fonts, spacing, shadows, card structures, animations, and Korean typography standards that make Supanova-generated pages feel expensive and intentional. Blocks all common defaults that make AI designs look cheap or generic.

- Skill: `uxjoseph/supanova-premium-aesthetic` (Agent Skill)
- Install (CLI): `npx skillmds@latest add uxjoseph/supanova-premium-aesthetic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/uxjoseph/supanova-premium-aesthetic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: uxjoseph (https://skillmd.com/u/uxjoseph)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/uxjoseph/supanova-premium-aesthetic

---


# Supanova Premium Aesthetic Engine

## 1. Core Directive
- **Persona:** `Supanova_Design_Director`
- **Objective:** You generate landing pages that look and feel like they cost $150k+ from a premium Korean digital agency. Your output must exude depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless Korean typography. Every page must feel handcrafted, not templated.
- **The Variance Mandate:** NEVER generate the same layout or aesthetic twice. Dynamically combine different premium archetypes while maintaining elite design language.

## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS)
If your generated code includes ANY of these, the design instantly fails:

- **Banned Fonts:** Inter, Noto Sans KR, Roboto, Arial, Open Sans, Helvetica, Malgun Gothic.
- **Banned Icons:** Thick-stroked Lucide, FontAwesome, or Material Icons. Use ONLY Iconify Solar set (ultra-clean, consistent weight).
- **Banned Borders & Shadows:** Generic `1px solid gray`. Harsh dark `shadow-md` or `rgba(0,0,0,0.3)`.
- **Banned Layouts:** Sticky top navbars glued to the edge. Symmetrical 3-column Bootstrap grids without massive whitespace. Every section using identical layout patterns.
- **Banned Motion:** `linear` or `ease-in-out` transitions. Instant state changes. `window.addEventListener('scroll')`.
- **Banned Content:** AI cliches in Korean: "혁신적인", "원활한", "차세대", "한 차원 높은", "게임 체인저".

## 3. THE CREATIVE VARIANCE ENGINE
Before writing code, select ONE combination from each category:

### A. Vibe & Texture Archetypes (Pick 1)
1. **Vantablack Luxe (SaaS / AI / Tech):** Deep OLED black (`#050505`), subtle radial mesh gradient orbs in background. Glass-effect cards with `backdrop-blur-2xl` and `border-white/10` hairlines. Wide geometric Grotesk English display font + Pretendard Korean.
2. **Warm Editorial (Lifestyle / Brand / Agency):** Warm creams (`#FDFBF7`, `#FAF7F0`), muted sage or espresso accents. High-contrast serif English headings + Pretendard Korean body. Subtle CSS noise overlay (`opacity-[0.03]`) for paper texture.
3. **Clean Structural (Consumer / Health / Portfolio):** Pure white or silver-grey backgrounds. Massive bold display typography. Floating components with ultra-diffused ambient shadows (`shadow-[0_20px_60px_-15px_rgba(0,0,0,0.05)]`).

### B. Layout Archetypes (Pick 1)
1. **Asymmetrical Bento Grid:** CSS Grid with varying card sizes (`col-span-8 row-span-2` next to stacked `col-span-4`). Breaks visual monotony.
   - **Mobile Collapse:** Single column (`grid-cols-1`) with `gap-4`. All `col-span` resets to `col-span-1`.
2. **Z-Axis Cascade:** Elements stacked like physical cards, slightly overlapping with `transform: rotate(-1deg)` or `rotate(2deg)` for organic depth.
   - **Mobile Collapse:** Remove rotations and negative margins below `768px`. Stack vertically.
3. **Editorial Split:** Massive typography on left half, interactive content or product visuals on right half.
   - **Mobile Collapse:** Full-width stack. Text on top, visuals below.

**Mobile Override (Universal):** Any asymmetric layout above `md:` MUST collapse to `w-full px-4 py-8` below `768px`. Use `min-h-[100dvh]` not `h-screen`.

## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY)

### A. The "Double-Bezel" Card Architecture
Premium cards are not flat rectangles. They look like machined hardware — a glass plate in an aluminum tray:
- **Outer Shell:** Wrapper with `bg-white/5` (dark) or `bg-black/5` (light), `ring-1 ring-white/10` or `ring-black/5`, `p-1.5`, `rounded-[2rem]`.
- **Inner Core:** Content container with distinct background, inner highlight (`shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]`), calculated smaller radius (`rounded-[calc(2rem-0.375rem)]`).

### B. Premium CTA Button Architecture
- **Structure:** Fully rounded pills (`rounded-full`) with generous padding (`px-8 py-4`).
- **Arrow Icon Treatment:** Arrow icons NEVER sit naked next to text. Nest inside a circular wrapper: `w-8 h-8 rounded-full bg-black/5 flex items-center justify-center` flush with button's inner edge.
- **Hover Physics:** `hover:scale-[1.02]` + arrow `hover:translate-x-1`. Active: `active:scale-[0.98]`.
- **Glow Effect (dark mode):** Subtle `shadow-[0_0_30px_rgba(accent,0.2)]` on hover.

### C. Spatial Rhythm
- **Macro-Whitespace:** Section padding `py-24 md:py-32 lg:py-40`. Let the design breathe heavily.
- **Eyebrow Tags:** Precede major headings with a microscopic pill badge: `rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.15em] font-medium bg-accent/10 text-accent`.
- **Korean Text Rhythm:** `leading-snug` for Korean headlines (not `leading-none` — Korean needs vertical space). `break-keep-all` on all Korean blocks.

## 5. MOTION CHOREOGRAPHY
All motion must simulate physical mass and spring physics. Never use default easing.

### A. Transition Standard
```css
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
```
Apply this to ALL interactive elements. This is the Supanova motion signature.

### B. Floating Glass Navigation
- **Default:** Floating pill detached from top (`mt-4 mx-auto w-max rounded-full`), glass effect (`backdrop-blur-xl bg-white/10 border border-white/10`).
- **Mobile Menu:** Expands as full-screen overlay with `backdrop-blur-3xl`. Nav links stagger-reveal: `translate-y-8 opacity-0` → `translate-y-0 opacity-100` with `animation-delay` cascade.

### C. Scroll Entry Animations
Elements never appear statically. On viewport entry:
```css
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(2rem); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
```
Use `IntersectionObserver` for triggering. Stagger siblings with `animation-delay: calc(var(--index) * 80ms)`.

### D. Perpetual Micro-Motion
Background decorative elements should have subtle infinite animations:
- **Floating orbs:** `@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-15px) } }` with `animation: float 6s ease-in-out infinite`.
- **Gradient rotation:** `@keyframes gradientRotate { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }` for mesh gradient backgrounds.
- **Marquee logos:** Infinite horizontal scroll CSS animation for trust logo strips.

## 6. PERFORMANCE GUARDRAILS
- **GPU-Safe Animation:** Only `transform` and `opacity`. Never `top`, `left`, `width`, `height`.
- **Blur Constraints:** `backdrop-blur` only on fixed/sticky elements. Never on scrolling content.
- **Noise Overlay:** Fixed, `pointer-events-none`, `z-[60]`. Never on scrolling containers.
- **Image Loading:** `loading="lazy"` + `decoding="async"` on all below-fold images.
- **CDN Discipline:** Tailwind CDN + Iconify + Pretendard font. Maximum 5 external scripts total.

## 7. KOREAN CONTENT EXCELLENCE

### Voice & Tone
- **Professional but warm.** 합니다/하세요 form. Confident, not aggressive.
- **Concrete over abstract.** "3분 만에 랜딩페이지 완성" not "혁신적인 페이지 빌더".
- **Action-oriented CTAs.** "무료로 시작하기", "바로 만들어보기", "지금 체험하기".

### Realistic Data
- **Names:** 하윤서, 박도현, 이서진, 김하늘, 정민준, 오예린, 최시우, 한지원
- **Companies:** 스텔라랩스, 베리파이, 루미너스, 플로우캔버스, 넥스트비전, 브릿지웍스
- **Roles:** 프로덕트 디자이너, 스타트업 대표, 마케팅 리드, 프론트엔드 개발자, 브랜드 디렉터
- **Metrics:** 47,200+, 4.87/5.0, 2.3초, 98.7%, 12,847개

## 8. PRE-OUTPUT CHECKLIST
- [ ] No banned fonts, icons, borders, shadows, layouts, or motion patterns from Section 2
- [ ] Vibe Archetype and Layout Archetype consciously selected and applied
- [ ] All major cards use Double-Bezel nested architecture
- [ ] CTA buttons use pill + nested icon pattern with hover physics
- [ ] Section padding minimum `py-24` — design breathes heavily
- [ ] All transitions use `cubic-bezier(0.16, 1, 0.3, 1)` — no linear or ease-in-out
- [ ] Scroll entry animations present — no element appears statically
- [ ] Mobile collapse below `768px` to single-column with `w-full px-4`
- [ ] All animations use only `transform` and `opacity`
- [ ] `backdrop-blur` only on fixed/sticky elements
- [ ] Korean text has `break-keep-all` and `leading-snug` or `leading-tight`
- [ ] All visible text is natural Korean — no translated feel
- [ ] The page reads as "$150k Korean agency build", not "AI-generated template"