Design your interface

Choose a preset, then adjust size, placement, transparency, motion, and icons.

Start with a built-in design preset. Change only the details you need. You can create a polished interface with the library’s existing options; a separate UI fork is unnecessary for a different palette, navigation style, spacing, or motion. This guide uses the GabibouUI ModuleScript installed in ReplicatedStorage.

1. Pick a starting design

These local-candidate screenshots show the interface in a Windows Roblox client. They document rendering; the game and other overlays are background content. Physical mobile rendering remains to be tested.

Choose one of the four built-in presets:

Preset	Look and layout
Studio	Graphite colors, comfortable spacing, soft navigation.
Minimal	Compact spacing, sharp corners, classic navigation.
Command	High contrast, spacious layout, top tabs, pill navigation.
Atelier	Monochrome surfaces, comfortable spacing, left tabs, rail navigation.

This small setup creates a window with two labeled pages and ordinary UI controls. It performs no game actions.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local UI = require(ReplicatedStorage:WaitForChild("GabibouUI"))

local design = UI:Design({Preset = "Atelier"})
local window = UI:CreateWindow({
    Title = "My project",
    Design = design,
})

local appearance = window:Tab({Title = "Appearance", Icon = "palette"})
appearance:Section({Title = "Preview"})
appearance:Toggle("Preview notifications", {
    Value = true,
    Callback = function(enabled)
        if enabled then
            window:Notify({Title = "Preview", Content = "Notifications are on."})
        end
    end,
})

local layout = window:Tab({Title = "Layout", Icon = "sliders"})
layout:Section({Title = "Window"})
layout:Button("Preview complete", function()
    window:Notify({Title = "Preview", Content = "Your interface is ready."})
end)

The presets are starting points, not locked templates. UI:Design accepts overrides such as Accent, Density, Radius, Tabs, Navigation, and Transparency.

2. Fit a phone or narrow panel

Responsive layout is on by default. The default breakpoint is 620 px, so a 375 px wide viewport uses the mobile layout. Keep tab titles visible: Rail keeps a distinct icon treatment while retaining the label, and the navigation scrolls when its tabs do not fit. Do not rely on icons alone to name a page.

Keep touch targets at least 44 px high. The library’s default is 44 px; set it explicitly with Responsive when documenting or tuning a mobile window. Let controls stack under their labels on narrow rows, and leave the default 12 px screen margin unless your host requires a different safe area.

local window = UI:CreateWindow({
    Title = "My project",
    Width = 860,
    Height = 620,
    Design = UI:Design({Preset = "Atelier", Tabs = "Top"}),
    Responsive = {Breakpoint = 620, TouchTarget = 44, Margin = 12},
    Layout = {MobileTabPosition = "Bottom"},
})

Width and Height are the preferred desktop size; responsive layout fits the window to smaller viewports. Tabs accepts Left, Right, Top, or Bottom. On mobile, MobileTabPosition accepts Top or Bottom. Check both a 375 × 667 viewport and the same viewport with the on-screen keyboard open. Verify labels, control descriptions, and the focused text field remain visible.

3. Adjust the details

Use a preset and override the actual option you want. Transparency and Layout.PanelTransparency range from 0 (opaque) to 1 (fully transparent); a value such as 0.08 keeps the panel readable while showing a little background through it. This affects the panel surface, not each control row.

local design = UI:Design({
    Preset = "Atelier",
    Accent = Color3.fromRGB(130, 190, 255),
    Density = "Comfortable",
    Radius = "Balanced",
    Transparency = 0.08,
    Tabs = "Top",
    Navigation = "Rail",
})

local window = UI:CreateWindow({
    Title = "My project",
    Width = 860,
    Height = 620,
    Design = design,
    Navigation = {Variant = "Rail", IconVariant = "Duotone"},
    Layout = {MobileTabPosition = "Bottom", PanelTransparency = 0.08},
})
window:SetPosition(UDim2.new(0.5, 0, 0.5, 0), Vector2.new(0.5, 0.5))
window:SetMotion({Duration = 0.18, Style = Enum.EasingStyle.Quad})

Navigation.Variant accepts Classic, Soft, Pill, or Rail. Navigation.IconVariant accepts Outline, Soft, or Duotone. A tab can set its own IconVariant while keeping its title:

local settings = window:Tab({
    Title = "Settings",
    Icon = "settings",
    IconVariant = "Outline",
})

SetPosition takes a UDim2 position and optional Vector2 anchor. The example centers the window. For responsive panels, avoid hard-coded part offsets unless you have checked them at phone width and with the keyboard open.

SetMotion accepts a duration in seconds and Roblox easing enums. window:SetReducedMotion(true) disables managed movement animations and is a good default when motion is not essential. Call SetMotion on the window to preview a transition; call SetReducedMotion when you want the reduced-motion setting to take precedence.

The ZIP’s gabibou_ui source folder includes the complete design_showcase.luau example. It demonstrates a preset, responsive settings, a ready-to-use Appearance tab, labeled navigation, icon variants, and reduced-motion controls without connecting to game actions.

4. Reuse a named design

Register a design once when several windows share the same visual choices:

UI:RegisterDesign("MyStudio", {
    Preset = "Studio",
    Accent = Color3.fromRGB(120, 190, 255),
    Density = "Comfortable",
})

local window = UI:CreateWindow({Title = "Settings", Design = "MyStudio"})

Use window:SetTheme, window:SetStyle, window:SetLayout, and window:SetNavigation to refine an existing window. Use window:Destroy() when it should be removed. See Appearance and responsive layout for valid ranges and Icons and branding for the icon catalogue.

Add a ready-to-use appearance tab

window:Appearance() adds a tab with controls for this window’s theme and accent, panel transparency, navigation style, tab placement, reduced motion, and animation duration. It uses the existing window setters. Changes affect this window only and the editor controls are not automatically saved. Configuration export only includes controls marked persistent; the appearance editor’s controls are nonpersistent.

local appearanceTab = window:Appearance()
-- Optional label and icon:
-- local appearanceTab = window:Appearance({Title = "Look and feel", Icon = "palette"})

Appearance accepts only Title, Icon, and Id. Title changes the tab label, Icon accepts a registered icon name or ID, and Id sets the prefix for the editor’s control IDs. If you omit Id, the library chooses an unused appearance prefix. The call returns a normal tab; appearanceTab:Destroy() removes the tab and its controls. No separate settings window, extra persistence layer, or UI fork is needed.

Matching access and loading screens

Apply the same Design preset to your window, key gate and loader. Their specific options remain independent: see Key systems and Loading screens for complete examples.

The key preview uses a local validator that always rejects. The image does not demonstrate authentication, URL access or clipboard behavior.

The loading preview uses a manually supplied progress value. It does not measure asset-download progress.

The editor includes Graphite, Aurora, Ember, and Custom theme choices. Custom restores the window’s opening theme colors before accent changes. Panel transparency ranges from 0 (opaque) to 1 (fully transparent). Navigation, tab position, reduced motion, and animation duration update this window through existing APIs. The ZIP includes appearance_example.luau in its gabibou_ui source folder as a complete UI-only setup.