# Frutiger Aero > Mid-2000s glossy optimism: sky blue and grass green, water bubbles, aqua gel buttons, lens flares and a friendly humanist sans. - Nickname: Glossy sky - Also called: Aero, Web 2.0 Gloss, Vista Aero - Category: Retro & Nostalgia - Moods: Friendly, Nostalgic, Calm, Dreamy - Industries: Travel & Hospitality, Fitness & Wellness, Education, Healthcare, Kids & Family - Style page: https://uilingo.dev/styles/frutiger-aero/ Frutiger Aero is the clean, hopeful tech look of the late 2000s: a bright sky gradient with lens flares, rolling green hills and floating water bubbles, under UI that is glossy rather than flat. Buttons are aqua gel capsules with a hard specular highlight across the top half, panels are bright white glass with a soft blue edge, progress bars are glossy green, and selection states use the pale-blue gradient of Vista explorer panes. Type is an open humanist sans (the Frutiger/Segoe family feeling) in deep navy. ## Best for - Travel, eco-tourism and outdoor brands - Nostalgic consumer apps and music players - Weather, water and environmental services - Friendly education or family products ## Avoid for - Serious B2B and enterprise tools - Luxury and minimal fashion - Dark, edgy or gaming brands ## Do - Split every glossy control at 50%: a lighter top band over a deeper bottom - Keep the palette to sky blue (#0B6FC2 / #00A9D6), grass green (#4CB82E) and white - Use nature as decoration — sky, water, bubbles, hills — never abstract blobs - Give text a navy colour, never pure black ## Don't - Don’t go flat — controls need gloss and a specular edge - Don’t use dark backgrounds with neon (that is glassmorphism or cyberpunk) - Don’t add pink chrome or star sparkles (that is Y2K) - Don’t overdo realistic textures like leather or wood (that is skeuomorphism) ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Frutiger Aero" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Mid-2000s glossy optimism: sky blue and grass green, water bubbles, aqua gel buttons, lens flares and a friendly humanist sans. Design keywords: aqua gel buttons, glossy highlight band, sky blue + grass green, water bubbles, lens flare, white glass panels, humanist sans, Web 2.0 optimism, Vista selection blue. ## Visual language The hopeful, glossy tech look of the late 2000s (Windows Vista/7, Web 2.0): a bright sky-blue gradient as a fixed full-page backdrop with a white sun flare, soft light rays and floating soap-bubble rings, rolling grass-green hills under the hero, and clean white glass panels floating on the sky on every page. Controls are not flat: buttons are aqua gel capsules with a hard specular band over the top half, icons sit in glossy blue or green orbs, progress bars are glossy green, and selected items use the pale-blue gradient of a Vista explorer pane. Type is an open humanist sans in deep navy; the mood is clean, optimistic, outdoorsy and a little nostalgic. ## Signature details (must be visible) - Sky backdrop: one FIXED full-page layer (.ui-bg, position fixed behind every page — landing, dashboard, form, components) with linear-gradient(180deg, #43B4F5 0%, #8FD6FF 40%, #D4F0FF 75%, #EEFAFF 100%), a white sun flare at 88% 6% with a faint halo ring, a conic light-ray fan from the same point and a few soap bubbles. The sky is not limited to the hero: content sections sit on it as white glass cards, and alternate sections are translucent white bands - Soap bubbles: radial-gradient rings (transparent centre → rgba(190,235,255,.35) at 84% → rgba(255,255,255,.9) at 96%) with a small white highlight dot offset up-left - Gel highlight band on every primary control ≤ 64px tall: a white overlay rgba(255,255,255,.6) → .2 that stops hard at 50%, over a #2D97E8 → #0A63B2 → #1C8BDD gradient, 1px #08559A border, white text with a 1px dark text-shadow. Green variant (accent button, progress, switch on): #8FDB5E → #4CB82E → #3A9F22 with the same band, 1px #2E8A1A border, dark text #062A0E. White variant (secondary capsule): #FFFFFF → #F4FAFF 49% | #DDEFFC 50% → #F1F9FF. Large gel panels (the highlighted pricing plan, CTA) do NOT use the 50% split: they take a short sheen rgba(255,255,255,.6) → .2 over the top 0-90px, then transparent, on #1F8FE3 → #0A5EA8 - Glossy orbs for icons, avatars, the logo and the active tab: radial-gradient(circle at 50% 28%, #fff 0 10%, #9FE0FF 34%, #1C8BDD 72%, #0A5FAA) — green variant #fff 0 10%, #C2F5A6 34%, #4CB82E 72%, #2E8A1A - White glass panels: linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.8)) (surface token as the fallback), 1px white border, outer 1px rgba(80,155,215,.3) ring, inset top highlight, 16px radius, backdrop-filter: blur(10px) saturate(1.2) - Vista selection state: linear-gradient(#F3FAFF, #D3ECFC) with a 1px #7CC3F0 border on nav links, tabs, sidebar items, radio cards and the first table row - Rolling hills along the bottom of the hero only (a ::before layer, background-size 100% 100%): front hill (left) radial-gradient(80% 32% at 24% 116%, #A6E86E 0 40%, #66C63C 80%, #B9F08A 88%, transparent 88.6%); back hill (right) radial-gradient(70% 28% at 88% 116%, #4FB52D 0 86%, #8EDB5F 89%, transparent 89.6%). The crest is the lighter stop just inside each ellipse's outer edge, not a separate layer - Navy headings (#0A3A66) with a white 1px emboss and a soft white glow (text-shadow on plain-coloured headings only). Hero headline: background-clip:text blue gradient (#0B5FA8 → #0A3A66) with transparent fill; glow via filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(255,255,255,.6)) — never text-shadow on clipped text. Apply the gradient to inner inline-block wrappers too (e.g. Thai phrase spans), or their lines turn invisible. Decorative-only colours are declared as --deco-* custom properties (not tokens): navy #0A3A66; blue gel #2D97E8/#0A63B2/#08559A; green gel #8FDB5E/#3A9F22/#2E8A1A; white capsule #FFFFFF/#F4FAFF/#DDEFFC/#F1F9FF; orb #9FE0FF/#1C8BDD/#0A5FAA, green orb #C2F5A6; highlight plan #1F8FE3/#0A5EA8; hills/selection #A6E86E/#66C63C/#B9F08A/#4FB52D/#8EDB5F/#7CC3F0/#9CC7E6 ## Design tokens — use these exact values Colours (light mode): - background #DCF1FF - surface rgba(255,255,255,0.82) - surface-2 rgba(255,255,255,0.55) - text #0B2A45 - text-muted #3A5A75 - primary #0B6FC2 (text on it #FFFFFF) - secondary #4CB82E (text on it #062A0E) - accent #00A9D6 - border #A8D2EE - success #2E9A3A · warning #C77A00 · danger #D13B3B - chart series #0B6FC2, #4CB82E, #00A9D6, #F5A623, #7B61D9 Radius: sm 6px, md 10px, lg 16px, xl 24px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(10,60,110,0.16)`, md `0 2px 4px rgba(10,70,130,0.10), 0 10px 24px rgba(10,70,130,0.16)`, lg `0 4px 10px rgba(10,70,130,0.12), 0 24px 56px rgba(10,70,130,0.24)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 260ms cubic-bezier(.2,.9,.3,1) ## Typography (Latin + Thai) - Headings: Hind 500/600/700 with Thai fallback Noto Sans Thai Looped 500/600/700 - Body: Open Sans 400/600 with Thai fallback Noto Sans Thai Looped 400/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Hind:wght@500;600;700&family=Open+Sans:wght@400;600&family=Noto+Sans+Thai+Looped:wght@400;500;600;700&display=swap - CSS stacks: heading `"Hind", "Noto Sans Thai Looped", system-ui, sans-serif`; body `"Open Sans", "Noto Sans Thai Looped", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 4.75rem), heading weight 600, heading tracking -0.01em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Noto Sans Thai Looped has the same open, humanist warmth as the Frutiger-like humanist Hind (Latin) and Segoe-like Open Sans; its loops keep it friendly, and Thai headings get line-height ≥ 1.35 to balance Hind’s tall ascenders in mixed Thai/Latin lines. ## Components - Primary button: pill aqua gel (see signature), inset bottom glow rgba(120,220,255,.55), 0 4px 12px blue shadow; hover brightens and adds a 3px light-blue halo; active shows an inset shadow. Secondary button: glossy white capsule (#fff → #F4FAFF | #DDEFFC → #F1F9FF split at 50%), 1px #9CC7E6 border; accent button is green gel with dark text - Cards: white glass panels; hover lifts 3px and adds a blue edge glow; feature icons are 52px orbs alternating blue, green and aqua - Inputs: white with a faint top-blue gradient, 1px #9CC7E6 border, inset shadow, 6px radius; focus is a #39A8FF border plus a 3px blue halo and soft glow - Switch: grey recessed track that turns green gel when on, with a glossy pearl knob; checkbox checked is blue gel. Progress bar: 14px recessed pill track with a glossy green gel fill - Badges and chips: small glossy capsules with 50% split; active chip and segmented selection in blue gel - Navigation: a Vista toolbar — white-to-pale-blue gradient split at 50%, white inner highlight, the current link as a Vista selection box - Dashboard: explorer-pane sidebar (pale blue gradient, Vista selection items), glossy toolbar topbar, navy KPI numbers, blue lines with a soft drop shadow, bars with a vertical sheen - Mobile floating tab bar: glossy white capsule; the active tab icon sits in a 40px blue orb - Trust badges: white gloss capsules (the white gel split at 50%, 1px #A8D2EE border) holding a 28px orb icon (shield, leaf, card — white glyph in a blue orb) plus a navy 600 label - Footer: a pale glass band — linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1)) with a 1px white top border — navy links and the small glossy orb logo ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: bar style. Sections in order: hero → features → showcase → stats → testimonials → trust → pricing → cta. Feature section as grid. Immersive hero: the first screen shows the fixed sky — sun flare top-right, bubbles drifting, rolling green hills along the bottom — with a centred navy headline, lead and a blue gel + white gel button pair. Below, the sky stays fixed behind the page: a 3-up grid of white glass feature cards with orb icons (6 features = two full rows). Every second section after the hero (showcase, testimonials, pricing) is an alt band: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)) with a 1px rgba(255,255,255,.85) top and bottom border, and a ribbon swoosh only at the top of each alt band — an inline SVG (viewBox 0 0 1440 120, preserveAspectRatio none, 100% × 120px) with two wave strokes: white 3px at .8 opacity and #4CB82E 10px at .35. Stats use blue-gradient numerals, the trust section is 3–5 glossy capsule badges (certification, payment partner, eco label — an orb icon + navy label), pricing highlights one plan in solid blue gel, and the CTA is a glossy aqua panel full of bubbles with a green gel button. Dashboards use an explorer-style sidebar and glossy toolbar over the same sky. ## Content Use realistic product copy (fictional brand) suited to: Travel, eco-tourism and outdoor brands. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Split every glossy control at 50%: a lighter top band over a deeper bottom - Keep the palette to sky blue (#0B6FC2 / #00A9D6), grass green (#4CB82E) and white - Use nature as decoration — sky, water, bubbles, hills — never abstract blobs - Give text a navy colour, never pure black ## Don't - Don’t go flat — controls need gloss and a specular edge - Don’t use dark backgrounds with neon (that is glassmorphism or cyberpunk) - Don’t add pink chrome or star sparkles (that is Y2K) - Don’t overdo realistic textures like leather or wood (that is skeuomorphism) - Flat colour buttons without a highlight band — the gloss is the style - Dark vivid blob backgrounds with frosted panels — that is glassmorphism - Pink chrome, holographic foil or star sparkles — that is Y2K - Realistic leather, wood or metal textures — that is skeuomorphism - Geometric or condensed fonts and all-caps labels; keep a humanist sans in sentence case - Pure black text or grey-only palettes — use navy text and sky/grass colour ## Stack notes One self-contained HTML file with a