AuthKit
A dark, cinematic developer-auth interface built on a near-black canvas (#05060f) with cool blue-periwinkle glows and a luminous glass login box as the hero artifact. The system reads as premium dev-tooling — spotlit headline wordmark, layered translucent auth cards with soft blue inset borders, and a restrained near-monochrome blue palette where color appears almost entirely as glow and light rather than fills. Brand voltage comes from the giant gradient "AuthKit" wordmark and the floating product login boxes lit from above.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
44px · 500 · 1.159
The quick brown fox jumps
body
16px · 500 · 1.5
The quick brown fox jumps
button
14px · 400 · 2.571
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 40px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 2px | |
| sm | 4px | |
| md | 6px | |
| lg | 10px | |
| xl | 12px | |
| xxl | 16px | |
| pill | 999px | |
| full | 9999px |
FAQ
- What colors does AuthKit use?
- AuthKit's core palette includes #ffffff, #05060f, #000000, #bad6f7, #ffffff. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the AuthKit DESIGN.md.
- What font does AuthKit use?
- AuthKit's primary typeface is Aeonik Pro. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the AuthKit design system?
- A dark, cinematic developer-auth interface built on a near-black canvas (#05060f) with cool blue-periwinkle glows and a luminous glass login box as the hero artifact. The system reads as premium dev-…