---
name: Clerk
description: "Exemplary developer tool design that balances professionalism with approachability through careful typography and purposeful visual hierarchy"
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#131316"
  secondary: "#5E5F6E"
  tertiary: "#6248F6"
  neutral: "#747686"
  bg-soft: "#F7F7F8"
  muted-soft: "#9394A1"
  line: "rgba(217, 217, 222, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

Complete user management platform for developers to build secure, scalable applications

*The robust foundation of a secure building*

## Colors

Clean white space with sharp black text and a single vibrant purple accent

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#131316`)** — uses `ink` token
- **Secondary text (`#5E5F6E`)** — uses `ink-soft` token
- **Accent (`#6248F6`)** — uses `accent` token
- **Muted (`#747686`)** — uses `muted` token
- **Borders (`rgba(217, 217, 222, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Headlines use tight tracking and heavy weights for impact
- Body text maintains comfortable reading rhythm with generous line height
- Monospace elements used sparingly for technical emphasis

## Layout

Centered hero with generous whitespace, followed by multi-column feature grid

*Rhythm:* Consistent 4px base with generous whitespace in hero sections

## Elevation & Depth

- 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.1) 0px 1px 3px 0px
- Borders: 1px solid rgba(217, 217, 222, 1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded pill buttons with clear hierarchy (primary filled, secondary outlined)
- **card:** Light gray cards with subtle borders and generous padding
- **chip:** Small rounded labels for categories and roles
- **input:** Clean input fields with subtle borders and rounded corners
- **hero:** Full-width centered layout with large typography and subtle background patterns

## Do's and Don'ts

**Don't:**
- Don't use decorative fonts — screenshot shows clean, functional grotesque-sans typography
- Don't add unnecessary shadows — screenshot shows minimal, purposeful elevation only on key elements
- Don't use multiple accent colors — screenshot shows single purple accent (#6248F6) throughout
- Don't create cramped layouts — screenshot shows generous whitespace and breathing room
- Don't use complex gradients — screenshot shows subtle linear gradients and radial backgrounds
- Don't add unnecessary borders — screenshot shows borders only where functional separation is needed

---

## System Prompt (paste into AI agent)

```
Clerk is a premium developer tool platform focused on authentication and user management. The design uses a clean, professional aesthetic with white backgrounds (#FFFFFF) and light gray surfaces (#F7F7F8). Typography employs grotesque-sans for display and humanist-sans for body text, with tight tracking on headlines. A single vibrant purple accent (#6248F6) creates clear call-to-action hierarchy. The layout centers content with generous whitespace and uses subtle shadows for depth. Critical don'ts: avoid decorative fonts, excessive shadows, multiple accent colors, cramped layouts, complex gradients, and unnecessary borders. The system prioritizes developer experience with clear information hierarchy and purposeful visual elements that communicate reliability and technical sophistication.
```