# Clerk Design

> Clerk's brand and design system. The signature color is purple `#6c47ff`.

## Overview

Clerk is a user management platform. The design system reflects its product philosophy: give developers something they can drop in and ship, then get out of the way.

## Brand Colors

| Token | Hex | Use |
|---|---|---|
| purple-500 | `#6c47ff` | Primary CTA, logomark, brand anchor |
| purple-600 | `#6430f7` | Pressed state |
| sky-500 | `#00aee3` | Secondary accent |
| green-500 | `#22c543` | Success |
| red-500 | `#ef4444` | Error |

### Neutral Gray

| Token | Hex |
|---|---|
| gray-50 | `#f7f7f8` |
| gray-100 | `#eeeef0` |
| gray-500 | `#747686` |
| gray-900 | `#212126` |
| gray-950 | `#131316` |

## Typography

| Role | Family |
|---|---|
| Primary sans | Suisse Intl + Geist |
| Monospace | Söhne Mono |

### Heading Scale

| Utility | Size | Weight |
|---|---|---|
| heading-1 | 4rem | 700 |
| heading-2 | 3.5rem | 600 |
| heading-3 | 3rem | 600 |
| heading-4 | 2rem | 600 |

## Spacing

4px base unit. space-1 = 4px, space-4 = 16px, space-8 = 32px.

## Components

- **Primary Button**: bg-purple-500, white text, rounded-md
- **Cards**: rounded-2xl with layered shadows
- **Inputs**: rounded-md, ring-1 ring-black/10

## Do & Don't

| Do | Don't |
|---|---|
| Use `#6c47ff` as primary | Use purple-600 as primary |
| Sentence case headings | Title case headings |
| Layered shadows | Single flat shadow |

## Resources

- [clerk.com](https://clerk.com/)
- [clerk.com/docs](https://clerk.com/docs)

<!-- Source: https://designmd.app/brands/clerk · designmd.app -->