Pack · 29 assets
Charcoal UI Starter — 29 matched kits
The Charcoal family in one place: nine-slice panels and buttons, HUD bars and 27 more matched kits. One palette, one stroke weight, one set of nine-slice margins.
For games that are drawn and also dark — chalk-and-blackboard mysteries, hand-illustrated horror, anything where the light notebook version would read as cheerful and wrong.
29 kits drawn against the same rules, so they can sit in the same screen without anything looking borrowed: the same six smoke grey tones, the same single ember orange accent, the same 3 px stroke weight, and nine-slice margins that are always a multiple of four.
That consistency is the actual point of a pack. Individually each kit is useful; together they mean a pause menu, a HUD and a settings screen can be assembled in an afternoon without a single colour or corner radius being negotiated twice.
Each kit is downloaded from its own page — that way you take only what you need, and the file list, sizes and licence stay accurate per item rather than being averaged across a bundle.
What is inside
29 kits
Charcoal Panel UI Kit — single-framed panels and buttons
18 chalk on slate interface sprites: single-framed nine-slice panels, a tooltip, a header bar, a divider, a chip and twelve tab button states. SVG plus transparent PNG.
Charcoal HUD Bars — health, mana and stamina
16 chalk on slate HUD bar sprites: standard, slim and vertical frames, three hollow-core fills in each, plus segmented, ghost and shield variants. SVG plus transparent PNG.
Charcoal Menu Icons — 24px two-tone set
57 two-tone chalk on slate menu icons on a 24×24 grid, including play, pause, settings and 54 more. Sheet plus individual files.
Charcoal UI Controls — checkbox, toggle and slider
19 chalk on slate interface controls: checkbox, radio, toggle, slider and stepper, with on, off, partial and disabled states drawn as different shapes. SVG plus PNG.
Charcoal Inventory Slots — 76px grid
13 76×76 chalk on slate inventory slots: empty, hover, selected, locked, blocked and drop states, round and hex equipment slots, a hotbar slot and three rarity frames.
Charcoal Backdrops
13 hand-drawn background and overlay pieces for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Tileset
58 hand-drawn tiles for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Seamless Textures
20 hand-drawn tiling surface textures for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Dialogue Kit
15 hand-drawn dialogue components for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Navigation Kit
15 hand-drawn navigation and input components for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal HUD Frames
16 hand-drawn heads-up display frames for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Progression Kit
20 hand-drawn progression and reward components for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Input Prompts
16 hand-drawn input prompt sprites for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Card Frames
18 hand-drawn card, currency and notification components for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Emblems
26 hand-drawn crests, insignia and rank marks for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Cursors
12 hand-drawn mouse cursors for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Map Markers
12 hand-drawn map markers and world indicators for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Status Effects
12 hand-drawn status effect frames and duration indicators for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Hit Effects
12 hand-drawn impact and effect sprites for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Loading
20 hand-drawn loading and waiting indicators for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Shop UI
12 hand-drawn shop and economy widgets for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Crafting UI
13 hand-drawn crafting and recipe widgets for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Quest Log
13 hand-drawn quest log and objective widgets for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Level Select
12 hand-drawn level select and world map pieces for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Leaderboard
12 hand-drawn leaderboard and achievement widgets for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Party UI
13 hand-drawn party and roster widgets for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Tutorial UI
12 hand-drawn tutorial and onboarding markers for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Modals
15 hand-drawn modal dialogs and system notices for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Charcoal Character Sheet
12 hand-drawn character sheet and stat widgets for dark interfaces — smoke grey with ember orange accents. SVG plus transparent PNG at 1x, 2x and 4x.
Each asset is downloaded from its own page — that way you only take what you need, and the file list, sizes and license stay accurate per item.