Typewolf — Font Classification Tile Grid

---
version: alpha
name: Typewolf — Font Classification Tile Grid
colors:
  heading-ink: '#654A4E'
  body-ink: '#443235'
  frame: '#FFFFFF'
  canvas: '#E6DDDE'
  primary: '#654A4E'
typography:
  heading:
    fontFamily: Dia, Arial, serif
    fontSize: 15px
    fontWeight: 900
    lineHeight: 18px
  body:
    fontFamily: DomaineText, Georgia, serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A standalone six-category font directory grid using framed typographic sample images and small heavy sans-serif labels, distinct from the large editorial article cards. Inspected on 2026-10-04. The isolated source element is `.row.small-up-2:has(a[href*="top-10-sans-serif-fonts"])`; bounds were measured after a warm render and checked again after capture.

## Colors
Tokens above reflect observed CSS text/surface colors; Typewolf canvas is sampled from its screenshot. Photography, gradients and alpha treatments remain visual references rather than invented flat-color tokens. Preserve the contrast between the principal text and its surrounding surface.

## Typography
The observed leading text sample uses Dia, Arial, serif at 15px, weight 900, with 18px leading. Supporting text uses DomaineText, Georgia, serif at 16px / 24px. These are computed local samples, not a claimed universal type scale. Use licensed fonts or suitable fallbacks; imagery may contain unrelated typefaces.

## Layout
Desktop places four tiles across with two on the second row. At 390px the six items form two columns and three rows. Category labels change from 15px/18px to 14px/16.8px and wrap naturally under their thumbnails. The desktop screenshot is 1128 × 421px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 506px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
Broad diffuse image shadows and thick white frames give compact samples the feeling of printed specimens laid on a warm desk.

## Shapes
Square-cornered image mats and compact centered text labels; keep the visible white framing consistent across heterogeneous thumbnail art.

## Components
Sans-serif, serif, slab-serif, humanist sans-serif, monospaced and rounded-font category links. These are directory navigation tiles, not pricing plans or font purchase buttons.

## Do’s and Don’ts
Let artwork vary while retaining uniform frame proportions and label hierarchy. Do not crop category labels to match the intentional clipping inside source specimen artwork. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.