name: framer-design
version: alpha
description: >
  A bold, gallery-first canvas: pure black (#000) with white text, built to
  showcase work. Display type is GT Walsheim Medium run HUGE and extremely tight
  (84px / weight 500 / -0.05em) for confident headlines, with Inter for body and
  Inter SemiBold for buttons. The brand is monochrome black/white — a white pill
  primary, a dark pill secondary — letting the real color come from a dense
  bento wall of vivid customer-site thumbnails. Geometry is rounded (pill
  buttons, ~8px controls, large rounded showcase cards) and the page is flat,
  letting the work and the typography carry everything.
colors:
  # Brand / action
  primary: '#ffffff'          # white pill button surface
  on-primary: '#000000'
  secondary-bg: 'rgba(255,255,255,0.1)'  # dark "Start with AI" pill / control fill
  # Text
  on-surface: '#ffffff'
  on-surface-secondary: 'rgba(255,255,255,0.6)'  # body / sub-heads
  on-surface-muted: 'rgba(255,255,255,0.4)'
  # Surface
  surface: '#000000'          # pure-black page
  surface-card: '#0e0e0e'     # dark rounded showcase/feature cards (approx)
  control-fill: '#eeeeee'     # light in-product control / input (within mockups)
  # Hairlines
  hairline: 'rgba(255,255,255,0.1)'
  # (Color comes from embedded customer-site thumbnails, not brand tokens.)
typography:
  font-display: '"GT Walsheim", "GT Walsheim Medium", sans-serif'  # OSS sub: "Geist" / "Aeonik" — geometric grotesque
  font-body: '"Inter Variable", "Inter", sans-serif'  # body — Inter IS open source
  font-button: '"Inter", sans-serif'  # SemiBold for buttons
  display:                    # hero "Build better sites, faster"
    fontFamily: '{typography.font-display}'
    fontSize: 84px            # scales responsively
    fontWeight: 500
    lineHeight: 0.85          # 71.4px — very tight
    letterSpacing: -0.05em    # -4.2px
  title:                      # section heads ("Create, collaborate, and go live")
    fontFamily: '{typography.font-display}'
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.0375em  # -1.8px
  subhead:                    # hero sub-paragraph (muted)
    fontFamily: '{typography.font-body}'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
    color: '{colors.on-surface-secondary}'
  feature-title:              # "AI" / "Design" / "CMS" labels
    fontFamily: '{typography.font-body}'
    fontSize: 18px
    fontWeight: 500
  body:
    fontFamily: '{typography.font-body}'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  control: 8px                # in-product buttons / inputs
  pill: 40px                  # marketing pill buttons (effectively full)
  card: 24px                  # large showcase / feature cards (approx)
spacing:
  base: 8px
  scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px]
components:
  button-primary:             # "Start for free"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    fontFamily: '{typography.font-button}'
    fontWeight: 600
    rounded: '{rounded.pill}'
    padding: '~14px 24px'
  button-secondary:           # "Start with AI" / "Find an Expert"
    backgroundColor: '{colors.secondary-bg}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.pill}'
  button-control:             # in-product CTA inside mockups
    backgroundColor: '{colors.control-fill}'
    textColor: '{colors.on-primary}'
    fontWeight: 600
    rounded: '{rounded.control}'
    padding: '10px'
  card-showcase:              # bento thumbnails of customer sites
    rounded: '{rounded.card}'
    note: 'live colorful site thumbnails arranged in a dense masonry/bento wall'
  card-feature:               # "AI / Design / CMS / Collaborate" panels
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.card}'
  link-cta:
    textColor: '{colors.on-surface}'   # "Learn more ›"
motion:
  # Smooth scroll-driven reveals; the showcase wall scrolls/parallaxes. Carousels with circular arrow buttons.
icons:
  style: outline
  stroke: ~1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color-rules: 'Monoline white; chevron "›" trails links. The logo is the white folded-F Framer mark.'

Framer

framer-design — version alpha

Surfaces studied via Playwright (framer.com home): computed styles + screenshots. Framer's marketing site (built in Framer) exposes no semantic :root brand vars, so values are read from computed styles on representative elements — high-confidence on type (GT Walsheim / Inter), the black canvas, and the white/dark pill buttons.

Overview

Framer's canvas is bold and gallery-first: pure black ({colors.surface} #000) with white text, designed to make work the hero. Display type is GT Walsheim Medium run huge and extremely tight — the hero "Build better sites, faster" is 84px / weight 500 / -0.05em with sub-1.0 line-height, so the words nearly stack. Body and UI use Inter (with Inter SemiBold for buttons). The brand chrome is strictly monochrome black/white: a white pill primary ("Start for free") and a dark translucent pill secondary ("Start with AI"). All the color in the page comes from a dense bento wall of vivid customer-site thumbnails (orange, blue, lime, editorial spreads) — Framer shows, rather than decorates. Geometry is rounded (pill buttons, 8px in-product controls, ~24px showcase cards) and the page is flat — no shadows — letting typography and the work carry it.

