folk — shared email authentication entry

---
version: alpha
name: folk — shared email authentication entry
colors:
  surface: '#ffffff'
  ink: '#202020'
  muted: '#626262'
  control: '#f1f1f1'
typography:
  display:
    fontFamily: Uxum Grotesque
    fontSize: 32px
    fontWeight: 500
    lineHeight: 35.2px
  interface:
    fontFamily: Inter var
    fontSize: 15px
    fontWeight: 500
    lineHeight: 19px
components:
  surface:
    backgroundColor: '{colors.surface}'
  control:
    backgroundColor: '{colors.control}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
  muted-copy:
    textColor: '{colors.muted}'
---

## Overview

A shared email entry screen with a narrow form on white and a large textured CRM product panel; on mobile the product artwork disappears and the form centers.

Source: https://app.folk.app/login. Captured 2026-10-11T06:08:02.849474+00:00. This is an observational design reference, not an official brand specification.

## Colors

surface: #ffffff; ink: #202020; muted: #626262; control: #f1f1f1. 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: “What's your email?” uses "Uxum Grotesque", "Inter var", "Inter var Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 32px/35.2px, weight 500, tracking -0.026px. The corresponding mobile heading is 32px/35.2px.

The interface token samples “Continue with email” at 15px/19px, weight 500, using "Inter var", "Inter var Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji". These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Divide desktop into a white form half and a textured visual half. Center the small folk mark, email prompt, one outlined field and rounded continuation control in a narrow column. A ghost Back to login control and compact legal note sit underneath.

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

At 390px the artwork is hidden. The form keeps approximately 293px width with about 48px side gutters, and the 32px heading remains the same size. Whitespace above and below keeps the single task calm.

## Elevation & Depth

The form surface stays flat white. Texture and a framed product board create depth only in the secondary right panel, keeping authentication controls visually quiet.

## Shapes

A squared email field contrasts with fully rounded continuation and back controls. Preserve the brand mark as a separate small circular element.

## Components

Reached by choosing Continue with email on the public Get started with folk screen. Both pricing Try for free and marketing Login route here. No email was entered and no continuation request, account creation or trial was performed. This shared screen counts once.

## Do's and Don'ts

Do retain clear separation between identity entry and legal context. Do not imply successful sign-in, independently tested Google authentication or separate sign-up completion. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.