Font Awesome — tier cards and feature matrix

---
version: alpha
name: Font Awesome — tier cards and feature matrix
colors:
  primary: rgb(255, 212, 59)
  text: rgb(240, 241, 243)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 40px
    fontWeight: 600
    lineHeight: 45px
  supporting:
    fontFamily: cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 17.5px
    fontWeight: 400
    lineHeight: 26.25px
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 pricing page with a dark navy header, monthly/annual selector, three color-coded plan cards, enterprise strip and an expanded feature comparison matrix.

Captured from https://fontawesome.com/plans at 2026-10-13T06:07:11.845108+00:00. This reference contains the complete desktop page.

## Colors

Primary/accent: `rgb(255, 212, 59)`. Measured heading/form text: `rgb(240, 241, 243)`. 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` “Pricing”: 40px, weight 600, line-height 45px, color `rgb(240, 241, 243)`.
- `h2` “StarterCloud”: 28px, weight 600, line-height 31.5px, color `rgb(24, 49, 83)`.
- `h2` “Solo”: 28px, weight 600, line-height 31.5px, color `rgb(24, 49, 83)`.
- `h2` “Team”: 28px, weight 600, line-height 31.5px, color `rgb(24, 49, 83)`.
- `h2` “Enterprise”: 21px, weight 600, line-height 26.25px, color `rgb(24, 49, 83)`.
- `h3` “Frequently Asked Questions”: 21px, weight 600, line-height 23.625px, color `rgb(24, 49, 83)`.
- `h2` “Font Awesome Font Awesome           Go Make Something Awesome”: 16px, weight 600, line-height 22px, color `rgb(255, 255, 255)`.
- `h3` “Awesomeverse”: 14px, weight 600, line-height 19.25px, color `rgb(195, 198, 209)`.
- `h3` “Font Awesome”: 14px, weight 600, line-height 19.25px, color `rgb(195, 198, 209)`.
- `h3` “Community”: 14px, weight 600, line-height 19.25px, color `rgb(195, 198, 209)`.
- `h3` “Help”: 14px, weight 600, line-height 19.25px, color `rgb(195, 198, 209)`.

Matching mobile text is 30.625px with 34.4531px leading.

## Layout

Place the billing selector above three white cards; highlight the center Solo plan in yellow while Starter uses blue and Team uses green. Continue with enterprise contact, four concise benefit summaries, the comparison matrix, FAQs and a dark footer. The captured state is annual billing; no billing toggle or purchase was exercised.

Desktop region: 1440.00 × 4290.00px at a 1440px viewport. Mobile region/page: 390.00 × 5674.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 header becomes an icon row and plan cards stack, retaining the centered annual selector. The source reports 424px scroll width at a 390px viewport; audit identified a reCAPTCHA badge and support-widget decoration extending beyond the viewport, not clipped pricing text in the reviewed opening/bottom captures. Do not reproduce that widget overflow.

## Elevation & Depth

Use contrast between the navy header, pale page surface and white cards. The featured tier has a yellow border and matching column tint in the comparison table.

## Shapes

Round card and segmented-control corners; keep dense table cells rectangular for scanning.

## Components

Place the billing selector above three white cards; highlight the center Solo plan in yellow while Starter uses blue and Team uses green. Continue with enterprise contact, four concise benefit summaries, the comparison matrix, FAQs and a dark footer. The captured state is annual billing; no billing toggle or purchase was exercised.

This is one observed static state. Menus, filtering, accordions, billing changes and animation outcomes are not claimed as tested unless explicitly stated above.

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