Clearleft — Strategic Design Agency Landing Page

---
version: alpha
name: Clearleft — Strategic Design Agency Landing Page
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
A strategic design agency homepage with an oversized white-on-charcoal promise, mint arrow CTA, event and recruitment promotions, photographic case studies, editorial updates and a contact-led footer. Inspected on 2026-10-04. This is a complete page reference, not a relabelled section crop.

## 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 desktop hero leads into a centered case-study column about 1204px wide. Case-study photographs carry inset white information panels aligned right. At 390px the navigation becomes a Menu button, the 123.43px hero type reduces to about 49.67px, and cards stack. Individual component captures also show footer content reordering. The desktop screenshot is 1440 × 4810px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 844px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
Depth is mostly created by white case-study panels over photography and the contact photograph crossing a section boundary. Large areas stay flat instead of using dashboard-like shadows.

## Shapes
Square content panels, arrow tiles and sharp borders contrast with the hand-drawn brush edge beneath the hero. Avatar cutouts add a human accent.

## Components
Agency navigation, proposition, mailto contact CTA, event promotion, recruitment and podcast cards, three case studies, three editorial links, personalized contact panel and footer newsletter. Source client identities remain attributed; no outcomes are independently asserted.

## Do’s and Don’ts
Preserve the difference between mint contact actions and electric-blue case-study links. Do not replace the human editorial tone with generic SaaS pricing or invent agency results. Menu, newsletter and mailto actions were not activated. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.