Clerk

clerk.com ↗

Developer-focused auth platform with a distinctive violet brand accent against clean near-white neutrals and crisp editorial type.

More than authentication, Complete User Management

What Coherent builds from this

generated · not Clerk's site

An original page Coherent generated from Clerk's tokens — its palette, type, and shape applied to fresh content. This is the output, not a screenshot of Clerk.

generated-with-coherent · clerk

A landing page generated by Coherent from Clerk's design tokens

Build on these tokens

Download the file and seed any AI tool — or install it into a real Next.js project so every generated page shares this palette, type, and shape.

Download clerk.mdthen, in your project:

$ npm i -g @getcoherent/cli
$ coherent import design clerk.md

Colour

#6c47ff

brand · h2 text

#f7f7f8

background · body background

#000000

text · body text

#131316

text · h1 text

#747686

text · button-secondary text

#5e5f6e

text · p text

#ffffff

text · a text

Typography

Families: geistNumbers · suisse · suisse Fallback · soehneMono

display64pxw700/72px

h132pxw600/40px

h217pxw700/24px

h316pxw400/24px

h415pxw450/24px

body14pxw700/20px

small11pxw400/16px

Spacing

8px12px16px48px128px160px272px

Radius

0px

4px

5px

6px

8px

10px

12px

16px

38px

44px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(66, 67, 77) 0px 0px 0px 0.5px, oklab(0.999994 0.0000455678 0.0000200868 / 0.07) 0px 1px 0px 0px inset, oklab(0.249859 0.00254738 -0.00901626 / 0.2) 0px 1px 3px 0px

rgba(255, 255, 255, 0.9) 0px 0px 0px 0.5px inset, rgba(19, 19, 22, 0.15) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 2px 3px 0px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.08) 0px 2px 3px -1px, oklab(0.188081 0.0016512 -0.00579907 / 0.18) 0px 0px 0px 0.5px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 1px 0px 0px inset

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(108, 71, 255) 0px 0px 0px 0.5px, oklab(0.999994 0.0000455678 0.0000200868 / 0.07) 0px 1px 0px 0px inset, oklab(0.249859 0.00254738 -0.00901626 / 0.2) 0px 1px 3px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.08) 0px 2px 3px -1px, oklab(0.188081 0.0016512 -0.00579907 / 0.1) 0px 0px 0px 0.5px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 1px 0px 0px inset

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px -9px 11px -10px, rgba(0, 0, 0, 0.05) 0px -0.25px 0px 0.25px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(147, 148, 161) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.188081 0.0016512 -0.00579907 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.2) 0px 15px 35px -5px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(47, 48, 55, 0.2) 0px 15px 35px -5px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px

rgb(217, 217, 222) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 0px 0px, rgba(0, 0, 0, 0.08) 0px 2px 3px -1px

Gradients

linearlinear-gradient(rgba(19, 19, 22, 0) 45%, rgba(19, 19, 22, 0.03) 55%)

radial

radial-gradient(154.86% 76.83% at 50% 22.26%, color(srgb 0.968627 0.968627 0.972549 / 0.4) 8.98%, rgb(247, 247, 248) 45.99%)

linearlinear-gradient(oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0%, rgba(0, 0, 0, 0) 100%)

linearlinear-gradient(rgba(58, 212, 253, 0.08) 0%, rgba(98, 72, 246, 0.15) 50.73%)

radialradial-gradient(79.87% 92.91% at 81.25% 12.5%, rgb(255, 255, 255) 0%, rgb(25, 25, 27) 100%)

linearlinear-gradient(to right bottom, oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 0%, rgba(0, 0, 0, 0) 65%)

radial

radial-gradient(50% 100% at 50% 0%, color(srgb 0 0 0 / 0), color(srgb 0.129412 0.129412 0.14902 / 0.68) 61.5%, rgb(33, 33, 38))

linear

linear-gradient(to right top, oklab(0 0 0 / 0) 0%, oklab(0 0 0 / 0) 50%, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 100%)

linearlinear-gradient(in oklab, rgb(39, 39, 45) 0%, rgb(55, 56, 64) 100%)

linear

linear-gradient(to right bottom, oklab(0 0 0 / 0) 30%, oklab(0.952604 -0.0417787 -0.0206957 / 0.7) 50%, oklab(0 0 0 / 0) 70%)

Borders

1px solid #131316

1px dashed #d9d9de

1px solid #000000

1px solid #5e5f6e

Motion

200mscubic-bezier(0, 0, 0.2, 1)padding

300mscubic-bezier(0.4, 0.36, 0, 1)color

450mscubic-bezier(0.33, 1, 0.68, 1)color

150mscubic-bezier(0.4, 0, 0.2, 1)color

500mscubic-bezier(0.4, 0, 0.2, 1)color

1000mscubic-bezier(0.4, 0, 0.2, 1)color

Glassmorphism

blur(3px)

Surfaces

#f7f7f8

page

Layout

Container widths

896px672px

z-index ladder

-10-11231020304050100

Extracted from live CSS by Coherent (light mode). Numeric fields reflect the site at capture time; roles and the summary are inferred. Tokens and prose only — a description, not a copy.

Save clerk.md to your device

Open it on your desktop to run the CLI.