Font Awesome — searchable icon-library section

---
version: alpha
name: Font Awesome — searchable icon-library section
colors:
  primary: rgb(24, 49, 83)
  text: rgb(24, 49, 83)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 40px
    fontWeight: 700
    lineHeight: 46px
  supporting:
    fontFamily: cera-round-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 900
    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 icon-library explorer with a navy style rail, rounded search field, compact style metadata and a large regular grid of navy icons.

Captured from https://fontawesome.com/ at 2026-10-13T06:08:53.189618+00:00. This reference isolates `#icon-library`.

## Colors

Primary/accent: `rgb(24, 49, 83)`. 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.

- `h2` “Thousands of icons. Make them your own.”: 40px, weight 700, line-height 46px, color `rgb(24, 49, 83)`.

Matching mobile text is 30.625px with 35.2188px leading.

## Layout

Center the section eyebrow and title. On desktop align the navy vertical style rail beside a pale-gray explorer panel containing search, style metadata, a twelve-column icon grid and compact display controls. The captured selection is Classic/Solid; other tab and animation behaviors are untested.

Desktop region: 1440.00 × 773.47px at a 1440px viewport. Mobile region/page: 390.00 × 1160.95px at a 390px viewport. Each component has a separately measured full element crop at both widths.

At 390px the vertical rail becomes a horizontal style strip above the explorer. The grid changes to five columns, metadata wraps and bottom controls wrap into two rows. The inspected crop excludes the separate sticky page navigation; only the library section is included.

## Elevation & Depth

Flat gray explorer surface and white icon cells contrast with a solid navy style rail. Thin cell dividers organize the grid without individual drop shadows.

## Shapes

Round the explorer and style-rail containers, keep icon cells rectangular, and use a pill-shaped search field.

## Components

Center the section eyebrow and title. On desktop align the navy vertical style rail beside a pale-gray explorer panel containing search, style metadata, a twelve-column icon grid and compact display controls. The captured selection is Classic/Solid; other tab and animation behaviors are untested.

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.