frutiger-aero

---
name: frutiger-aero
description: Web and App implementation guide for Frutiger Aero. Trigger when user wants glossy gradients, early 2000s nature-inspired tech, glass, and water motifs.
date_added: "2026-06-17"
risk: safe
source: self
source_type: self
---

# Frutiger Aero

> "The aesthetic of mid-2000s optimism. Glossy plastic, clear water, blue skies, and eco-friendly technology."


## When to Use
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.

## Core Principles
1. **Hyper-Glossy Textures**: Buttons look like polished glass or wet plastic. Extensive use of convex gradients and specular highlights.
2. **Skeuomorphic Nature**: Motifs of green grass, blue skies, water droplets, and bubbles intersecting with sleek glass technology (think Windows Aero or early iOS).
3. **Translucency**: Frosted glass effects, but much more saturated and reflective than modern glassmorphism.

## Visual DNA
- **Colors**: Cyan, sky blue, lime green, and pure white. Avoid dark themes entirely.
- **Typography**: Clean, highly legible humanist sans-serifs (like the font *Frutiger*, `Segoe UI`, or `Myriad Pro`).
- **Styling**: Drop shadows are deep. Highlights are bright, sharp white lines at the top of buttons.

## Web Implementation
- Use multiple box-shadows (inset for the gloss, outset for depth) and linear-gradients.
- **CSS Example**:
```css
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 */
}

.aero-panel {
  /* Windows Vista/7 Aero Glass */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top-color: #ffffff; /* Brighter top edge */
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
```

## App Implementation

### SwiftUI
```swift
struct FrutigerAeroView: View {
    var body: some View {
        ZStack {
            // Classic sky to grass gradient
            LinearGradient(
                colors: [Color(hex: "87CEEB"), Color(hex: "E0F6FF"), Color(hex: "98FB98")],
                startPoint: .top, endPoint: .bottom
            ).ignoresSafeArea()
            
            // Glossy Button
            Button(action: {}) {
                Text("Windows Vista")
                    .font(.headline)
                    .foregroundColor(.white)
                    .shadow(color: .black.opacity(0.5), radius: 1, y: -1) // Inset text shadow effect
                    .padding(.horizontal, 40)
                    .padding(.vertical, 16)
                    .background(
                        // Base gradient
                        LinearGradient(
                            stops: [
                                .init(color: Color(hex: "73c8f8"), location: 0.0),
                                .init(color: Color(hex: "1583d7"), location: 0.5),
                                .init(color: Color(hex: "0361a3"), location: 0.5), // Sharp color stop
                                .init(color: Color(hex: "299eef"), location: 1.0)
                            ],
                            startPoint: .top, endPoint: .bottom
                        )
                    )
                    .cornerRadius(25)
                    .overlay(
                        // Top white specular highlight
                        RoundedRectangle(cornerRadius: 25)
                            .stroke(
                                LinearGradient(colors: [.white, .clear], startPoint: .top, endPoint: .bottom),
                                lineWidth: 1.5
                            )
                    )
                    .shadow(color: .black.opacity(0.3), radius: 5, y: 4)
            }
        }
    }
}
// Note: Color(hex:) requires a custom extension in SwiftUI.
```
- The signature Frutiger Aero "gel" look requires a sharp color transition right in the middle. Set two gradient stops at `0.5` with different colors.
- An `.overlay` with a top-down white-to-clear gradient stroke creates the glass highlight edge.

### Flutter
```dart
class FrutigerAeroScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // Sky/Grass background
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter, end: Alignment.bottomCenter,
            colors: [Color(0xFF87CEEB), Color(0xFFE0F6FF), Color(0xFF98FB98)],
          ),
        ),
        child: Center(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              boxShadow: const [BoxShadow(color: Colors.black38, blurRadius: 6, offset: Offset(0, 4))],
              // Glossy Gel Button
              gradient: const LinearGradient(
                begin: Alignment.topCenter, end: Alignment.bottomCenter,
                stops: [0.0, 0.5, 0.5, 1.0], // Sharp transition at 50%
                colors: [
                  Color(0xFF73C8F8), // Light top
                  Color(0xFF1583D7), // Mid top
                  Color(0xFF0361A3), // Dark mid (creates the glass horizon)
                  Color(0xFF299EEF), // Bright bottom reflection
                ],
              ),
              border: Border.all(color: Colors.white.withOpacity(0.5), width: 1),
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                borderRadius: BorderRadius.circular(25),
                onTap: () {},
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 40, vertical: 16),
                  child: Text(
                    'Media Player',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      shadows: [Shadow(color: Colors.black54, offset: Offset(0, -1))],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```
