# A Matching Game UI Kit With Panels Built to 9-Slice > Name a style and the pieces you need. Layer draws buttons, tabs, panels and frames as one matching kit, in every state, with panels built to 9-slice. --- ## Messages to send, and what they made ### “Create a UI kit for my cozy farming game in a paper-and-wood style: primary and secondary buttons, a panel, a tab set and a dialogue frame, built so the panels can 9-slice.” - ![A honey-amber wooden primary button](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/c0b7dcf7-e13b-49dd-8995-bbc828ace395/ui_element_primary_button_master_for_a_cozy_farming_lifesim-2026-09-25-202013.png) - ![The primary button pressed](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/2c5b7ee0-0011-451c-8412-72be5cf46a48/change_only_the_primary_button_to_its_pressed_state_lower_the_inner-2026-09-25-202720.png) - ![The primary button disabled](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/54c7b823-778b-4b6c-b1a7-f3ec5fdc6940/change_only_the_primary_button_to_its_disabled_state_desaturate_the-2026-09-25-202720.png) - ![A stitched-paper secondary button](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/4bf0532e-61d9-4f43-9d05-d98d975c448a/ui_element_secondary_button_master_for_a_cozy_farming_lifesim-2026-09-25-202013.png) - ![An inactive stitched-paper tab](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/a64159db-c3ac-4702-ad5e-78c01c8530cf/ui_element_horizontal_inactive_stitched_paper_tab_master_for_a_cozy-2026-09-25-202013.png) - ![The tab selected, with a mint accent](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/8e769f11-471e-47af-b7a3-39994d9d1d5c/change_only_this_inactive_tab_to_its_selected_state_add_a_restrained-2026-09-25-202720.png) - ![A parchment panel with carved corners, built to 9-slice](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/31dc465c-95fc-457b-bb4b-c0a1ead3007c/rebuild_this_parchment_panel_as_a_strict_9slice_master_remove_all-2026-09-25-202615.png) - ![A dialogue frame with a name tab](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/a25e2d25-06e1-4af2-aaa5-69577beed7e6/ui_element_wide_dialogue_frame_master_for_a_cozy_farming_lifesim-2026-09-25-202013.png) The parchment panel stretches to twice its width with its carved corners intact, and each pressed, disabled or selected state keeps the exact outline of the piece it came from. ### “Make sci-fi holographic UI for my space strategy game: panels, buttons and a tooltip frame.” - ![A holographic command panel with faceted corners](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/996ee4d2-8420-40be-aef6-55c9f2025dfe/ui_element_create_a_large_command_panel_master_for_a_mobile-2026-09-25-203606.png) - ![A compact holographic side panel](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/77624c76-6502-4856-8394-f1d5c351ec5b/ui_element_generate_a_compact_side_panel_matching_the_visual_style_and-2026-09-25-205213.png) - ![A holographic primary button, idle](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/a730ef78-1adb-4e32-80d1-53a97275c4ae/ui_element_generate_a_primary_rectangular_action_button_in_idle_state-2026-09-25-205213.png) - ![The holographic primary button, pressed](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/4c532ea8-9476-4522-959c-1fc450dae4af/ui_element_change_the_supplied_primary_action_button_from_idle_to-2026-09-25-205300.png) - ![A holographic secondary button](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/10c130ff-efdf-42bf-a642-98e994291a30/ui_element_generate_a_secondary_rectangular_button_in_idle_state-2026-09-25-205213.png) - ![A holographic tooltip frame](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/f5ef994a-a46b-4b5f-99b7-fdd1ff77d3e7/ui_element_generate_a_tooltip_frame_matching_the_supplied-2026-09-25-205206.png) The side panel, the buttons and the tooltip share the command panel's edge treatment and color system, so the whole kit looks like one console. ### “Give me an illuminated-manuscript frame set for my fantasy card game: card frame, rarity borders and a menu panel.” - ![An illuminated-manuscript card frame with gilded vines](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/4605dc22-48e8-4016-950b-f508b4b1eb6d/ui_element_portrait_cardframe_master_for_an_original_fantasy_card-2026-09-25-204304.png) - ![The card frame in pewter for common rarity](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/5df848e2-8362-494b-b9da-4cf5d310d52b/change_only_the_accentcolor_system_to_common_rarity_muted_pewter_and-2026-09-25-204452.png) - ![The card frame in ultramarine for rare](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/9c08b5d5-6a98-4d3c-9400-08a1f387a8ac/change_only_the_accentcolor_system_to_rare_rarity_deep_ultramarine-2026-09-25-204453.png) - ![The card frame in bright gold for legendary](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/2eab14f2-c65e-4c67-a0ce-533fadee6922/change_only_the_accentcolor_system_to_legendary_rarity_bright-2026-09-25-204452.png) - ![A vellum menu panel with illuminated borders](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/4d387989-cfec-4fdb-a61f-79bc7184e1cb/ui_element_landscape_opaque_vellum_menupanel_master_for_an_original-2026-09-25-204304.png) Common, rare and legendary use one frame and one ornament layout, and only the accent changes, pewter for common, ultramarine for rare and bright gold for legendary. --- Interface time goes into the same few pieces, drawn again and again. The primary button gets drawn, then drawn pressed, then drawn disabled, then all of it once more when the art direction shifts, and the panel that looked fine at design size smears its corners on a wider screen. Name the style and the pieces. You type "paper-and-wood" or "sci-fi holographic" and skip the style sheet. Layer turns the material into one kit and draws every piece in the states your screens use. ## One Material Across the Kit Layer draws the first piece, then builds each of the others from it, so the whole kit shares one edge treatment and one color system. A tooltip you ask for a week later still belongs to the same console. ## Panels That Hold Their Corners A 9-slice panel keeps its four corners fixed and stretches only the plain edges and the center. Ask for 9-slice and Layer builds each panel that way, then checks it at twice its width before it is delivered. The carving stays in the corners, where the stretch never reaches it. ## States Without the Redraw **Same outline in every state** Each state is edited from the finished piece, so nothing jumps when a button is pressed or a tab is selected. **Nothing baked in** Labels and numbers stay live in your game. Pieces arrive as PNG files, with transparent backgrounds where a piece needs one. For the in-play layer, see [game HUD design](/use-cases/game-hud-design). For full screens, see [menu and store screens](/use-cases/game-menu-screens), and for icons, [game icon sets](/use-cases/game-icon-sets). ## Frequently Asked Questions ### Will the panels stretch without smearing the corners? Yes, when you ask for 9-slice. Ornament that runs the full length of an edge stretches with it, so keep the carving in the corners of any panel that has to resize. ### Which states does each piece get? The ones it needs. Buttons get idle, pressed and disabled, tabs get inactive and selected, and you can name others, like focused or locked. Disabled stays visible but muted, since a control that vanishes teaches the player nothing. ### Can I add a matching piece later? Yes. Attach a piece from the kit and ask for the next one. Layer builds the new piece from your existing art, the way the holographic kit above grew out of its command panel. --- Create a free Layer account and name the material your interface is made of. --- [View original](https://layer.ai/use-cases/game-ui-kit) | [All Use Cases](https://layer.ai/use-cases)