Makely — Centered Founder-led Portfolio Hero

---
version: alpha
name: Makely — Centered Founder-led Portfolio Hero
colors:
  canvas: '#FFFFFF'
  text: '#3C4557'
  observed-1: '#4A3AFF'
  observed-2: '#46464B'
  observed-3: '#1D2939'
typography:
  heading:
    fontFamily: Geist, Inter, sans-serif
    fontSize: 55px
    fontWeight: 650
    lineHeight: 56.1px
  body:
    fontFamily: Geist, Inter, -apple-system, sans-serif
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 21.75px
---

## Overview
An isolated white hero with bold centered copy, a selected-text accent, violet discovery-call action, service chips, founder signature and a fan of product-screen mockups. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `section:first-of-type` 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 h1 sample uses Geist, Inter, sans-serif, 55px / 56.1px, weight 650; supporting text uses 14.5px / 21.75px. Its corresponding mobile sample is 32px / 32.64px. 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
A centered desktop copy column sits above a wide device fan; at mobile the buttons stack and the fan extends inside the clipped section. Measured screenshot bounds: 1440 × 1174px desktop and 390 × 1112px 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 white hero with bold centered copy, a selected-text accent, violet discovery-call action, service chips, founder signature and a fan of product-screen mockups. 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.