Kind Colors

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a mobile-first browser game titled “Kind Colors,” a gentle, low-pressure color-by-number coloring game. Use a soft pastel UI: full-screen vertical gradient background from pale pink (#fff5fb) to pale blue (#eef8ff), rounded translucent white panels with lavender borders and soft shadows, and a friendly rounded bold Nunito-like font. The layout has four vertical sections: a top header panel, a message/action panel, a large centered square board, and a bottom palette panel.

In the header, show the title “Kind Colors” and subtitle “A gentle color-by-number game with cute pictures and kind little messages.” On the right (or below on narrow screens), show rounded status pills reading “0% done” and “0 oops,” updating during play. The message/action panel displays encouraging instructional or feedback text and a prominent rounded pink gradient button labeled “New Cute Picture.”

The central board is a square canvas inside a rounded panel, with a white-to-very-pale-blue background and a 12-by-12 grid of outlined cells. It is a color-by-number puzzle: cells whose solution is zero are blank white space; fillable cells initially remain white and display their solution number in a muted lavender/purple font. The initially loaded picture is a Bunny. Recreate these exact 12x12 solution numbers, where 0 means empty space and each nonzero number is the required palette color:
[0,0,0,5,5,0,0,5,5,0,0,0]
[0,0,5,5,5,5,5,5,5,5,0,0]
[0,0,5,1,5,5,5,5,1,5,0,0]
[0,0,5,5,5,5,5,5,5,5,0,0]
[0,0,0,5,5,5,5,5,5,0,0,0]
[0,5,5,0,5,5,5,5,0,5,5,0]
[5,5,5,5,5,1,1,5,5,5,5,5]
[5,5,5,5,5,5,5,5,5,5,5,5]
[0,5,5,5,2,5,5,2,5,5,5,0]
[0,0,5,5,5,5,5,5,5,5,0,0]
[0,0,0,5,6,0,0,6,5,0,0,0]
[0,0,0,0,5,5,5,5,0,0,0,0].
This makes a simple pixel-art bunny emerge as cells are colored. Keep crisp grid lines in a pale lavender (#dcd3ef), and center the grid in the canvas. A cell correctly filled becomes its solid pastel color and no longer shows its number. Use these exact palette colors: 1 Blush Pink #ff9ec4, 2 Sunny Yellow #ffd66b, 3 Leaf Green #8ddf8c, 4 Sky Blue #8cc8ff, 5 Lavender #cbb0ff, 6 Peach #ffb37f.

At the bottom, show the label “Choose a color number,” then six large rounded pastel swatch buttons in a responsive grid (five columns on wide screens, three on mobile). Each swatch has a small white circular badge containing its number and a white rounded count badge showing how many matching cells remain. Give the selected swatch a purple outline, slight lift, and stronger shadow. Swatches use a subtle white vertical gradient over their assigned pastel color. Under them, show: “Tip: wrong taps don't punish you hard — this game is on your side.”

Core interaction: the player taps/clicks a palette number to select it, then taps matching numbered cells on the board. Pointer/touch input must work well on mobile, including dragging across cells while holding a pointer to color multiple cells. A correct tap reveals/fills that cell, increases completed count, updates the percentage and that color’s remaining count, and occasionally shows one of these gentle messages: “You are doing lovely.”, “Tiny steps still count.”, “No rush — make it cozy.”, “That square was waiting for you.”, “Cute work. Keep going.”, “You can take your time here.”, “Every tap makes it brighter.”, or “Soft and steady wins this one.” Wrong taps do not block progress: increment the oops counter and show “Kind correction: that square wants [correct number], not [selected number].” Tapping an empty cell says “That square is just empty space.” Tapping an already completed cell says “Already done — nice.”

When all cells of the currently selected color are complete, automatically select the next unfinished color and announce, for example, “[color name] finished. Next up: [next color name], number [next number].” When every fillable cell is complete, show a randomly chosen completion message such as “Finished — and very cute.”, “You did it. That picture feels happy now.”, “Complete. Gentle victory unlocked.”, or “All done — nice and cozy.”, followed by “Tap “New Cute Picture” for another one.”

The “New Cute Picture” button cycles through exactly three built-in 12x12 pixel-art patterns and resets progress, mistakes, and reveals: Bunny, Kitten, and Flower Pot. Include these exact solution grids:
Kitten:
[0,0,0,6,0,0,0,0,6,0,0,0]
[0,0,6,6,6,0,0,6,6,6,0,0]
[0,6,6,6,6,6,6,6,6,6,6,0]
[0,6,6,4,6,6,6,6,4,6,6,0]
[0,6,6,6,6,6,6,6,6,6,6,0]
[6,6,6,6,1,6,6,1,6,6,6,6]
[6,6,6,6,6,6,6,6,6,6,6,6]
[0,6,6,2,6,6,6,6,2,6,6,0]
[0,0,6,6,2,2,2,2,6,6,0,0]
[0,0,0,6,6,6,6,6,6,0,0,0]
[0,0,6,0,0,6,6,0,0,6,0,0]
[0,6,0,0,0,0,0,0,0,0,6,0]
Flower Pot:
[0,0,0,0,1,1,1,1,0,0,0,0]
[0,0,0,1,1,2,2,1,1,0,0,0]
[0,0,1,1,2,2,2,2,1,1,0,0]
[0,0,0,0,3,3,3,3,0,0,0,0]
[0,0,0,0,0,3,3,0,0,0,0,0]
[0,0,0,0,0,3,3,0,0,0,0,0]
[0,0,0,4,4,3,3,4,4,0,0,0]
[0,0,4,4,4,4,4,4,4,4,0,0]
[0,0,0,6,6,6,6,6,6,0,0,0]
[0,0,0,0,6,6,6,6,0,0,0,0]
[0,0,0,0,6,6,6,6,0,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0].

Loading a new picture should say “Now coloring: [name]. Pick a number and fill the matching squares.” Start with the first available color selected automatically. Support keyboard shortcuts: number keys 1–6 select that color, and N loads the next picture. Keep the experience calm and forgiving; there is no timer, lives, penalty beyond the visible oops count, or scoring system.