---
version: alpha
name: Font Awesome — icon-toolkit homepage
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: 48px
    fontWeight: 700
    lineHeight: 54px
  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

An icon-toolkit homepage with a centered search hero framed by icon mosaics, navy typography, yellow tactile actions, product cards, a live-library preview and colorful plan panels.

Captured from https://fontawesome.com/ at 2026-10-13T06:06:48.448291+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` “Icons. Easy. Done.”: 48px, weight 700, line-height 54px, color `rgb(24, 49, 83)`.
- `h3` “Icon Wizard 2.0”: 24px, weight 700, line-height 27px, color `rgb(24, 49, 83)`.
- `h3` “New Animations”: 24px, weight 700, line-height 27px, color `rgb(255, 255, 255)`.
- `h3` “Icon Upload”: 24px, weight 700, line-height 27px, color `rgb(24, 49, 83)`.
- `h2` “Thousands of icons. Make them your own.”: 40px, weight 700, line-height 46px, color `rgb(24, 49, 83)`.
- `h2` “One line of code. That's it.”: 40px, weight 700, line-height 46px, color `rgb(24, 49, 83)`.
- `h2` “Your stack. Your tools. Your AI agents, too.”: 40px, weight 700, line-height 46px, color `rgb(24, 49, 83)`.
- `h2` “Proudly Open Source”: 40px, weight 700, line-height 46px, color `rgb(24, 49, 83)`.
- `h2` “Plans for Every Project”: 40px, weight 700, line-height 46px, color `rgb(24, 49, 83)`.
- `h3` “Starter”: 24px, weight 700, line-height 27px, color `rgb(24, 49, 83)`.
- `h3` “Solo”: 24px, weight 700, line-height 27px, color `rgb(24, 49, 83)`.
- `h3` “Team”: 24px, weight 700, line-height 27px, color `rgb(24, 49, 83)`.
- `h2` “The Web's Default Icon Set, Used on Over 200 Million Sites”: 16px, weight 900, line-height 18px, color `rgb(255, 212, 59)`.
- `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 36.75px with 41.3438px leading.

## Layout

Start with a blue announcement band and a two-row product/navigation header. Center the hero label, short headline, search field and paired actions between icon mosaics. Continue into new-product cards, the icon-library explorer, Kit signup, code integration, open-source story, plan cards and dark footer.

Desktop region: 1440.00 × 6648.00px at a 1440px viewport. Mobile region/page: 390.00 × 8972.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 reduces to menu, flag and sign-in icons, and the decorative hero icon mosaics disappear. The announcement wraps while the hero stays centered; the search occupies almost the full content width and actions remain side by side. Lower responsive behavior is only claimed for separately captured components.

## Elevation & Depth

Use flat navy and pastel surfaces plus crisp downward shadows on buttons. Product cards provide stronger color than the white hero.

## Shapes

Pill search fields, rounded rectangular buttons and repeated icon tiles establish a friendly technical vocabulary.

## Components

Start with a blue announcement band and a two-row product/navigation header. Center the hero label, short headline, search field and paired actions between icon mosaics. Continue into new-product cards, the icon-library explorer, Kit signup, code integration, open-source story, plan cards and dark footer.

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.