Typewolf — Four-Article Editorial Grid

---
version: alpha
name: Typewolf — Four-Article Editorial Grid
colors:
  heading-ink: '#654A4E'
  body-ink: '#443235'
  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: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
An isolated four-article grid pairing wide framed thumbnail montages with large centered narrow-serif headlines on a muted warm background. Inspected on 2026-10-04. The isolated source element is `.row:has(> .column > .article-home)`; 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 DomaineDisplayNarrow, Georgia, serif at 42px, weight 700, with 50.4px 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
The selected grid is 1128px wide with two columns and two rows on desktop. At 390px it becomes a 390px-wide vertical list about 1078px tall. Headings change from 42px/50.4px to 24px/31.2px and keep centered alignment. The desktop screenshot is 1128 × 745px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 1078px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
White image mats and subtle soft shadows lift the imagery; headlines sit directly on the page canvas without enclosing card borders.

## Shapes
Rectangular wide images with square white frames anchor each card. Long editorial headlines deliberately wrap below rather than overlaying images.

## Components
Four source article links cover popular-culture fonts, designer favorites, an Advertising Age teardown and an expensive typeface. Thumbnail crops are source artwork, not broken or clipped UI labels. Hover and destination-page behavior were not tested.

## Do’s and Don’ts
Preserve consistent image proportions and real article titles. Do not replace the high-contrast display serif with a generic UI heading or add fictitious reading-time metadata. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.