Aurora Styling Adoption — Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Adopt the aurora showcase styling (dark aurora background, gold accents, corner accents) across all public pages (landing, booking) while keeping the MONO design system for admin dashboard.

Architecture: Create a reusable AuroraBackground component that renders the aurora layers (glow, grain, grid) as a fixed overlay. Landing pages get the aurora treatment; admin dashboard remains MONO.

Tech Stack: Next.js 16, Tailwind CSS v4, React components

File Structure

apps/frontend/
├── app/[locale]/(landing)/layout.tsx          # Add aurora background
├── components/ui/
│   ├── aurora-background.tsx                  # NEW: Aurora effect layers
│   ├── corner-accents.tsx                     # NEW: Corner bracket decorations
│   └── ...
├── app/globals.css                            # Already has tokens, add aurora utilities
└── components/layout/
    ├── header.tsx                             # Refine to match showcase
    └── footer.tsx                             # Refine to match showcase

Task 1: Create Aurora Background Component

Files:

Create: apps/frontend/components/ui/aurora-background.tsx
Modify: apps/frontend/app/globals.css:1-10 (update comment block)
Step 1: Create aurora-background.tsx with glow, grain, and grid layers

"use client";
 
interface AuroraBackgroundProps {
  className?: string;
}
 
export function AuroraBackground({ className = "" }: AuroraBackgroundProps) {
  return (
    <div className={`fixed inset-0 z-0 overflow-hidden ${className}`}>
      {/* Warm golden glow - radial gradients */}
      <div
        className="absolute inset-0 opacity-40"
        style={{
          background: `
            radial-gradient(ellipse at 20% 0%, rgba(197, 160, 89, 0.25) 0%, transparent 60%),
            radial-gradient(ellipse at 80% 100%, rgba(222, 200, 158, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(197, 160, 89, 0.08) 0%, transparent 70%)
          `,
        }}
      />
      {/* Film grain */}
      <div
        className="absolute inset-0 opacity-[0.06] mix-blend-overlay"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
        }}
      />
      {/* Grid texture with radial mask */}
      <div
        className="absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage: `
            linear-gradient(rgba(197, 160, 89, 0.3) 1px, transparent 1px),
            linear-gradient(90deg, rgba(197, 160, 89, 0.3) 1px, transparent 1px)
          `,
          backgroundSize: "60px 60px",
          maskImage:
            "radial-gradient(ellipse at center, black 0%, transparent 70%)",
          WebkitMaskImage:
            "radial-gradient(ellipse at center, black 0%, transparent 70%)",
        }}
      />
    </div>
  );
}

Step 2: Create corner-accents.tsx for gold L-bracket decorations

interface CornerAccentsProps {
  className?: string;
}
 
export function CornerAccents({ className = "" }: CornerAccentsProps) {
  return (
    <>
      {/* Top Left */}
      <div
        className={`fixed top-6 left-6 w-20 h-20 z-30 pointer-events-none opacity-50 ${className}`}
      >
        <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-[#c5a059] to-[#dec89e]" />
        <div className="absolute top-0 left-0 w-0.5 h-full bg-gradient-to-b from-[#c5a059] to-[#dec89e]" />
      </div>
      {/* Top Right */}
      <div
        className={`fixed top-6 right-6 w-20 h-20 z-30 pointer-events-none opacity-50 ${className}`}
      >
        <div className="absolute top-0 right-0 w-full h-0.5 bg-gradient-to-l from-[#c5a059] to-[#dec89e]" />
        <div className="absolute top-0 right-0 w-0.5 h-full bg-gradient-to-b from-[#c5a059] to-[#dec89e]" />
      </div>
      {/* Bottom Left */}
      <div
        className={`fixed bottom-6 left-6 w-20 h-20 z-30 pointer-events-none opacity-50 ${className}`}
      >
        <div className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-[#c5a059] to-[#dec89e]" />
        <div className="absolute bottom-0 left-0 w-0.5 h-full bg-gradient-to-t from-[#c5a059] to-[#dec89e]" />
      </div>
      {/* Bottom Right */}
      <div
        className={`fixed bottom-6 right-6 w-20 h-20 z-30 pointer-events-none opacity-50 ${className}`}
      >
        <div className="absolute bottom-0 right-0 w-full h-0.5 bg-gradient-to-l from-[#c5a059] to-[#dec89e]" />
        <div className="absolute bottom-0 right-0 w-0.5 h-full bg-gradient-to-t from-[#c5a059] to-[#dec89e]" />
      </div>
    </>
  );
}

Step 3: Commit

git add apps/frontend/components/ui/aurora-background.tsx apps/frontend/components/ui/corner-accents.tsx
git commit -m "feat: add aurora background and corner accent components"

Task 2: Update Landing Layout with Aurora

Files:

Modify: apps/frontend/app/[locale]/(landing)/layout.tsx
Step 1: Update landing layout to include AuroraBackground and CornerAccents

// SoC: Landing pages layout - includes Header and Footer for public pages
 
import { Header } from "~/components/layout/header";
import { Footer } from "~/components/layout/footer";
import { AuroraBackground } from "~/components/ui/aurora-background";
import { CornerAccents } from "~/components/ui/corner-accents";
 
export default function LandingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <AuroraBackground />
      <CornerAccents />
      <Header />
      <main className="relative z-10">{children}</main>
      <Footer />
    </>
  );
}

Step 2: Commit

git add apps/frontend/app/[locale]/\\(landing\\)/layout.tsx
git commit -m "feat: add aurora background and corner accents to landing layout"

Task 3: Refine Header Component

Files:

Modify: apps/frontend/components/layout/header.tsx
Step 1: Update header to use refined showcase button styles

The header already uses some Premium UI colors. Update the button styles to match showcase:

Replace ghost/outline buttons:

// Update this pattern in header.tsx:
 
// Old ghost button (Menu button):
<button
  type="button"
  className="text-foreground px-6 py-2 text-sm tracking-wider hover:text-accent transition-colors"
  onClick={() => setIsMenuOpen(!isMenuOpen)}
>
  MENU
</button>
 
// New refined ghost button (from showcase):
<button
  type="button"
  className="px-6 py-2 rounded-xl font-medium text-[#8b8b9b] hover:text-[#ededed] md:hover:bg-[rgba(255,255,255,0.05)] transition-all duration-150 active:scale-[0.97]"
  onClick={() => setIsMenuOpen(!isMenuOpen)}
>
  MENU
</button>

Update the CTA button styles to match showcase gold button:

// Old:
className =
  "bg-accent text-accent-foreground px-6 py-2 rounded-full text-sm font-semibold hover:bg-accent-hover transition-colors";
 
// New (from showcase gold button):
className =
  "px-7 py-3.5 rounded-xl font-semibold text-[#1a1a1a] bg-[#c5a059] hover:bg-[#dec89e] active:scale-[0.97] transition-all duration-150";

Update border colors from border-gold-border to use the correct token:

// Replace border-gold-border with border-[rgba(197,160,89,0.25)]
// This matches --color-gold-border: rgba(197, 160, 89, 0.25) in globals.css

Step 2: Commit

git add apps/frontend/components/layout/header.tsx
git commit -m "refactor: refine header buttons to match aurora showcase"

Task 4: Update Footer Component

Files:

Modify: apps/frontend/components/layout/footer.tsx
Step 1: Review and update footer to match showcase styling

Read the current footer and update to use refined border/background styles from the showcase. The footer should use:

Surface background: bg-[#1a1a1f]/80 backdrop-blur
Border: border-[#2a2a35]
Text: text-[#8b8b9b] for muted, text-[#ededed] for foreground
Step 2: Commit

git add apps/frontend/components/layout/footer.tsx
git commit -m "refactor: update footer styling to match aurora showcase"

Task 5: Create Premium UI Card Component

Files:

Create: apps/frontend/components/ui/premium-card.tsx
Step 1: Create premium-card.tsx with showcase card styles

import { cn } from "~/lib/utils";
 
interface PremiumCardProps {
  children: React.ReactNode;
  variant?: "floating" | "elevated" | "glass";
  className?: string;
}
 
export function PremiumCard({
  children,
  variant = "floating",
  className = "",
}: PremiumCardProps) {
  const variants = {
    floating:
      "rounded-2xl border border-[#2a2a35] bg-[rgba(26,26,31,0.6)] backdrop-blur-md",
    elevated:
      "rounded-2xl border border-[rgba(197,160,89,0.2)] bg-[rgba(26,26,31,0.8)] backdrop-blur-lg",
    glass:
      "rounded-2xl border border-[rgba(197,160,89,0.15)] bg-[rgba(26,26,31,0.4)] backdrop-blur-xl",
  };
 
  return (
    <div className={cn(variants[variant], "p-7", className)}>{children}</div>
  );
}

Step 2: Commit

git add apps/frontend/components/ui/premium-card.tsx
git commit -m "feat: add premium card component with aurora showcase variants"

Task 6: Update Landing Page Hero Section

Files:

Modify: apps/frontend/app/[locale]/(landing)/page.tsx
Or find the hero section component: apps/frontend/components/home/*.tsx or apps/frontend/components/features/sections/page-hero.tsx
Step 1: Find and update the hero section to use aurora card styling

The hero section likely has a card/overlay. Update it to use the PremiumCard component or refined showcase styles:

Background: bg-[rgba(26,26,31,0.6)] backdrop-blur-md border border-[#2a2a35]
Border radius: rounded-2xl
Step 2: Commit

git add <hero-section-file>
git commit -m "refactor: update hero section to use aurora card styling"

Task 7: Dashboard Layout — Ensure MONO Consistency

Files:

Modify: apps/frontend/app/[locale]/dashboard/layout.tsx
Review: apps/frontend/components/admin/sidebar.tsx
Step 1: Verify dashboard uses MONO design tokens correctly

The dashboard layout should use:

Background: bg-[var(--color-canvas-white)] (already set)
Text: text-[var(--color-ink-black)]
Borders: border-[var(--color-ink-black)]

Ensure the sidebar uses MONO tokens, not Premium UI tokens.

Step 2: Commit

git add apps/frontend/app/\\[locale\\]/dashboard/layout.tsx
git commit -m "refactor: ensure dashboard uses MONO design consistently"

Task 8: Verify and Test

Files:

Review all modified files
Step 1: Run type check

cd apps/frontend && npx tsc --noEmit

Step 2: Build check

cd apps/frontend && npm run build

Step 3: Test aurora background visually

Open landing page and verify:

Aurora glow is visible
Film grain texture is visible
Grid texture with radial mask is visible
Corner accents are visible
Header and footer use correct colors

Open dashboard and verify:

MONO design is intact (white background, stark contrasts)
No aurora effects leak into dashboard

Self-Review Checklist

All aurora effects use CSS variables or hardcoded hex from showcase (not different values)
Dashboard remains pure MONO — no gold/aurora leakage
Components use cn() for className composition
All changes are committed with descriptive messages
TypeScript compiles without errors
No placeholder content (TBD, TODO)

2026 05 05 Onepay System 2026 05 06 CSS to Tailwind Migration