Ghost — Floating Integration Icon Constellation

---
version: alpha
name: Ghost — Floating Integration Icon Constellation
colors:
  paper: '#FFFFFF'
  copy: '#334155'
  muted: '#64748B'
  primary: '#000000'
typography:
  heading:
    fontFamily: InterDisplay, sans-serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: 32.4px
  body:
    fontFamily: InterDisplay, sans-serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 30px
---

## Overview
An isolated white integrations section with raised rounded app icons arranged around centered editorial copy and a quiet text-link CTA. Inspected on 2026-09-30 at 1440px and 390px widths. This screenshot contains only the element selected by `main > div.relative.flex.flex-col.items-center.bg-white`.

## Colors
The token values above are measured opaque CSS text, surface or action colors. Transparent roots inherit their surrounding surfaces and are not treated as measured white. Artwork and logo colors remain source-specific rather than universal tokens.

## Typography
The selected heading/label sample uses InterDisplay, sans-serif, 36px / 32.4px, weight 700; the corresponding mobile sample is 36px. Supporting text sample is 24px / 30px. Preserve the hierarchy rather than assuming every paragraph uses the same size. Computed font stacks do not grant font licenses; choose licensed equivalents when adapting.

## Layout
The desktop section is 1440px wide with 24px side padding and a 672px central text measure. The main statement is 36px and supporting copy 24px. Icons form staggered side columns around the content rather than a uniform list. At 390px the text measure contracts to 358px with 16px gutters; the icon composition shifts above the text. Keep the text unobstructed and let decorative columns clip at the section edges. Measured outer document/component bounds: 1440 × 584px desktop; 390 × 591px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
Floating white icon tiles use soft shadows and thin pale borders; the varied apparent elevation creates a loose constellation without additional container panels.

## Shapes
Icon anchor boxes are 96px square before any visual transforms, with 24px corner radius. Individual logos have different internal padding; preserve optical balance instead of forcing identical artwork dimensions.

## Components
Integration logo links, small uppercase overline, bold statement, explanatory paragraph and a muted arrow link. The screenshot is only the selected section. Tooltip and hover behavior were not exercised; offscreen logo labels in the DOM do not establish visible tooltip states.

## Do's and Don'ts
Do preserve the observed reading order, contrast, spacing and responsive emphasis. Do supply keyboard focus, meaningful labels and reduced-motion alternatives in an implementation. Do not copy source testimonials, brand assets or performance claims as your own. Do not infer successful submission, hidden validation, hover or authentication behavior from resting screenshots.