The colourful blob wash (92fe685) and the flat "straight ice" pass
(5d05592) both missed. Reverting both to get back to the icon-driven
navy palette before rebuilding the look as a proper frosted ice glass
design.
The colourful multi-blob wash was too much and still didn't read as
frosted glass. Replaced with a cleaner material approach:
- Backdrop is now flat with a single faint top highlight (the only
gradient left in it); the animated blobs and the four colour radials
are gone.
- Panels are crisper and more translucent: cards 62%, panels 66%,
sidebar 64% (now flat, no vertical gradient), study chrome 68%, tab
bar 70% — with a bright 1px edge (--glass-edge), a light-from-above
sheen (--glass-sheen) and the inset top highlight.
- Light mode is lighter: page #eef3fa pale ice, sidebar and cards
frosted white; dark mode is a flatter, slightly lighter navy
(#121a2c page, #1a2337 surfaces).
- Key-gate glows toned right down to match.
Contrast re-audited against the effective frosted backgrounds: 21/21 AA.
Suites: deck chrome 15/15, deck fixes 15/15, final ux 12/12, key gate
49/49, install sheet 64/64, retry 14/14, zoom 6/6, security 8/8, pwa
16/16.
The wash was far too faint for backdrop-blur to register, so the glass
read as flat navy. Now:
- The backdrop is a real colour field: four saturated blue/periwinkle/
cyan radial blobs over the navy base, plus two slow animated blobs at
higher opacity and less pre-blur, placed behind the content column.
- Surfaces are properly translucent instead of near-opaque: cards 62%,
glass panels 68%, sidebar 68%, list groups 70%, study chrome 72%,
tab bar 74%, mobile header 62%.
- Glass gets a specular top edge (inset 0 1px 0 --glass-top) so the
surface catches light like real glass.
- Light --text-subtle darkened to #55647f so text still clears AA on the
tinted glass (4.84:1 on the most saturated sidebar area).
Audit updated to the tinted backgrounds: contrast 21/21. Suites: deck
chrome 15/15, deck fixes 15/15, final ux 12/12, key gate 49/49, install
sheet 64/64, retry 14/14, zoom 6/6, security 8/8, pwa 16/16.
The icon's artwork is now the source of truth for the palette:
- frost-* is a navy-tinted neutral scale and accent-* is the icon's
snowflake blue; light page #f4f7fd / sidebar #e9eff9 / border
#dce4f1, dark page #0e1424 / sidebar #0a0f1c / surfaces #171f33.
- Surfaces are frosted glass: .card, .glass-panel, .list-group and
.sidebar-surface are translucent with backdrop-blur/saturate, and the
page wrapper no longer paints an opaque --page, so the fixed navy/blue
backdrop reads through the sidebar, cards, chrome and sheets.
- The primary CTA is the icon's blue (#1d61ab in light, #59a8f7 in dark
with ink text).
- The gate stage, fields and glows are navy/blue; viewport theme-color
and the manifest background/theme colour are #0e1424.
- The old monochrome snowflake tile is gone from the brand: sidebar,
header, key gate and empty state now show the real app icon (the
install sheet already did). Decorative snowflakes stay.
- --surface-strong is finally defined (it was referenced but never
declared, so those inputs had no fill).
- Icon URLs carry ?v=2 so browser favicon caches refetch.
Updated the contrast audit (21 pairs) and the deck-chrome token
assertions to the new theme. Verified: contrast 21/21, deck chrome
15/15, key gate 49/49, install sheet 64/64, final ux 12/12, retry
14/14, zoom 6/6, security 8/8, pwa 16/16, deck fixes 15/15.
Layout (desktop / lg+ only):
- 40px top padding above the page title.
- Deck grid uses minmax(320px, 1fr), so two cards fill the content width
and share a right edge with the header (same max-width container).
- Group headings only render once real folders exist; with none, a single
quiet "All decks" label replaces "Unorganized".
- Import JSON becomes a plain text button (mobile keeps the pill).
Deck cards (desktop):
- The whole card is a link; Study is a compact secondary button instead
of a full-width solid pill.
- The ... control is a 32px ghost button with a real ellipsis icon,
aligned to the title's centre.
- Meta line always shows the same fields (activities · runs / Not played
yet); the score is a separate quiet "Best 53%" stat.
- 12px rhythm between title/meta/tags/summary, 16px before the actions.
- Hover: lighter surface, stronger border, soft shadow and a 2px lift in
light mode (pointer devices only, so touch has no sticky hover).
Sidebar (desktop rail):
- All decks + Unorganized are views above the FOLDERS label; only
user-created folders sit under it.
- Count only on All decks. The mobile drawer is unchanged.
Theme:
- Dark: sidebar is a step darker (#181818 to #141414 vs #212121 page).
- Light: cards get a slightly stronger border (#e2e2e2) and a soft
shadow; the sidebar divider and edge shadow are stronger too.
- Medium difficulty darkened to #7a5300 (6.2:1 on the light chip).
Mobile is untouched: layout changes are behind lg: (or the desktop prop);
theme tweaks are shared tokens.
Verified: key-gate 49/49, install sheet 64/64, retry 14/14, zoom 6/6,
deck chrome 15/15, deck fixes 15/15, final ux 12/12, contrast 20/20,
security 8/8, pwa 16/16.
- API-key gate is now a fixed, out-of-flow overlay (inset-0, overflow
hidden, overscroll-none) with its own internal scroller, so the document
has no scrollable height on phones. It can't be panned or bounced.
- Home/create mains are flex columns with min-h-dvh and a flex-1 content
area, and the empty state's mobile padding was trimmed, so a short/empty
library is exactly viewport height instead of overflowing by ~76px.
Long pages (the create form, decks) still scroll normally.
- html/body get overscroll-behavior: none to stop pull-to-refresh and
rubber-banding on fitting screens.
Verified with a scroll probe (gate and empty library: scrollHeight ==
viewport; create still scrolls) plus zoom 6/6, install sheet 64/64,
pwa 16/16, final-ux 12/12, retry 14/14, security 8/8, contrast 20/20.
- Viewport: maximum-scale=1 and user-scalable=no (app-like, no pinch or
double-tap zoom on phones).
- Mobile-only rule keeps every input/textarea/select at 16px so iOS
Safari's focus auto-zoom never triggers (it ignores user-scalable=no for
that). Deliberately unlayered so it beats the per-component Tailwind
sizes; desktop keeps the designed 12-14px fields.
New zoom suite (6 checks): viewport meta, gate input, settings key input,
notes textarea and every study-feed field at >= 16px on a phone, desktop
sizes unchanged. Install sheet 64/64, pwa 16/16, final-ux 12/12,
security 8/8, contrast 20/20.
- The study feed's progress header and bottom pager no longer use the old
navy glass: new .study-chrome class uses the neutral surface token
(same gray as the cards, #2f2f2f in dark), the neutral border
(8% white in dark, #e5e5e5 in light) and a neutral shadow.
- Close tile, streak pill and XP pill now use --surface-sunken /
--text-muted, matching the app's other buttons and chips; the close
glyph is the shared XIcon.
- Bottom pager: counter in --text, arrows in --text-muted.
- .glass (mobile header) no longer has the hardcoded #101720 navy; it is
now color-mix of the surface token. Removed the unused --color-night-*
tokens and the last night- usage (create screen sticky bar).
- Hidden the 'Swipe up' hint on desktop, where it collided with the
bottom pager.
New deck-chrome suite: 15/15 (computed surfaces/borders/text in both
themes, no navy); pwa 16/16, final-ux 12/12, security 8/8, contrast 20/20.
Steps
- iOS now uses the exact flow: Safari users get 4 steps (⋯ → Share/More →
Add to Home Screen → Add); non-Safari (CriOS/FxiOS/EdgiOS/in-app) get a
first 'Open this page in Safari' step and 5 total. The vague 'in some
browsers it's under…' wording is gone.
Chips and icons
- The ⋯ chip renders a single three-dot icon (icon-only pill) instead of
the icon plus an '⋯' character (which showed two sets of dots).
- The More chip uses a chevron-down icon instead of the rounded-square.
- The accent pill uses real iOS blue: #0A84FF dark / #007AFF light, still
the only coloured element.
- Steps and chips share one 16px type scale; chip labels are medium weight.
Typography and layout
- Numbers are small muted circles in a fixed 24px column, aligned with the
first text line via matching line-height.
- Removed trailing periods after chips; steps tightened.
- Bottom padding is calc(24px + env(safe-area-inset-bottom)) and a
secondary 'Maybe later' button sits below the steps.
- max-height 90dvh with inner scrolling; 36×4px low-contrast handle with
real swipe-down-to-close (momentum off, spring back).
- App card shows the hostname only (no port), truncated.
Themes
- Dark (default): layered surfaces #1c1c1e sheet / #2c2c2e card / #3a3a3c
chips with 8% white borders; subtle logo tile instead of solid white;
backdrop is 50% black with 4px blur.
- Light only when the app theme was explicitly set to light, ignoring the
system preference; borders #e0e0e0, chip fills #f2f2f2.
Also fixes a crash the test pressure exposed: a 429 (rate-limited)
/api/health response crashed Settings at health.vision.available.
fetchHealth now rejects non-OK/malformed responses so the dialog shows its
error banner instead of the app error screen.
Install-sheet suite now 64 checks; pwa/final-ux/security/contrast green.
- Disabled Continue is now the primary style at 45% opacity with
cursor: not-allowed; full opacity while validating and once text is
entered.
- Move "How do I get a key?" below the Continue button (small ? icon,
muted, underline on hover) and tighten input+button spacing.
- Shorten the subtitle to "One step to freeze your first deck." and
balance it.
- Replace the faint gradient with two real blurred blobs (top-right and
bottom-left, 120px blur, pointer-events: none, behind the card).
- Dark: page #0f0f0f, card #1a1a1a, 8% white border.
- Phone: 24px heading, 15px subtitle, wider card padding, 40px corner
buttons with safe-area-aware offsets, robust 100dvh centering.
- Modal: 480px wide with text-pretty steps, stronger tinted free-tier
callout, handle removed from the phone sheet.
- Tests: gate suite now 49 checks incl. disabled opacity, glow pseudo,
card separation and help-link placement; new state screenshots for
invalid/offline/validating in both themes.
- Add a theme toggle to the gate (sun/moon ghost button next to the help
button); it switches instantly and persists to localStorage.
- Strengthen the corner glows so the stage reads atmospheric in both themes
(bigger, slightly stronger radial gradients behind the card).
- Center the logo, heading, subtitle and footnote inside the card.
- Dark mode: replace the solid white logo tile with a subtle raised tile
(thin border, light snowflake); make the card only slightly lighter than
the near-black page with a low-opacity border and soft shadow.
- Disabled Continue keeps the primary fill at ~45% opacity with a crisp
label instead of a faded muddy one; fully solid once text is entered.
- Bigger 36px corner buttons and a visible "How do I get a key?" text link
under the input that opens the same modal.
- Shorten and balance the reassurance line.
- Help modal: step circles aligned to the first text line, emphasised
free-tier callout with a check icon, underlined links with an
external-link icon, muted medium-weight UI labels, 36px close button
aligned to the title.
- Gate test extended to 44 checks (theme toggle, text link, modal polish).
In user-key mode a browser with no stored Ollama key now gets a polished
gate instead of the app shell: one masked input with a show/hide toggle,
a single Continue button, inline validation errors, and a "?" help sheet
with the steps to a free key.
- Validates the draft key through /api/health (real 1-token probe) before
saving; invalid-key and network failures read differently.
- Key still lives only in this browser's localStorage; nothing server-side.
- Gate wraps /, /create and deck study; server-key and local-daemon modes
skip it; removing the key in Settings brings it back.
- Removes the now-redundant dashboard/create API-key banner.
- Monochrome corner glows (dark near-black / light near-white), 24px card,
48px field and button, gentle fade/slide-in, reduced-motion aware.
- Help modal: centred dialog on desktop, bottom sheet on mobile, closes via
X, Escape or backdrop.
- README and browser suites updated (34 gate checks, 15 key-flow checks,
12 shipped-default checks; ui/folders/docs/pwa/security/contrast green).
Next.js 15 app that turns photos, PDFs, DOCX/PPTX and text into a swipeable
feed of AI-generated activities (flashcards, multiple choice, true/false,
fill-in-the-blank, matching, ordering, short answer) using the user's own
Ollama models.
Highlights:
- All AI calls run in server route handlers; the browser never talks to Ollama.
- Bring-your-own-key mode (default): the key lives only in the browser and is
sent per-request; server, local-daemon and shared-key modes also supported.
- Client-side document extraction (pdf.js, mammoth, jszip) with scanned-PDF
page rendering for the vision model; notes stay in their original language.
- ChatGPT-style shell: collapsible sidebar / mobile drawer, neutral token-based
light + dark themes, folder organisation, PWA (manifest, SW, offline page).
- Strict JSON validation with zod + auto-repair, rate limiting, and request
guards (cross-origin, body-size, API-key sanitising).
- setup.sh bootstraps deps, .env.local and a production build.
Gitignore excludes .env*, the generated pdf.js worker and local scratch files.
