Mint Panel-UI-Kit — Panels mit Titelleiste und Buttons

Flaches Design mit fast vollständig zurückgenommenem Radius. Die helle flach-Familie fährt 20px Ecken und Pill-Buttons, weil sie auf Casual-Spiel zielt; diese hier fährt 8px und quadratische Buttons, weil ein Strategiebildschirm überwiegend aus Zeilen besteht und ein großzügiger Radius genau die Breite verschenkt, in der die Zahlen stehen. Es gibt nirgends Konturen und nirgends Schattierung — Tiefe sind drei gestapelte Schattendurchgänge und sonst nichts.

Zwei Nine-Slice-Panels — ein mit Titelleiste versehener Fensterrahmen mit 8 px Ecken und ein vertiefter Innenrahmen mit 6 px Ecken — decken fast jede Box ab, die ein Menü braucht: Dialoge, Inventarraster, Listenhintergründe, Tooltips und Statuspanels. Ein Titelband ist oben in das Panel eingebaut, ein Dialogkopf braucht also kein zweites Sprite und keine manuelle Ausrichtung. Beide dehnen sich sauber auf jede Größe, weil die Ecken nie skalieren und die Mitte eine flach Füllung ist.

Auf den Panels sitzen vier rechteckige Button-Zustände: Standard, Hover, gedrückt und deaktiviert. Sie sind auf derselben 120×36-Basis mit 6 px Ecken gezeichnet, du tauschst also die Textur an einem einzigen Button-Widget und bekommst die ganze Interaktionsschleife, ohne ein Rechteck zu verschieben. Der gedrückte Zustand senkt seine Fläche um zwei Pixel und nimmt das obere Highlight weg, statt nur abzudunkeln — das lässt einen Button geklickt wirken statt bloß umgefärbt.

Alles kommt doppelt. Die SVG-Quellen sind die Dateien, in denen das Kit gezeichnet wurde — öffne sie, ändere die sechs Töne in Blaugrau oder den einzelnen Akzent in Minzgrün und exportiere neu. Die PNG-Exporte sind flach, transparent und in 1x, 2x und 4x vorskaliert, für Engines, die Bitmaps wollen — ohne vormultipliziertes Alpha und ohne eingebrannten Schatten außerhalb der Sprite-Grenzen.

Creative Commons Zero 1.0 — Gemeinfrei. Keine Namensnennung nötig. Vollständige Bedingungen · Was das in der Praxis heißt