---
version: alpha
name: Typewolf — Serif Masthead and Wrapped Navigation
colors:
  heading-ink: '#654A4E'
  body-ink: '#654A4E'
  frame: '#FFFFFF'
  canvas: '#E6DDDE'
  primary: '#654A4E'
typography:
  heading:
    fontFamily: DomaineText, Georgia, serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 36px
  body:
    fontFamily: Dia, Arial, serif
    fontSize: 14px
    fontWeight: 900
    lineHeight: 30.8px
---

## Overview
A complete masthead/navigation element with a large white Typewolf wordmark, centered serif tagline, fine horizontal rule and five heavy uppercase category links. Inspected on 2026-10-04. The isolated source element is `header.row`; 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 DomaineText, Georgia, serif at 24px, weight 400, with 36px leading. Supporting text uses Dia, Arial, serif at 14px / 30.8px. These are computed local samples, not a claimed universal type scale. Use licensed fonts or suitable fallbacks; imagery may contain unrelated typefaces.

## Layout
At 1440px the selected header is 1128px wide and about 329px high. The category links occupy one centered row. At 390px the header is full width and about 270px high; the tagline reduces and links wrap into two rows instead of becoming a hamburger menu. The desktop screenshot is 1128 × 329px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 270px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
The masthead remains flat against the warm canvas. Depth comes from scale and the white wordmark rather than shadows or floating navigation chrome.

## Shapes
A fine horizontal divider and unboxed text links contrast with the expressive serif logo. No pill or card surrounds the menu.

## Components
Home-linked wordmark, What’s Trending in Type tagline, Font Lists, Lookbooks, Checklist, Free Fonts and Learning Resources links. Only default visible navigation states were inspected.

## Do’s and Don’ts
Keep the category labels readable while wrapping. Do not force a mobile drawer that was not present in the observed source or mistake the logo artwork for a measured body-font token. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.