Complete AI TrainingYourJobSkills for your job

Skills / design-it

frutiger-aero

Web and App implementation guide for Frutiger Aero. Trigger when user wants glossy gradients, early 2000s nature-inspired tech, glass, and water motifs.

Design & UX

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:
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;
}

Subscribers only

The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.

Details

Sourceself
License
Risk labelsafe ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md
Added2026-06-17

Related skills

3d-ui

Web and App implementation guide for 3D UI. Trigger when user wants actual 3D objects, perspective effects, and spatial depth.

ai-native-ui

Web and App implementation guide for AI Native UI. Trigger when user wants conversational interfaces, adaptive layouts, and generative AI aesthetics.

aurora-ui

Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric lighting effects.

bento-ui

Web and App implementation guide for Bento UI. Trigger when user wants modular grid cards, Apple-like dashboard style, or sections arranged like a bento box.

brutalism

Web and App implementation guide for Brutalism. Trigger when user wants a raw appearance, intentionally unfinished look, and rejection of standard design conventions.

brutalist-typography

Web and App implementation guide for Brutalist Typography. Trigger when user wants huge fonts, raw presentation, and aggressive layout decisions.