Loops — email-first sign-in screen

---
version: alpha
name: Loops — email-first sign-in screen
colors:
  surface: '#fcfcfd'
  ink: '#1c2024'
  accent: '#fc5200'
  primary: '#1c2024'
typography:
  primary:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: 800
    lineHeight: 36px
  body:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: 800
    lineHeight: 36px
  control:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 0px
---

## Overview

A minimalist email-first login card with orange branding, a black sign-in action, an outlined Google alternative and ample pale-gray whitespace.

Source: https://app.loops.so/. Captured 2026-10-09T06:24:59.047553+00:00. This guide describes the observed page, not an official brand specification.

## Colors

Observed surface and computed-style palette: surface: #fcfcfd; ink: #1c2024; accent: #fc5200; primary: #1c2024. Keep the documented accents distinct from neutral copy and form surfaces. Decorative artwork contains additional tones not represented by these core tokens.

## Typography

The primary sampled text uses Inter, sans-serif at 30px/36px, weight 800, with normal tracking. The body sample uses Inter, sans-serif at 30px/36px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 30px/36px.

## Layout

Center the brand symbol and bold sign-in heading above a narrow bordered card. Include a single work-email field, full-width dark action, horizontal divider and Google option. Place account creation as an inline helper below the title rather than inside the form.

The main screenshot records a 1440px-wide desktop page with a document height of 1000px. Mobile evidence is the opening 390×844px viewport, not a complete mobile-page audit.

The card expands toward the mobile viewport width while keeping its controls inset. Heading, email input and both sign-in choices remain visible in the opening viewport. No password field is present in this initial step.

## Elevation & Depth

Use a faint border and understated shadow around the white card; avoid heavy elevation on the surrounding page. The black action and orange mark anchor an otherwise neutral screen. Exact shadow blur and motion easing were not measured.

## Shapes

The sampled action has a computed corner radius of 0px and padding 0px. Treat additional spacing or breakpoint choices as adaptation decisions, not measured source constants.

## Components

Only the initial logged-out email step was inspected. Do not infer a password, magic-link delivery or successful authentication from this screen. No email was entered and no provider action was triggered.

## Do's and Don'ts

- Do preserve the documented hierarchy and observed mobile content order.
- Do keep field labels, source attribution and alternative actions visibly associated with their content.
- Do treat prices, metrics and testimonials as dated source content, not verified results.
- Don't infer unseen interaction states, successful authentication or application behavior.
- Don't reproduce low-contrast text without checking accessibility in the new implementation.