> ## Documentation Index
> Fetch the complete documentation index at: https://gabibou-ui.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

![Local rc.23 controls in a running Windows Roblox client](https://mintcdn.com/gabibou-ui/UsigEQZXJqRsv9tN/images/rc23-controls.png?fit=max\&auto=format\&n=UsigEQZXJqRsv9tN\&q=85\&s=b255da703109097a36128c1e593dae44)

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.

```lua theme={null}
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.

```lua theme={null}
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.

```lua theme={null}
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:

```lua theme={null}
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:

```lua theme={null}
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](https://gabibou-ui.mintlify.site/customization/appearance-and-layout.md) for valid ranges and [Icons and branding](https://gabibou-ui.mintlify.site/customization/icons-and-branding.md) 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.

```lua theme={null}
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.

![The opt-in appearance editor showing its theme and accent controls](https://mintcdn.com/gabibou-ui/UsigEQZXJqRsv9tN/images/rc23-appearance.png?fit=max\&auto=format\&n=UsigEQZXJqRsv9tN\&q=85\&s=bce8c64e4e4c4eeff993c32f0ec58e9e)

## 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](https://gabibou-ui.mintlify.site/customization/key-systems.md) and [Loading screens](https://gabibou-ui.mintlify.site/customization/loading-screens.md) for complete examples.

![Local rc.23 key-gate preview with player avatar and Verify, Get key, Cancel, and Discord actions](https://mintcdn.com/gabibou-ui/UsigEQZXJqRsv9tN/images/rc23-key.png?fit=max\&auto=format\&n=UsigEQZXJqRsv9tN\&q=85\&s=c8a228fd9197e8dc4b42fc4c5ba4e000)

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

![Local rc.23 centered loading preview at 68 percent](https://mintcdn.com/gabibou-ui/UsigEQZXJqRsv9tN/images/rc23-loading.png?fit=max\&auto=format\&n=UsigEQZXJqRsv9tN\&q=85\&s=382eceddb5e241e63def316b92612fdf)

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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.