---
site: "Clerk | Authentication and User Management"
url: "https://clerk.com"
generated_at: "2026-06-25T08:26:24.060Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: tailwindcss
tokens:
  colors:
    primary: "#6c47ff"
    secondary: "#1cc4ff"
    accent: "#5de3ff"
    background: "#f7f7f8"
    foreground: "#000000"
  typography:
    sans: geistNumbers
    mono: soehneMono
    base: 13
  spacing:
    base: 2
    scale: "[1, 46, 56, 76, 94, 128, 140, 151, 158, 167]"
  radii:
    xs: 2
    sm: 5
    md: 8
    lg: 16
    full: 38
  shadows:
    sm: "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"
---

# Overview

A **landing** page (heuristic confidence 0.29), dressed in **flat** material.

Component library appears to be **tailwindcss** (0.63).

> "More than authentication, Complete User Management"

The author writes in a **friendly** voice; headings tend to be **Title Case** case and **tight**.

Reading order detected on the source: `nav → nav → pricing-table → footer`.

Source: <https://clerk.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#6c47ff` | 5 |
| secondary | `#1cc4ff` | 2 |
| accent | `#5de3ff` | 2 |
| background | `#f7f7f8` | — |
| foreground | `#000000` | — |

**Neutrals:** `#d9d9de` · `#000000` · `#ffffff` · `#131316` · `#747686`

**Total unique colors detected:** 21.

# Typography

**Families**
- `geistNumbers` · 3943 uses
- `soehneMono` · 51 uses

**Body size:** `13px` / line-height `24px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `700` | `72px` |
| h2 | `17px` | `700` | `24px` |
| h3 | `16px` | `400` | `24px` |
| h4 | `14px` | `700` | `20px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `46px` · `56px` · `76px` · `94px` · `128px` · `140px` · `151px` · `158px` · `167px`

**Layout primitives:** 14 grid containers · 367 flex containers.

# Elevation and Depth

**Shadow scale**
- `sm` — `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`
- `sm` — `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`
- `sm` — `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`
- `sm` — `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`
- `sm` — `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`
- `sm` — `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`

**Z-index layers:** 12

# Shapes

**Radius scale**
- `xs` — `2px`
- `sm` — `5px`
- `md` — `8px`
- `lg` — `12px`
- `lg` — `16px`
- `full` — `38px`

# Components

**Detected patterns:** `buttons` · `cards` · `links` · `navigation` · `modals` · `badges`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | solid, outline | md, xs, medium | 30 |

# Do's and Don'ts

**Do's**
- Use `secured`, `userprofile`, `organizationprofile` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Title Case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 57 unique shadows — consider a 3-level elevation scale (sm/md/lg).
- Don't 96 !important rules — prefer specificity over overrides.
- Don't 6012 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://clerk.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._