Planchet

Components

Swapped digits mark

Design 1.0.0, Built 1.0.0. Not in Figma yet

Spec

The two digits a typo would swap, marked inside an amount in a sentence. SwappedDigits in code. Used only in Find the difference's typo sentence.

Rules

  • text-warning in the row style (semibold), underlined with border-width-strong (2px) at space-2xs from the text. The underline means it never relies on color alone.
  • Digits only: never a comma or the decimal point. "$12.34" meant as "$13.24" marks the 2 and the 3 on either side of the point.
  • On both amounts in the sentence: the likely amount (bold) and the amount as entered. The row's own amount stays plain.
  • For the eye only. The marks split an amount into pieces that a screen reader can read apart, so the marked sentence is hidden from screen readers and a plain copy, with whole amounts, is read instead.
  • Amber here means an oddity to look at, as the warning band beside it.

Built 1.0.0

The app's own component, version 1.0.0, live. Fake data; nothing is saved.

Changes

  1. 1.0.0, Nov 1 2026: First version: the two digits that would swap, in text-warning, in the row style (semibold) and underlined (2px), so it never relies on color. Used in Find the difference's typo sentence. Not in Figma yet. (#158)