Framer — Design Reference

1. Visual Theme & Atmosphere

Framer is a platform for designing and publishing websites. Its current careers page describes the mission as building the best tool for designing and publishing incredible sites, while its public product copy positions AI-assisted website creation alongside design, collaboration, CMS, hosting, and publishing. The supplied 2026-07-13 evidence captures three public domains of that ecosystem: the main marketing site, a community Marketplace components listing, and pricing. Across those captures, the clearest recurring visual expression is an achromatic black-and-white public canvas with a small blue accent, compact rounded Marketplace controls, and a more editorial display face on the home page. This reference preserves those domains separately: it does not turn public marketing, community browsing chrome, or pricing into a claim about the authenticated editor, generated sites, or documentation UI.

• Public canvas: #000000 is observed as the home and pricing page background; #ffffff is the recurring foreground.
• Community layer: the Marketplace components page introduces #111111 and #242424 surfaces, 8px compact controls, 20px category cards, and 13px menu panels.
• Blue as local evidence: #0099ff is observed in Marketplace and pricing controls and is also published by Framer as “Framer Blue”; it is not promoted as a universal product-state color.
• Official brand assets: Framer separately publishes Black, White, Framer Blue (#0099FF), and Framer Deep Blue (#0055FF) for marks. Brand-asset colors are not automatically public-web CSS tokens.

2. Color Palette & Roles

Observed public-web roles

• Black canvas (#000000): computed background on the captured home and pricing pages.
• White foreground (#ffffff): repeated visible text and border value across all three captured surfaces.
• Muted label gray (#999999): repeated text and border value on home and Marketplace; it is a lower-emphasis public-web value, not an accessibility-state definition.
• Marketplace mid surface (#242424): filter-trigger and open-menu panel background on the Marketplace components page.
• Marketplace card surface (#111111): category-card background on the Marketplace components page.
• Framer Blue (#0099ff): observed Marketplace/pricing background and home text/border value; official brand guidance also lists the same color.

#0055FF remains an official brand-asset color from the brand guidelines, but it was not a measured token in the supplied live samples. Other isolated colors in the raw bundle are route- or content-local and are not raised into a system palette.

3. Typography Rules

Evidence classes

• Live computed public-web use: Inter is loaded/high with 512 visible uses and two Framer-hosted Inter Variable WOFF2 source URLs. Inter Variable is separately loaded/high with 392 visible uses. The Marketplace’s inter, "inter Fallback" computed stack is therefore represented by the canonical UI family Inter, rather than by a fallback name.
• Live computed display use: GT Walsheim Medium is loaded/high with 11 visible heading uses; the collector reports FontFaceSet corroboration but no source URL. It is recorded as the public-home display family, not as a reusable distributed asset.
• Live local monospace use: Input Mono Regular and Input Mono Bold are loaded/high in a small number of visible public samples. They are not made general UI or code tokens because the capture does not establish a component-level role. Input’s official licence says published/distributed use needs the appropriate licence.
• Source-backed local mono: jetBrainsMono has one loaded visible use and two Framer-hosted source URLs. JetBrains Mono’s official project is OFL-1.1; this license context does not grant use of Framer-hosted files.
• Declared-only: Azeret Mono, Chillax, EB Garamond, Geist, additional GT Walsheim faces, numerous Inter aliases/placeholders, and other declared faces have zero visible uses in this bundle. They remain declared-only and are not UI-family tokens.
• Unobserved domains: no authenticated Framer editor/product surface or docs chrome font capture was supplied. No web family is substituted into either domain.

Measured public hierarchy

4. Components

All variants below are selector-backed observations from public surfaces. The capture records three interaction expansions: two Marketplace menus and one home form-error sample. It does not capture an authenticated editor, documentation chrome, hover, pressed, focus, modal, or product-toast contract beyond the exact rows called out below.

Marketplace action

Filter trigger, menu-open capture

• Background: #242424
• Text: #ffffff
• Border: 1px solid transparent
• Radius: 8px
• Padding: 0px 10px
• Font: 12px / 500 / Inter
• Use: public Marketplace components filter trigger; surface-2::[data-omd-capture="26"], aria-haspopup="menu", captured with expanded and menu-open

Accent action

• Background: #0099ff
• Text: #ffffff
• Border: 1px solid transparent
• Radius: 8px
• Padding: 0px 10px
• Font: 12px / 600 / Inter
• Use: public Marketplace action; surface-2::[data-omd-capture="15"]

Marketplace menu

Open panel

• Background: #242424
• Text: #ffffff
• Border: 1px solid #333333
• Radius: 13px
• Padding: 5px
• Font: 12px / 400 / Inter
• Shadow: rgba(0, 0, 0, 0.08) 0px 3px 6px 0px
• Use: expanded public Marketplace menu; surface-2::[data-omd-interaction-capture="menu-0-0"]

Unchecked menu option

• Text: #ffffff
• Radius: 8px
• Padding: 0px 10px 0px 0px
• Font: 13px / 500 / Inter
• Use: role="menuitemcheckbox", aria-checked="false", captured only in the expanded Marketplace menu at surface-2::[data-omd-interaction-capture="menu-0-2"]

Marketplace category card

Default

• Background: #111111
• Text: #ffffff
• Radius: 20px
• Font: 12px / 500 / Inter
• Use: public Marketplace category-card root; surface-2::[data-omd-capture="21"]

Marketplace tab

Disabled

• Text: #666666
• Radius: 8px
• Padding: 0px 10px
• Font: 12px / 500 / Inter
• Use: disabled, coming-soon public Marketplace tab; surface-2::[data-omd-capture="13"]

Home form field

Error capture

• Text: #dee6ff
• Font: 14px / 500 / Inter
• Use: home textarea error sample; home::[data-omd-interaction-capture="form-error-0-0"]. The collector records the error state but does not supply a reusable field shell, label, or transition contract.

---

Verified: 2026-07-13 Tier 1 sources: https://www.framer.com/ (public marketing), https://www.framer.com/community/marketplace/components/ (public community Marketplace), https://www.framer.com/pricing (public pricing), https://www.framer.com/brand?page=1 (official brand assets), https://www.framer.com/careers/ and https://www.framer.com/blog/framer-next-generation-of-designers/ (official context), https://github.com/rsms/inter/blob/master/LICENSE.txt, https://input.djr.com/license/, and https://github.com/jetbrains/jetbrainsmono (font/license context) Tier 2 sources: https://getdesign.md/framer (one independent design record; broad direction only), https://styles.refero.design/style/242db326-a6f3-482a-b12e-5e7f8af94981 and https://styles.refero.design/style/d417b42f-824d-45ba-a02e-cbef3b8ea0d8 (independent generated records; no generated-only values used) Conflicts unresolved: none

5. Layout Principles

• The supplied evidence is desktop-only (1440×900). It supports local spacing observations, not a responsive grid, breakpoint, container-width, or editor-layout claim.
• Marketplace compact filter and tab controls use 0px 10px padding; the open menu uses 5px inset padding.
• Category-card text has 15px padding in the captured Marketplace DOM. This is a card-local observation, not a global spacing scale.
• The raw spacing aggregation also repeats 5px, 10px, 14px, 15px, and 40px values. Without semantic selector coverage for a universal scale, they remain aggregate evidence rather than prescribed tokens.

6. Depth & Elevation

• Marketplace open menu: the only selector-backed elevated panel is surface-2::[data-omd-interaction-capture="menu-0-0"], with rgba(0,0,0,0.08) 0px 3px 6px 0px.
• Home utility controls: individual home buttons data-omd-capture="31" through "33" have rgba(0,0,0,0.2) 0px 2px 6px 0px; their semantic role is not identified, so the value is not a system elevation level.
• No general blue glow, card-shadow hierarchy, or authenticated-product elevation rule is asserted.

7. Do's and Don'ts

Do

• Keep generated work scoped to the observed public domain: black/white marketing or the separate dark Marketplace surface.
• Use the observed Marketplace compact geometry—8px controls, 13px menu panels, 20px category cards—only when recreating the corresponding public patterns.
• Use Inter for UI/body and GT Walsheim Medium only for public display contexts when the font licensing and asset availability are appropriate.
• Treat #0099ff as a documented public/brand accent, with route-level component provenance rather than a universal semantic-state guarantee.

Don't

• Do not infer Framer editor, publishing, CMS, collaboration, or docs components from these public captures.
• Do not turn declared-only faces into live UI tokens or substitute a system font as an unavailable family.
• Do not claim hover, pressed, focus, responsive, modal, or motion variants that the collector did not capture.
• Do not treat official brand-asset colors or third-party font licences as permission to reuse Framer-hosted assets.

8. Responsive Behavior

Only a 1440×900 capture was supplied. The public pages may be responsive, but this packet does not measure a breakpoint, mobile navigation, touch target, image crop, or a responsive state transition. Those fields remain unresolved rather than being extrapolated from the desktop DOM.

9. Agent Prompt Guide

Use this reference as a public-web direction, not an app-kit specification:

• “Create a public marketing section on #000000 with #ffffff foreground, Inter UI text, and a #0099ff accent only where a selector-backed public component warrants it.”
• “For a Marketplace-like filter, use #242424, white 12px/500 Inter text, 8px radius, and 0px 10px padding; pair it only with the observed 13px-radius menu panel if an open-menu surface is needed.”
• “For the public home’s editorial hierarchy, use GT Walsheim Medium only when its licensed asset is available; the captured examples are 54px/500 and 44px/500, not an unbounded display scale.”

10. Voice & Tone

Framer’s first-party careers page leads with “Make the web more creative” and describes a mission to build the best tool for designing and publishing incredible sites. The product blog says the enduring mission is to turn ideas into stunning websites quickly. That supports a direct, maker-facing public voice; it does not establish editor error copy or a complete product-content style guide.

11. Brand Narrative

Framer’s present public framing is a web-design and publishing platform: the careers page ties the company to the future of the web, and the product blog describes the continuing goal as moving from an idea to a polished website quickly. Its public navigation also spans design, collaboration, CMS, hosting, performance, SEO, conversion, and publishing. The visually distinctive expression in this packet comes from the current public surfaces—not a claim that every Framer product surface uses the same components or palette.

12. Principles

1. Make the publishing outcome legible. UI implication: public copy should foreground the site-building/publishing task rather than inventing technical workflow claims.
2. Keep brand assets recognizable. UI implication: follow the official guidance not to alter, recolor, distort, or create substitute Framer marks.
3. Preserve source-domain boundaries. UI implication: use public marketing and Marketplace evidence only for those surfaces; do not synthesize editor or docs patterns.
4. Prefer measured compactness over generic pills. UI implication: the supported compact controls are 8px-rounded Marketplace controls, not a site-wide full-pill rule.

13. Personas

These are audience archetypes derived from Framer’s public positioning, not synthetic test users or claims about private product behavior.

• Website creator: uses the public design-and-publish proposition and may enter through marketing or templates.
• Community browser: explores the public Marketplace components surface through category cards, tabs, and filters.
• Developer/documentation reader: encounters a separately structured developer/docs domain; this packet does not use its chrome as visual-token evidence.

14. States

15. Motion & Easing

The capture records structural menu and form-error expansions but supplies no measured duration, easing, transition, or reduced-motion behavior. Framer’s historical association with motion does not license a motion-token claim for the currently captured public surfaces; motion values remain unresolved.