lightvibrantplayfuldesign-focused

Figma Colors & Fonts

What colors and fonts does Figma use? Collaborative design tool. Vibrant, playful, design-focused.

Figma Color Palette

Primary: #0D99FF

Primary

#0D99FF

Brand, buttons

Background

#FFFFFF

Main background

Surface

#F5F5F5

Canvas, panels

Border

#E5E5E5

Dividers

Text Primary

#333333

Headings

Text Secondary

#666666

Body text

Red

#F24E1E

Figma red

Green

#0ACF83

Figma green

Purple

#A259FF

Figma purple

What Font Does Figma Use?

Figma uses Inter and Inter

Headings

Inter

600google
Body Text

Inter

400google
Code

Roboto Mono

400google

Spacing & Radius

Spacing Scale

Base: 8px

816243240486480

Border Radius

Small4px
Medium8px
Large12px

Figma Tailwind Config

Copy this config to your project

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#0D99FF',
        'background': '#FFFFFF',
        'surface': '#F5F5F5',
        'border': '#E5E5E5',
        'text-primary': '#333333',
        'text-secondary': '#666666',
        'red': '#F24E1E',
        'green': '#0ACF83',
        'purple': '#A259FF',
      },
      fontFamily: {
        'heading': ['Inter', 'sans-serif'],
        'body': ['Inter', 'sans-serif'],
        'mono': ['Roboto Mono', 'sans-serif'],
      },
    },
  },
}

Extract Figma'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

Updated: 2025-01-15