SaaS / Playful

Mello.

A playful app landing page with an interactive 3D mascot, activity choices and an invitation composer. Editable files for a social planning website.

An independent studio concept.

01 / THE DESIGN BRIEF

Less someday. More personality.

An expressive little creature, handwritten reminders and one clear invitation to make plans. This brief describes Mello's composition, character and interactions.

Build a fullscreen interactive hero for Mello, a fictional planning app for friends who keep meaning to get together. Use warm paper #faf8f5, ink #161512, tangerine #ff6528, raspberry #ce4784 and fine rules #e7e2dc. Use Gabarito for tightly spaced display type, supporting text and controls. Use Caveat for handwritten notes. Place the lowercase mello wordmark beside an orange smiling symbol at the upper left, with “make time.” handwritten in pink. Keep navigation quiet at the upper right. Centre the oversized headline “Less someday.” above “More together.” Render someday in muted grey and cancel it with three pink marker strokes. Draw the strokes once, then rest. Below, tilt an orange “Make a little plan” action counterclockwise, with a cream star and dark underside. Add “your group chat will thank you” and “One little plan. Your favourite people.” Keep generous space and omit a footer. At the lower left, write “Life happens. Make the good bits happen too.” Follow its curved arrow with vertically stacked Coffee, Dinner and A little adventure choices, small outline icons and changing handwritten supporting text. Selecting any choice, including the selected one, updates the invitation suggestion and triggers its mascot reaction. Anchor an original interactive 3D creature at the lower right. Give it teal #57a99f rounded cubic proportions, smooth bevels, a cream belly, glossy expressive eyes, freckles, soft ear fins and three peach antenna tips. Let its hands hold an orange invitation with a cream heart. Use studio lighting and a contact shadow. Place a clean speech bubble above it. Provide Wave, Spin and Happy dance buttons beneath the creature. Animate jointed arms, a happy turn or an invitation shimmy with ear movement and blinking. Settle within two seconds. Support drag rotation and subtle gaze tracking. Good company opens three links. The primary action opens an editable invitation preview with copy feedback. Below 600px, keep the activity stack left of the smaller mascot beneath the headline. Support touch, keyboard, visible focus, Escape and focus return. Provide matching static artwork for reduced motion, data saver and unavailable 3D.

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

02 / MAKE IT YOURS

Give your next idea a friendly face.

Includes index.html, style.css, app.js and the editable 3D character in mascot.js; local mascot artwork and fallback images; bundled Three.js with its MIT notice; Gabarito, Caveat and bundled font licences; README.md, CREDITS.txt and USAGE.txt. Invitations are composed and copied locally. No account service, messaging or delivery backend is included.

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.

Mello is an independent studio concept, not a client commission. Keep the included asset and font notices. See CREDITS.txt for provenance and demo limitations.

Explore hero designs