tinyworld-block-button-style

Installation
SKILL.md

Tiny World "Block" button style (locked design language)

The canonical look for tool/block buttons (the floating palette .tool-palette, the group popout .flyout, and the bottom toolbar .tool blocks). Jason signed off on this as the house style — reuse it for any new icon square/tile.

The three ingredients

  1. Outlined square — a 1.5px border in a darkened version of the tile's category color, an inner white line, and a slight raised lift.
  2. Outlined glyph — a white icon body with a matching dark colored outline, drawn with paint-order: stroke + vector-effect: non-scaling-stroke so one stroke-width looks identical across every glyph viewBox (24, 512, …).
  3. Category color — the dark outline is the darkened category tint; the square keeps a faint translucent category background.

Category palette

Installs
2
GitHub Stars
1.6K
First Seen
1 day ago