Makely — Founder-led Product Design Portfolio

---
version: alpha
name: Makely — Founder-led Product Design Portfolio
colors:
  canvas: '#FFFFFF'
  text: '#3C4557'
  observed-1: '#46464B'
  observed-2: '#1D2939'
  observed-3: '#F2F4F7'
  observed-4: '#5B6478'
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
A bright founder-led agency landing page combining a centered outcome-led hero, fanned device previews, service rows, large case-study imagery, testimonials, offer panel, founder note and FAQ. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## 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 narrow editorial reading column opens into broader project media. Desktop alternates full-width and paired projects; mobile stacks the content and uses a compact floating navigation dock. Measured screenshot bounds: 1440 × 15034px desktop and 390 × 17792px 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
A bright founder-led agency landing page combining a centered outcome-led hero, fanned device previews, service rows, large case-study imagery, testimonials, offer panel, founder note and FAQ. 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.