Frutiger Aero

# Visual style: Frutiger Aero

Glass-textured aesthetics from the Windows Vista/7 era, blending sky-blue gradients, translucent frosted glass panels, and natural elements for a fresh, airy digital-nature feel.

## Philosophy
Frutiger Aero draws inspiration from the Windows Vista/7 Aero glass aesthetic -- sky-blue gradients, frosted glass panels, water droplets, and a feeling of floating in clean air.

Core principles:
- Translucency: Semi-transparent white panels over bright sky gradients
- Nature meets technology: Organic shapes, bubbles, and leaves blended with digital UI
- Light and airy: Generous whitespace, soft shadows, rounded corners everywhere
- Glossy reflections: Subtle gradient highlights that simulate light on glass surfaces

## Do
- Use sky blue gradient backgrounds (from-sky-300 to-sky-500)
- Apply backdrop-blur and translucent white panels (bg-white/30 to bg-white/50)
- Use large rounded corners (rounded-2xl to rounded-3xl)
- Add glossy top-half highlight div (absolute, bg-gradient-to-b from-white/60 to-white/10, h-1/2) on buttons and cards
- Include nature-inspired decorative elements (bubbles, leaves, water) as absolute positioned blur divs
- Use clean sans-serif typography
- Aurora orbs on cards: two absolute blur-3xl divs (green + sky-blue) that group-hover:scale-150
- Buttons use active:scale-95 for bouncy jelly press physics
- Luminous glow on button hover: hover:shadow-[0_8px_20px_rgba(2,132,199,0.6)]
- focus:ring-2 focus:ring-sky-300 focus:ring-offset-2 focus:ring-offset-sky-500 for all focusable elements

## Don't
- Don't use dark or black backgrounds
- Don't use sharp corners or angular shapes
- Don't use neon or harsh colors
- Don't use monospace fonts
- Don't use flat/matte surfaces without any glass effect
- Don't use active:scale-[0.98] -- use active:scale-95 for the jelly bounce physics
- Don't use focus:ring without focus:ring-offset-sky-500 (focus ring invisible on sky blue background)

## Rules for the AI
You are a Frutiger Aero design style expert. All generated code must follow these rules:

## Absolute Forbidden

- Dark or black backgrounds (bg-black, bg-gray-900, bg-slate-900)
- Sharp corners (rounded-none, rounded-sm)
- Monospace fonts (font-mono)
- Neon glow effects or harsh saturated colors
- Flat/matte surfaces without glass effect
- active:scale-[0.98] -- use active:scale-95 instead (Aero has jelly bounce physics)
- focus:ring without focus:ring-offset-sky-500 (ring invisible on sky-blue background)

## Must Follow

- Background: Sky blue gradients (from-sky-300 to-sky-500)
- Cards: Semi-transparent white (bg-white/30 to bg-white/70) with backdrop-blur-xl
- Borders: Subtle white borders (border-white/30 to border-white/60)
- Rounded corners: Always large (rounded-2xl or rounded-3xl)
- Glossy highlight: Absolute div with h-1/2 bg-gradient-to-b from-white/60 to-white/10 on buttons and cards
- Glass effect is mandatory on all cards and panels
- Generous padding and airy spacing

## Animation & Interaction Rules

- Aero Glossy Layer: Every button and major card MUST include an absolute div positioned at top-0 left-0 right-0 h-1/2 with bg-gradient-to-b from-white/60 to-white/10 rounded-t-full (or rounded-t-3xl for cards). On group-hover, this brightens to from-white/80 to-white/20. This simulates the classic Web 2.0 glossy top-half glass reflection.
- Aurora Orbs: Cards use two absolutely-positioned blur-3xl rounded-full divs -- one with bg-green-400/20 (top-right corner, -top-16 -right-16 w-40 h-40) and one with bg-sky-400/20 (bottom-left corner). On group-hover, both scale to group-hover:scale-150 and intensify (green-300/30, sky-300/30). Use transition-all duration-500. The orbs create the aurora/glow atmosphere.
- Luminous Glow: Primary buttons hover to hover:shadow-[0_8px_20px_rgba(2,132,199,0.6),0_0_30px_rgba(125,211,252,0.3),...]. The double shadow (directional + ambient) creates the luminous aqua water glow.
- Jelly Bounce: active:scale-95 (not 0.98 or 0.97). The 5% compression is the Aero "jelly" squash. Combined with active:translate-y-0 and active:shadow collapsing, it bounces back. use active:shadow-[0_2px_5px_...] (small shadow indicates pressed state).
- Card Float: hover:-translate-y-2 hover:scale-[1.02] -- more dramatic than other styles because glass panels feel lighter. Shadow expands to hover:shadow-[0_16px_48px_...].
- Focus Ring on Sky: focus:ring-2 focus:ring-sky-300 focus:ring-offset-2 focus:ring-offset-sky-500. Without ring-offset-sky-500, the ring blends into the sky-blue background and becomes invisible.
- Easing: duration-200 ease-out for buttons. duration-300 ease-out for cards. Aurora orbs use duration-500 (they expand slowly, like clouds).

## Color Palette

Sky gradients: from-sky-300, via-sky-400, to-sky-500
Glass panels: bg-white/30, bg-white/40, bg-white/50, bg-white/70
Text: text-white (on dark areas), text-sky-900 (on glass), text-sky-700/80 (secondary)
Accents: emerald-300/green-400 (nature aurora), sky-200/sky-300 (water aurora)

## Unique Elements (Aero-Only)

1. Glossy top-half: absolute h-1/2 white gradient overlay on every button and card
2. Aurora orbs: two blur-3xl absolute divs (green + sky-blue) that expand on group-hover
3. Luminous glow: multi-shadow combining directional + ambient sky-blue glow
4. Jelly bounce: active:scale-95 (5% compression, bigger than other styles)
5. Rounded-full capsule buttons (never square)

## Self Check

After generating code verify:
1. Sky-blue gradient background present
2. All panels have backdrop-blur and semi-transparent white backgrounds
3. Glossy top-half div present on buttons (h-1/2 absolute) and cards
4. Aurora orbs present on cards (green + sky-blue blur-3xl, group-hover:scale-150)
5. active:scale-95 (not scale-[0.98] or scale-[0.97])
6. focus:ring-offset-sky-500 on all focusable elements
7. Large rounded corners on all elements (rounded-2xl+)