Readwise — Highlighted Headline and Integration Tiles

---
version: alpha
name: Readwise — Highlighted Headline and Integration Tiles
colors:
  canvas: '#FBF9F3'
  text: '#333333'
  observed-1: '#2675DE'
  observed-2: '#F5F1E8'
typography:
  heading:
    fontFamily: '"Source Serif 4", "Source Serif 4 Fallback", serif'
    fontSize: 54px
    fontWeight: 600
  body:
    fontFamily: '"Albert Sans", "Albert Sans Fallback", sans-serif'
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28px
---

## Overview
An isolated cream integrations section with a large serif headline, yellow highlight treatment, two rows of rounded icon tiles and a blue directory link. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `section.landing-integrations` from the source page.

## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. Preserve the visual contrast between the main reading surface, text and actions shown in the capture.

## Typography
The selected h2 sample uses "Source Serif 4", "Source Serif 4 Fallback", serif, 54px / normal, weight 600; supporting text uses 22px / 28px. Its corresponding mobile sample is 30px / 36px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
The desktop section centers the headline above two rows of app tiles and a separate directory link. At 390px the headline wraps into two lines and the tiles scale down into a compact two-row layout; the link remains centered beneath the grid. All tiles belong to one section, not individual button variants. Measured screenshot bounds: 1200 × 507px desktop and 342 × 359px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
A subtle inset-like shadow around the cream tiles gives the logos tactile depth without creating large floating cards. The rest of the section stays flat.

## Shapes
Rounded square logo tiles, a rectangular yellow marker behind the emphasized phrase, and an unboxed blue text link with a trailing chevron.

## Components
Observed selector: section.landing-integrations. The two rows include the original linked service logos. Only visible appearance and responsive arrangement were inspected; integration setup and external destinations were not exercised.

## Do's and Don'ts
Normalize tile dimensions while retaining each logo aspect ratio. Keep the directory CTA separate from the logo matrix. Do not treat the captured logos as evidence of integrations supported by another product. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.