Loops — compact work-email registration screen

---
version: alpha
name: Loops — compact work-email registration screen
colors:
  surface: '#fcfcfd'
  ink: '#1c2024'
  accent: '#fc5200'
  primary: '#1c2024'
typography:
  primary:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: 800
    lineHeight: 36px
  body:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  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 pale-gray registration screen with an orange ring mark, bold Inter heading, three labeled fields and a black action above a bordered Google option.

Source: https://app.loops.so/register. Captured 2026-10-09T06:23:25.252242+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 14px/20px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 30px/36px.

## Layout

Center the orange symbol and heading above a narrow white card. Stack work email, first name and company fields, then the dark sign-up action, divider and Google alternative. Keep the existing-account link immediately beneath the heading and a small help control in the lower-right corner.

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 30px heading is retained at 390px. The form becomes nearly full width with generous inner side padding, while the logo and heading stay centered. The mobile opening includes all three fields and both actions.

## Elevation & Depth

The thin border and light bottom shadow separate the form from a cool off-white background. Rounded inputs remain subtle; the orange logo is the only saturated brand accent. 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

Fields were empty; visible names and company text are source placeholders. No validation, Google flow, registration submission or help interaction was performed.

## 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.