Clearleft — Personal Contact CTA

---
version: alpha
name: Clearleft — Personal Contact CTA
colors:
  heading-ink: '#25333A'
  body-ink: '#25333A'
  slate: '#25333A'
  paper: '#FFFFFF'
  link: '#0000FF'
  primary: '#25333A'
typography:
  heading:
    fontFamily: Gilroy, Avenir, "Century Gothic", -apple-system, "Helvetica Neue",
      "Segoe UI", Roboto, sans-serif
    fontSize: 52.11px
    fontWeight: 900
    lineHeight: 62.532px
  body:
    fontFamily: '"Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe
      UI", Arial, sans-serif'
    fontSize: 22px
    fontWeight: 400
    lineHeight: 37.4px
---

## Overview
A self-contained contact content block with You’re unique headline, a short relationship-focused paragraph and a cutout portrait beside a named email action and cofounder attribution. Inspected on 2026-10-04. The isolated source element is `.Contact__content`; 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 52.11px, weight 900, with 62.532px leading. Supporting text uses "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif at 22px / 37.4px. 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 content block is about 696px wide on desktop and 350px on a 390px viewport. The heading scales from 52.11px to 36.38px; supporting copy from 22px to 18.29px. The portrait stays beside the email/attribution group while the email label wraps on mobile. The adjacent large studio photograph is outside this component. The desktop screenshot is 696 × 388px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 352 × 285px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
A flat pale-gray field supports dark text and the saturated blue link. The small portrait supplies the human focal point rather than a large illustration or shadow.

## Shapes
An irregular cutout avatar, thin arrow glyph and unboxed text link replace a conventional filled CTA button.

## Components
You’re unique heading, supporting paragraph, Richard Rutter portrait, Email Rich about your design challenge and cofounder label. Mailto navigation was not activated.

## Do’s and Don’ts
Keep the named contact and role adjacent to the link. Do not present a generic stock headshot as the source person or turn the email link into a tested lead-submission flow. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.