Problem

The Mismatch Finder's user interfaces were partly styled using discrete values with certain CSS properties such as spacing, colors, borders and font-sizes (etc.).
Not using Codex tokens might cause these styles to deviate from our system's visual foundations.

Solution

In order to prevent future misalignment, we should replace the discrete values included in the following files by their Codex token equivalent or our custom spacing variables whenever possible:

app.scss

Layout.vue

Considerations

Acceptance criteria

• Discrete values that have either a Codex token or custom spacing/layout value equivalent are replaced