Give the cards an edge again — one grey, not ten hues
CI & Build / Build now, or wait for Android? (push) Successful in 3s
CI & Build / TypeScript typecheck (push) Successful in 9s
CI & Build / Python lint (push) Successful in 10s
CI & Build / Python tests (push) Successful in 15s
CI & Build / integration (push) Successful in 20s
CI & Build / Build & push image (push) Skipped
Desktop (Tauri) / Windows installer (cross-compiled) (push) Successful in 2m59s
Desktop (Tauri) / Tauri desktop (Linux) (push) Successful in 5m39s
Desktop (Tauri) / Update manifest (push) Successful in 4s
Android / Kotlin + Rust (APK) (push) Successful in 8m20s

The border was never the problem; a border that carried COLOUR was. It said
exactly what the fill already said, at 1.56-2.09 against that fill where the
fill managed 1.03-1.05 against the board — the loudest element on every card
was redundant with the quietest. A line that varies by colour is content and
competes with the fill. A line that never varies is structure and does not.

So the edge comes back, and it comes back as a constant in NoteCard rather
than a column in the palette. Uniformity is the feature, and putting it where
the palette cannot reach it is how that stays true.

  light  #b8b8b8    1.57-1.98 against all twenty card fills
  dark   #404040    1.58-1.73

Matched, not eyeballed: both land at ~1.6-1.7 against the card they edge, so
the edge reads with the same authority in either theme. Dark is `neutral-700`
— what the `default` card's border always was, one entry's value promoted to
the rule for all of them. Light sits between `neutral-300` and `neutral-400`
because neither lands in range: 300 fades to 1.18 on a gray-tagged card, 400
jumps to 2.52 and reads as a wireframe.

Rejected on measurement: a translucent black/white edge, which is the tidier
way to write it and self-adjusts per card. A border composites over the
card's own fill, so `border-white/20` comes out #56396d on a purple card and
#a3c9c1 on a teal one. Hue-coded edges are the thing being removed.

