Frutiger Aero

stylekitMITGlassmorphism · glassmorphismGradient · gradientRetro · retroLight and dark · bothMedium · mediumCyan · cyanVivid · vividSerif · serifGeneral · generalLanding · landing

Windows Vista/7时代的玻璃质感美学，天空蓝渐变、半透明毛玻璃面板与自然元素融合，营造清新通透的数字自然感。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Frutiger Aero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/frutiger-aero @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/frutiger-aero · bfa7da909e86 · © AnxForever

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

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)

Prompt

Create a weather dashboard in Frutiger Aero style:
1. Background: Full sky-blue gradient (from-sky-300 to-sky-500)
2. Main card: Current temperature with glass panel, large numbers
3. Hourly forecast: Horizontal scroll with small glass cards
4. Weekly forecast: List with glass rows
5. Decorative floating bubbles in the background

---
"Frutiger Aero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/frutiger-aero @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Frutiger Aero. \"Frutiger Aero\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/frutiger-aero @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-frutiger-aero",
      "license": "MIT",
      "attribution": "\"Frutiger Aero\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/frutiger-aero @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#0ea5e9"
    },
    "foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card": {
      "$type": "color",
      "$value": "#0ea5e9"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#87ceeb"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#5fb3cc"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#1caaea"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a6a6a6"
    },
    "border": {
      "$type": "color",
      "$value": "#30b2ec"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#87ceeb"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Frutiger Aero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/frutiger-aero @ bfa7da909e86. */
:root {
  --background: #0ea5e9;
  --foreground: #ffffff;
  --card: #0ea5e9;
  --card-foreground: #ffffff;
  --primary: #87ceeb;
  --primary-foreground: #fafaf9;
  --secondary: #5fb3cc;
  --secondary-foreground: #ffffff;
  --accent: #ffffff;
  --accent-foreground: #1c1917;
  --muted: #1caaea;
  --muted-foreground: #a6a6a6;
  --border: #30b2ec;
  --destructive: #dc2626;
  --ring: #87ceeb;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Frutiger Aero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/frutiger-aero @ bfa7da909e86. */
/** Tailwind theme extend for Frutiger Aero (stylekit-frutiger-aero) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#0ea5e9",
        "foreground": "#ffffff",
        "card": "#0ea5e9",
        "primary": "#87ceeb",
        "primary-foreground": "#fafaf9",
        "secondary": "#5fb3cc",
        "accent": "#ffffff",
        "muted": "#1caaea",
        "border": "#30b2ec",
        "destructive": "#dc2626",
        "ring": "#87ceeb"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Frutiger Aero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/frutiger-aero @ bfa7da909e86. */
@layer base {
:root {
  --background: #0ea5e9;
  --foreground: #ffffff;
  --card: #0ea5e9;
  --card-foreground: #ffffff;
  --primary: #87ceeb;
  --primary-foreground: #fafaf9;
  --secondary: #5fb3cc;
  --secondary-foreground: #ffffff;
  --accent: #ffffff;
  --accent-foreground: #1c1917;
  --muted: #1caaea;
  --muted-foreground: #a6a6a6;
  --border: #30b2ec;
  --destructive: #dc2626;
  --ring: #87ceeb;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}