UI Elementen
Visuele stijlgids voor alle UI componenten.
Design Systeem
┌─────────────────────────────────────────────────────────────────┐
│ UI Design Language │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Stijl: Cozy, warm, kindvriendelijk │
│ Kleuren: Warm palet, zachte tinten │
│ Randen: Afgerond (8-16px radius) │
│ Schaduwen: Subtiele drop shadows │
│ Typografie: Vriendelijke, leesbare fonts │
│ Iconen: Eenvoudig, herkenbaar, met kleur │
│ │
└─────────────────────────────────────────────────────────────────┘
Kleurenpalet
Primaire Kleuren
┌─────────────────────────────────────────────────────────────────┐
│ Color Palette │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Primary: │
│ ████ #8B5A2B Warm Brown (panels, headers) │
│ ████ #D4A574 Light Brown (backgrounds) │
│ ████ #F5E6D3 Cream (text backgrounds) │
│ │
│ Accent: │
│ ████ #4CAF50 Green (success, nature) │
│ ████ #FF9800 Orange (highlights, XP) │
│ ████ #2196F3 Blue (links, info) │
│ ████ #E91E63 Pink (love, hearts) │
│ │
│ Feedback: │
│ ████ #4CAF50 Success │
│ ████ #FF9800 Warning │
│ ████ #F44336 Error │
│ ████ #2196F3 Info │
│ │
│ Text: │
│ ████ #3E2723 Dark Brown (primary text) │
│ ████ #5D4037 Medium Brown (secondary) │
│ ████ #FFFFFF White (on dark backgrounds) │
│ │
└─────────────────────────────────────────────────────────────────┘
GDScript Theme
# theme_colors.gd
class_name ThemeColors
const PRIMARY = Color("#8B5A2B")
const PRIMARY_LIGHT = Color("#D4A574")
const CREAM = Color("#F5E6D3")
const SUCCESS = Color("#4CAF50")
const WARNING = Color("#FF9800")
const ERROR = Color("#F44336")
const INFO = Color("#2196F3")
const TEXT_PRIMARY = Color("#3E2723")
const TEXT_SECONDARY = Color("#5D4037")
const TEXT_LIGHT = Color("#FFFFFF")
const SHADOW = Color(0, 0, 0, 0.2)
Buttons
Button Styles
┌─────────────────────────────────────────────────────────────────┐
│ Button Variants │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Primary: [████████████████] Filled, bold action │
│ Secondary: [░░░░░░░░░░░░░░░░] Outlined, secondary action │
│ Text: [ ] Text only, tertiary │
│ Icon: [ 🎮 ] Icon button │
│ Danger: [████████████████] Red, destructive action │
│ │
│ States: │
│ - Normal │
│ - Hover (slightly brighter, scale 1.02) │
│ - Pressed (slightly darker, scale 0.98) │
│ - Disabled (grayed out, no interaction) │
│ - Focus (outline ring) │
│ │
└─────────────────────────────────────────────────────────────────┘
Button Implementation
# styled_button.gd
@tool
extends Button
@export_enum("primary", "secondary", "text", "danger") var style: String = "primary":
set(value):
style = value
_update_style()
const STYLES = {
"primary": {
"normal_bg": Color("#8B5A2B"),
"hover_bg": Color("#A0694D"),
"pressed_bg": Color("#6B4520"),
"text_color": Color.WHITE
},
"secondary": {
"normal_bg": Color.TRANSPARENT,
"hover_bg": Color("#D4A574", 0.3),
"pressed_bg": Color("#D4A574", 0.5),
"text_color": Color("#8B5A2B"),
"border": Color("#8B5A2B")
},
"danger": {
"normal_bg": Color("#F44336"),
"hover_bg": Color("#E53935"),
"pressed_bg": Color("#C62828"),
"text_color": Color.WHITE
}
}
func _update_style() -> void:
var s = STYLES.get(style, STYLES.primary)
var stylebox = StyleBoxFlat.new()
stylebox.bg_color = s.normal_bg
stylebox.corner_radius_top_left = 8
stylebox.corner_radius_top_right = 8
stylebox.corner_radius_bottom_left = 8
stylebox.corner_radius_bottom_right = 8
if s.has("border"):
stylebox.border_width_left = 2
stylebox.border_width_right = 2
stylebox.border_width_top = 2
stylebox.border_width_bottom = 2
stylebox.border_color = s.border
add_theme_stylebox_override("normal", stylebox)
add_theme_color_override("font_color", s.text_color)
Panels
Panel Types
┌─────────────────────────────────────────────────────────────────┐
│ Standard Panel [×] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Content area met padding │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Dialog Panel │
│─────────────────────────────────────────────────────────────────│
│ │
│ Centered, modal overlay │
│ │
│ [Annuleren] [OK] │
└─────────────────────────────────────────────────────────────────┘
┌──────────────────────┐
│ Tooltip │
│ Korte info tekst │
└──────────────────────┘
NinePatchRect Setup
# Panel texture: 48x48 pixels, 16px borders
func setup_panel_ninepatch(rect: NinePatchRect) -> void:
rect.texture = preload("res://assets/ui/panels/panel_default.png")
# Patch margins
rect.patch_margin_left = 16
rect.patch_margin_right = 16
rect.patch_margin_top = 16
rect.patch_margin_bottom = 16
# Content margins
rect.axis_stretch_horizontal = NinePatchRect.AXIS_STRETCH_MODE_TILE
rect.axis_stretch_vertical = NinePatchRect.AXIS_STRETCH_MODE_TILE
Icons
Icon Set
┌─────────────────────────────────────────────────────────────────┐
│ Icon Library │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Navigation: │
│ 🏠 Home 📦 Inventory 🗺️ Map ⚙️ Settings │
│ │
│ Actions: │
│ ✓ Check ✗ Close + Add - Remove 🔍 Search │
│ │
│ Social: │
│ 👥 Friends 💬 Chat 📧 Mail 🎁 Gift │
│ │
│ Currency: │
│ 🌰 Acorns 💎 Gems ⭐ Stars ❤️ Hearts │
│ │
│ Status: │
│ ✓ Success ⚠ Warning ✗ Error ℹ Info │
│ │
└─────────────────────────────────────────────────────────────────┘
Icon Specifications
Size: 32x32 pixels (base)
Format: PNG with transparency
Style: Filled with subtle gradients
Stroke: None or 2px for outline variants
Colors: Match theme palette
Typography
Font Hierarchy
┌─────────────────────────────────────────────────────────────────┐
│ Typography Scale │
├─────────────────────────────────────────────────────────────────┤
│ │
│ H1 - Page Title 32px Bold │
│ H2 - Section Header 24px Semi-Bold │
│ H3 - Subsection 20px Semi-Bold │
│ Body - Regular Text 16px Regular │
│ Small - Secondary 14px Regular │
│ Caption - Labels 12px Regular │
│ │
│ Font Family: "Quicksand" of vergelijkbaar │
│ (Rounded, vriendelijk, goed leesbaar) │
│ │
└─────────────────────────────────────────────────────────────────┘
Label Styles
# text_styles.gd
func apply_heading(label: Label) -> void:
label.add_theme_font_size_override("font_size", 32)
label.add_theme_color_override("font_color", ThemeColors.TEXT_PRIMARY)
func apply_body(label: Label) -> void:
label.add_theme_font_size_override("font_size", 16)
label.add_theme_color_override("font_color", ThemeColors.TEXT_PRIMARY)
func apply_caption(label: Label) -> void:
label.add_theme_font_size_override("font_size", 12)
label.add_theme_color_override("font_color", ThemeColors.TEXT_SECONDARY)
Input Fields
Text Input
┌─────────────────────────────────────────────────────────────────┐
│ Input Fields │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Default: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Placeholder text... │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Focused: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ User input| (cursor) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ ═══════════════════════════════════════════════════════════ │
│ (accent color underline) │
│ │
│ Error: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Invalid input │ │
│ └─────────────────────────────────────────────────────────┘ │
│ ✗ Foutmelding hier │
│ │
└─────────────────────────────────────────────────────────────────┘
Progress Bars
# styled_progress_bar.gd
extends ProgressBar
func _ready() -> void:
# Background
var bg = StyleBoxFlat.new()
bg.bg_color = Color("#E0E0E0")
bg.corner_radius_top_left = 8
bg.corner_radius_top_right = 8
bg.corner_radius_bottom_left = 8
bg.corner_radius_bottom_right = 8
add_theme_stylebox_override("background", bg)
# Fill
var fill = StyleBoxFlat.new()
fill.bg_color = ThemeColors.SUCCESS
fill.corner_radius_top_left = 8
fill.corner_radius_top_right = 8
fill.corner_radius_bottom_left = 8
fill.corner_radius_bottom_right = 8
add_theme_stylebox_override("fill", fill)
func set_type(type: String) -> void:
var fill = get_theme_stylebox("fill") as StyleBoxFlat
match type:
"health":
fill.bg_color = Color("#F44336")
"xp":
fill.bg_color = Color("#9C27B0")
"energy":
fill.bg_color = Color("#FFC107")
_:
fill.bg_color = ThemeColors.SUCCESS
Checkboxes & Toggles
Checkbox:
[ ] Unchecked [✓] Checked
Toggle:
[○────] Off [────●] On
Spacing & Layout
┌─────────────────────────────────────────────────────────────────┐
│ Spacing System │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Base Unit: 8px │
│ │
│ xs: 4px (half) │
│ sm: 8px (1x) │
│ md: 16px (2x) │
│ lg: 24px (3x) │
│ xl: 32px (4x) │
│ 2xl: 48px (6x) │
│ │
│ Container Padding: 16px │
│ Card Padding: 12px │
│ Button Padding: 8px 16px (vertical, horizontal) │
│ │
└─────────────────────────────────────────────────────────────────┘