Plunk — dotted-grid account sign-in

---
version: alpha
name: Plunk — dotted-grid account sign-in
colors:
  primary: '#171717'
  text: '#171717'
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
  supporting:
    fontFamily: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
omitted:
- section: spacing
  reason: Measured geometry is documented in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes without inventing a global
    radius scale.
- section: components
  reason: Reference-specific composition is described in prose rather than an inferred
    token API.
---

## Overview

A monochrome sign-in screen with a dotted backdrop, Google/GitHub choices, labeled credentials and an inline password-recovery control.

Captured from https://next-app.useplunk.com/auth/login at 2026-10-14T06:06:10.492871+00:00. The primary image is the complete desktop page; mobile visual evidence is the 390 × 844 opening viewport.

## Colors

primary: `#171717`; text: `#171717`; surface: `#FFFFFF`. These are observed reference colors, not a complete brand palette. Neutral hex values summarize visually matching neutral surfaces; measured text samples are retained below.

## Typography

The primary sampled role is heading, using `Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`. Supporting text uses `Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`. Do not mistake a button sample for a measured page heading.

- `h1` “Welcome back”: 24px, weight 700, leading 32px.

## Layout

Use the same centered brand-and-card composition as registration, but lead with Welcome back and keep Forgot password aligned beside the password label. Provider options precede email entry, separated by an OR rule. End with a black Log in action and a registration link.

Desktop region/page: 1440.00 × 1000.00px at a 1440px viewport. Mobile region/page: 390.00 × 844.00px at a 390px viewport.

At 390px the card nearly fills the width with 16px gutters; controls narrow from 350px to 292px. The 24px heading is unchanged and the password-recovery link remains aligned on the label row.

## Elevation & Depth

A low shadow and delicate card border separate the form from the dot pattern. The initially focused email outline is the only strong secondary edge.

## Shapes

Rounded white card, restrained 6px buttons and fine divider lines; avoid decorative artwork competing with credentials.

## Components

Use the same centered brand-and-card composition as registration, but lead with Welcome back and keep Forgot password aligned beside the password label. Provider options precede email entry, separated by an OR rule. End with a black Log in action and a registration link.

All interactions beyond ordinary navigation, consent dismissal and source-media loading remain untested. No credentials, forms, accounts, trials or purchases were submitted.

## Do's and Don'ts

- Do preserve this reference's alignment, hierarchy and measured responsive changes.
- Do keep labels and supporting text readable; preserve intentional carousel peeks where described.
- Do replace source-specific prices, product examples, metrics and customer proof with your own verified content.
- Don't infer validation, hover behavior, animation timing or accessibility conformance from a static capture.
- Don't promote a sampled font or radius into an unsupported global design system.