Screen Studio — dark email account entry

---
version: alpha
name: Screen Studio — dark email account entry
colors:
  surface: '#000000'
  ink: '#f5f5f7'
  accent: '#4d2ff5'
  muted: '#86868b'
typography:
  display:
    fontFamily: BlinkMacSystemFont
    fontSize: 28px
    fontWeight: 600
    lineHeight: 32.0012px
  interface:
    fontFamily: BlinkMacSystemFont
    fontSize: 12px
    fontWeight: 449
    lineHeight: 15.96px
components:
  surface:
    backgroundColor: '{colors.surface}'
  accent:
    backgroundColor: '{colors.accent}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
  muted-copy:
    textColor: '{colors.muted}'
---

## Overview

A logged-out email and SSO entry framed as a dark Mac application window, with a violet continue action, dim utility tabs and atmospheric desktop background.

Source: https://screen.studio/dashboard. Captured 2026-10-11T06:05:19.841819+00:00. This is an observational design reference, not an official brand specification.

## Colors

surface: #000000; ink: #f5f5f7; accent: #4d2ff5; muted: #86868b. Tokens describe observed interface surfaces and text, not every pixel in artwork. Translucent values retain source alpha; perceived colors vary with their backing surface.

## Typography

Primary sample: “Screen Studio dashboard” uses BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif, 28px/32.0012px, weight 600, tracking normal. The corresponding mobile heading is 21px/25.0005px.

The interface token samples “[email protected]” at 12px/15.96px, weight 449, using BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Center a rounded black application window in the upper portion of a full-height background. Keep the app mark and account heading above a single email field and a same-width primary action. The utility tab strip sits above the form; support contact and return-home affordances remain subordinate.

The native desktop screenshot is 1440 × 1000px, prepared at a 1440px viewport. Mobile evidence was gathered at a 390 × 844px viewport.

At 390px, the window contracts to roughly 350px with 20px outer gutters; the heading reduces from 28px to 21px. The input and action remain stacked. The dim utility strip clips horizontally in the source mobile layout; the actual email form stays readable.

## Elevation & Depth

A thin border, subtle shadow and low-contrast blue-black background separate the modal-like window from the desktop. The violet action is the sole high-saturation functional element.

## Shapes

Use restrained rounded corners on the window and input, a compact rounded action, and Mac-style traffic-light decoration. Keep tabs visibly secondary to the form.

## Components

Only the initial logged-out screen was inspected. No email was entered, Continue and SSO were not submitted, and no validation or authenticated states were tested. This is account access, not an observed separate registration form.

## Do's and Don'ts

Do preserve the single-field hierarchy and meaningful labels. Do not label the decorative utility tabs as an authenticated dashboard or imply that SSO was tested. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.