PixelPilot uiux-layouts.instructions.md

UI/UX Layout Patterns 2026

Advanced responsive layouts, CSS Grid/Flexbox strategies, diagonal sections, masonry grids, and interactive dashboard widget systems.

---

1. FLOATING CENTRED CARD (The "Focus" Layout)

Use for login, onboarding, or single-action landing pages.

<div class="layout-focus">
  <div class="card card--floating">
    <!-- Content -->
  </div>
</div>

.layout-focus {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--bg);
  background-image: var(--gradient-mesh);
}

.card--floating {
  width: 100%;
  max-width: 480px;
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
  animation: float-in var(--dur-slow) var(--ease-spring);
}

@keyframes float-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

---

2. HERO WITH OFFSET IMAGE

A dynamic hero section where the image breaks the container or overlaps content.

<section class="hero-offset container">
  <div class="hero-offset__content">
    <h1 class="text-hero">Design the Future</h1>
    <p class="text-lg">Premium UI/UX systems for 2026.</p>
  </div>
  <div class="hero-offset__media">
    <picture>
      <source srcset="hero.avif" type="image/avif">
      <img src="hero.jpg" alt="Hero Image" loading="eager" fetchpriority="high">
    </picture>
  </div>
</section>

.hero-offset {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--section-space-lg);
}

@media (min-width: 1024px) {
  .hero-offset {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .hero-offset__media {
    transform: translateX(var(--space-12));
    z-index: 2;
  }
}

---

3. DIAGONAL SPLIT SECTION (Clip-Path)

Use to break the "boxy" feel of standard web layouts.

.section--diagonal {
  position: relative;
  background: var(--surface);
  padding-block: var(--section-space-lg);
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  margin-block: calc(var(--section-space-lg) * -0.5);
}

/* Ensure content stays upright */
.section--diagonal > .container {
  clip-path: none;
}