Screenshot of Authkit

Authkit

authkit.com

The reference for a midnight-blueprint dev-tool hero: near-black #05060f canvas, a faint hairline grid with corner crosses, a soft top-down spotlight beam, and a giant pale-blue gradient wordmark floating above a glassy login card.

Developer Tool flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
aeonikPro
body
Untitled Sans
mono

Do / Don't

Reference it for

  • Midnight-ink canvas #05060f with cool blue-grey type (#9da7ba body, #c7d3ea headings) rather than pure white on black
  • Oversized hero wordmark filled with a vertical ice gradient (linear-gradient #d8ecf8 to #98c0ef) so the title reads as lit glass
  • Faint 1px blueprint grid plus small + and x corner registration marks framing the hero centre
  • A soft conical spotlight beam descending from the top nav onto the hero, suggesting light drawn on dark paper
  • Glassy translucent auth card built from hairline inset strokes (inset 0 0 0 1px rgba(186,215,247,0.12)) and ambient inner glow, no hard drop shadow
  • Glow-as-elevation: 0 0 6px rgba(186,207,247,0.32) on icons instead of opaque fills, keeping the whole surface matte
  • A single restrained electric-iris accent #663af3 reserved only for the pressable element
  • Tiny pill nav (Get started capsule, radius 999px) sitting on near-invisible chrome at the top edge

Do not copy

  • The AuthKit wordmark and the WorkOS logo
  • WorkOS + Radix brand names and the 'world's best login box' tagline
  • The Google and Microsoft logos in the SSO buttons
  • The exact electric-iris #663af3 accent as your own brand colour
  • The 'Sign in to SuperApp' placeholder identity
  • The specific blueprint-glow gradient and shadow stack lifted verbatim