Font Awesome — free-Kit email signup form

---
version: alpha
name: Font Awesome — free-Kit email signup form
colors:
  primary: rgb(116, 192, 252)
  text: rgb(24, 49, 83)
  surface: '#FFFFFF'
typography:
  form:
    fontFamily: cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  supporting:
    fontFamily: cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
omitted:
- section: spacing
  reason: Measured capture geometry is recorded in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes rather than inventing a global
    radius scale.
- section: components
  reason: This reference uses composition guidance in prose, not an inferred component-token
    API.
---

## Overview

A standalone free-Kit signup form with an email input, blue shadowed start action, explicit terms checkbox and a returning-user link.

Captured from https://fontawesome.com/start at 2026-10-13T06:07:32.749224+00:00. This reference isolates `#hero form`.

## Colors

Primary/accent: `rgb(116, 192, 252)`. Measured heading/form text: `rgb(24, 49, 83)`. White is an observed light surface. These are reference tokens, not a complete brand palette; artwork and secondary panels introduce additional colors.

## Typography

The principal measured family is `cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif`. Supporting sample uses `cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif`. Preserve the contrast between text roles rather than treating every sample as the body default.

The form base is 16px with 24px leading; labels, inputs and actions follow the measured Cera Round family.

## Layout

On desktop, place the descriptive label above a wide email field and a blue action to its right. Put legal consent below the input; provider attribution sits at the upper right and the existing-account link below the action. This creates an account/Kit entry point, not a newsletter opt-in.

Desktop region: 956.00 × 150.00px at a 1440px viewport. Mobile region/page: 309.25 × 227.56px at a 390px viewport. Each component has a separately measured full element crop at both widths.

At 390px the exact form is about 309px wide. It stacks label, email, wrapped legal agreement, full-width action, then attribution and returning-user link. No email was entered and no account or Kit was created.

## Elevation & Depth

Use a pale-gray surrounding surface and a dark-blue hard offset under the sky-blue action. Keep fields white and lightly outlined.

## Shapes

Inputs and action use generous rounded corners; the checkbox remains a small square independent of the input.

## Components

On desktop, place the descriptive label above a wide email field and a blue action to its right. Put legal consent below the input; provider attribution sits at the upper right and the existing-account link below the action. This creates an account/Kit entry point, not a newsletter opt-in.

Account controls are shown in their logged-out idle state. No credentials, account creation, provider login, trial, form submission or purchase was attempted.

## Do's and Don'ts

- Do retain the measured hierarchy, alignment and responsive changes described above.
- Do keep labels, legal choices and navigation text readable when adapting the design.
- Do replace source-specific copy, prices and customer proof with your own verified content.
- Don't infer hidden validation, focus states, motion timing or accessibility conformance from this screenshot.
- Don't copy decorative detail at the expense of the content structure.