Gaming / Illustrated

Tinywild.

An interactive risograph garden on a hex tile board, with layered ink artwork, seasonal colour changes and a world saved in the browser.

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 Tinywild, a slow browser game where people grow a small illustrated world one tile at a time. Use kraft #d9c49c, deeper kraft #cbb287, pale paper #f7f1e4, dark ink #2a2733 and print accents pink #ff48b0, teal #00838a and yellow #ffe23a. Pair Young Serif for the headline with Space Mono for labels and instructions. Make the artwork feel like a risograph print: slightly misregistered colour layers, multiplied inks, fine grain and hard offset paper shadows. Cover the viewport with a point topped hex board. Each hex contains separate ground, artwork and accent layers. Populate an initial garden with meadows, ponds, forests, paths and a cabin. Draw the pieces as simplified cut paper illustrations with consistent geometry. Leave visible empty hexes around the world so the board invites interaction. Overlay a torn paper introduction at the upper left. The headline reads A small world, grown one tile at a time. Add short copy about laying meadows and ponds, building a cabin and watching seasons turn. Use a pink Start growing action with a brief instruction beside it. Keep the main board visible behind this label. Place a narrow printer's ink strip down the right edge. Offer Meadow, Pond, Forest, Path, Cabin and Clear brushes, each with its own miniature hex illustration. Selecting a brush then clicking or keyboard activating a tile changes it with a restrained stamp response. Include Undo, Fresh sheet and Grow controls. Grow advances the season with new ink colours and a staggered tile hop. Add quiet pond ripples and a small paper bird. Remember the world when the visitor returns. A folded Map tab opens an illustrated legend with accessible menu controls. Below 900px recompose the paper label, board and ink controls for touch without covering the important actions. Preserve a static preset world as the fallback. Reduced motion removes stamping, hopping and ambient movement while keeping editing and seasonal changes useful.

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. Includes optional artwork generators. See the README for Node.js commands and any external inputs.

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