lightpolisheddeveloper-focusedpurple

Clerk Colors & Fonts

What colors and fonts does Clerk use? Authentication and user management. Purple accents, polished.

Clerk Color Palette

Primary: #6C47FF

Primary

#6C47FF

Brand, buttons

Background

#FFFFFF

Main background

Surface

#FAFAFA

Cards

Border

#E5E5E5

Dividers

Text Primary

#1F1F1F

Headings

Text Secondary

#747474

Body text

What Font Does Clerk Use?

Clerk uses Inter and Inter

Headings

Inter

600google
Body Text

Inter

400google
Code

Fira Code

400google

Spacing & Radius

Spacing Scale

Base: 4px

48121624324864

Border Radius

Small6px
Medium8px
Large12px

Clerk Tailwind Config

Copy this config to your project

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#6C47FF',
        'background': '#FFFFFF',
        'surface': '#FAFAFA',
        'border': '#E5E5E5',
        'text-primary': '#1F1F1F',
        'text-secondary': '#747474',
      },
      fontFamily: {
        'heading': ['Inter', 'sans-serif'],
        'body': ['Inter', 'sans-serif'],
        'mono': ['Fira Code', 'sans-serif'],
      },
    },
  },
}

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