# Framer — Design System
> Build a free website with Framer—enjoy full design freedom, powerful CMS, built-in SEO, and real-time collaboration.
- **Canonical:** https://uiuxskills.com/library/framer
- **Source:** https://www.framer.com/
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 76%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:34.562Z

---

---
version: alpha
name: Framer
description: No-code website builder for designers and teams.
tone: Modern, high-energy, professional, and design-forward.
color-scheme: dark
colors:
  primary: "#0000EE"
  secondary: "#35E2EB"
  background: "#000000"
  surface: "#262626"
  on-surface: "#FFFFFF"
  on-primary: "#FFFFFF"
  error: "#FF3B30"
  link: "#0099FF"
  focus-ring: "#35E2EB"
typography:
  display-lg:
    fontFamily: GT Walsheim
    fontSize: 110px
  display-md:
    fontFamily: GT Walsheim
    fontSize: 62px
  headline-lg:
    fontFamily: GT Walsheim
    fontSize: 48px
  headline-md:
    fontFamily: GT Walsheim
    fontSize: 32px
  headline-sm:
    fontFamily: GT Walsheim
    fontSize: 24px
  body-md:
    fontFamily: Inter Variable
    fontSize: 15px
  label-sm:
    fontFamily: Inter Variable
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 32px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "#FFFFFF"
    textColor: "#0000EE"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#F0F0F0"
  button-secondary:
    backgroundColor: "#262626"
    textColor: "#0000EE"
  card:
    backgroundColor: "#262626"
    rounded: "{rounded.md}"
  card-elevated:
    backgroundColor: "#262626"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "#000000"
  input-field-focus:
    borderColor: "{colors.secondary}"
  link:
    textColor: "{colors.link}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.background}"
  divider:
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-primary:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.2)
  md: 0 3px 6px rgba(0,0,0,0.16)
  lg: 0 10px 20px rgba(0,0,0,0.19)
---

## Overview

Framer is a high-energy, design-centric platform that empowers users to build professional websites without code. Its visual identity is defined by a bold, dark-mode aesthetic, high-contrast typography, and a focus on showcasing creative, interactive work.

## Colors

The color strategy centers on a deep, immersive dark-mode palette that allows vibrant accents to pop, ensuring the interface feels both professional and creatively charged.

