SaaS / Playful

Nimbo.

A playful weather app hero built as an illustrated town, with a forecast dial that changes the sky, props and cloud mascot.

An independent studio concept.

01 / THE DESIGN BRIEF

Build the idea.

Visual direction for the composition, typography, colour palette and interactions.

Build a fullscreen interactive hero for Nimbo, a playful weather app for people who prefer an approachable visual forecast. Use navy #27305a outlines, cream #fff4e0, coral #ff5a4e and warm orange #f49d37 against a bright blue sky. Pair rounded Fredoka display type with Nunito supporting text. Draw the world with clean thick outlines, soft rounded forms and colourful flat fills. Avoid photography and realistic textures. Place the small Nimbo wordmark at the upper left. Set the headline Your week, as a tiny town. in large rounded letters in the sky, with short copy explaining that sun, rain and snow arrive as a little world with moods of its own. Anchor a town diorama at the bottom: rolling green hills, a pale road, small colourful houses, trees, a windmill, sky props and an expressive cloud mascot. Make an orange forecast machine part of the scene. Its dark screen displays the chosen weekday, condition and temperature. Arrange five weekday choices around a large cream circular dial and put a coral Get Nimbo free action below it. Selecting a day changes the sky palette, clouds, sun or moon, weather details and mascot expression. Let the knob advance the selection with a short spring and squash response. Make the selected day visually distinct and reachable by keyboard. An Explore signpost opens a playful menu whose boards fan out from a post. Its destinations show forecast, town, alert and app information; town and alert choices affect the scene. Keep interactions tied to the illustrated objects. On narrow or short screens use a contained menu overlay so boards cannot collide with the forecast machine. Centre the copy above the scene on phones and recompose the world rather than shrinking the desktop layout.

AI results vary by tool and model. This prompt may not produce an exact match to the preview.

02 / MAKE IT YOURS

Make it your own.

Editable HTML, CSS and JavaScript, required local artwork and fonts with their licences, a short README and usage terms. No framework or runtime build step. Preview and edit with a local server extension in your editor.

Downloads are free. Your Google account lets you download designs; browsing and copying prompts do not require an account.

Continue with Google, then return here to choose your download.

Personal and client use

You may use and modify this design for personal websites and commercial client websites. You may not resell, sublicense or redistribute the template, its source files or a collection containing it. Keep the included font licence notices. The design is supplied as a starting point without warranty.

Explore hero designs