Made with Nano Banana 2 Lite · CC0 · 7 Aug 2026

Image: UI kit pilot piece — category tabs + item card (Co

Generated from: UI kit pilot piece — category tabs + item card (Comisario, a police-station management tycoon game) Style: friendly management-tycoon UI, direct visual reference Two Point Hospital — rounded corners, subtle "pressable" depth/relief, cheerful and approachable, NOT a somber/institutional dossier look. Palette: WHITE as the base color for every panel background. Soft pastel blue as the game's existing secondary tone. Navy CNP blue (a more saturated police-navy blue) as the accent color for anything interactive or identity-related (active tab, selection ring, primary buttons). A very subtle cream tone may appear only as a tiny secondary interior detail, never as a panel's base fill. Format requirements (apply to the whole image): - PNG with real alpha transparency; no solid background behind the shapes themselves (transparent canvas). - Every panel/frame must be 9-slice friendly: corners and edges clearly distinct from the center, and the center area flat/seamlessly tileable, so it can be sliced into a 3x3 grid and stretched in a game engine without visible seams. - NO text, numbers, or labels baked into the image anywhere — leave empty placeholder space where text will be drawn later by the game engine. - Render at high working resolution (2-4x the on-screen usage size noted below) so edges stay crisp after 9-slice stretching and scaling. - Crisp, well-defined pixel edges; no soft drop-shadow that bleeds past the asset's own border (it would break clean 9-slice cropping). PART A — Category tab button (on-screen size reference: ~170x50 px) A large rectangular tab button with an empty circular/square placeholder area for a big icon, and empty space below it for a short text label (both placeholders left blank, no icon or text drawn). Rounded corners, slight pressable relief. Provide the SAME button in 4 clearly separated states, laid out side by side in the same image: 1. Normal — soft blue background. 2. Hover — soft blue background with a highlighted/brighter border. 3. Active/selected — saturated navy CNP blue background, plus a small downward-pointing triangle/pointer notch on the bottom edge of the tab. 4. Locked/disabled — desaturated grey version of the tab, with a small padlock icon in the corner. PART B — Item card (on-screen size reference: ~92x74 px) A small square card frame for a shop/catalog item. Large empty placeholder area in the center for an item thumbnail (leave it blank, with a soft light-blue fill distinct from the white card frame around it — do not draw an actual object). Separate empty band at the bottom for a price (blank, no digits). Provide the SAME card in 4 clearly separated states, laid out side by side in the same image: 1. Normal — plain white card frame. 2. Hover — white card frame with a highlighted border. 3. Selected — thick navy CNP blue ring/border around the entire card, plus a small checkmark badge in the top-right corner. 4. Locked/insufficient funds — thumbnail area shown desaturated/grey (instead of light blue), price band tinted red, plus a small "X" badge in the top-right corner. Overall: both parts (A and B) should read as part of the same visual family — same corner rounding, same relief style, same navy-blue accent — even though they're different UI elements.