Templates/Weather
Weather

Weather

An atmospheric weather app with condition-driven gradient backgrounds and a large elegant temperature display. Hourly and weekly forecasts with clean data visualization. 4 screens: current conditions, hourly forecast, weekly forecast, and detail metrics grid.

4 screens

Now

Forecast

Details

Places

About this template

Weather is a weather app template designed by FireVibe AI. It includes 4 screens: Now, Forecast, Details, Places. The design uses a dark color scheme with DM Sans for headings and Inter for body text. Every element — colors, typography, images, and layout — was generated by AI from a single prompt in under 3 minutes.

Tone

Atmospheric, meditative, and quietly luxurious — like standing at a floor-to-ceiling window watching weather roll in from a distance

Target audience

Design-conscious daily weather checkers aged 25–45 who value aesthetics over feature bloat — creative professionals, minimalists, and Apple ecosystem enthusiasts who treat their home screen as a curated space

Design direction

Aether lives in the liminal space between data and atmosphere — it is a weather instrument that feels like a piece of art. The palette is built around deep Admiralty Navy (#0D1117) as the canvas, a color that reads as the sky at 11PM on a clear night. Cards lift off this background in Midnight Steel (#141C28), barely distinguishable but tangible. The primary data color is Glacial Blue (#7EB8D4) — the exact color of ice melt in Greenland, used for temperature values, active states, and the hourly curve line. All typography lives in DM Sans for headings with ultra-light weight for the hero temperature (mimicking SF Pro Thin's elegance at 72pt+), and Inter for all body and metric data. The temperature number is the single most important pixel in the app — it must feel like it floats. Every background gradient is condition-aware: deep indigo-to-slate for overcast, warm amber-to-rust for sunset, electric violet-to-navy for thunderstorms, pale steel-to-midnight for clear night. Weather icons are exclusively monoline at 1.5px stroke, white at 80% opacity — never filled, never cartoonish. The app should feel like a Braun radio designed by Dieter Rams if he had access to OLED displays.

Color palette

card
input
muted
accent
border
primary
success
secondary

Typography

Headings: DM Sans · Body: Inter

Design inspiration

Apple Weather app (iOS 16+) for immersive condition-responsive backgrounds, Mercury Weather for typographic elegance and minimal data hierarchy, Things 3 by Cultured Code for refined micro-interactions and purposeful whitespace

Like what you see? Clone it and make it yours.

Start free