---
version: alpha
name: Obsidian — Optional Account Registration Form
colors:
  canvas: '#0F0F0F'
  text: '#EEEEEE'
  observed-1: '#BCBCBC'
  observed-2: '#FFFFFF'
  observed-3: '#1F1F1F'
  observed-4: '#7C3AED'
typography:
  label:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto,
      Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  body:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto,
      Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
---

## Overview
An isolated dark registration form with an account-purpose explanation, full-name/email/password fields and a purple sign-up action, captured in the public Create an account state. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `form:has(#labeled-input-name)` from the source page.

## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. The near-black/charcoal base supports pale text and selective violet.

## Typography
The selected label sample uses ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 16px / 24px, weight 500; supporting text uses 16px / 20px. Its corresponding mobile sample is 16px / 24px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
The actual form is cropped, not the surrounding logo, page heading or alternate-auth link. Its width contracts from 384px at desktop to 342px on mobile. The explanatory text gains a line while all three fields and the primary action remain full-width and vertically stacked. Measured screenshot bounds: 384 × 392px desktop and 342 × 424px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Transparent form background inherits the near-black page. Filled charcoal fields use fine borders; the purple action remains flat and clear. Autofocus was blurred before the final component capture so the browser outline does not extend outside the measured crop.

## Shapes
Three low-radius rectangular fields followed by a rounded full-width action; the introductory paragraph is plain text, not a separate notice card.

## Components
Observed selector: form:has(#labeled-input-name). Reach the state through Create an account on the public account screen; the browser URL ends in #signup. The exact captured form includes Full name, Email, Password and Sign up. No values were entered and no account was created. Account creation is explicitly optional for using the core app.

## Do's and Don'ts
Explain why registration is useful before requesting identity information. Keep all fields on one simple axis. Do not imply that downloading or using the local app requires signup. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.