folk — joined lead-intake CTA with stacked mobile controls

---
version: alpha
name: folk — joined lead-intake CTA with stacked mobile controls
colors:
  surface: '#ffffff'
  ink: rgba(3, 2, 0, 0.89)
  action: '#21201c'
typography:
  display:
    fontFamily: Uxumgrotesque
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
  interface:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
components:
  surface:
    backgroundColor: '{colors.surface}'
  action:
    backgroundColor: '{colors.action}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

A sparse conversion section with a centered two-line heading and joined work-email, team-size and start action controls that become a stacked mobile form.

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

## Colors

surface: #ffffff; ink: rgba(3, 2, 0, 0.89); action: #21201c. 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: “Your entire sales motion.
One platform.” uses Uxumgrotesque, sans-serif, 64px/64px, weight 500, tracking -1.472px. The corresponding mobile heading is 32px/32px.

The interface token samples “Start for free” at 14px/21px, weight 400, using Inter, Arial, sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Separate the section from preceding content with a thin horizontal rule. Center the two-line promise and leave a deliberate gap before the compact joined form. Align email, team-size select and the dark action to a shared desktop height.

The native desktop screenshot is 1440 × 612px, prepared at a 1440px viewport. It contains only `.section_cta`. The measured element bounds are 1440.00 × 611.00px at desktop and 390.00 × 531.00px at 390px. Root padding is 0px on desktop and 0px on mobile.

At 390px the heading reduces from 64px to 32px. Inputs stack at nearly full width with roughly 16px gutters; the action becomes a large dark pill. The component height is about 611px desktop and 531px mobile.

## Elevation & Depth

No shadow is needed. Subtle translucent field fill and a solid near-black action provide sufficient contrast on white.

## Shapes

Desktop controls are joined rectangular units. Mobile fields remain rectangular, while the final action takes a pronounced pill radius.

## Components

The form was inspected with empty fields only. It asks for work email and team size, so this is a lead-intake CTA, not a completed authentication form or newsletter. Validation, routing, trial start and submissions were not tested.

## Do's and Don'ts

Do keep form purpose obvious and maintain equal visual hierarchy between email and team size. Do not label this as an auth screen or claim conversion performance. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.