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
#0D99FFBrand, buttons
Background
#FFFFFFMain background
Surface
#F5F5F5Canvas, panels
Border
#E5E5E5Dividers
Text Primary
#333333Headings
Text Secondary
#666666Body text
Red
#F24E1EFigma red
Green
#0ACF83Figma green
Purple
#A259FFFigma 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
Small
4pxMedium
8pxLarge
12pxFigma 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 — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Updated: 2025-01-15