---
version: alpha
name: Makely — Trust-backed Discovery Call Panel
colors:
  canvas: '#FFFFFF'
  text: '#3C4557'
  observed-1: '#4A3AFF'
  observed-2: '#0B0B0B'
typography:
  heading:
    fontFamily: Geist, Inter, sans-serif
    fontSize: 42px
    fontWeight: 650
    lineHeight: 44.52px
  body:
    fontFamily: Geist, Inter, -apple-system, sans-serif
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 26.73px
---

## Overview
An isolated pale rounded conversion panel combining an outcome-led heading, short reassurance, violet booking action and a lower row of founder evidence and review cues. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `#pricing` 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 Geist, Inter, sans-serif, 42px / 44.52px, weight 650; supporting text uses 16.5px / 26.73px. Its corresponding mobile sample is 28px / 29.68px. 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 centered panel uses a broad desktop card with supporting proof distributed below; mobile makes those supporting items a vertical stack. This is an offer/contact section, not a published price table. Measured screenshot bounds: 1140 × 778px desktop and 390 × 1040px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Soft shadows make pill navigation and buttons float slightly; project devices carry most of the visual depth.

## Shapes
Pill actions, rounded portfolio backdrops, small outline icons and a playful selected-text headline accent.

## Components
An isolated pale rounded conversion panel combining an outcome-led heading, short reassurance, violet booking action and a lower row of founder evidence and review cues. White and pale-gray canvas, charcoal headings, violet calls to action and occasional warm gradient accents. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.

## Do's and Don'ts
Connect each project with its problem and outcome, and keep the founder/contact route human and direct. Reuse layout principles, not client logos, testimonials, proprietary artwork or source performance claims. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.


## Capture scope
Viewport strips with overlapping gutters to avoid repeated fixed navigation; static scroll-state montage, not animation playback. Images preserve native rendered pixels; different vertical regions show their actual scroll positions. This is not a video.