Foundation

Type system

Readable hierarchy

RequiredVisual system
ContractType system
Job
Readable hierarchy
Requirement
must specify
States / rules
Locked pairing; scale steps; leading/tracking per step; 14px floor; sm behavior of the scale
Specified means
Faces, weights, steps, and sm rule are written
Hardest context
14px-equivalent on sm dark
Example

Inter body + Instrument Serif titles, 14px min

Counter-example

Type roles named with no scale

Shared guidance

Building Blocks role

Building Blocks can provide semantic guidance, examples, and reusable hooks.

Product obligation

The product still maps roles to its own theme and documents exceptions.

How this lives in Building Blocks

Representation: Shared foundation / token / behavior guidance.

Building Blocks should provide shared guidance, semantic roles, examples, and reusable implementation hooks where appropriate. Each product maps those roles to its own theme and documents any justified exceptions.

Specify hierarchy as a system, not a font sample.

Role pairing

Lock body/display roles and where each is allowed.

Scale

Write the steps, weights, leading, and tracking rather than “use a type scale.”

Minimum readable size

Respect the 14px-equivalent floor from the source contract.

Responsive behavior

Document what compresses or changes at sm rather than scaling everything proportionally.

Content stress

Exercise long labels, numbers, headings, and dense UI—not only marketing copy.

Exercise these contexts
  • 14px-equivalent on sm dark
  • Long navigation labels
  • Dense form help and error text

Do not specify the easy case only.

The source checklist’s hardest-context test is part of what “specified” means: 14px-equivalent on sm dark.

On-spec signal

Inter body + Instrument Serif titles, 14px min

Failure signal

Type roles named with no scale

Catalog connection

The product-local Catalog should show this row’s actual state for that product using the Catalog contract. Building Blocks documentation can define the baseline, but it does not make a product’s row Specified, Designed, or In code by itself.

See the Catalog contract →