---
version: alpha
name: Simple Analytics — email-link sign-in page
colors:
  surface: '#FCFCFC'
  ink: '#2A373A'
  accent: '#FF4F64'
  soft: '#E7F4F4'
  primary: '#415659'
typography:
  primary:
    fontFamily: Space Grotesk
    fontSize: 25px
    fontWeight: 500
    lineHeight: 37.5px
  body:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28.8px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
---

## Overview

A sparse email-link login page with a thin outlined form, radio-style login-method selection, coral pill submit control and a pale-blue informational footer.

Source: https://dashboard.simpleanalytics.com/login. Captured 2026-10-08T06:04:37.427151+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed palette roles: surface: #FCFCFC; ink: #2A373A; accent: #FF4F64; soft: #E7F4F4; primary: #415659. These values come from computed source styles or inspected flat screenshot surfaces. Keep accent colors tied to their documented roles rather than tinting every text element.

## Typography

The primary sampled text uses "Space Grotesk" at 25px / 37.5px, weight 500, with a desktop width of 370.00px. The matching mobile sample uses 20.8px / 31.2px across 310.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Use a pale-blue header and a centered, thinly bordered login rectangle below. Place the heading above email-link/password choices, one email input, a wide coral action, an underlined manual-link option and a small signup prompt. Retain the large vertical gap before the four-column informational footer.

Full desktop page at 1440px width, document height 1572px. Mobile evidence is a 390×844px opening viewport unless otherwise stated.

Responsive evidence: At 390px the header navigation becomes a hamburger, the form border disappears and the input/action run within 40px side margins. The heading decreases from 25px to 20.8px; the Password choice wraps below the email-link choice. The lower footer is outside the mobile opening.

## Elevation & Depth

The form uses a fine outline rather than a raised shadow. Pale-blue header/footer bands frame an otherwise white page, and the coral submit pill is its strongest color. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The component root has measured radius 0px and padding 0px; individual wordmark shapes are source artwork. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

Email-link login is the initial selected state. Password mode and manual pasted-link mode were not activated; no email was requested. This is distinct from the product website signup design and is grouped under the same canonical site.

## Do's and Don'ts

- Do preserve the documented hierarchy, content order, and observed responsive changes.
- Do keep source labels and attribution with their associated controls, diagrams and quotations.
- Do treat prices, metrics and marketing claims as dated source content rather than verified outcomes.
- Don't invent interaction states, validation results, successful submissions or additional breakpoints.
- Don't copy low-contrast or undersized text blindly; improve readability when adapting the pattern.