---
version: alpha
name: Makely — Minimal Service Menu
colors:
  canvas: '#FFFFFF'
  text: '#3C4557'
typography:
  heading:
    fontFamily: Geist, Inter, sans-serif
    fontSize: 36px
    fontWeight: 650
    lineHeight: 39.6px
  body:
    fontFamily: Geist, Inter, -apple-system, sans-serif
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 23.2px
---

## Overview
An isolated service section with a centered introduction and five spacious icon-led rows covering product design, MVP build, landing pages, branding and site development. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `#services` 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, 36px / 39.6px, weight 650; supporting text uses 14.5px / 23.2px. Its corresponding mobile sample is 26px / 28.6px. 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 single restrained column of full-width rows is preserved across widths; mobile text wraps without changing the row order. Measured screenshot bounds: 1140 × 808px desktop and 390 × 874px 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 service section with a centered introduction and five spacious icon-led rows covering product design, MVP build, landing pages, branding and site development. 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.