Colorosse503 free assets

UI Packs

Slate Navigation Kit

15 realistic navigation and input components for dark interfaces — neutral slate with warm gold accents. SVG plus transparent PNG at 1x, 2x and 4x.

  • ui
  • svg
  • transparent png
  • tabs
  • scrollbar
  • dropdown
  • settings menu
  • realistic
  • realistic
  • dark ui
Sheet showing 15 realistic navigation and input components from the Slate family, arranged on a transparency checkerboard with their pixel sizes printed underneath
1600×1528 previewtransparency shown as checkerboard

About this pack

Slate Navigation Kit is a set of 15 navigation and input components drawn in the realistic style, where a five-stop specular gradient runs down a brushed metal face with rivets at the corners. It contains active and inactive tabs, a scrollbar track, thumb and two arrows, a dropdown in closed and open states with its menu, idle and focused text fields and round close, back, plus and minus buttons.

Most free UI kits stop at panels and buttons, which means the first settings screen you build is the moment you start drawing your own art. This is the rest of it: the parts a menu actually needs before it works.

The brush texture is a 3px line pattern rather than real noise: noise triples the PNG weight for a texture nobody can see at 1x. The shadow is layered rather than blurred so it holds up at 4x.

Inside that style this is the Slate reading of it: a dark interface on a neutral slate palette with warm gold accents, built around a single bordered frame, square-cornered buttons at 128x40, banded bars divided into 10 segments, and outlined icons on a 24px grid. Those measurements are why two families can share an art style without being interchangeable: the style decides how an edge is drawn, the numbers decide what the interface is for.

The focused text field widens its outline instead of only changing colour, because a focus ring that is only a hue disappears in high-contrast mode and takes keyboard navigation with it. The active tab merges into the surface below it rather than just brightening, which is what makes it read as connected.

Every sprite ships as an editable SVG and as transparent PNG at 1x, 2x and 4x, so you can drop the PNGs straight into an engine or open the vector and change a colour. Built to the same measurements as the rest of the Slate family, which means this kit and the Slate panel kit line up without either being resized. A good fit for realistic and simulation interfaces.

Download

Direct link · no sign-up · no wait page
Download ZIP63 kB

Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readme

FileFormatSize
Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readmeZIP63 kBGet →
Navigation tab, active, realistic, editable SVGSVG1.7 kBGet →

How to use it

  1. Nine-slice the scrollbar track vertically only; the thumb is a separate sprite so you can size it to the content ratio without stretching the grip lines.
  2. The dropdown menu is a separate sprite from the closed control — draw it on a layer above everything else, or it clips inside the panel that owns it.
  3. Use the plus and minus round buttons as a stepper pair at the same size as the close button so a settings row keeps one rhythm.

License

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice

Copy-paste credit line
"Slate Navigation Kit" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/slate-navigation-kit

Works with

same grid, same corners, different material

These kits are built to the same panel, button and icon measurements as Slate Navigation Kit, so you can mix them in one screen without re-cutting a nine-slice or renegotiating a margin.

  • Sheet showing 15 cartoon navigation and input components from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Navigation Kit

    15 cartoon navigation and input components for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files80 kB
  • Sheet showing 7 cartoon background and overlay pieces from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Backdrops

    7 cartoon background and overlay pieces for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files35 kB
  • Sheet showing 11 cartoon card, currency and notification components from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Card Frames

    11 cartoon card, currency and notification components for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files137 kB
  • Sheet showing 7 cartoon dialogue components from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Dialogue Kit

    7 cartoon dialogue components for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files42 kB
  • Sheet showing 10 cartoon heads-up display frames from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua HUD Frames

    10 cartoon heads-up display frames for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files64 kB
  • Sheet showing 16 cartoon input prompt sprites from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Input Prompts

    16 cartoon input prompt sprites for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files123 kB
  • A row of square game inventory slots on a checkerboard background showing empty, hover, selected with corner ticks, and diagonally hatched locked states, followed by coloured rarity frames and a tiled eight-slot gridCC-BY-4.0

    Aqua Inventory Slots — 64px grid

    64×64 glassy teal inventory slots: empty, hover, selected and locked states plus three rarity frames. SVG and transparent PNG.

    cartoon3 files77 kB
  • Six outlined game menu icons on glassy teal tiles, shown large, laid out on a sheet grid, and again at actual 24 pixel sizeCC-BY-4.0

    Aqua Menu Icons — 24px outlined set

    Six single-colour outlined glassy teal menu icons on a 24×24 grid: play, pause, settings, sound, confirm and close. Sheet plus individual files.

    cartoon2 files24 kB
  • Sheet showing 11 cartoon progression and reward components from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Progression Kit

    11 cartoon progression and reward components for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files96 kB
  • Sheet showing 20 cartoon tiling surface textures from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Seamless Textures

    20 cartoon tiling surface textures for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files1.4 MB
  • Sheet showing 58 cartoon tiles from the Aqua family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aqua Tileset

    58 cartoon tiles for dark interfaces — deep teal with ice blue accents. SVG plus transparent PNG at 1x, 2x and 4x.

    cartoon2 files422 kB

More UI Packs

See all →
  • Sheet showing 7 magitech background and overlay pieces from the Aetherlab family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aetherlab Backdrops

    7 magitech background and overlay pieces for dark interfaces — lab navy with aether cyan accents. SVG plus transparent PNG at 1x, 2x and 4x.

    magitech2 files40 kB
  • Sheet showing 11 magitech card, currency and notification components from the Aetherlab family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aetherlab Card Frames

    11 magitech card, currency and notification components for dark interfaces — lab navy with aether cyan accents. SVG plus transparent PNG at 1x, 2x and 4x.

    magitech2 files196 kB
  • Sheet showing 7 magitech dialogue components from the Aetherlab family, arranged on a transparency checkerboard with their pixel sizes printed underneathCC-BY-4.0

    Aetherlab Dialogue Kit

    7 magitech dialogue components for dark interfaces — lab navy with aether cyan accents. SVG plus transparent PNG at 1x, 2x and 4x.

    magitech2 files50 kB