Clearleft — Newsletter and Address Footer Grid

---
version: alpha
name: Clearleft — Newsletter and Address Footer Grid
colors:
  heading-ink: '#8E9BA4'
  body-ink: '#8E9BA4'
  slate: '#25333A'
  paper: '#FFFFFF'
  link: '#8E9BA4'
  primary: '#8E9BA4'
typography:
  heading:
    fontFamily: '"Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe
      UI", Arial, sans-serif'
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 28.05px
  body:
    fontFamily: '"Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe
      UI", Arial, sans-serif'
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 28.05px
---

## Overview
The complete inner footer grid with organization links, postal address, social icons, newsletter field/action and copyright on a dark slate surface. Inspected on 2026-10-04. The isolated source element is `.Site-footer > .grid`; 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 "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif at 16.5px, weight 400, with 28.05px leading. Supporting text uses "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif at 16.5px / 28.05px. These are computed local samples, not a claimed universal type scale. Use licensed fonts or suitable fallbacks; imagery may contain unrelated typefaces.

## Layout
Desktop spreads the link/address content across the left side and social/newsletter content across the right. At 390px social icons and newsletter move to the top, then links, address and copyright stack below. The email field and outlined submit action change from a shared row to separate lines. The selected inner grid excludes outer section padding and the overflowing photo from the preceding section. The desktop screenshot is 1292 × 343px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 764px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
Flat dark slate, white links and subdued gray utility text produce hierarchy without shadows. The white input is the brightest large area.

## Shapes
Rectangular input and square-corner outlined Sign up control; small unboxed social icons remain a compact row.

## Components
Organization and policy links, source contact address, social links, newsletter subscription and copyright. Sign up refers to the newsletter, not account registration. No email was entered or submitted.

## Do’s and Don’ts
Preserve the mobile content ordering and enough contrast for supporting copy. Do not classify this newsletter as authentication or claim its validation states were tested. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.