Liquid Glass UI System

Marketing sections in ignitionstack.pro embrace a “liquid glass” aesthetic: frosted cards, blurred gradients, and neon glows. All primitives live in src/app/globals.css under @layer components, and Tailwind utilities layer on top. Use this guide when building new sections so the look stays consistent.

Core Classes

Class	Location	Purpose
`.glass-panel`	`globals.css`	Base translucent panel with rounded corners, frosted blur, dual border.
`.light .glass-panel`	`globals.css`	Light-mode tweaks (lighter border, softer blur).
`.glass-panel::after`	`globals.css`	Adds inner border sheen using `mask-composite`.
`.text-balance`, `.scrollbar-orange`	`@layer utilities`	Typography balancing + branded scrollbars that match the glass cards.


<div className="glass-panel p-8 text-content-body">
  <h3 className="mb-2 text-2xl font-semibold text-content-headline">
    AI-ready SaaS boilerplate
  </h3>
  <p className="text-sm opacity-80">
    Supabase, Stripe, analytics, and 70+ components styled with this system.
  </p>
</div>

Background Layers

The global body::before/body::after pseudo-elements render multiple radial gradients defined by --gradient-* variables. When introducing new hero sections:


<section className="relative isolate overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(var(--gradient-primary)/0.25),_transparent_60%)]">
  {/* glass cards here */}
</section>

Place .glass-panel elements above the gradient but below interactive elements (z-10).

Animations & Motion

Tailwind’s animation map (in tailwind.config.ts) defines fadeIn, pulse, typing, etc. Apply them sparingly:


<button className="relative rounded-full bg-accent-orange px-6 py-3 text-white shadow-[0_0_35px_rgba(234,88,12,0.35)] animate-fadeIn">
  Launch now
</button>

Avoid overusing the shake animation except for intentional micro-interactions.

Responsive Guidance

Use max-w-7xl containers plus px-6 sm:px-10 gutters to keep cards readable.
On mobile, stack panels with gap-6 and ensure backdrop-filter doesn’t tank scroll performance (test on iOS Safari).
Provide reduced-motion fallbacks if necessary:


const prefersReduced = useReducedMotion();
return (
  <div className={cn('glass-panel', prefersReduced && 'bg-white/80 backdrop-blur-none')}>
    {...}
  </div>
);

Nextra Docs Styling

Docs can preview the same aesthetic:


<div className="glass-panel mt-6">
  <p>Liquid glass works nicely for callouts inside Nextra docs.</p>
</div>

Checklist

Use .glass-panel (or a variant) for frosted cards/sections.
Respect CSS variables (--color-*, --gradient-*) for colors.
Test both dark (:root) and light (.light) themes.
Verify reduced-motion devices render gracefully.

Keep this page updated whenever the design language evolves (new gradients, panel variants, or helper utilities).