Hoefler & Co. — Color-Block Type Specimens

---
version: alpha
name: Hoefler & Co. — Color-Block Type Specimens
description: 'An editorial type-foundry landing page that turns font specimens into
  a flush, full-width mosaic: charcoal navigation, pastel italics, steel-blue numerals,
  orange and amber banners, serif descriptions and bold sans-serif labels. Three-column
  and two-to-one desktop rows stack into full-width mobile panels, ending in a cartographic
  font carousel.'
colors:
  primary: '#47E83A'
  surface: '#F5F5F5'
  on-surface: '#333333'
  header: '#232323'
  developer-panel: '#1D2026'
  italic-panel: '#EDE7EB'
  numeral-panel: '#8599B6'
  orange-panel: '#F87926'
  symbol-panel: '#454E60'
  amber-panel: '#FFB645'
  blue-panel: '#2875A1'
  coral-panel: '#EB7148'
  on-dark: '#FFFFFF'
typography:
  masthead:
    fontFamily: Sentinel Bold, serif
    fontSize: 34px
    fontWeight: '400'
    lineHeight: 27px
    letterSpacing: -0.51px
  card-title:
    fontFamily: Ideal Sans SSm Bold, sans-serif
    fontSize: 21px
    fontWeight: '400'
    lineHeight: 27px
    letterSpacing: -0.315px
  body:
    fontFamily: Sentinel SSm Book, serif
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 22px
    letterSpacing: -0.14px
  feature-body:
    fontFamily: Sentinel SSm Book, serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 27px
    letterSpacing: -0.18px
  section-title:
    fontFamily: Sentinel Bold, serif
    fontSize: 40px
    fontWeight: '400'
    lineHeight: 39px
    letterSpacing: -0.8px
  navigation:
    fontFamily: Ideal Sans SSm Medium, sans-serif
    fontSize: 15px
    fontWeight: '400'
    lineHeight: 48px
  mobile-body:
    fontFamily: Sentinel SSm Book, serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
---

# Hoefler & Co. — Color-Block Type Specimens

## Overview

Observed 2026-09-24T06:06:41.955666+00:00 at 1440 × 1000 CSS pixels, device scale factor 1. Mobile reviewed at 390 × 844, including a separate full-page mobile capture. Numeric CSS values below are measured; visual estimates are explicitly labeled. This is a static reference, not a test of every interaction or animation.

Hoefler & Co. sells the expressive range of type through the type itself. Treat the page as an editorial specimen wall: large cropped numerals, letterforms, code and badges carry the visual weight, while a consistent caption system makes the variety coherent. A dark masthead dates the selection. There is no conventional giant headline-and-button hero; the first row immediately presents three pieces of visual evidence.

## Colors

Use #232323 for the compact navigation, with a measured masthead gradient from #232323 to #303030. The wordmark heading is #EAEAEA; the bright green #47E83A sign-in and brand accent should remain a small utility signal, not a broad fill.

Assign color by specimen panel: code on #1D2026, drawn italics on #EDE7EB, numerals on measured desktop #8599B6, the wide Ringside specimen on #F87926, symbols on #454E60, and the full-width Sagittarius banner on #FFB645. Lower panels use #FAFAFA, #2875A1 and #EB7148. Choose #FFFFFF or #333333 captions according to the panel. The page base is #F5F5F5. Map-card descriptions are #636567. The numeral panel measured #8DA1BC in the mobile sample: preserve this observed variation rather than assuming a single immutable color. Artwork introduces additional colors that are not global interface tokens.

## Typography

The masthead and cartography title use Sentinel Bold. At desktop they measure 34px/27px and 40px/39px respectively, with -0.51px and -0.8px tracking. On mobile the masthead is 28px/34px with -0.42px tracking, and the cartography title is 30px/28.25px with -0.6px tracking.