- Flutter's `LinearGradient` `stops` array is perfect for this. Providing `0.5` twice creates a hard line that mimics a curved glass reflection.
- Use `Text` shadows with a negative `offset: Offset(0, -1)` to recreate the classic etched-text look of the 2000s.

### React Native
```jsx
import LinearGradient from 'react-native-linear-gradient';

const FrutigerAeroScreen = () => {
  return (
    <LinearGradient
      colors={['#87CEEB', '#E0F6FF', '#98FB98']}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      <View style={{
        shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, 
        shadowOpacity: 0.3, shadowRadius: 5, elevation: 8
      }}>
        <LinearGradient
          colors={['#73C8F8', '#1583D7', '#0361A3', '#299EEF']}
          locations={[0, 0.5, 0.5, 1]} // The sharp glass horizon
          style={{
            borderRadius: 25,
            paddingVertical: 16,
            paddingHorizontal: 40,
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.6)',
            borderTopWidth: 2 // Stronger specular highlight on top
          }}
        >
          <Text style={{ 
            color: '#FFF', 
            fontWeight: 'bold', 
            textShadowColor: 'rgba(0,0,0,0.5)', 
            textShadowOffset: { width: 0, height: -1 }, 
            textShadowRadius: 1 
          }}>
            Glossy Button
          </Text>
        </LinearGradient>
      </View>
    </LinearGradient>
  );
};
```
- `react-native-linear-gradient` supports `locations`. Set them to `[0, 0.5, 0.5, 1]` to create the two-tone convex reflection.
- Setting `borderTopWidth: 2` with a white border color effectively simulates the bright white top-edge highlight of a shiny plastic object.

### Jetpack Compose
```kotlin
@Composable
fun FrutigerAeroScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                Brush.verticalGradient(listOf(Color(0xFF87CEEB), Color(0xFFE0F6FF), Color(0xFF98FB98)))
            ),
        contentAlignment = Alignment.Center
    ) {
        // Glossy Button
        val glassBrush = Brush.verticalGradient(
            0.0f to Color(0xFF73C8F8),
            0.49f to Color(0xFF1583D7),
            0.5f to Color(0xFF0361A3), // Sharp reflection line
            1.0f to Color(0xFF299EEF)
        )

        Box(
            modifier = Modifier
                .shadow(8.dp, RoundedCornerShape(25.dp))
                .background(glassBrush, RoundedCornerShape(25.dp))
                .border(
                    width = 1.dp,
                    brush = Brush.verticalGradient(listOf(Color.White, Color.Transparent)), // Top highlight
                    shape = RoundedCornerShape(25.dp)
                )
                .clickable { }
                .padding(horizontal = 40.dp, vertical = 16.dp)
        ) {
            Text(
                text = "Eco Tech",
                color = Color.White,
                fontWeight = FontWeight.Bold,
                style = TextStyle(
                    shadow = Shadow(color = Color.Black.copy(alpha = 0.5f), offset = Offset(0f, -2f), blurRadius = 2f)
                )
            )
        }
    }
}
```
- Compose's `Brush.verticalGradient` accepts `vararg colorStops: Pair<Float, Color>`. Use `0.49f` and `0.5f` to create the hard reflection line.
- A gradient border `Modifier.border(brush = ...)` transitioning from White to Transparent perfectly recreates the top-down specular highlight.

## Do's and Don'ts
- **DO**: Include imagery of lens flares, auroras, or water bubbles if appropriate.
- **DON'T**: Make it flat. Frutiger Aero is the ultimate antithesis of Flat Design. Everything must shine.

## Limitations
- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
- Ensure appropriate contrast ratios and responsive behaviors are verified separately.