[b3hr4d]

What changed

A new look, from the B3Pay design system. B3Note now uses B3Pay's tokens (warm graphite neutrals, B3Pay amber, its radii, buttons, fields and notices) plus a B3Note layer of paper:

• Tailwind's zinc palette is remapped to B3Pay's graphite and brand to amber (bronze where it is text on a light ground), so the existing utility classes pick up the new look with few edits (frontend/src/styles.css).
• Notes are paper. Each note gets one of five pastel papers from its id, with a folded top-right corner: in the list (a stack of small sheets that rest at a slight tilt and lift under the pointer, the open one ringed in amber) and in the editor (a ruled sheet; the body is now 16/28 sans so text sits on the rules).
• Schibsted Grotesk and Martian Mono replace Inter and JetBrains Mono, bundled with Fontsource so no font request leaves the app.
• Empty states show a stack of blank paper, and waits use the animated mark instead of a spinner.
• New draft B3Note mark: B3Pay's mark with the amber node folded into a note, as B3Wallet and B3Forge change only the node. It's used in the header, favicons, app icons, the maskable icon and the README (light and dark). frontend/scripts/brand-icons.py now generates it.

On-device AI (frontend/src/lib/localAi.ts). Every assistant action and "Ask your notes" now runs in the browser by default:

• It uses Chrome's built-in Gemini Nano when the browser has it, otherwise Qwen2.5-1.5B-Instruct on the GPU with WebLLM.
• The model downloads once (about 1 GB for Qwen), and only after the user clicks "Download the model". The WebLLM code is a lazy chunk, so nothing loads until then.
• Note text never leaves the browser, so the assistant works with the end-to-end encryption on, unlike the LLM canister.
• The LLM canister stays as a second choice ("Internet Computer") when ai_enabled is on, with its consent dialog unchanged.
• Results show as blocks: dashed while drafting (with Stop for on-device), solid when ready, and always saying where they ran and which model.
• Settings gets an "On-device AI" section that can remove the downloaded model.

Why

The ask was to use our B3Pay design system, give the note app a cuter look and add AI. The canister's AI is off on mainnet because it needs plaintext. An on-device model gives users AI without leaving the encryption.

For reviewers

• CSP change (public/.ic-assets.json5): script-src adds 'wasm-unsafe-eval' (WebLLM compiles its WebAssembly) and connect-src adds huggingface.co, *.huggingface.co, *.hf.co and raw.githubusercontent.com for the one-time model download. Chrome's built-in model needs none of this. If we'd rather not widen the CSP, the WebLLM fallback can be dropped and on-device AI kept for Chrome only.
• The mark is a draft. B3Pay's logo is locked, so the B3Note mark needs sign-off from Donya and the CEO and should then come from tools/logo/build.js.
• Design system: the B3Note design system artifact documents the tokens, rules and 21 components this PR implements. It is private, so share it before asking others to review it: https://claude.ai/artifact/3iUrs9c9fb6QMjSEGmDXkB
• New dependencies: @fontsource-variable/schibsted-grotesk, @fontsource/martian-mono, @mlc-ai/web-llm@0.2.85.

Testing

• pnpm typecheck, pnpm test (52 passing, including 4 new tests for the on-device prompts), vite build and Prettier all pass.
• Clicked through the app against a local PocketIC with the mock LLM (scripts/pocketic-dev.ts): landing, guest sign-in, creating and editing notes, tags, the AI panel on both engines, applying a result, Ask, Settings, light and dark themes, and phone width.
• Not yet tested with a real on-device model. The on-device path was exercised with a stand-in for Chrome's LanguageModel; Gemini Nano and Qwen weren't downloaded, so answer quality and speed on real hardware still need a try. Internet Identity and share links weren't exercised locally (the PocketIC setup has no II).

🤖 Generated with Claude Code