Standard Notes — compact account sign-in popover

---
version: alpha
name: "Standard Notes \u2014 compact account sign-in popover"
colors:
  primary: rgb(8, 109, 214)
  text: rgb(46, 46, 46)
  muted: rgb(114, 118, 126)
  surface: rgb(244, 245, 247)
  on-primary: '#FFFFFF'
typography:
  input:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
      Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  action:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
      Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
rounded:
  panel: 4px
  control: 4px
spacing:
  panel-y: 8px
  field-inset: 12px
  action-x: 16px
  action-y: 6px
components:
  primary-action:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.action}'
    rounded: '{rounded.control}'
---

## Overview

A small in-context account popover, rather than a dedicated full-page login. It offers email/password sign-in without leaving the note workspace. This reference contains only the popover, not the surrounding empty offline workspace. The source is https://app.standardnotes.com/ and the canonical product homepage is https://standardnotes.com/.

The account menu was opened using public logged-out controls. The create-account state was also inspected: it shares this panel, fields and advanced-options treatment, replacing the submit action with Next and omitting the persistence checkbox. It is intentionally not a second reference.

## Colors

Use blue rgb(8, 109, 214) for the primary action, white for its label, near-black rgb(46, 46, 46) for input text and muted gray rgb(114, 118, 126) for icons. The desktop panel has a measured translucent rgba(255, 255, 255, 0.65) background; mobile changes to solid rgb(244, 245, 247). Preserve the visible blue focus outline around the initially focused email field.

## Typography

Use the platform system sans-serif stack recorded in the tokens, not the Lato marketing-page face. Inputs are 14px, weight 400, line-height 20px in both captures. The desktop sign-in button is 14px bold with 20px leading; on mobile it becomes 16px bold with 24px leading. Keep the panel title and Advanced options row visually stronger than input placeholders.

## Layout

At 1440 × 1000, the panel measures 320 × 259px and is anchored near the lower-left of the workspace at document coordinates (12, 710). At a 390 × 844 viewport it spans the full 390px width and measures 261px tall, at approximately y=564.2. The desktop action is 294 × 32px, expanding to 366 × 36px on mobile. Maintain 12px horizontal field insets and 8px panel vertical padding.

Capture boundary: `[data-popover] > div:has(> #account-menu)`. Each crop was measured after a warm-up full-page screenshot and taken from a fresh image at current coordinates. Do not hard-code the captured document y-position as application layout.

## Elevation & Depth

The desktop popover floats over the workspace with a fine border, pale translucent surface and soft shadow. The mobile panel is a flatter, full-width surface. The crop follows the element border box; external shadow overflow is not included as extra arbitrary padding.

## Shapes

Desktop panel and primary button have measured 4px corners. The mobile root panel becomes square, while the blue action keeps 4px corners. The password visibility control is circular. Do not round every internal row into separate pills.

## Components

- Header: back arrow followed by Sign in.
- Email and password: leading icons, blank placeholders, and an eye control for password visibility. Email is focused by the source when this state opens.
- Primary action: one full-width blue Sign in button.
- Persistence: a checked Stay signed in checkbox beneath the action, left unchanged.
- Advanced options: a collapsed gray row separated from the primary fields.

No credentials were entered and neither sign-in, Next, password visibility nor advanced options was activated. Validation, server responses, keyboard traversal and successful authentication remain untested.

## Do's and Don'ts

- Do preserve the compact field rhythm and the distinction between focused input, main action and secondary settings.
- Do adapt the anchor to available viewport space while retaining full field visibility.
- Don't include the surrounding workspace as part of the form reference.
- Don't claim a successful login or complete sign-up flow from an untouched initial form.