Three boxes, one shape
A request to declutter the keyboard's panel, the game log's panel, and the board's heavy border turned out to be three separate questions with three separate answers, not one visual fix applied three times.
The keyboard sat inside its own bordered panel, the game log sat inside another, and the board carried a 3px collision-wall border on top of both. Feedback on the layout described the whole screen as boxed in, three visible containers stacked where one shape would read more cleanly. A wayfinder map split that single complaint into three separate tickets, on the suspicion that what worked for one element wouldn’t automatically generalize to the other two.
The keyboard’s case was the cleanest. The wrapper’s own padding, border, and background came off entirely, and the individual keys moved from a dedicated key color onto the same surface tone as the rest of the page, keeping their own border. A prototype tried the borderless version too, and it failed for a reason invisible outside the game’s two high-contrast themes: those themes deliberately collapse the surface color and the page background into the same value, so a borderless key on that surface simply vanishes. The border that looked like leftover chrome in the normal themes was the only thing keeping a key visible at all in high contrast.
The game log looked like the same question wearing a different label, and the map almost answered it the same way before catching the difference: its panel stays exactly as it was. The log’s content area scrolls internally, and that scrolling region needs a visible edge to signal there’s more below the fold, an affordance the keyboard’s flat grid of keys never had to account for. Two panels that looked interchangeable from a screenshot turned out to be solving different problems, and only one of them still needed the box. The board’s own collision-wall border thinned from 3px to 1px, with a subtle background tint added to carry part of the visual weight the border gave up, in the two normal themes only.
--color-board-bg: color-mix(in oklch, var(--color-bg) 88%, black 12%);Both high-contrast themes keep the original full-strength border and flat background, untouched, for the same structural reason as the keyboard: those themes define the grid background and the page background as identical on purpose, so there is no contrast left for a tint to lean on. The border stayed heavy there because nothing else could do the job.
Two corrections landed after that first pass, on two different clocks. An automated review caught the tint’s hardcoded black keyword duplicated across both board components within minutes and had it pulled into the token above instead. The second correction took longer: the same formula that read as a subtle recessed tray in the dark theme just looked flat gray once the light-theme version was actually running rather than sitting still in a prototype screenshot, and light theme’s board went back to plain white, leaning on the thinner border alone. The dark-theme tint had been approved once, as an image; it only earned a second look after being lived with for a bit.