The shadow steps back to what it was for — depth, not the boundary. Web
returns to `shadow-sm`; Android's 2dp drops to 1dp, matching it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-26 15:00:22 -04:00
co-authored by Claude Opus 5
parent 47f108c9c8
commit ae2053d2ed
4 changed files with 77 additions and 47 deletions
@@ -20,6 +20,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.style.TextDecoration
@@ -45,23 +46,18 @@ fun NoteCard(
modifier =
Modifier
.fillMaxWidth()
// Elevation instead of an edge line. The card used to be framed by a
// 1px tint border, which measured a higher contrast against its own
// fill (1.56-2.09) than the fill managed against the board
// (1.03-1.05) — so the loudest thing on every card was the same line
// in the same place, and a board of them read as a grid of outlines
// however different the colours inside. See NoteTint.cardBackground.
//
// It matters most in LIGHT mode, where an untagged card is a 1.04
// contrast against the board and nothing but a shadow can lift it
// off. In dark the shadow is black on near-black and invisible, which
// is why the subdued fills were moved onto the card surface instead.
// Depth, not the boundary — the edge below is that. 1dp: enough to
// separate a white card from a #fafafa board, and the web's own
// `shadow-sm` is the value it is matching.
.shadow(CARD_ELEVATION, RoundedCornerShape(CARD_RADIUS))
// Clipped BEFORE clickable, so the ripple is bounded by the card's
// rounded corners instead of a rectangle overhanging them.
.clip(RoundedCornerShape(CARD_RADIUS))
.clickable(onClickLabel = stringResource(R.string.board_open_note), onClick = onOpen)
.background(tint.cardBackground(dark, strong))
// ONE grey edge on every card, regardless of its colour — the tint is
// deliberately not consulted here. See CARD_EDGE_DARK.
.border(1.dp, if (dark) CARD_EDGE_DARK else CARD_EDGE_LIGHT, RoundedCornerShape(CARD_RADIUS))
.padding(12.dp),
) {
// Body then checklist, in order — a note can carry both (M13 step 2), and
@@ -248,10 +244,31 @@ private const val MAX_PREVIEW_LINES = 8
private const val MAX_WRAPPED_LINES = 2
private const val MAX_LABEL_CHIPS = 3
private val CARD_RADIUS = 12.dp
private val CARD_ELEVATION = 1.dp
// Enough to lift a white card off a #fafafa board and no more. Material's own
// resting card elevation is 1dp; this is a shade above it because the board is a
// masonry field of cards rather than one card on a page, and at 1dp the whole field
// reads flat again — which is what the removed border was compensating for.
private val CARD_ELEVATION = 2.dp
// THE CARD'S EDGE — one grey, every card, both weights, all ten colour keys. It is a
// constant here rather than a column in NoteTint precisely so the palette CANNOT vary
// it; uniformity is the feature.
//
// The version of this that came from the palette was a `{hue}-900` border, and it
// failed twice over: the line measured 1.56-2.09 against its own fill while the fill
// managed only 1.03-1.05 against the board, so it was the loudest thing on the card —
// and it carried the same information the fill did. A field of cards read as a grid of
// outlines however different the colours inside were. A neutral line carries no
// information at all, which is exactly what lets it be structure instead of content.
//
// The two values are MATCHED rather than chosen by eye: each measures ~1.6-1.7 against
// the card it edges (light 1.57-1.98 across all twenty fills, dark 1.58-1.73), so the
// edge reads with the same authority in either theme. Dark is `neutral-700`, which is
// what the `default` card's border always was — one entry's value promoted to the rule
// for all of them. Light sits between `neutral-300` and `neutral-400`, neither of which
// lands in range: 300 fades to 1.18 on a gray-tagged card, 400 jumps to 2.52 and reads
// as a wireframe.
//
// NOT a translucent black/white edge, which is the tidier way to write this and was
// measured and rejected: a border composites over the card's own fill, so `White` at
// 20% comes out #56396D on a purple card and #A3C9C1 on a teal one. Hue-coded edges are
// the thing being removed.
private val CARD_EDGE_LIGHT = Color(0xFFB8B8B8)
private val CARD_EDGE_DARK = Color(0xFF404040)
private val CHIP_RADIUS = 6.dp
@@ -72,18 +72,14 @@ data class NoteTint(
* not a wall of white. Drawing those at the same weight is what prompted the
* operator's "the tints look the same as the chosen colors".
*
* THE CARD NO LONGER HAS A BORDER. It used to carry a 1px `{hue}-900` edge, and
* measured against its own fill that line was a 1.562.09 contrast where the fill
* managed 1.031.05 against the board. The loudest thing on every card was an
* identical line in an identical place, so a board of them read as a grid of
* outlined rectangles whatever colour was inside — the operator's "too samey even
* with the color differences". [border] survives for panels, banners and pickers,
* which are single elements rather than a field of them; a note card gets none.
*
* What replaces it differs by theme, because elevation does. Dark leans on
* [darkCardSubdued] sitting above the near-black board. Light leans on a real
* shadow (`NoteCard.kt`), since white-on-#fafafa is a 1.04 contrast and no fill
* is going to rescue it.
* THE CARD'S EDGE IS NO LONGER A TINT. It used to carry a 1px `{hue}-900` border,
* and measured against its own fill that line was a 1.562.09 contrast where the
* fill managed 1.031.05 against the board — so the loudest thing on every card
* was a line saying exactly what the fill already said, and a field of them read
* as a grid of outlines whatever colour was inside. The card still has an edge;
* it is one grey for all ten keys and it lives in `NoteCard.kt` as a constant, so
* the palette cannot vary it. [border] is untouched and still serves panels,
* banners, the update card and the pickers — single elements, not a field.
*
* WHAT SEPARATES THE TWO WEIGHTS IS CHROMA, NOT LIGHTNESS. In dark they now sit
* within a hair of each other (red: 1.11 against the board versus 1.12) and