Top Bar Check: #40 Norms In Preview

The top bar’s subtle role in usability often slips through the cracks - especially on preview builds. At #40, the spec demands strict alignment with design systems: a clean, unobtrusive placeholder copy that never overshadows the login flow, even in light mode. Here’s what matters:

• Visual fidelity: The placeholder text must mirror the exact copy in docs/product/refinements/40-top-bar-visual-spec-login.md, including micro copy like ‘Sign in’ and spacing cues.
• Accessibility: The bar must announce clearly via screen readers, with proper landmark roles and consistent tab order - no keyboard traps.
• Responsive behavior: At 320px width, no horizontal scroll from shell elements; header and nav remain aligned across devices.

Psychologically, users subconsciously trust interfaces that feel intentional. A mismatched placeholder disrupts perceived professionalism - like a misplaced signpost in a public space. That said, the real blind spot? Many assume the spec ends at visuals, but auth context matters: the login placeholder must never imply active sign-in without user action, avoiding confusion.

Don’t overlook contrast ratios in dark mode - a subtle shift can render the text invisible. The issue isn’t just about pixels; it’s about trust. If the bar feels off, users notice - even if they can’t name why.

Is your #40 top bar doing the quiet work it needs to? Check specs, test preview, and verify every line aligns - because in UX, the smallest detail sets the tone.