Every UI surface in the app

Every visit to the app starts here (in the beta). A single input field labelled Beta password, a soft cream background, an Unlock button. The app remembers you for the browser session, so after the first unlock the gate does not appear again 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 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 how you move through the cascade. Eight pills: Values, Purpose, Life Areas, Vision, Goals, Execute, Habits, Insights. A ninth, Wins (the Wall of Wins), joins the row on its own once you have earned your first achievement. 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 switches to showing the next cadence event due.

When a change upstream has flagged downstream steps as out of date, an amber "Review N" chip appears on the ob-bar and 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.

Together the three places show you exactly 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 this build is switched off. 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, short-lived): 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 worth 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. They are different modals with different purposes. The welcome carousel explains the app; the beta-welcome modal is where you accept 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 here saves to the cascade without leaving the screen. 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 friendly, and they never leave you facing a blank page.

← swipe through empty states →

Every one of the 33 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 (tooltip: "Print or save this view as a clean PDF") does not print the screen. It builds a purpose-made paper layout from your data, then opens the print dialog; the browser's "Save as PDF" option gives you a file instead of paper. Each major view has its own layout:

• Daily, weekly, month, quarter, and year plans print as checklist-style sheets: priorities with checkbox squares, deliverables, milestone tables with Traffic Light dots, and the matching reflection or check-in prompts.
• The Habit Garden prints a year grid, one page per habit, with the identity line, Trigger / Reward / Lazy-day facts, and streak stats.
• The Wall of Wins prints as a chronological keepsake grouped by year.
• Values prints a frameable card: your top 5 ranked values plus your purpose statement, large and centered.

Useful for a Quarter check-in on paper, sharing your plan with a partner or coach without giving them app access, or printing the Wall of Wins for the year archive. Steps without a custom layout (Purpose, Life Areas, Vision, Insights) print as a clean version of the screen with the app's buttons and menus hidden.

Every page carries a small Goals & Progress watermark (the circular logo plus the wordmark) in the footer. Empty fields print as ruled lines you can fill in by hand, never as blanks or errors.

Tip. The printout is always white paper with near-black ink, whatever theme you use on screen, so dark mode does not waste toner.