*   Primary (#0000EE): The core brand color used for key actions and primary branding elements.
*   Secondary (#35E2EB): A high-visibility accent color used for highlights, active states, and UI elements.
*   Background (#000000): The foundation of the dark-mode aesthetic.
*   Surface (#262626): Used for cards, containers, and elevated UI elements to provide depth.
*   On-surface (#FFFFFF): Primary text color for high readability against dark backgrounds.
*   On-primary (#FFFFFF): Text color used for primary buttons to ensure contrast.
*   Error (#FF3B30): Semantic color for critical alerts and error states.
*   Link (#0099FF): Specific color for interactive text links.
*   Focus-ring (inferred) (#35E2EB): The high-contrast indicator for keyboard navigation and focus states.

## Typography

Typography is used to establish a clear hierarchy, combining the bold, geometric personality of GT Walsheim for headlines with the clean, functional readability of Inter for body and UI labels.

*   Display-lg: GT Walsheim, used for high-impact hero headlines.
*   Display-md: GT Walsheim, used for prominent section headlines.
*   Headline-lg (inferred): GT Walsheim, used for secondary structural headlines.
*   Headline-md (inferred): GT Walsheim, used for tertiary headlines.
*   Headline-sm: GT Walsheim, used for small, punchy section headers.
*   Body-md: Inter Variable, the standard for all body copy and descriptive text.
*   Label-sm (inferred): Inter Variable, used for UI labels, buttons, and small metadata.

## Layout

Framer employs a responsive grid system that prioritizes fluid, full-width sections to showcase visual content. The layout relies on a 4px/8px base spacing unit, with `{spacing.md}` (16px) serving as the standard gutter between grid items. The page pattern typically follows a logical flow: `nav` → `hero` → `features` → `social-proof` → `footer`. Hero sections utilize a centered composition with dual primary CTAs, and the design is mobile-first, with navigation collapsing into a menu on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to maintain a clean, modern aesthetic, relying on subtle, single-layer shadows to differentiate interactive elements from the background.

*   elevation.sm: Used for subtle separation of small UI elements.
*   elevation.md: Used for card lift and standard container elevation.
*   elevation.lg: Used for modals, drawers, or overlays that require high visual prominence.

## Shapes

The shape language balances technical precision with friendly interaction. Structural containers and cards use a moderate corner radius (`{rounded.md}`), while interactive elements like buttons and badges utilize high-radius, pill-shaped corners (`{rounded.full}`) to emphasize their clickability.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
These are the main drivers of conversion. They feature a white background with `{colors.primary}` text, utilizing `{rounded.full}` for a pill shape. Use these for primary actions in hero sections and navigation.

### Card
The standard container for content, featuring a `{colors.surface}` background and `{rounded.md}` corners. Use these to group related features or showcase content blocks.

### Badge
Small, high-contrast elements using `{colors.secondary}` as a background. Use these to highlight status, categories, or new features within the UI.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons. | Use light backgrounds; maintain the dark-mode aesthetic. |
| Apply `{typography.display-lg}` for main hero headlines. | Use `{typography.body-md}` for headlines. |
| Use `{rounded.full}` for all primary and secondary buttons. | Use sharp corners on `{button-primary}`. |
| Maintain high-contrast borders for card separation. | Use low-contrast text colors on `{colors.background}`. |
| Use `{colors.secondary}` for active states and highlights. | Mix too many font families; stick to Inter and GT Walsheim. |
| Apply `{spacing.md}` as the standard gutter between grid items. | Use excessive `{elevation.lg}` to prevent visual clutter. |
| Use `{rounded.md}` for all standard content cards. | Use `{rounded.full}` for structural layout containers. |
| Use `{colors.link}` for inline text links. | Use `{colors.primary}` for inline text links. |

## Content Style

CTA labels are imperative and action-oriented, using short, punchy verbs like "Start for free" or "Learn more." They should be direct and clearly tied to the user's next step.

Headings are phrased as bold, benefit-driven statements. They should focus on the value proposition of the product or feature rather than just describing it.

Copy density is kept low. Use short, scannable paragraphs and frequent bullet points to maintain a high-energy, modern rhythm that respects the user's time.

## Imagery & Icons

The imagery style is mixed, incorporating high-fidelity product screenshots, abstract shader gradients, and clean, professional photography. Icons should maintain a minimal, geometric aesthetic that aligns with the technical precision of the brand. Avoid overly decorative imagery; focus on assets that showcase the product's capabilities or the creative work of its users.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Framer, a dark-mode, design-forward no-code builder with a bold, high-energy tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.full}` — never hardcode hex values, pixel sizes, or font names.
2. Follow the components block exactly. `{button-primary}` uses `{rounded.full}`, `{colors.on-primary}` text, and white background; `{card}` uses `{rounded.md}`. Do not invent variants the spec doesn't list.
3. Apply the Layout narrative: page order is `nav → hero → features → social-proof → footer`, hero is centered with dual CTAs, spacing uses `{spacing.md}` as the standard grid gutter.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. requesting light backgrounds or sharp button corners), surface the conflict before proceeding.
5. Apply motion tokens (`{motion.duration-short}`, `{motion.easing-standard}`) to all interactive transitions; use elevation tokens sparingly per the Elevation & Depth narrative.

## Output contract

**Must:**
- Use token names for all colors, spacing, radii, typography, elevation, and motion values.
- Include hover, focus, and disabled states for every interactive component the spec defines (e.g. `{button-primary-hover}`, `{input-field-focus}`, `{link-hover}`).
- Render `{colors.focus-ring}` as the keyboard focus indicator on all focusable elements.
- Write CTAs as short, imperative phrases per the Content Style section; headlines as bold, benefit-driven statements.
- Maintain the dark-mode foundation: `{colors.background}` as the page base, `{colors.surface}` for cards and containers.

**Must NOT:**
- Invent colors, font families, radii, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Apply `{rounded.full}` to structural layout containers or `{rounded.md}` to buttons.
- Use `{colors.primary}` for inline text links; use `{colors.link}` instead.
- Add emoji, filler copy, or decorative marketing language.
- Rewrite, replace, or reorganize existing page copy, headings, labels, or navigation items.

## When in doubt
- If a value is unspecified, ask the product team before inventing a token.
- Prefer composing existing components over introducing new ones.
- For ambiguous backgrounds, default to `{colors.surface}`; for ambiguous text, default to `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, it takes precedence.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px.