---
version: alpha
name: Font Awesome — friendly icon-pattern sign-in
colors:
  primary: rgb(255, 212, 59)
  text: rgb(24, 49, 83)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 32px
    fontWeight: 600
    lineHeight: 38px
  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 friendly sign-in page with a white centered card, yellow smile icon, icon-pattern background, large outlined fields and a yellow shadowed action.

Captured from https://fontawesome.com/sessions/sign-in?next=%2F at 2026-10-13T06:07:02.924296+00:00. This reference contains the complete desktop page.

## Colors

Primary/accent: `rgb(255, 212, 59)`. 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.

- `h1` “Sign In to Your Account”: 32px, weight 600, line-height 38px, color `rgb(24, 49, 83)`.

Matching mobile text is 24.5px with 29.0938px leading.

## Layout

Stack the welcome eyebrow, smile icon, heading and reassurance copy above Email and Password. Use an icon inside each field. Put the yellow sign-in action above the remember-me/recovery row, with registration outside the card and a dark footer below. The email field is focused by the source on load.

Desktop region: 1440.00 × 1018.00px at a 1440px viewport. Mobile region/page: 390.00 × 958.00px at a 390px viewport. The primary image is full-page; the standard mobile image covers the opening viewport, with additional audit views only where noted.

At 390px the card sits inside about 25px gutters, keeping the form in one column. Remember-me and password recovery remain on a single row. The dark footer stacks its links. Only the initial empty form and its source-provided focus ring were inspected.

## Elevation & Depth

A low-contrast repeated line-icon backdrop separates the plain white card. A navy offset beneath the yellow button supplies the strongest depth.

## Shapes

Use softly rounded card corners, rounded outlined fields and a pill-like focus outline around the email input.

## Components

Stack the welcome eyebrow, smile icon, heading and reassurance copy above Email and Password. Use an icon inside each field. Put the yellow sign-in action above the remember-me/recovery row, with registration outside the card and a dark footer below. The email field is focused by the source on load.

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.