Rowset — Sign-in Form

---
version: alpha
name: Rowset — Sign-in Form
colors:
  primary: '#1313A4'
  brand-yellow: '#FFDD3D'
  white: '#FFFFFF'
  soft-surface: '#F5F5FF'
typography:
  heading:
    fontFamily: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 30px
    fontWeight: 600
    lineHeight: 36px
  body:
    fontFamily: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
---

## Overview

The login view is deliberately quiet: a compact neutral form on white, framed by blue brand chrome. Green highlights the primary submit action and small navigation links within the form area. Captured October 8, 2026, in the public logged-out state.

## Colors

Measured source CSS uses deep blue #1313A4 and yellow #FFDD3D. White and pale lavender #F5F5FF provide quieter supporting surfaces. The green form action is a separate visual accent; no exact green token is claimed here. Yellow and lavender belong to the shared palette, not the central form surface.

## Typography

The inspected primary heading computes to 30px / 36px, weight 600, with -0.75px tracking. Its computed stack is InterVariable, Inter, ui-sans-serif, system-ui, sans-serif. Body text uses the separately sampled token above. Preserve the contrast between large display text and compact utility labels; these are desktop measurements, not fixed phone sizes.

## Layout

Center a narrow desktop column with the title and account-creation link above the bordered card. On mobile, preserve comfortable inset margins and full-width fields and actions. The opening viewport includes the complete form and beginning of the footer.

## Elevation & Depth

The form card uses a very subtle edge and shallow separation from the white canvas. Keep this low-contrast framing quieter than the green primary action.

## Shapes

Use gently rounded fields and buttons inside a subtly rounded card. The surrounding brand tile stays square; avoid oversized pill controls.

## Components

Place password recovery beside the password label. Stack the green sign-in action, secondary passkey button, divider, then Google and GitHub provider buttons. Maintain consistent control widths and clear visual separation between password and alternative methods.

## Do’s and Don’ts

Keep the recovery affordance easy to discover without competing with the primary action. Do not claim authentication, provider redirects, error messages, or passkey prompts were tested. Static screenshots establish appearance only. Hover, focus, animation and submitted states remain untested. Check keyboard behavior and contrast in any adaptation; this is not a full accessibility audit.