Skip to Content
Tech debtDesign system

Design System Debt

Token parity and design-fidelity migration. Canonical: design-system/tokens.md and design-system-conventions.md. Back to register.

Token guard — current state

  • scripts/check_design_tokens.sh scans the shared + desktop screens for banned patterns and flags: raw Color(0x…) (should be Oter.colors.*), MaterialTheme.typography (should be Oter.type.*), and magic .dp literals (advisory). --strict exits non-zero on violations outside the baseline.
  • config/design-token-guard-baseline.txt (the exemption list) is empty — i.e. no files are currently exempt, so the guarded scope is fully migrated to Oter.*. Goal already met for current scope; keep it empty.
  • Action: extend the guard’s scan to any new shared/ screens added during the mobile consolidation so the baseline doesn’t silently regrow.

Token parity — open decisions (TD-06)

There are still three sources of truth (Figma variables, code Oter.*, prototype DesignSystem.md). Code has only the middle “semantic” tier; Figma has three tiers (primitives → semantic → scales). Five DECISIONS remain open per the tokens doc:

  1. Primitives tier — raw palette (indigo/500, slate/900, …) exists in Figma only, not in code.
  2. Translucent fills — formalize alpha-based surface fills.
  3. Light-theme status colors — missing dangerLight / warningLight / infoLight.
  4. Tag colors — missing tagYellow / tagPink / tagPurple, plus Eisenhower -subtle (18% alpha) and -outline (35% alpha) badge tokens.
  5. Elevation / motion / z-index / typography — kept code-only; not captured as Figma variables.

Design-fidelity migration

The broader effort to rebuild every screen from a shared primitive kit to match the Oter prototypes is ongoing (tracked via the token guard + design baseline rather than a dedicated doc). It interlocks with the mobile consolidation’s S7 responsiveness work.

Target state

Figma variables and code tokens are 1:1, name-for-name, across all three tiers; the prototype spec is reconciled into one of those two; the guard stays green in --strict across the full shared screen set.

TestingInfra