Every UI surface in the app

Every visit to the app starts here (in the beta). A single input field, a soft cream background, an Unlock button. The app remembers you for the browser session, so after the first unlock the gate stays away until you close the tab.

Wrong password shows a soft inline error. The error text on the first miss is gentler than on subsequent misses (a small UX hint that you may have mistyped). Caps Lock on shows a separate hint. The password is hashed (SHA-256) in your browser; it never leaves your device.

The topbar carries the brand mark, a Beta-1 chip (tap to open About), the version chip (tap to open What's New), and four action buttons: Feedback (opens Senja in a new tab), Save (downloads a .save backup), Load (reads a .save file from disk), and More (the dropdown menu with everything else).

The save status itself lives in a small floating pill at the bottom-right of the screen, NOT in the topbar (moved 2026-05-22 to free up topbar space). Click the pill to manually trigger a save.

What the version chip opens

The small version label next to the brand (e.g. "v1.0-beta.1") opens the What's New modal. It shows what changed since your last visit: features added, fixes shipped, known issues. The modal also fires automatically once per release when you open the app on a new build, so you do not have to remember to check. Tap "Got it" to dismiss; tap "Read full changelog" to open the Changelog page in a new tab.

The stepper is the spine of the app. Nine pills: Values, Purpose, Life Areas, Vision, Goals, Execute, Habits, Insights, Wins. Tap any pill to jump to that step. Completed steps show a green check; the active step is filled.

The stepper scrolls horizontally on narrow screens; arrow keys (← / →) navigate between steps when the stepper is focused. Each pill also has a tooltip showing the step's full name.

The ob-bar is the bottom strip that tells you what is next. It carries: an avatar (a compass for general nav, an attention mark for amber states), an eyebrow + label (the "UP NEXT · Define your first habit" pair), and a primary action button (Open, You are here, Review N).

During discovery (before Summit Goals exist) the ob-bar tracks setup progress. After Summits, it shifts to cadence-aware mode: showing the next cadence event due.

When upstream changes have stale-flagged downstream steps, the ob-bar grows an amber "Review N" chip that opens a slide-out panel listing the flagged steps with jump links.

When you change something upstream (Values, Life Areas) after downstream steps already have content, the app flags every downstream step that may be out of sync. The flag shows in three places at the same time:

1. An amber pulsing dot on the stepper pill for each flagged step.
2. An amber "Review N" chip on the ob-bar.
3. An on-page infobox at the top of each flagged step ("You changed your Life Areas. Re-read your Vision and decide if it still fits."). Two buttons: Re-read (jumps to the upstream) or Still fits, dismiss.

The three places together form a clear breadcrumb back to what changed. Dismissing the infobox on a step clears the amber dot on that step; clearing all the dots also clears the ob-bar chip.

Press Cmd+K (Mac) or Ctrl+K (Windows / Linux) from anywhere in the app. A search overlay appears in the center of the screen.

Type any step name or partial. Hit Enter to jump. The palette closes on selection or on Escape.

Items in the menu:

• Settings: opens the 6-tab Settings modal.
• Load demo data: switches the app to a fully-populated 3-year demo plan.
• Replay intro: re-opens the 4-page welcome carousel. Useful if you skipped it on the first launch or want to revisit the methodology summary. Does not reset any data.
• Beginners guide: opens this guide in a new tab.
• About: a short modal explaining what the app is + the team.
• Help: opens the help reference in a new tab.
• Changelog: opens the changelog in a new tab.
• App privacy: opens the app-specific privacy notes in a new tab.
• App terms: opens the app-specific terms in a new tab.
• Connect Dropbox: starts the OAuth flow (or "Disconnect" if already connected).

The app uses banners sparingly for things that need your attention but should not block work:

• Demo mode banner (purple): present whenever you are in the demo. One button: "Back to my data."
• Save reminder banner (amber): fires if it has been 7+ days since your last manual save and your plan has data. Two buttons: "Save now" + "Dismiss for this session." Dismissal persists per browser session, not across reloads on a new day.
• Sunset banner (amber): fires from 30 days before the beta end-date through to the close (currently 1 August through 31 August 2026). Reminds you to download a .save backup before the build retires. Includes a one-click backup button.
• Year-end backup banner (green, festive): fires Dec 28 through Jan 7. Reminds you to download a year-end .save for the archive + opens the annual wrap-up prompt. Single-fire per year (dismissible).
• Storage-quota banner (graded: amber at 2 MB / amber-stronger at 3.5 MB / red at 4.5 MB): fires when your .save approaches the localStorage quota for the browser. Suggests connecting Dropbox or trimming the Wall of Wins / archived habits. Browser localStorage caps vary (usually 5-10 MB).
• Bridge banner (purple, transient): fires for ~6 seconds between consecutive forward step transitions during the first session. Confirms "Step N saved, moving to Step N+1." Suppresses after the first session ends.
• Browser-support warning (red): fires if your browser does not support a critical feature (e.g., color-mix in OKLCH). The app still works; some visual polish breaks.

Modals always cover the app surface; they trap keyboard focus while open; Escape closes them. The app uses modals for actions that warrant a pause:

• Load demo confirmation: protects your real plan before swapping in the demo.
• About modal: a short explainer + credits + version chip.
• Quarter Check-in poster: the 4-card recap fired at end of quarter. Has a "save as image" button.
• Settings modal: 6 tabs for every preference.
• Welcome carousel: a 4-page intro shown on the very first launch. Pages cover the welcome, the methodology, privacy, and a "ready to start" prompt. Dismiss with Skip or by tapping outside; the dots show progress. The flag lgp-welcome-seen hides it on subsequent launches. Re-open it from More menu → Replay intro.
• Beta-welcome modal: a separate, beta-specific modal that ALSO fires on first launch, after the welcome carousel. It explains what beta means (free, time-limited, expects feedback), links to the beta T&C, and asks you to accept before continuing. Hidden via the lgp-pv4-beta-ack flag once accepted. Different modal, different purpose. The welcome carousel teaches the app; the beta-welcome modal accepts the beta agreement.
• Milestone-peek modal: opens when you tap a milestone in the timeline dropdown or the year-overview cards. Shows the milestone's KPI target, current value, notes, and three grade buttons (Achieved / Partial / Abandoned). Grading from here saves to the cascade without a navigation. Two secondary links jump to the month plan or the goal card if you want deeper context. Closes with Escape, the X button, or clicking outside.
• Backup-reminder modal: in the rare case the save banner is dismissed too many times.

Before you have entered anything, the steps render with empty-state hints instead of content. Each one explains what will appear and how to add it. Empty states are warm, not blank-page-anxiety-triggering.

← swipe through empty states →

The app is responsive. Most users do their daily 5-minute reflection on their phone, then the bigger weekly + monthly + quarterly sessions on a desktop or tablet. The mobile layout collapses the stepper into a horizontal scroll, stacks the ob-bar lead above the actions, and tightens the cadence pills.

← swipe through mobile views →

Every one of the 26 palettes has a dark variant. The default dark palette is Brushed Steel (cool grey, no mesh gradient). The dark variant is true-dark (near-black background, contrast-checked text), not just a tinted overlay.

← light vs dark samples →

Switch via Settings → Appearance → Mode toggle, or via the small theme swatch in the topbar. The change is immediate and persists across sessions.

The small printer icon in the top-right of each step (next to the cadence chip and the step number) opens the print dialog formatted for the current screen. The browser's "Save as PDF" option in the print dialog gives you a printable PDF of just that step. Useful for:

• Quarterly review on paper. Print the Quarter plan + the Year overview before a 90-minute thinking session away from the screen.
• Sharing your plan with a partner or coach without giving them app access.
• Archive at year-end. Print the Wins page as a PDF and drop it in your year archive folder.

The print stylesheet is designed for one purpose per page: Georgia serif headings, generous margins, hidden chrome (no topbar, no banners, no stepper). The output looks like a typed brief, not a screenshot.

Tip. On dark themes, the print output is forced to light (white background, dark ink) so you don't waste toner. The button is hidden on steps with no data yet, so an empty step won't generate a blank PDF.