clerk.com

clerk.com is an Outlaw brand — cool, bold, kinetic, modern and rebellious — anchored on #6c47ff and geistNumbers, mixed motion.

Adjectives

• cool
• bold
• kinetic
• modern
• rebellious

Personality axes

Evidence

• #6c47ff at 252° reads cool → cool (warmth -0.85)
• heaviest weight 700, 5.3:1 brand contrast → bold (weight +0.61)
• 16px median radius, 300ms median motion → kinetic (energy +0.51)
• Axis fingerprint nearest the Outlaw archetype (68% fit, vs Magician).

Page intent

landing 29% confidence

Material language

flat

Imagery style

photography

Component library

tailwindcss

Stack

next · Tailwind

Voice tone

friendly

1 primary · 1 secondary · 1 accent · 14 neutrals · 21 total

Neutrals

Full palette

WCAG 100% · 3 passing pairs · 0 failing. Full breakdown in §11.

2 families · 13 sizes · 5 weights

Display

geistNumbers

Body

soehneMono

Weights

400, 500, 700, 600, 450

Specimen

Scale

Base 2px · 17 steps captured

Rhythm

8 radii · 6 elevation tiers

Border radii

Elevation

unknown · 24 captured

Library

unknown

Confidence

0%

Stroke style

—

Feel: mixed · 5 durations · 4 easings

Duration scale

Easings

• custom
• ease-out
• custom
• ease-out

tailwindcss · 1 component patterns captured

Mocks

Detected patterns

friendly · — · —

Headlines from the site

• More than authentication, Complete User Management
• Clerk Components
• USER AUTHENTICATION
• B2B AUTHENTICATION

CTA verbs

• ×7
• ×2
• ×2
• ×1
• ×1
• ×1
• ×1
• ×1

No failing contrast pairs detected.

Drop-in code for the most common stacks. All values from the live extraction.

:root {
  --color-primary: #6c47ff;
  --font-display: "geistNumbers";
  --space-base: 2px;
  --radius-md: 5px;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#6c47ff' },
      fontFamily: { display: ['geistNumbers', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '5px' },
    },
  },
};

Run npx designlang pack clerk.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

1. Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.