Logo and clear space

The mark, drawn from four theme tokens, and the rules for the logo files.

ShineUI

The mark is three tiers, not three colors.
--logo-ink two strong pills. The ink already there, so one drawing works on a card and on the navy bar.
--logo-quiet three quiet pills. The same ink at a fixed alpha, so it never falls to nothing.
--logo-spark the spark. Derived per theme and fitted to both grounds.
Draw the mark with these tokens. Never with a hex, and never with --brand or --accent directly.

ShineUI

The strip above carries .sui-on-inverse, which is all an inverse container adds: it keeps the quiet pills bright and swaps the spark for --logo-spark-inverse, the fourth token. The favicon and the app icon stay a fixed navy chip, because neither can read a stylesheet.

A logo file (SVG, PNG or ICO) cannot read a theme, so it follows fixed rules. Keep one grid unit clear on all sides, 16% of the mark's width. Draw the full-color mark no smaller than 20px tall; use the chip versions below that. Do not recolor the spark, restack the rows or add effects.