Style 64 · General · Brewery/Winery

Gradient Mesh / Aurora Evolved

Complex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent, holographic, prismatic. This mock website translates the UI/UX Pro Max style notes into a client-ready landing/dashboard hybrid with its own palette, typography, chart module, and component system.

Live product surface

NOVA Brewery/Winery OS

Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products

87%

style fit score

Effects

CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation

A full-page mock website in this style

Hero architecture

Design with gradient mesh aurora effect. Use: multi-color mesh gradients, flowing color transitions, aurora/northern lights feel, iridescent overlays, holographic shimmer, prismatic effects, smooth color morphing.

Component language

background: conic-gradient or mesh (SVG), animation: gradient flow (background-position), filter: hue-rotate for shimmer, mix-blend-mode: screen, canvas for complex mesh, multiple gradient layers

Best-fit market

Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products

Palette used

Deep burgundy + craft gold [Accent adjusted from #CA8A04 for WCAG 3:1]

Typography pairing

Bold Statement
Bebas Neue / Source Sans 3

Bebas Neue for large headlines only. All-caps display font.

Implementation checklist

  • ☐ Mesh gradient visible
  • ☐ Colors flow smoothly
  • ☐ Aurora effect achieved
  • ☐ Performance acceptable
  • ☐ Text remains readable

Chart module: Radar / Spider Chart

Radar / Spider Chart

Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)

Interaction spec

Accessibility: ⚠ Text contrast · B

Performance: ⚠ Good

Mobile: ✓ Good

Avoid: Data interfaces, text-heavy content, accessibility-critical, conservative brands

Visual system samples

Gallery rhythm

Conversion section

One primary action, one secondary proof path, clear visual hierarchy, focus states, 44px+ hit targets, and token-driven colors.

Primary CTA