Clearleft — Oversized Strategic-Partner Hero

---
version: alpha
name: Clearleft — Oversized Strategic-Partner Hero
colors:
  heading-ink: '#FFFFFF'
  body-ink: '#DAE1E2'
  slate: '#25333A'
  paper: '#FFFFFF'
  mint: '#23D8A0'
  primary: '#23D8A0'
typography:
  heading:
    fontFamily: Gilroy, Avenir, "Century Gothic", -apple-system, "Helvetica Neue",
      "Segoe UI", Roboto, sans-serif
    fontSize: 123.43px
    fontWeight: 900
    lineHeight: 123.43px
  body:
    fontFamily: '"Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe
      UI", Arial, sans-serif'
    fontSize: 29.33px
    fontWeight: 400
    lineHeight: 49.861px
---

## Overview
An isolated typographic hero section with a heavy white strategic-partner headline, pale body copy and a mint arrow-led email action on dark slate. Inspected on 2026-10-04. The isolated source element is `.Page-header`; 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 Gilroy, Avenir, "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", Roboto, sans-serif at 123.43px, weight 900, with 123.43px leading. Supporting text uses "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif at 29.33px / 49.861px. 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 section spans the 1440px viewport while its text aligns to the wider page grid. Desktop headline typography is 123.43px at weight 900, with 29.33px supporting copy. At 390px these become approximately 49.67px and 22.99px; the long paragraph wraps and the email label splits onto two lines. This crop excludes the site navigation and the external brush-edge decoration. The desktop screenshot is 1440 × 515px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 472px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
A flat dark field and very strong text-scale contrast establish hierarchy. There is no independent floating card or shadow treatment in this selected element.

## Shapes
The square mint arrow tile provides the principal geometric accent. Text remains unboxed and flush with a common left alignment.

## Components
Main promise, supporting positioning paragraph and Email us about your design challenge mailto link. The CTA is a contact route, not a signup or purchase action.

## Do’s and Don’ts
Keep the display face heavy and the paragraph measurably lighter. Do not crowd the long mobile paragraph with extra links, and do not claim the email action was sent. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.