UI Design System & Theming

Every screen in kartik-clothing, the clothing shop, barber, tattoo parlor, character creator, wardrobe, design studio and shop manager, is recoloured from a single table in shared/config_theme.lua.

Setting accent alone is usually enough to make the UI match your server's branding. Anything you leave commented out keeps its shipped default.

[!IMPORTANT] Restart the resource to apply a theme change for everyone. The values are baked into the UI's CSS variables on start.

👀 Previewing a Theme In-Game

/shopmanager → Interface Theme lets you try a theme without restarting:

Accent colour: pick a ready-made accent or type any hex.
Surface: switch between the Midnight, Graphite, Navy and Obsidian presets.
Corner rounding: slide from 0 to 20 px.

Changes apply instantly, but only for you. Other players keep seeing the theme from shared/config_theme.lua. To make it permanent, press Copy config, paste the block over Config.Theme in shared/config_theme.lua, and restart the resource. Reset to default drops your preview.

🎨 The Theme Table

Config.Theme = {
    -- Accent: primary action, active tab, selection border, header highlight
    accent   = '#ffffff',

    -- Surfaces, darkest to lightest
    canvas   = '#090a0e',
    panel    = '#111318',
    raised   = '#181b22',
    input    = '#0b0c10',
    line     = '#22262f',
    lineSoft = '#16181f',

    -- Text colours
    text     = '#f0f2f5',
    text2    = '#b8c0ce',
    text3    = '#8a93a6',

    -- Status colours
    ok       = '#3d8c75',
    warn     = '#b88d3d',
    bad      = '#a33c30',

    -- Corner rounding in px
    radius   = 12,
}

Key	Used for
`accent`	Primary buttons, the active tab, selection borders, header highlights.
`canvas`	The page behind everything.
`panel`	Cards, sidebars and grid backgrounds.
`raised`	Elements sitting on top of a panel, tiles, dropdowns, popovers.
`input`	Text fields, sliders and steppers.
`line` / `lineSoft`	Borders and dividers, strong and subtle.
`text` / `text2` / `text3`	Primary, secondary and muted text.
`ok` / `warn` / `bad`	Success, warning and error states, price affordability, lock badges, moderation status.
`radius`	Corner rounding, in pixels, across the whole UI.

🎯 Ready-Made Accents

Name	Hex	Name	Hex
Azure	`#4f8ff7`	Rose	`#fb7185`
Sky	`#38bdf8`	Amber	`#f0b24b`
Teal	`#2dd4bf`	Brass	`#c5a880`
Emerald	`#34d399`	Crimson	`#ef4444`
Violet	`#a78bfa`	White	`#ffffff`

💡 Tips

Start with the accent. Change accent first and restart, most servers never need to touch anything else.
Keep the surface ramp ordered. canvas should be the darkest and raised the lightest of the three, or panels stop reading as layered.
Going light. For a light theme, invert the surface ramp (canvas lightest) and the text ramp, or muted text will disappear into the background.
radius = 0 gives a flat, squared-off look across every panel and tile.

UI Design System & Theming

👀 Previewing a Theme In-GameCopy Anchor Link

🎨 The Theme TableCopy Anchor Link

🎯 Ready-Made AccentsCopy Anchor Link

💡 TipsCopy Anchor Link

On this page

👀 Previewing a Theme In-Game

🎨 The Theme Table

🎯 Ready-Made Accents

💡 Tips