Webflow

---
version: alpha
name: Webflow landing-page reference
description: A crisp website-platform landing page with large black typography, vivid
  blue actions, horizontal product-story cards, a prominent creation-workspace demonstration,
  customer videos and an angled gallery of built websites.
colors:
  primary: '#146EF5'
  surface: '#FFFFFF'
  on-surface: '#080808'
  secondary: '#F0F0F0'
  border: '#D8D8D8'
typography:
  headline-display:
    fontFamily: WF Visual Sans Variable
    fontSize: 80px
    fontWeight: 600
    lineHeight: 83.2px
    letterSpacing: -0.8px
  headline-md:
    fontFamily: WF Visual Sans Variable
    fontSize: 56px
    fontWeight: 600
    lineHeight: 58.24px
  headline-mobile:
    fontFamily: WF Visual Sans Variable
    fontSize: 46.25px
    fontWeight: 600
    lineHeight: 48.1px
    letterSpacing: -0.4625px
  body-md:
    fontFamily: WF Visual Sans Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
---

# Webflow landing-page reference

## Overview

Observed at https://webflow.com/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A crisp website-platform landing page with large black typography, vivid blue actions, horizontal product-story cards, a prominent creation-workspace demonstration, customer videos and an angled gallery of built websites. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Preserve strong headline contrast, blue acquisition hierarchy and the space around the large product demonstration.

## Typography

The visible display sample uses "WF Visual Sans Variable", 80px size, 83.2px line height and weight 600. Tracking is -0.8px. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Use a narrow blue announcement and structured navigation, followed by a left-aligned hero and two acquisition actions. Run product-story cards horizontally under the hero. Introduce the Source workspace with a large demonstration, follow with customer story cards, a split lead form/gallery section, updates and an expansive angled website showcase. Finish with a dense multi-column footer and oversized blue mark.

At 390px the header keeps contact-sales and a menu. The hero becomes centered with a two-line headline, and the two actions remain paired. The horizontal story rail is clipped intentionally; document scroll width still equals the viewport. The dense desktop navigation is not reproduced as a squeezed row. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

Use product screenshots nested in large media frames, photographic testimonials and a perspective-like website gallery. The white page relies mostly on spacing rather than colored containers. Exact gallery transforms and shadow values were not measured.

## Shapes

Keep primary controls relatively square, cards gently rounded and typography assertive. Thin separators organize the navigation and footer. The angled gallery supplies expressive geometry while the rest of the page stays disciplined. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

Pair a blue get-started action with a light-gray sales action. Small product-story panels mix interfaces, metrics and avatar groups. Customer video cards use large portrait imagery, the lead form pairs compact inputs with a portfolio visual, and update teasers use small thumbnails. No lead form was submitted.

## Do's and Don'ts

Preserve strong headline contrast, blue acquisition hierarchy and the space around the large product demonstration. Let the website gallery carry visual diversity. Do not mistake carousel clipping for page overflow or infer form submission behavior from the screenshot.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.