---
version: alpha
name: Buffer landing-page reference
description: A social-media workspace landing page pairing dark-green geometric type
  with a pale grid, floating integration icons, a pill-shaped email signup, pastel
  product cards and transparent company metrics.
colors:
  primary: '#B0EC9C'
  surface: '#FEFDFB'
  on-surface: '#213130'
  pink: '#F3BDFF'
  yellow: '#FFD88A'
  blue: '#ADDAFF'
typography:
  headline-display:
    fontFamily: Stolzl
    fontSize: 75.8px
    fontWeight: 400
    lineHeight: 83.38px
    letterSpacing: -1.516px
  headline-md:
    fontFamily: Stolzl
    fontSize: 18px
    fontWeight: 400
    lineHeight: 19.8px
    letterSpacing: -0.36px
  headline-mobile:
    fontFamily: Stolzl
    fontSize: 40.4145px
    fontWeight: 400
    lineHeight: 44.4559px
    letterSpacing: -0.808289px
---

# Buffer landing-page reference

## Overview

Observed at https://buffer.com/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A social-media workspace landing page pairing dark-green geometric type with a pale grid, floating integration icons, a pill-shaped email signup, pastel product cards and transparent company metrics. 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. Use distinct pastel frames to organize capabilities while keeping the same dark-green text.

## Typography

The visible display sample uses Stolzl, 75.8px size, 83.38px line height and weight 400. Tracking is -1.516px. 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

Center a two-line hero and integrated signup form inside a field of floating app icons. Follow a logo strip with a two-by-two product grid and four smaller capability cards. Add a dark AI-integration feature, split team-photo section, pastel resource grid, company metrics, lime closing panel and deep-green footer. Large cards align tightly, while major chapters have generous vertical separation.

At 390px the header retains a green acquisition action and menu. The email input and action split into two stacked pill controls; floating icons move to the edges above and below the text. The inspected page has no horizontal document overflow, while the logo strip is intentionally cropped. 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

Subtle shadows lift icon tiles and the long signup field. Product screenshots nest inside pastel frames, while the dark AI panel relies on tonal layers. Surrounding sections stay near-flat; avoid deep shadows on every resource card.

## Shapes

Use pill controls, rounded product cards and small square icon tiles. A faint orthogonal grid sits behind the hero. Keep the colorful app marks on separate light tiles instead of letting them collide with the centered copy. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

The desktop acquisition form joins an email input to a green action; no form was submitted. Four product cards explain publishing, creation, engagement and analytics through screenshots. A horizontal integration row, team photo, resource cards and four public company metrics build trust.

## Do's and Don'ts

Use distinct pastel frames to organize capabilities while keeping the same dark-green text. Let the hero have a single conversion form. Do not interpret the tiny visually hidden H1 wordmark as the display headline; the visible hero is an H2.

- 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.