Every piece, ready to copy

Six fills, three sizes, icon buttons and a disabled state. Pressing pushes the button into its shadow.

Labels sit above the field. Errors use colour, an icon and text, and are linked with aria-describedby.

Native inputs, so keyboard and screen readers work as usual. Only the visuals are pixel art.

Pixel edge plus a stepped drop shadow. Use the title bar version for windows and panels.

Built on the native dialog element: focus moves inside, Escape closes it and focus returns to the trigger.

Arrow keys move between tabs, Home and End jump to the ends. Follows the WAI-ARIA tabs pattern.

Label text is optically centred: Silkscreen sits low in its line box, so the bottom padding is 2px larger than the top.

Hearts for health, segments for experience and a striped bar for loading. Each has a text equivalent for screen readers.

Shows on hover and keyboard focus, stays while hovered, and Escape hides it.

Announced politely to screen readers through an aria-live region. Dismiss with the button or wait four seconds.

A compact top bar and a dropdown menu with an arcade pointer. Arrow keys move through items, Escape closes.

Pixel portraits drawn as SVG, with sizes, status dots and a stacked group.

A real table with a caption and header cells. On small screens it scrolls inside its own box.

The current page uses aria-current. Previous and next buttons have text labels for screen readers.

Static messages for the page. Colour is never the only signal: each has an icon and a title.

Native details and summary elements, so it works without JavaScript.

Small helpers for wayfinding and keyboard hints.

The classic dialogue box: portrait, name tag, typewriter text and a blinking prompt.

For lists with nothing in them yet and for content that is still loading.