Planchet
the Adjustmint design system
Planchet is the foundation every Adjustmint screen is struck from: its colors, type, components and patterns, with what's designed and what's built. Calm, plain and exact, like a well-kept checkbook. Figma is the source of truth for components; the code is built from a written spec that these pages keep in step with Figma, with every piece versioned so it's clear what's designed and what's shipped.
Sections
Foundations. Color, typography, spacing and radius, elevation, motion, icons. 6 documented · 6 built as designedComponents. Buttons, fields, pills, toasts, dialogs, menus, coach marks. 13 documented · 11 built as designedPatterns. Components working together: the register, Road to payday, the category picker, multiple accounts. 11 documented · 6 built as designedFrameworks. The frame every page lives in: the header, the phone chrome and the page layouts. 4 documented · 4 built as designed
Where things stand
34 documented
27 built as designed
4 built, newer version designed
2 designed, not built
1 planned
See Ahead of the code for what's decided but not shipped.
Principles
Do
- Lead with the number that answers "what can I spend?"
- Use real numbers and short, calm sentences, explained at the moment they matter.
- Keep entry to seconds and clearing to one tap.
Don't
- Use amber for anything but overdraft, or red for anything but negative balances and errors.
- Add cards, charts or banners that push the register below the fold.
- Add a second typeface, gradients or decorative illustration.