UI Packs

Nightcity Character Sheet

12 cyberpunk character sheet and stat widgets for dark interfaces — midnight blue with hot magenta accents. SVG plus transparent PNG at 1x, 2x and 4x.

  • ui
  • svg
  • transparent png
  • character sheet
  • stats
  • equipment
  • attributes
  • rpg
  • cyberpunk
  • cyberpunk
  • cyberpunk
  • sci-fi
  • neon
  • hud
Sheet showing 12 cyberpunk character sheet and stat widgets from the Nightcity family, arranged on a transparency checkerboard with their pixel sizes printed underneath
1600×824 previewtransparency shown as checkerboard

About this pack

Nightcity Character Sheet is a set of 12 character sheet and stat widgets drawn in the cyberpunk style, where every frame has its own asymmetric outline — a notch on one corner, a rail down one edge. It contains a stat row and an alternating band row, three comparison marks, a six-axis and a five-axis radar frame, an equipment doll frame, an empty and an occupied equipment slot and two set bonus strips.

The character sheet exists to answer one question, whether this new piece is better than the one already worn, and the piece of art that answers it is the smallest one in the kit. Most sets ship the frames and leave the comparison arrows to the engine, which is where they come out as a font glyph in a set that draws everything else by hand.

The silhouette is composed rather than scaled: each of the four corners and four edges takes its own treatment, so no two frames in the set share an outline. The neon glow is a stack of strokes at falling opacity, not a blur filter — a filter is applied differently by some SVG rasterisers and turns the halo into a smear at 4x.

Inside that style this is the Nightcity reading of it: a dark interface on a midnight blue palette with hot magenta accents, built around a single bordered frame, chamfered buttons at 176x44, hollow-cored bars divided into 16 segments, and two-tone icons on a 32px 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 up and down arrows are separate sprites rather than one arrow flipped, because both appear in the same comparison table and a flipped arrow lights from the wrong side. There is a third mark for unchanged, which matters more than it sounds: no arrow at all is ambiguous between equal and not comparable. The radar frame ships as grid and axes only, without a value polygon, because the values come from the game. What the kit owes is the scale, and it ships at both five and six axes so a stat system is not forced to have as many attributes as the artist assumed.

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 Nightcity family, which means this kit and the Nightcity panel kit line up without either being resized. A good fit for cyberpunk, sci-fi and near-future interfaces.

Download

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

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

Files included in this pack
FileFormatSizeDownload
Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readmeZIP166 kB Get →
Stat row, editable SVGSVG838 B Get →

How to use it

  1. Draw your value polygon over the radar frame in engine; the frame is a fixed scale with rings at even fractions, so a polygon can be plotted straight against it.
  2. Use all three comparison marks including the unchanged one. An absent arrow does not mean equal.
  3. Alternate the plain and banded stat rows down a long list rather than adding your own zebra fill; the band is drawn at a tone that survives the family retint.
  4. The equipment doll leaves its centre empty for your own character portrait, and the slot positions around it match the standalone equipment slot size exactly.

License

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

Copy-paste credit line
"Nightcity Character Sheet" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/nightcity-character-sheet