Clearleft — University Case-Study Feature Card

---
version: alpha
name: Clearleft — University Case-Study Feature Card
colors:
  heading-ink: '#25333A'
  body-ink: '#425968'
  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: 39.09px
    fontWeight: 900
    lineHeight: 46.908px
  body:
    fontFamily: '"Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe
      UI", Arial, sans-serif'
    fontSize: 22px
    fontWeight: 400
    lineHeight: 37.4px
---

## Overview
An isolated University of Manchester case-study feature with a full-bleed collage background and a white inset panel containing the client mark, bold heading, explanatory copy and blue arrow link. Inspected on 2026-10-04. The isolated source element is `.Case-study-home:has(a[href*="university-of-manchester-design-partnership"])`; 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 39.09px, weight 900, with 46.908px 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 desktop article measures about 1204 by 576px with a right-aligned white panel over the collage. At 390px it measures about 350 by 432px and the white panel fills most of the card with a narrow background border. The heading scales from 39.09px to 28.92px. The desktop screenshot is 1204 × 576px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 352 × 432px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
Layering the solid white information panel over the photographic collage creates depth without relying on a conspicuous shadow.

## Shapes
Square outer card, rectangular white inset and a square electric-blue arrow tile. Preserve the client logo proportions; the collage is intentionally cropped as background artwork.

## Components
Source client logo, Embedding a modern approach to impactful digital design title, a short question and Read the case study link. No invented project metrics or testimonials are included.

## Do’s and Don’ts
Maintain a clean reading surface over busy imagery and preserve logo attribution. Do not stretch the collage to expose all of its text: it is decorative background, unlike the live heading which must remain complete. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.