Typewolf — Editorial Typography Directory

---
version: alpha
name: Typewolf — Editorial Typography Directory
colors:
  heading-ink: '#654A4E'
  body-ink: '#654A4E'
  frame: '#FFFFFF'
  canvas: '#E6DDDE'
  primary: '#654A4E'
typography:
  heading:
    fontFamily: DomaineDisplayNarrow, Georgia, serif
    fontSize: 42px
    fontWeight: 700
    lineHeight: 50.4px
  body:
    fontFamily: DomaineText, Georgia, serif
    fontSize: 28px
    fontWeight: 400
    lineHeight: 35px
---

## Overview
An editorial typography homepage on a warm muted canvas: a large white masthead, serif tagline, uppercase navigation, framed site samples, oversized article headlines, font-category grids and a resource-focused footer. Inspected on 2026-10-04. This is a complete page reference, not a relabelled section crop.

## 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 DomaineDisplayNarrow, Georgia, serif at 42px, weight 700, with 50.4px leading. Supporting text uses DomaineText, Georgia, serif at 28px / 35px. These are computed local samples, not a claimed universal type scale. Use licensed fonts or suitable fallbacks; imagery may contain unrelated typefaces.

## Layout
A centered 1128px desktop wrapper organizes showcase cards into two columns and font-category tiles into four. At 390px the masthead reduces, navigation wraps into two lines, primary cards stack, and category tiles retain two columns. Desktop margins are about 156px; mobile content keeps roughly 24px inner gutters. The desktop screenshot is 1440 × 10182px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 844px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
White photo mats and soft broad shadows separate source screenshots from the warm background. Fine brown rules organize sections; a pale inset resource panel is the one larger raised surface.

## Shapes
The visual system favors square frames, thin rules and rectangular brown buttons rather than capsules or rounded app cards.

## Components
Masthead/navigation, dated website gallery, font-name links, four article promos, learning resources, six families of directory tiles, checklist promotion and footer newsletter. Images are editorial samples already published by Typewolf; depicted third-party typography is not the site UI font.

## Do’s and Don’ts
Keep attribution and font labels attached to each sample. Preserve the serif/sans hierarchy rather than copying fonts from the thumbnail artwork. Newsletter and commerce flows were not submitted or tested. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.