Flowout — Subscription Pricing and Add-ons

---
version: alpha
name: Flowout — Subscription Pricing and Add-ons
colors:
  canvas: '#FFFFFF'
  text: '#FFFFFF'
  observed-1: '#092540'
  observed-2: '#333333'
  observed-3: '#9966FF'
  observed-4: '#222222'
typography:
  heading:
    fontFamily: Inter, sans-serif
    fontSize: 48px
    fontWeight: 700
    lineHeight: 57.6px
  body:
    fontFamily: Inter, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
---

## Overview
A complete Webflow agency pricing page with a navy offer area, highlighted subscription card, optional add-ons, customer reviews, comparison table, FAQ and conversion footer. 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 Inter, sans-serif, 48px / 57.6px, weight 700; supporting text uses 18px / 27px. Its corresponding mobile sample is 32px / 38.4px. 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 featured desktop price card sits beside its scope navigation; supporting comparison content spans wider columns. Mobile stacks the main offer and keeps the feature information readable. Displayed values reflect the captured billing state only. Measured screenshot bounds: 1440 × 10767px desktop and 390 × 19919px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Colorful illustrated service cards and layered project mockups provide depth; text sections remain flat.

## Shapes
Pill CTAs, rounded service panels, compact category labels and a broad conversion panel.

## Components
A complete Webflow agency pricing page with a navy offer area, highlighted subscription card, optional add-ons, customer reviews, comparison table, FAQ and conversion footer. Deep navy sections, white cards, lavender primary actions and cyan secondary accents. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.

## Do's and Don'ts
Lead with what the recurring service solves, then show relevant projects and a transparent scope comparison. 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.