Framer

---
version: alpha
name: "Framer — Black canvas with electric product demonstrations"
description: "An independently described visual reference, based on the archived desktop screenshot."
colors:
  primary: "#F5F5F5"
  neutral: "#000000"
  surface: "#111111"
  muted: "#A3A3A3"
  accent: "#0088FF"
typography:
  display:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.03em
  body:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    lineHeight: 1.5
rounded:
  card: 10px
  button: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  section: 96px
components:
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label}"
    rounded: "{rounded.button}"
    padding: "{spacing.md}"
---
## Overview

This captured reference presents a website-building product on a pure-black canvas. Bright compact headlines sit above large dark editor demonstrations; electric-blue interface highlights and varied example artwork provide selective color. The page alternates editorial headings, product screenshots, feature grids and social proof rather than repeating identical cards.

Reference: https://www.framer.com/ · archived screenshot: 2026-09-12T11:40:17.778080+00:00 · desktop viewport: 1440px.
This describes the captured reference, not an official brand specification. Palette,
fonts, dimensions and responsive suggestions below are **inferred implementation
starting points** from the screenshot, not extracted CSS or verified source tokens.
Do not treat partially loaded sections as intentional blank space.

To use: place this file in your repository and ask your coding agent to follow its
visual direction with the reference screenshot. Adapt the content to your product;
do not reuse source logos, photographs, illustrations or endorsements without rights.

## Colors

Use #000000 for the main canvas, #F5F5F5 for primary text, and
#111111 for secondary surfaces. Supporting text starts at #A3A3A3; verify
contrast at the actual size and background. The accent #0088FF is selective,
not a default fill for all elements. These approximate rendered colors are not
claims of exact brand values.

## Typography

Start with Arial, Helvetica, sans-serif for display text and Arial, Helvetica, sans-serif for body copy.
The supplied font stacks are portable approximations; exact families and font
licensing were not verified. Use 52px desktop display text, 16px body and
14px labels as a starting scale. Preserve concise line lengths and clear hierarchy.
For narrow screens, reduce display text to roughly 36–42px and avoid overflow.

## Layout

Use a centered content column approximately 1120–1200px wide at the captured 1440px viewport, with generous black margins. Start with a left-aligned heading of roughly 52px, concise support copy and small paired actions. The large editor/video surface should dominate the first section. Later sections mix a two-column text/editor arrangement, an asymmetric platform-feature grid and a wide community editor image. Lower in the page, a centered invitation precedes a dense multi-column footer. Some demos and showcase areas are dark or empty in this capture; do not invent their animation or assume that emptiness is intentional.

Mobile layouts were not captured. Suggested adaptation, not an observed source
behavior: use 20–24px side gutters, stack split content below about 760px, preserve
text before related imagery, and let multi-column groups become one column. Keep
code samples scrollable and controls at least 44px high. Verify these decisions in
a real narrow viewport before shipping.

## Elevation & Depth

Use the page/surface contrast and subtle boundaries to establish hierarchy. Product
screenshots may depict deeper nested UI; avoid copying their internal depth rules
onto every marketing section. No live shadows, animations or transition values were
measured. Start with restrained elevation and test legibility in the chosen theme.

## Shapes

Use the 10px card-radius token as an estimate for small surface rounding.
Compact pill-like actions use the button radius; retain rectangular product imagery
where it is visually appropriate. Do not apply one oversized corner radius to every
container.

## Components

Editor frames use charcoal panels, restrained borders and compact toolbars. A bright blue outline or selection state can distinguish the active product demonstration. Place logos as a subdued compact cluster between story sections. Feature tiles may differ in width and height, with tiny labels subordinate to screenshots. The primary CTA is a small light button on black. Cookie notices and overlaid playback controls are incidental captured interface states, not required brand components.

Hover, focus, loading and expanded states were not observable from this still
capture. Provide keyboard-visible focus, distinct disabled states and accessible
expanded controls as implementation requirements, not claims about the reference.
Do not rely on color alone to express state; honor reduced-motion preferences.

## Do's and Don'ts

Make product imagery the visual centerpiece and reserve vivid blue for meaningful selections or demonstrations. Keep headings crisp and navigation subdued. Do not turn every section into identical cards, apply bright blue to all body text, or reproduce logos, proprietary editor assets or hidden animation states.

Use the captured design as direction, not a pixel-perfect or legally licensed
clone. Prefer your own content and assets. Validate the file and compare your output
against the archived screenshot; refresh this guide externally when that reference
materially changes.