Planchet

Frameworks

App header

Design 1.0.1, Built 1.0.1. Figma: Top navigation page, Chrome container page

Spec

Replaces the header that only had the logo and Sign out. Every future page hangs off this bar. Shown at 1100px wide inside a 1280 to 1440px window.

At rest, trial user (Bills and Reports tagged "Trial") Profile menu open Account switcher open (a paid user with two accounts)

Contents, left to right

  • Logo, 160px, links Home.
  • Account switcher: account name plus Immediate balance. Free users have one account; the switcher still opens and offers "Add an account" (Paid badge shown only after the trial).
  • Navigation: Home, Bills, Reports. Current page in text-primary with a 2px accent underline.
  • Search, with the / hint.
  • Profile menu (the avatar): name and email, Settings, Appearance (System, Light, Dark), Plan, Export data, Help, Privacy, Alpha terms, Send feedback, Take the tour, Show tips again, Sign out. Take the tour replays the walkthrough; Show tips again clears the dismissed one-time tips (not the trial-ended tip or Nothing due) and confirms with the toast "Tips will show again." Appearance never goes in the account switcher.

Behavior

  • Header height 64, surface-raised, bottom border. Sticky at the top of the page; gets shadow-float once the page scrolls, and hands it to the pinned balances bar while that shows.
  • Menus are real menus: arrow keys, Escape closes and returns focus to their button.
  • Sign out lives in the profile menu; it is no longer a header button.
  • Choosing an Appearance option keeps the menu open so the change is visible. The options are menuitemradio items with a ✓ on the current one.
  • Below 900px wide, the phone chrome takes over.

Free, trial and paid

  • Trial: Bills and Reports carry a small "Trial" tag, and the profile menu shows days left.
  • open Free, after the trial: hide Bills and Reports, or keep them with an "Upgrade" state? Recommended: keep them visible and show what they do with a plain upgrade screen, so the features stay discoverable.

Built 1.0.1

The app itself, version 1.0.1, with made-up data. Taken 2026-10-11.

App header as built, version 1.0.1: wide, 1280px, light
Wide, 1280px, light
App header as built, version 1.0.1: wide, 1280px, dark
Wide, 1280px, dark

Changes

  1. 1.0.1, Oct 7 2026: New "adju$tmint" wordmark, 160px. (#45, #46)
  2. 1.0.0, Sep 30 2026: Header with menus, account switcher, search, profile menu.