Skip to content

design(web): spacing, dividers and fg/bg separation — the 'unfinished' feeling that isn't about colour #613

Description

@davidkneubuehler

Split out of #402 at Dave's request, while researching why Tron Ice /
Miami Nights / Laser Yellow feel unfinished (#402, #403).

The colour work (#402) explains a real chunk of it — three of the four
theme identities were mathematically solved for a contrast gate and
never actually art-directed. But Dave's own read, after sitting with
that diagnosis, is that colour isn't the whole story:

the theme is the colors, and they are not perfect (not even
outrun). why it looks off to me is not because of the colors, or at
least not entirely. the spacing, the lines / dividers, the borders,
the lack of visibly foreground and background might be the issue

That's a structural/hierarchy question, not a hue question, and it
applies to Outrun too — the one identity that did get a real design
pass. Worth its own issue rather than folding into the palette work,
because the fix (if any) is spacing scale, border treatment and
surface-layering discipline, not wattHue/neonHue/surfaceHue.

What to actually look at

  • Whether --color-surface vs --color-surface-raised reads as two
    distinct layers at a glance, or just as a faint tint that only shows
    up in a side-by-side contrast readout (the numbers can pass while
    the eye still can't find the seam).
  • --color-edge (the border/divider token, app.css) — is it doing
    enough work to separate cards/panels/rows at normal viewing distance
    and at the "arm's length, sweating" distance ux.md designs for?
  • Spacing rhythm across the app: is there an actual scale being
    followed, or does density vary panel to panel in a way that reads as
    inconsistent rather than intentional?
  • Whether this is uniform across the app or concentrated in specific
    screens/components — a quick pass over /dev/styleguide and
    /dev/components is the cheapest way to find out before touching
    real routes.

Explicitly out of scope here

Anything that's a --color-* token value — that's #402 (palette
decisions) and the tool built for it in #612 (/dev/theme-editor).
This issue is about layout/hierarchy primitives, not hue.

No approach decided yet — this is filed to capture the observation
before it's lost, not to prescribe the fix.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    designDesign related stuff

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions