darkboldcreativeanimation-focused

Framer Colors & Fonts

What colors and fonts does Framer use? Website builder for designers. Bold, creative, animation-focused.

Extract Live DesignVisit Framer

Framer Color Palette

Primary: #0055FF

Primary

#0055FF

Brand, buttons

Background

#000000

Main background

Surface

#111111

Cards, panels

Border

#333333

Dividers

Text Primary

#FFFFFF

Headings

Text Secondary

#999999

Body text

What Font Does Framer Use?

Framer uses Inter and Inter

Headings

Inter

700google
Body Text

Inter

400google
Code

SF Mono

400system

Spacing & Radius

Spacing Scale

Base: 4px

48162432486496

Border Radius

Small8px
Medium12px
Large16px

Framer Tailwind Config

Copy this config to your project

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#0055FF',
        'background': '#000000',
        'surface': '#111111',
        'border': '#333333',
        'text-primary': '#FFFFFF',
        'text-secondary': '#999999',
      },
      fontFamily: {
        'heading': ['Inter', 'sans-serif'],
        'body': ['Inter', 'sans-serif'],
        'mono': ['SF Mono', 'sans-serif'],
      },
    },
  },
}

Extract Framer's Full Design

Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.

Get PromptUI — $19

One-time payment · 20 extractions · No subscription

Similar Design Systems

Explore more design systems

Linear

The issue tracking tool loved by developers. Dark, minimal, fast.

Vercel

Frontend cloud platform. Black & white, sharp, bold typography.

Notion

All-in-one workspace. Clean, friendly, content-focused design.

Raycast

Productivity tool for developers. Vibrant gradients, dark UI.

Updated: 2025-01-15