Card headings have an important nested-font distinction: the outer h2 declares Ideal Sans SSm Extra Light, but the painted strong child uses Ideal Sans SSm Bold at 21px/27px. Both computed weights report 400 because the separate font-family names encode the weight. Use the bold face for the visible label; do not reproduce it with the outer light family. On mobile the label is 19px/24px with -0.285px tracking.

Descriptions use Sentinel SSm Book at 14px/22px in narrow desktop tiles and 18px/27px in wide banners. Mobile descriptions become 16px/24px, improving readability rather than merely shrinking desktop copy. Navigation is Ideal Sans SSm Medium, 15px; the map carousel uses Ideal Sans SSm Book, 14px/23px. Specimen artwork contains many additional display faces and is not a mandate to add them all to the interface. Font names describe the reference, not permission to redistribute the fonts.

## Layout

Use a flush three-column grid at 1440px: each initial tile is approximately 480px wide. The artwork occupies a square panel and its matching-color caption sits directly beneath. Caption content starts 66.375px from the tile's left edge; narrow body copy measures about 320px wide. Caption sections use measured 47px top and 54px bottom padding. Avoid gutters between panels: solid color boundaries do the separating.

Follow the first three equal tiles with a 960px-wide specimen and a 480px symbol panel, then a full-width typographic banner, then another three-tile row. Preserve this 1:1:1, 2:1, full-width rhythm. The 52px desktop navigation contains a centered 1135.44px inner row at x≈152.28. The masthead beneath is 194px high. These restrained elements frame the much larger specimen artwork.

The closing cartography section switches to a light ground and centered title, with measured title-block padding of 86px 66.375px 53px. Its horizontally clipped strip uses 296px-wide descriptions on a 320px pitch. The visible partial next card communicates continuity; this is local carousel clipping, not document-wide overflow.

At 390px every specimen tile becomes one full-width column, including the previously wide banners. Text starts at x=25px, descriptions are about 317px wide, and caption top padding becomes 41px while bottom padding remains 54px. Navigation becomes two 42px rows: brand/account utilities, then text links. The date wraps below the masthead. The cartography strip stays horizontal with a partial next card. Document widths measured 1440px and 390px at their corresponding viewports. Intermediate breakpoints and carousel interaction were not tested.

## Elevation & Depth

The layout is deliberately flat. Sampled sections, masthead and cards report no box shadow. Depth comes from typography, drawings and photography inside the artwork rather than floating card shells. Keep the specimen wall flush; do not add generic lifted surfaces between its color fields. The dark masthead has a subtle tonal gradient, not a heavy drop shadow.

## Shapes

Sampled panels and caption sections have zero corner radius. Use rectangular edge-to-edge artwork and let circular letters, badges and ornaments live within it. Repeated thin-outline favorite hearts belong to the map strip and are visually secondary. Utility icons are compact outlines; the green ampersand is a brand detail. Exact icon stroke widths were not measured.

## Components

The main reusable units are a compact utility navigation, dated editorial masthead, specimen-plus-caption tile, double-width specimen, full-width announcement banner and light cartographic carousel. Each tile pairs a concise bold label with a short serif explanation that names the typeface and its use. In the wide Sagittarius caption, the introductory phrase stays light while the face name is bold. Small blue inline links and pale favorite hearts provide detail-level actions without oversized CTA buttons.

Cookie and newsletter banners were closed through their visible controls before final capture. No forms were submitted. The guide covers the normal closed-banner view and the initial carousel position; hover, favorites, search, account and purchase flows remain uninspected.

## Do's and Don'ts

- Do let genuine type specimens explain the product before long marketing copy.
- Do keep caption padding and typographic roles consistent across varied color panels.
- Do retain the changing column spans and flush panel edges.
- Do increase narrow-screen body legibility while stacking the mosaic.
- Don't infer the painted heading font from the outer h2 alone; inspect its strong child.
- Don't treat carousel clipping as permission for whole-page horizontal overflow.
- Don't add rounded floating-card styling that competes with the specimen artwork.