Plunk — dotted-grid account registration

---
version: alpha
name: Plunk — dotted-grid account registration
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 compact registration screen on a subtle dotted grid, with Google/GitHub choices above labeled email/password fields and a black primary action.

Captured from https://next-app.useplunk.com/auth/signup at 2026-10-14T06:06:06.368098+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` “Create an account”: 24px, weight 700, leading 32px.

## Layout

Center the small Plunk wordmark above a white bordered card. Place the title and subtitle first, then two provider buttons, an OR divider, labeled fields, black Create account action and the returning-user link. The initially focused email input has a visible focus ring.

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 leaves 16px outside margins. Inner text and controls narrow from 350px to 292px, while the 24px title remains unchanged. All form controls and the returning-user link fit in the inspected mobile frame.

## Elevation & Depth

A fine gray border and small shadow lift the white form from the dotted near-white backdrop.

## Shapes

A softly rounded card, 6px button corners, thin input outlines and a restrained double focus ring.

## Components

Center the small Plunk wordmark above a white bordered card. Place the title and subtitle first, then two provider buttons, an OR divider, labeled fields, black Create account action and the returning-user link. The initially focused email input has a visible focus ring.

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.