yukey's (default) aesthetic🔗

Aesthetically, yukey should feel:

• Very cyber
• Very SCADA
• Very functional/brutalist
• ... but it's always ready to explain itself.

And things should have a visual "cadence", and it should be regular.

At a high level, that's the vibe.

Nitty Gritty Details🔗

content of a row has consistent width and fills its container🔗

... and this explicitly includes the focus box.

It is visually distressing for the focus box to be erratically sized from one row to the next.

So:

• The focusable unit in data rows is sized consistently, by the container -- never by struggle-hugging whatever content happens to be inside.
• Rows in one set of components should generally be the same height and the same width. (Mechanically: the focus box being drawn on any two neighbors should mean drawing the same shape at the same size, just in a coordinate offset on a single axis.)
• Tabular data should be tabular: columns align, etc; and like the rules for rows, so too it still applies that the focus box should be regularly and unsurprisingly sized for neighboring elements for tables.

Theming🔗

Yukey's look is a theme, and the one described above is the default.

The split works like this:

• Token names are the vocabulary: every color, gap, size, and type choice the components are styled with, as --yk-* CSS custom properties. Each has a semantic role (--yk-accent, --yk-space-md, --yk-focus-ring), and components only ever write var(--yk-...). The vocabulary is packages/yukey/src/tokens.ts; the tokens gallery entry renders it live.
• Token values are a theme: one CSS value per name. The default is packages/yukey/src/themes/default.ts. installTokens() installs it; installTokens(myTheme) installs yours instead. A theme is typed against the vocabulary, so one that misses a token is a compile error, not a silently unstyled element.

Names are the durable part. Values are the iteration surface: change them freely, and nothing else moves. If no token says what you mean, that's a vocabulary conversation, not a license for a literal. Renaming or re-roling a token is a real API change.