Design mid-2000s glossy Frutiger Aero UI components

Frutiger Aero recreates the optimistic, hyper-glossy aesthetic of mid-2000s interfaces (Windows Vista/7 Aero, early iOS). It generates CSS, SwiftUI, Flutter, and React Native code for buttons, panels, and backgrounds featuring polished glass textures, water droplets, blue skies, and eco-friendly technology motifs. The skill implements hyper-glossy textures with convex gradients and specular highlights, skeuomorphic nature elements, and translucency effects.

Use this when the user's request matches the Frutiger Aero aesthetic: glossy plastic, clear water, blue skies, and eco-friendly technology. It's designed for interfaces with skeuomorphic nature motifs (green grass, blue skies, water droplets, bubbles) intersecting with sleek glass technology. Do NOT use for dark-themed interfaces - Frutiger Aero avoids dark themes entirely and uses cyan, sky blue, lime green, and pure white color schemes.

You provide a request matching the Frutiger Aero aesthetic (glossy buttons, translucent panels, sky/grass backgrounds). The skill returns implementation-ready code with cyan/sky blue/lime green color schemes, humanist sans-serif typography (Segoe UI, Myriad Pro, Frutiger), and multi-layered box-shadows. Output includes CSS with inset/outset shadows, SwiftUI views with sharp gradient stops, Flutter containers with hard color transitions, or React Native LinearGradient components.

Web (CSS): Standard CSS3 with linear-gradients, multiple box-shadows, and backdrop-filter for frosted glass effects. Works in all modern browsers.

SwiftUI: Native iOS/macOS implementation using LinearGradient with custom color stops, overlay strokes for specular highlights, and shadow modifiers. Requires custom Color(hex:) extension.

Flutter: Cross-platform Dart code using BoxDecoration, LinearGradient with stops array for sharp transitions, and Material InkWell for touch feedback.

React Native: JavaScript implementation with react-native-linear-gradient library, supporting locations prop for glass horizon effects and textShadow for etched-text styling.

Here's the CSS implementation for a classic Frutiger Aero button:

body {
  /* Classic blue sky / green grass gradient */
  background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 60%, #98FB98 100%);
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.aero-btn {
  background: linear-gradient(to bottom, #73c8f8 0%, #1583d7 50%, #0361a3 50%, #299eef 100%);
  color: white;
  border: 1px solid #024b7f;
  border-radius: 20px;
  padding: 12px 32px;
  font-weight: 600;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
  
  /* The Glossy Highlight and Depth */
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.8), /* Top edge highlight */
    inset 0 15px 15px rgba(255,255,255,0.3), /* Convex plastic shine */
    0 4px 6px rgba(0,0,0,0.2); /* Drop shadow */
}

The signature gel look requires sharp color transitions at the 50% gradient stop, creating the curved glass reflection effect characteristic of Windows Aero.

UI/UX designers recreating 2000s-era interfaces, front-end developers building web apps with this aesthetic, and mobile developers targeting the Frutiger Aero style. The skill implements hyper-glossy textures with extensive use of convex gradients and specular highlights, translucency with frosted glass effects that are more saturated and reflective than modern glassmorphism, and deep drop shadows with bright, sharp white highlights.