Colors

• White — {colors.primary} #fff. The primary action surface (the "Start for free" pill, black label).
• Dark translucent — {colors.secondary-bg} (white @10%). Secondary pill buttons and control fills ("Start with AI", "Find an Expert").
• Ink. White {colors.on-surface} for headlines; white @60% {colors.on-surface-secondary} for the hero sub-paragraph and feature descriptions; white @40% for the faintest tier.
• Surfaces. Pure-black page; dark {colors.surface-card} (~#0e0e0e) feature panels with a faint white-alpha border; a light {colors.control-fill} (#eee) for controls shown inside product mockups.
• Color = the work. Framer uses no brand accent; chroma comes entirely from the embedded customer-site thumbnails in the showcase wall. This is the defining discipline.

Typography

• GT Walsheim Medium — display. Closest open-source substitute: Geist or Aeonik (geometric grotesque). The signature is huge size + very tight tracking (-0.05em) + sub-1.0 leading.
• Inter — body (14px) and the muted sub-paragraph (18px/white@60%); Inter SemiBold for buttons. (Inter is open source.)

Token	Family	Size	Weight	Line-height	Tracking	Usage
display	GT Walsheim	84px	500	0.85	-0.05em	Hero
title	GT Walsheim	48px	500	1.1	-0.0375em	Section heads
subhead	Inter	18px	400	1.2	-0.01em	Hero sub (white@60%)
feature-title	Inter	18px	500	—	normal	"AI / Design / CMS"
body	Inter	14px	400	1.4	normal	Body / captions

Layout

Base 8px. The hero is centered: small kicker, giant GT Walsheim headline, muted Inter sub-paragraph, two pills. Below sits the signature bento/masonry showcase wall — many rounded customer-site thumbnails in varied sizes, scrolling/parallaxing. Feature sections use a left-aligned text column (title + muted body + "Learn more ›") beside a large rounded card; a testimonial carousel and an expert-grid (2-up rounded cards with avatar + name + country) follow. Whitespace is generous; the work dominates.

Elevation & Depth

Flat. No shadow ladder; feature cards are dark fills with a 1px white-alpha border on black. Depth comes from the layered, parallaxing showcase wall of thumbnails and the contrast of bright work against the black canvas.

Shapes

Rounded: 40px pills ({rounded.pill}) for marketing buttons (effectively full), 8px for in-product controls/inputs, and ~24px for large showcase/feature cards. The mix of big pills and large card radii reads modern and confident.

Components

• Primary button {components.button-primary} — white pill, black SemiBold label ("Start for free").
• Secondary button {components.button-secondary} — dark translucent pill ("Start with AI", "Find an Expert").
• Control button {components.button-control} — light #eee, 8px radius, shown inside product mockups.
• Showcase card {components.card-showcase} — live colorful customer-site thumbnail in a rounded frame; tiled into the bento wall.
• Feature card {components.card-feature} — dark fill, 1px white-alpha border, ~24px radius (AI / Design / CMS / Collaborate panels).
• Link CTA {components.link-cta} — white text with trailing "›".

Motion

Smooth scroll-driven reveals; the showcase wall scrolls and parallaxes, and testimonial/expert carousels advance via circular arrow buttons. Polished and fluid — fitting for a site-building/animation tool — without being gimmicky.

Iconography

Thin outline monoline icons, white; chevron "›" trails "Learn more" links. The logo is the white folded-F Framer mark. Customer/integration logos render white in the trust strip. Sizes 16/20/24px.

Do's and Don'ts

• Do keep the canvas pure black with white text.
• Do set headlines in GT Walsheim Medium huge and very tight (-0.05em, sub-1.0 leading).
• Do keep UI monochrome — white pill primary, dark pill secondary.
• Do let color come from the bento wall of customer-site thumbnails.
• Do use Inter for body and the muted white@60% sub-paragraph.
• Don't introduce a brand accent color — the work provides the color.
• Don't add drop shadows; cards are flat with a faint border.
• Don't loosen the display tracking — tightness is the signature.

Known Gaps

• Framer's site exposes no semantic :root tokens; card gray and showcase radius are nearest-hex / inferred from rendering.
• GT Walsheim is proprietary; weight axis names beyond Medium (500) not enumerated. Hero size scales responsively above 84px.