Glossy gel
Buttons and orbs have a bright highlight on top and a deeper colour below, like wet candy.
The glossy optimism of mid-2000s tech. Clear skies, green hills, water bubbles and shiny aqua buttons promised a future where technology and nature got along.
Open the kit Copy promptFrutiger Aero is the look of software and ads from about 2004 to 2013. It mixes glossy interfaces with nature: sky, grass, water, fish and bubbles.
Buttons and orbs have a bright highlight on top and a deeper colour below, like wet candy.
Blue skies, green grass, water and tropical fish appear next to computer UI.
Frosted panels with white edges float over sky and grass backgrounds.
Clean, friendly typefaces inspired by Frutiger, the airport signage font.
Nobody called it Frutiger Aero at the time. The name came years later, when people missed it.
Adrian Frutiger's typeface family, first drawn for airport signs in France, is released and later lends the style half its name.
Operating systems ship with shiny aqua buttons and bright nature wallpapers.
Windows Vista introduces the translucent Aero theme, the other half of the name.
Mobile operating systems switch to flat design, and the glossy look fades out.
Researchers name the aesthetic around 2017, and a nostalgia wave on social media from late 2022 brings it back.
Frutiger Aero motion is calm and bubbly. Bubbles rise, fish swim and glossy orbs bob gently.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Drinks, skincare and tech accessories use the look to feel fresh and hopeful.
Artists and communities recreate the aesthetic for its dreamy nostalgia.
Weather, music and wellness apps borrow glossy buttons and sky backgrounds.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Sky blue, aqua and fresh green on white. Warm orange appears only on fish and small details. Tap a swatch to copy its hex value.
:root{
--sky: #6EC6F5;
--aqua: #1597D5;
--grass: #6CC04A;
--deep-blue: #0A4C8C;
--cloud-white: #FFFFFF;
--navy-text: #0B2A4A;
}A clean humanist sans in light and medium weights. The real Frutiger font is commercial, so Hind stands in here.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Hind","Segoe UI",system-ui,sans-serif;
--font-b: "Hind","Segoe UI",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(43px, 9vw, 86px);
--fs-1: 42.8px; --fs-2: 34.0px;
--fs-3: 27.0px; --fs-4: 21.4px;
--fs-body: 17px; --fs-sm: 13.5px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 500;
letter-spacing: -.01em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Hind as a free stand-in for the commercial Frutiger typeface */Friendly, centred layouts with glossy panels floating over big sky and landscape backgrounds.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Medium radius, glossy highlights on the top half, soft blue shadows and white inner edges.
:root {
--radius: 14px;
--radius-sm: 10px;
--bw: 1px;
--shadow: 0 8px 24px rgba(10,76,140,.22), inset 0 1px 0 #fff;
--shadow-sm: 0 3px 10px rgba(10,76,140,.22), inset 0 1px 0 #fff;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Frutiger Aero kit · Anti-Boring */
:root{
--bg:#DDF2FF;
--surface:rgba(255,255,255,.72);
--surface2:#C7E8FA;
--fg:#0B2A4A;
--muted:#2E5575;
--accent:#1597D5;
--accent-fg:#FFFFFF;
--accent2:#6CC04A;
--accent2-fg:#FFFFFF;
--border:rgba(255,255,255,.9);
--bw:1px;
--radius:14px;
--radius-sm:10px;
--shadow:0 8px 24px rgba(10,76,140,.22), inset 0 1px 0 #fff;
--shadow-sm:0 3px 10px rgba(10,76,140,.22), inset 0 1px 0 #fff;
--font-d:"Hind","Segoe UI",system-ui,sans-serif;
--font-b:"Hind","Segoe UI",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:500;
--h-track:-.01em;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:rgba(21,151,213,.4);
--ok:#2E7D32;
--warn:#8A5A00;
--danger:#C62828;
--info:#1565C0;
--field-bg:linear-gradient(#fff,#EEF8FF);
--field-shadow:none;
--media:radial-gradient(circle at 70% 30%,rgba(255,255,255,.9) 0 6%,transparent 20%),linear-gradient(#6EC6F5 0 55%,#9EDB6E 55% 62%,#5DAE3A 62%);
--code-bg:#0A2E52;
--code-fg:#CDEBFF;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.5px;
--fs-body:17px;
--fs-4:21.4px;
--fs-3:27.0px;
--fs-2:34.0px;
--fs-1:42.8px;
--fs-d:clamp(43px, 9vw, 86px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px;border:1px solid #0E6FA3;background:linear-gradient(#7FD3FA,#1FA0DE 48%,#0B83C4 52%,#35B6EE);position:relative;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.btn::after{content:"";position:absolute;left:6%;right:6%;top:2px;height:45%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.15));pointer-events:none}
.btn-2{border-color:#3F8F24;background:linear-gradient(#B7EE8F,#6CC04A 48%,#4FA52E 52%,#8FDB68)}
.btn-ghost{border-color:#9DC6E0;background:linear-gradient(#fff,#E4F1FA);color:#0B2A4A;text-shadow:none}
.card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.55))}
.badge{background:linear-gradient(#fff,#DDEFFB);color:#0B5E8E;border-color:#A9D5EE}
.input,.select,.textarea{border-color:#9DC6E0;background:linear-gradient(#fff,#EEF8FF);box-shadow:inset 0 1px 3px rgba(10,76,140,.15)}
.switch{background:linear-gradient(#DDE9F2,#fff);border-color:#9DC6E0}
.switch::before{background:radial-gradient(circle at 35% 30%,#fff,#9FD9F7 60%,#1597D5)}
.switch:checked{background:linear-gradient(#9EE07A,#5DB33A)}
.check:checked,.radio:checked{background:radial-gradient(circle at 35% 30%,#BDEBFF,#1597D5 70%)}
.progress{background:#fff;border-color:#9DC6E0}
.progress i{background:linear-gradient(#B7EE8F,#6CC04A 50%,#4FA52E 51%,#8FDB68)}
.alert{background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.65));border-color:#BFE0F2}
.tab{border-radius:10px 10px 0 0}
.tab[aria-selected="true"]{background:linear-gradient(#fff,#E4F3FC)}
.pager a{background:linear-gradient(#fff,#E4F1FA);border-color:#9DC6E0;border-radius:50%}
.pager a[aria-current]{background:linear-gradient(#7FD3FA,#1597D5)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#06223D;
--surface:rgba(255,255,255,.1);
--surface2:#0A2E52;
--fg:#E6F6FF;
--muted:#A8CDE6;
--border:rgba(255,255,255,.35);
--field-bg:rgba(255,255,255,.08);
--code-bg:#031425;
}
html.alt .card{background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.05))}html.alt .input,html.alt .select,html.alt .textarea{background:rgba(255,255,255,.08);color:#E6F6FF}html.alt .alert{background:rgba(255,255,255,.08)}html.alt .tab[aria-selected="true"]{background:rgba(255,255,255,.15)}html.alt body{background:linear-gradient(#021426,#06223D 40%,#0A2E52)!important}html.alt .hero{background:linear-gradient(#020E1F 0,#0A3A6A 50%,#1A6AA8 75%)}html.alt .hero .panel{background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.06));color:#E6F6FF}html.alt .docnav{background:rgba(6,34,61,.85)!important}html.alt .stage{background:linear-gradient(#062A4D,#0E4C80)}html.alt .select option{background:#06223D}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a weather and outdoor activities app in an authentic Frutiger Aero style.
Palette: Sky #6EC6F5, Aqua #1597D5, Grass #6CC04A, Deep blue #0A4C8C, Cloud white #FFFFFF, Navy text #0B2A4A.
Typography: Hind 500 for headings with soft blue text shadow, Hind 300 and 500 for body.
Layout: Hero with a bright sky gradient, a soft aurora glow, a green rounded hill at the bottom, rising glass bubbles, a glossy aqua orb, and a frosted panel holding the intro text and buttons.
Signature details: Gel buttons with a white highlight on the top 45 percent, frosted white panels with white borders, soft blue shadows, nature shapes drawn in CSS.
Components: Aqua and grass-green gel pill buttons, soft gradient inputs with inset shading, bubble-style toggles and radios, glossy green progress bars.
Motion: Slow rising bubbles, swimming fish, a gently bobbing orb, looping aurora.
Avoid: flat design, dark themes, harsh black borders, copied operating system wallpapers or icons, white text directly on light sky.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
White text on light blue sky vanishes. Put text on panels or darken the sky behind it.
Generic grass and globe images feel cheap. Draw simple, stylised shapes instead.
If every element shines, the page looks like a toy. Keep gloss for main actions.
Wallpapers and icons from old operating systems are protected. Make your own.