nextlevelbuilder · easterCat · Jun 20, 2026 · Jun 20, 2026 · Jun 20, 2026 · Jun 20, 2026
diff --git a/docs/01-minimalism-swiss.html b/docs/01-minimalism-swiss.html
diff --git a/docs/02-neumorphism.html b/docs/02-neumorphism.html
diff --git a/docs/03-glassmorphism.html b/docs/03-glassmorphism.html
diff --git a/docs/04-brutalism.html b/docs/04-brutalism.html
diff --git a/docs/05-3d-hyperrealism.html b/docs/05-3d-hyperrealism.html
diff --git a/docs/06-vibrant-block.html b/docs/06-vibrant-block.html
diff --git a/docs/07-dark-mode-oled.html b/docs/07-dark-mode-oled.html
diff --git a/docs/08-accessible-ethical.html b/docs/08-accessible-ethical.html
diff --git a/docs/09-claymorphism.html b/docs/09-claymorphism.html
diff --git a/docs/10-aurora-ui.html b/docs/10-aurora-ui.html
diff --git a/docs/11-retro-futurism.html b/docs/11-retro-futurism.html
diff --git a/docs/12-flat-design.html b/docs/12-flat-design.html
diff --git a/docs/13-skeuomorphism.html b/docs/13-skeuomorphism.html
diff --git a/docs/14-liquid-glass.html b/docs/14-liquid-glass.html
diff --git a/docs/15-motion-driven.html b/docs/15-motion-driven.html
diff --git a/docs/16-micro-interactions.html b/docs/16-micro-interactions.html
diff --git a/docs/17-inclusive-design.html b/docs/17-inclusive-design.html
diff --git a/docs/18-zero-interface.html b/docs/18-zero-interface.html
diff --git a/docs/19-soft-ui-evolution.html b/docs/19-soft-ui-evolution.html
diff --git a/docs/20-hero-centric.html b/docs/20-hero-centric.html
diff --git a/docs/21-conversion-optimized.html b/docs/21-conversion-optimized.html
diff --git a/docs/22-feature-rich-showcase.html b/docs/22-feature-rich-showcase.html
diff --git a/docs/23-minimal-direct.html b/docs/23-minimal-direct.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Minimal & Direct - UI Style Showcase</title>
+<link rel="stylesheet" href="shared.css">
+<style>
+:root{--bg:#fff;--text:#111;--text-dim:#999;--accent:#111;--accent-hover:#333;--blue:#2563EB;--border:#EEE;--subtle:#FAFAFA;--font:system-ui,-apple-system,sans-serif}
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.7}
+
+/* ══ HERO: MANIFESTO ══ */
+.manifesto{padding:160px 24px 120px;text-align:center;max-width:680px;margin:0 auto}
+.manifesto h1{font-size:clamp(2.5rem,5vw,4.2rem);font-weight:300;line-height:1.12;letter-spacing:-.02em;margin-bottom:20px}
+.manifesto h1 strong{font-weight:700}
+.manifesto .sub{font-size:1.1rem;color:var(--text-dim);margin-bottom:32px;line-height:1.7}
+.manifesto .cta{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--text);padding-bottom:2px;transition:all .15s}
+.manifesto .cta:hover{color:var(--blue);border-color:var(--blue)}
+
+/* ══ DIVIDER ══ */
+.divider{width:40px;height:1px;background:var(--border);margin:0 auto}
+
+/* ══ PHILOSOPHY ══ */
+.philosophy{padding:100px 24px;max-width:560px;margin:0 auto}
+.philosophy .item{margin-bottom:48px}
+.philosophy .num{font-size:.7rem;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.15em;margin-bottom:8px}
+.philosophy h3{font-size:1.5rem;font-weight:300;line-height:1.3;margin-bottom:10px}
+.philosophy h3 strong{font-weight:700}
+.philosophy p{font-size:.95rem;color:var(--text-dim);line-height:1.7}
+
+/* ══ NAV ══ */
+.demo-nav{border-bottom:1px solid var(--border);padding:14px 0}
+.demo-nav .container{display:flex;gap:28px;align-items:center;justify-content:center}
+.demo-nav .logo{font-weight:700;font-size:1rem;color:var(--text);text-decoration:none}
+.demo-nav a{color:var(--text-dim);text-decoration:none;font-size:.88rem;font-weight:400}
+.demo-nav a:hover{color:var(--text)}
+.demo-nav .nav-cta{margin-left:auto;background:var(--text);color:#fff!important;padding:7px 18px;border-radius:6px;font-weight:500}
+
+/* ══ BUTTONS ══ */
+.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:.9rem;font-weight:500;border:1px solid transparent;cursor:pointer;border-radius:6px;font-family:var(--font);transition:all .15s;line-height:1.4}
+.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
+.btn-primary:hover{background:var(--accent-hover)}
+.btn-secondary{background:transparent;color:var(--accent);border-color:var(--border)}
+.btn-secondary:hover{border-color:var(--accent)}
+.btn-ghost{background:transparent;color:var(--text-dim);border-color:transparent}
+.btn-ghost:hover{color:var(--text);background:var(--subtle)}
+.btn-disabled{background:var(--subtle);color:#D1D5DB;border-color:var(--border);cursor:not-allowed}
+
+/* ══ FORMS ══ */
+.forms{padding:80px 24px;max-width:480px;margin:0 auto;background:var(--subtle)}
+.forms h2{font-size:1.5rem;font-weight:300;margin-bottom:24px;text-align:center}
+.fg{margin-bottom:16px}
+.fg label{display:block;font-size:.78rem;font-weight:500;margin-bottom:5px;color:var(--text)}
+.fi{width:100%;padding:11px 14px;font-size:.95rem;font-family:var(--font);border:1px solid var(--border);background:#fff;color:var(--text);border-radius:6px;outline:none;transition:border .15s}
+.fi:focus{border-color:var(--accent)}
+select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
+textarea.fi{resize:vertical;min-height:100px}
+.form-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
+.form-row label{display:flex;align-items:center;gap:6px;font-size:.82rem;cursor:pointer}
+.form-row input{width:15px;height:15px;accent-color:var(--accent)}
+
+/* ══ CARDS: BORDER ONLY ══ */
+.cards{padding:80px 24px;max-width:900px;margin:0 auto}
+.cards h2{font-size:1.5rem;font-weight:300;text-align:center;margin-bottom:32px}
+.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.card{border:1px solid var(--border);border-radius:8px;padding:28px;background:#fff;transition:border-color .15s}
+.card:hover{border-color:var(--accent)}
+.card h3{font-size:1rem;font-weight:600;margin-bottom:6px}
+.card p{font-size:.88rem;color:var(--text-dim);line-height:1.7}
+
+/* ══ QUOTE ══ */
+.quote-section{padding:100px 24px;text-align:center;max-width:600px;margin:0 auto}
+.quote-section blockquote{font-size:1.5rem;font-weight:300;line-height:1.5;color:var(--text);font-style:italic;margin-bottom:16px}
+.quote-section .attr{font-size:.82rem;color:var(--text-dim)}
+
+/* ══ TYPOGRAPHY ══ */
+.typo{padding:80px 24px;max-width:600px;margin:0 auto;background:var(--subtle)}
+.typo h2{font-size:1.5rem;font-weight:300;text-align:center;margin-bottom:28px}
+.ts{margin-bottom:14px;padding:18px;background:#fff;border-radius:8px;border-left:2px solid var(--accent)}
+.ts .lbl{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;color:var(--text-dim)}
+.ts h1{font-size:2rem;font-weight:300}.ts h1 strong{font-weight:700}
+.ts h2{font-size:1.5rem;font-weight:300}.ts h2 strong{font-weight:700}
+.ts h3{font-size:1.1rem;font-weight:600}
+.ts p{font-size:.95rem;color:var(--text-dim);line-height:1.8}
+
+/* ══ PALETTE ══ */
+.palette{padding:80px 24px;max-width:600px;margin:0 auto}
+.palette h2{font-size:1.5rem;font-weight:300;text-align:center;margin-bottom:24px}
+.pal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}
+.sw{aspect-ratio:1;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding:5px;transition:all .3s;border:1px solid var(--border)}
+.sw:hover{transform:translateY(-2px)}
+.sw span{font-size:.55rem;font-weight:500;background:rgba(0,0,0,.5);padding:2px 5px;border-radius:3px;color:#fff}
+
+/* ══ MODAL ══ */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:9999;align-items:center;justify-content:center}
+.modal-overlay.active{display:flex}
+.modal-box{background:#fff;border-radius:10px;padding:36px;max-width:400px;width:90%;box-shadow:0 24px 48px rgba(0,0,0,.1)}
+.modal-box h3{font-size:1.1rem;font-weight:600;margin-bottom:10px}
+.modal-box p{font-size:.88rem;color:var(--text-dim);margin-bottom:20px;line-height:1.6}
+.modal-sec{padding:80px 24px;text-align:center}
+.modal-sec h2{font-size:1.5rem;font-weight:300;margin-bottom:20px}
+
+/* ══ INFO ══ */
+.info{padding:80px 24px;background:var(--subtle)}
+.info-box{max-width:800px;margin:0 auto;border:1px solid var(--border);border-radius:8px;padding:28px;background:#fff;text-align:center}
+.info-box h3{font-size:1rem;font-weight:600;margin-bottom:16px}
+.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;text-align:left}
+.info-item{font-size:.82rem}
+.info-item .il{font-weight:500;margin-bottom:3px;opacity:.5;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
+
+@media(max-width:768px){.card-grid{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+<div class="vp-bar">
+  <span class="vp-label">📐 Viewport:</span>
+  <button class="vp-btn" data-size="1920">1920</button>
+  <button class="vp-btn" data-size="1440">1440</button>
+  <button class="vp-btn" data-size="1024">1024</button>
+  <button class="vp-btn" data-size="768">768</button>
+  <button class="vp-btn" data-size="375">375</button>
+  <button class="vp-btn" data-size="320">320</button>
+  <span id="vp-width" class="vp-width">Full</span>
+  <a href="index.html" class="vp-back">← Back to All Styles</a>
+</div>
+<div class="vp-frame">
+
+<!-- MANIFESTO HERO -->
+<section class="manifesto">
+  <span class="tag tag-era">2020s Modern</span>
+  <span class="tag tag-complexity-medium">Complexity: Medium</span>
+  <span class="tag tag-type">Landing Page</span>
+  <h1>Simple tools for<br><strong>complex problems.</strong></h1>
+  <p class="sub">We help small teams do big things. No clutter, no complexity — just the tools you need.</p>
+  <a href="#" class="cta">Get Started →</a>
+</section>
+
+<div class="divider"></div>
+
+<!-- PHILOSOPHY -->
+<section class="philosophy">
+  <div class="item"><div class="num">01</div><h3><strong>Focused</strong> by design.</h3><p>Every feature solves one problem well. No bloat, no distractions, no features you'll never use.</p></div>
+  <div class="item"><div class="num">02</div><h3><strong>Fast</strong> at every level.</h3><p>Lightweight code, instant interactions, zero waiting. Speed is a feature, not a bonus.</p></div>
+  <div class="item"><div class="num">03</div><h3><strong>Honest</strong> in every detail.</h3><p>Transparent pricing, clear documentation, no hidden tricks or dark patterns.</p></div>
+</section>
+
+<!-- NAV -->
+<nav class="demo-nav">
+  <div class="container">
+    <a href="#" class="logo">ProductName</a>
+    <a href="#">About</a><a href="#">Features</a><a href="#">Pricing</a><a href="#">Blog</a>
+    <a href="#" class="nav-cta">Sign Up</a>
+  </div>
+</nav>
+
+<!-- BUTTONS -->
+<section style="padding:80px 24px">
+  <h2 style="font-size:1.5rem;font-weight:300;text-align:center;margin-bottom:28px">Buttons</h2>
+  <div style="display:flex;flex-wrap:wrap;gap:14px;justify-content:center">
+    <button class="btn btn-primary">Primary</button>
+    <button class="btn btn-secondary">Secondary</button>
+    <button class="btn btn-ghost">Ghost</button>
+    <button class="btn btn-disabled" disabled>Disabled</button>
+  </div>
+</section>
+
+<!-- FORMS -->
+<section class="forms">
+  <h2>Contact</h2>
+  <div class="fg"><label>Name</label><input type="text" class="fi" placeholder="Your name"></div>
+  <div class="fg"><label>Email</label><input type="email" class="fi" placeholder="you@example.com"></div>
+  <div class="fg"><label>Message</label><textarea class="fi" placeholder="What's on your mind?"></textarea></div>
+  <div class="fg"><label>Category</label><select class="fi"><option>Choose one</option><option>General</option><option>Support</option><option>Partnership</option></select></div>
+  <div class="form-row" style="margin-bottom:16px"><label><input type="checkbox"> Keep me updated</label><label><input type="radio" name="t"> Personal</label><label><input type="radio" name="t"> Business</label></div>
+  <button class="btn btn-primary" style="width:100%">Send</button>
+</section>
+
+<!-- CARDS -->
+<section class="cards">
+  <h2>What We Offer</h2>
+  <div class="card-grid">
+    <div class="card"><h3>Focused</h3><p>Every feature is designed to solve one problem well. No bloat, no distractions.</p></div>
+    <div class="card"><h3>Fast</h3><p>Built for speed. Lightweight code, instant interactions, zero waiting.</p></div>
+    <div class="card"><h3>Honest</h3><p>Transparent pricing, clear documentation, no hidden tricks or dark patterns.</p></div>
+  </div>
+</section>
+
+<!-- QUOTE -->
+<section class="quote-section">
+  <blockquote>"The best design is the one you don't notice."</blockquote>
+  <div class="attr">— Our Design Philosophy</div>
+</section>
+
+<!-- TYPOGRAPHY -->
+<section class="typo">
+  <h2>Typography</h2>
+  <div class="ts"><div class="lbl">H1</div><h1><strong>Clarity</strong> First</h1></div>
+  <div class="ts"><div class="lbl">H2</div><h2><strong>Direct</strong> Message</h2></div>
+  <div class="ts"><div class="lbl">H3</div><h3>Simple Statement</h3></div>
+  <div class="ts"><div class="lbl">Body</div><p>Typography is generous and spacious. Body text at 17px ensures readability without strain. Every word earns its place.</p></div>
+</section>
+
+<!-- PALETTE -->
+<section class="palette">
+  <h2>Color Palette</h2>
+  <div class="pal-grid">
+    <div class="sw" style="background:#111"><span>#111</span></div>
+    <div class="sw" style="background:#FFF;border-color:#DDD"><span>#FFF</span></div>
+    <div class="sw" style="background:#2563EB"><span>#2563EB</span></div>
+    <div class="sw" style="background:#999"><span>#999</span></div>
+    <div class="sw" style="background:#EEE"><span>#EEE</span></div>
+    <div class="sw" style="background:#FAFAFA"><span>#FAFAFA</span></div>
+  </div>
+</section>
+
+<!-- MODAL -->
+<section class="modal-sec">
+  <h2>Modal Dialog</h2>
+  <button class="btn btn-primary" onclick="document.getElementById('mm').classList.add('active')">Open Modal</button>
+  <div id="mm" class="modal-overlay" onclick="if(event.target===this)this.classList.remove('active')">
+    <div class="modal-box">
+      <h3>Get Started</h3>
+      <p>Enter your email. Takes 30 seconds.</p>
+      <div class="fg"><input type="email" class="fi" placeholder="you@example.com"></div>
+      <button class="btn btn-primary" style="width:100%" onclick="document.getElementById('mm').classList.remove('active')">Create Account</button>
+    </div>
+  </div>
+</section>
+
+<!-- INFO -->
+<section class="info">
+  <div class="info-box">
+    <h3>Style Information</h3>
+    <div class="info-grid">
+      <div class="info-item"><div class="il">Era</div><div class="iv">2020s Modern, Medium</div></div>
+      <div class="info-item"><div class="il">Best For</div><div class="iv">Indie products, Consulting, Freelancer</div></div>
+      <div class="info-item"><div class="il">Layout</div><div class="iv">Single-column manifesto, Philosophy list</div></div>
+      <div class="info-item"><div class="il">CSS Keywords</div><div class="iv">generous padding, 17px body, border-only cards, single accent</div></div>
+      <div class="info-item"><div class="il">Variables</div><div class="iv">--accent:#111, font-weight:300 headings</div></div>
+      <div class="info-item"><div class="il">Unique Element</div><div class="iv">Manifesto hero, philosophy numbered list</div></div>
+    </div>
+  </div>
+</section>
+
+</div>
+<script src="shared.js"></script>
+</body>
+</html>