Harvest — Compact Cream Login with Green Action

---
version: alpha
name: Harvest — Compact Cream Login with Green Action
colors:
  ink: '#1D1E1C'
  sample-1: '#343533'
  sample-2: '#FFFFFF'
  sample-3: '#188433'
  sample-4: '#616261'
  sample-5: '#2A59C1'
  surface-6: '#FFF8F1'
typography:
  heading:
    fontFamily: Muoto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 32px
    fontWeight: 500
    lineHeight: 40px
  body:
    fontFamily: Muoto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 18px
    fontWeight: 500
    lineHeight: 40px
---

## Overview
A compact Harvest login screen: centered wordmark and title, pale cream form panel, Google option, email/password controls, green submit action and SAML SSO link. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot covers the full desktop page; the mobile screenshot covers the opening viewport only.

## Colors
Opaque token values come from computed CSS samples in this reference. The sampled-canvas token, when present, is a screenshot pixel sample. Gradients, alpha fills, photography and artwork are described visually rather than reduced to a single invented color.

## Typography
The computed heading sample (Sign in to Harvest) uses Muoto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, 32px, weight 500, leading 40px. Supporting text uses Muoto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif at 18px / 40px. The matching mobile heading-category sample is 32px / 40px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
The desktop form stays narrow and centered in a large white canvas, with separate account-creation and recovery links beneath. At 390px the panel nearly fills the width with side gutters; the 32px title stays the same size and footer links wrap. This is a materially different UI from the marketing signup page. Desktop image: 1440 × 1000 px. Mobile viewport: 390 × 844 px; isolated mobile components may be taller than the viewport. Two measured widths do not establish exact CSS breakpoints.

## Elevation & Depth
The cream panel uses an orange-tinted fine border, while controls have light gray edges. The captured email field has a dark focus outline.

## Shapes
Rounded rectangular controls and panel corners remain modest. The full-width green action is rectangular rather than the marketing site’s black capsule.

## Components
Google sign-in, work email, password, Sign in, SAML SSO, account creation and recovery links. Empty default form only. Submission, SSO, Google authentication and recovery were not tested.

## Do’s and Don’ts
Keep recovery and alternate SSO discoverable but subordinate. Retain a visible keyboard-focus treatment when adapting; keyboard and screen-reader behavior were not audited. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.