fix(desktop): quiet AuthGate, empty states, and list chrome

[tomymaritano]

First visual polish pass after v0.16.0. AuthGate stays (ADR 002 / #545). No new product surfaces.

Visual source of truth is in-repo only: tokens.css, existing desktop CSS/primitives, and docs/VISUAL_LANGUAGE.md. Confirmed 22 Aug 2026: dripnex.app is a GoDaddy parking page (black CTA, pale-blue tiles, Helvetica). dripnex.github.io/readide is 404. This PR does not match either. No new palette.

Visual changes

AuthGate (worst first-run screen)

• Before: Hardcoded zinc #09090b screen, blue-tinted mesh (#152036), 16px card radius, inverted ink/black submit (--text-primary on --bg-base), weak input focus, always-dark.
• After: Tokens throughout (--bg-base, --glass-bg, --radius-xl, --font-sans). Mesh colors come from surface tokens and follow data-color-scheme. Submit matches in-app Button primary (--accent / --accent-hover), not a parking-page black CTA. Input focus matches the Input primitive. Signup copy drops “Free to start.”
• Why: First-run was a one-off dark lander. Black CTA would copy GoDaddy, not the app. Flow is unchanged.

Empty states

• Before: 200px stub, Sparkles icon, “No matches found,” pinned filter reused “No notes yet,” Mac-only ⌘N, 48px editor icon.
• After: Centered 28px faint icon + 14/500 title + 12px hint. modAccel() prints ⌘ or Ctrl. Pinned empty is “Nothing pinned.” Search is “No matches.”
• Why: Sparkles and “found” are energetic. Pinned-with-notes-but-none-pinned was a copy bug.

Note list chrome

• Before: Header 16/600, row pad 12×16, accent timestamps, no search focus ring, stagger ignored reduced motion.
• After: --text-lg / 500 titles, 10×14 rows, muted timestamps, Input-style search ring, prefers-reduced-motion.
• Why: Accent on every timestamp steers the eye. Header was shoutier than the notes.

Editor chrome

• Before: Title turned accent on focus (16/600). Toolbar 32px hovering --bg-elevated on an elevated pane.
• After: Title stays --text-primary at 14/500. Toolbar 28×28, hover --bg-hover.
• Why: Title-as-accent is color directing. Toolbar was a size off the 28px chrome controls.

Docs

docs/VISUAL_LANGUAGE.md now records:

• Source order: tokens → this file → primitives → BRAND.md voice
• Explicit not sources: parking page, GitHub Pages 404, archived violet/Raycast draft
• Type, spacing, color, empty-state voice, AuthGate / list / editor rules
• tokens.css points at that file

Remaining issues filed

• Nested list marks use blue and violet #557 Nested list marks use blue and violet
• Settings MagicLinkFlow does not match AuthGate chrome #558 Settings MagicLinkFlow does not match AuthGate chrome
• Welcome wordmark and frosted accent wash need a brand call #559 Welcome wordmark and frosted accent wash need a brand call

Tomás — brand calls, not guessed

• Accent hue: shipped teal (#5eead4 / #0d8a80) vs BRAND.md muted gray. Left teal alone.
• AuthGate mesh: quieted and tokenized; brand says no gradients. Keep moving wash or a still surface?
• Font stack: --font-sans still includes Helvetica Neue as a fallback. Did not promote Helvetica to first family.
• Logo / wordmark: AuthGate still uses logo.png at 40px. Welcome still uses the accent wordmark (Welcome wordmark and frosted accent wash need a brand call #559).
• Site: parking page + 404. Real site is Now: public What's New + real dripnex.app #546. Not this PR.

Screenshots

Could not capture the Electron renderer here. Exact surfaces: AuthGate sign-in / sign-up / hydrating / sent; list empty / pinned / trash / search; editor empty, title focus, toolbar hover.

Checklist

• AuthGate kept
• Parking page / 404 not used as visual reference
• No new product features or palette
• No CI / release / version / iOS / Psynth / Linear
• No new tests
• Targets develop

  

[coderabbitai]

Warning

Review limit reached

@tomymaritano, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 57 minutes

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 16986f72-4f64-434f-92a4-7218c317e514

📥 Commits

Reviewing files that changed from the base of the PR and between 268d7c2 and adc5d3e.

📒 Files selected for processing (12)

• apps/desktop/src/renderer/components/NoteEditor.module.css
• apps/desktop/src/renderer/components/NoteEditor.tsx
• apps/desktop/src/renderer/components/NoteList.module.css
• apps/desktop/src/renderer/components/NoteList.tsx
• apps/desktop/src/renderer/components/auth/AuthGate.module.css
• apps/desktop/src/renderer/components/auth/AuthGate.tsx
• apps/desktop/src/renderer/components/auth/LoginBackdrop.module.css
• apps/desktop/src/renderer/components/auth/LoginBackdrop.tsx
• apps/desktop/src/renderer/components/editor/FormattingToolbar.module.css
• apps/desktop/src/renderer/ui/tokens/tokens.css
• apps/desktop/src/renderer/utils/modAccel.ts
• docs/VISUAL_LANGUAGE.md

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🎉 This PR is included in version 0.17.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