Add 1e. UI Panels, Buttons, and HUD Assets

1e.-UI-Panels%2C-Buttons%2C-and-HUD-Assets.md

@@ -0,0 +1,214 @@
+# UI Panels, Buttons, and HUD Assets
+
+This page covers interface panels, buttons, tabs, prompts, chat elements, progress elements, frames, and other UI graphics.
+
+## Interface style
+
+NETFISHING UI should feel:
+
+- Warm
+- Rounded
+- Friendly
+- Compact
+- Readable
+- Slightly handmade
+- Consistent with the game’s low-resolution art
+
+The references use:
+
+- Cream outer panels
+- Tan inner surfaces
+- Dark brown text
+- Muted green tabs
+- Large rounded corners
+- Simple shadow offsets
+- Pill-shaped buttons
+- Minimal borders
+- Little or no gloss
+
+## Panel hierarchy
+
+Use clear visual hierarchy.
+
+Suggested roles:
+
+- Outer modal: pale cream
+- Inner content area: warm tan
+- Active tab: muted green
+- Inactive tab: deep green or muted neutral
+- Text: dark brown
+- Secondary text: caramel
+- Warning: coral or orange
+- Selection: green outline or stronger contrast
+
+Do not rely only on color to indicate selection.
+
+Selection may also use:
+
+- Border
+- Position
+- Icon
+- Underline
+- Shape change
+- Text weight
+
+## Rounded shapes
+
+Panels and buttons may use large rounded corners.
+
+Keep corner radii consistent among related controls.
+
+Avoid mixing:
+
+- Very sharp boxes
+- Extremely rounded pills
+- Random corner sizes
+
+unless the difference has a clear hierarchy purpose.
+
+## Nine-patch assets
+
+Resizable UI panels should generally be prepared for Godot `NinePatchRect` use.
+
+A nine-patch source should contain:
+
+- Stable corners
+- Stretchable center
+- Stretchable edge regions
+- No important detail crossing stretch boundaries
+
+The issue should specify:
+
+- Source dimensions
+- Patch margins
+- Intended minimum size
+- Whether the center should tile or stretch
+
+Test the panel at:
+
+- Minimum size
+- Typical size
+- Very wide size
+- Very tall size
+
+## Buttons
+
+Buttons should include required visual states.
+
+Possible states:
+
+- Normal
+- Hover
+- Pressed
+- Disabled
+- Focused
+- Selected
+
+Not every button needs a separate raster image for every state. Godot theme styles may provide color and border changes.
+
+Coordinate with the issue before drawing state sets.
+
+## Tabs
+
+Tabs should:
+
+- Remain readable at small heights
+- Use clear labels
+- Have consistent padding
+- Distinguish active and inactive states
+- Avoid overly decorative silhouettes
+
+## Prompts and tooltips
+
+Prompt panels should:
+
+- Use a compact rounded shape
+- Keep text readable over gameplay
+- Avoid covering large portions of the screen
+- Preserve enough padding around text
+- Support short headings and secondary guidance
+
+Do not bake prompt text into panel art unless explicitly requested.
+
+## Progress and rarity elements
+
+Progress bars should separate:
+
+- Background track
+- Current fill
+- Danger or chase fill
+- Barrier markers
+- Completion state
+
+Rarity indicators should follow the game’s agreed color language and remain visible on cream and tan backgrounds.
+
+## Chat and text panels
+
+Chat backgrounds should:
+
+- Support many lines of text
+- Keep contrast strong
+- Avoid heavy texture behind text
+- Allow local and global tab states
+- Preserve space for input guidance
+
+Do not rasterize chat text into the panel asset.
+
+## Typography
+
+Fonts are configured separately in Godot.
+
+Do not include text in reusable panel, button, or tab graphics unless the issue specifically requests a logo or fixed label.
+
+UI graphics should accommodate:
+
+- Different text lengths
+- Accessibility scaling
+- Localization
+- Controller prompts
+- Keyboard prompts
+
+## Pixel scaling
+
+UI raster graphics should use nearest-neighbor presentation when designed as pixel art.
+
+Test at intended window sizes.
+
+Avoid fractional scaling that produces uneven borders or corner pixels.
+
+## Godot theme integration
+
+Some UI appearance should be built with Godot theme resources rather than unique image assets.
+
+Prefer Godot styles for:
+
+- Solid background colors
+- Borders
+- Corner radii where they render appropriately
+- Padding
+- Text colors
+- Focus outlines
+
+Use raster assets when they provide:
+
+- Intentional pixel texture
+- Hand-drawn edge shapes
+- Decorative frames
+- Complex silhouettes
+- Art that cannot be reproduced cleanly with theme styles
+
+Do not create a raster image for every ordinary rectangle.
+
+## Deliverables
+
+Include:
+
+- Editable source
+- Exported PNG or SVG
+- Native dimensions
+- Patch margins for nine-patch assets
+- Required states
+- Palette
+- Small and large previews
+- Screenshot in Godot
+- Related issue number