Obsidian — Dark Minimal Account Sign-in

---
version: alpha
name: Obsidian — Dark Minimal Account Sign-in
colors:
  canvas: '#0F0F0F'
  text: '#EEEEEE'
  observed-1: '#FFFFFF'
  observed-2: '#1F1F1F'
  observed-3: '#A78BFA'
  observed-4: '#7C3AED'
typography:
  heading:
    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: 30px
    fontWeight: 500
    lineHeight: 36px
  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: 14px
    fontWeight: 500
    lineHeight: 24px
---

## Overview
A complete logged-out sign-in screen with a purple gem, centered narrow form, explicit email and password labels, password recovery and a full-width violet action. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## 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 h1 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", 30px / 36px, weight 500; supporting text uses 14px / 24px. Its corresponding mobile sample is 30px / 36px. 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
A 384px desktop form column sits within generous horizontal and vertical empty space. At 390px it narrows to 342px with 24px side gutters while preserving the vertical order and the 30px heading. Password recovery aligns with the password label; the alternate-account action sits beneath the submit button. Measured screenshot bounds: 1440 × 1000px desktop and 390 × 844px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
The canvas is almost black. Input fills are charcoal with thin borders; the default autofocus ring in this full-screen capture creates the strongest input edge. There is no surrounding raised card.

## Shapes
Compact rounded inputs and violet button, a faceted brand mark and a simple centered stack.

## Components
Email and password fields, Forgot password link, Sign in button and Create an account link. The fields were left empty. Recovery, authentication, validation, loading and error states were not exercised.

## Do's and Don'ts
Use visible labels and keep account recovery close to its field. Maintain a single primary action. Do not infer successful login or validation behavior from the empty form. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.