Authkit · scrub to study layout
Authkit
> Authkit
Frosted glass cathedral at midnight AuthKit renders a midnight product-launch aesthetic: a near-black canvas with frosted-glass surfaces, a grid of faint blueprint lines, and luminous text that appears lit from behind a glass layer. Type is almost entirely white-on-dark with one vivid violet as the single functional accent — every interactive surface wears a soft inset hairline of cool blue-white rather than a hard border. Components sit on translucent layers stacked above ambient glows, with cards that look like glass plates lit from below rather than paper panels. Spacing is generous and rhythmic; the hero is a single full-bleed illuminated wordmark surrounded by floating glass cards rather than a conventional split layout.
↗ https://authkit.comColor Palette
BRAND
Void Violet
#663af3
Primary CTA fill — the only chromatic accent, used exclusively for the Continue/Submit button inside auth forms; vivid violet against near-black creates focused urgency without breaking the monochromatic mood
ACCENT
Blueprint Blue
#b6d9fc
Decorative icon accent, soft highlight wash on feature illustrations
Ember Glow
#e46d4c
Secondary accent — appears in demo/showcase contexts (logo recoloring swatches) for brand-color customization display
Signal Blue
#027dea
Secondary accent — appears in customization swatch grids to demonstrate brand-color options
Deep Teal
#269684
Secondary accent — appears in customization swatch grids
NEUTRALS
Midnight Canvas
#05060f
Page background, deepest card surface, badge fills — the near-black base everything else floats on
Steel Plate
#2f343e
Elevated surface, button fills for ghost/secondary actions, subtle panel backing
Gridline Blue
#3f4959
Shadow color for outer card drop-shadows — cool dark blue-grey gives elevation a tinted, on-brand feel rather than neutral black
Fog Veil
#9da7ba
Muted body copy, card text — readable but stepped back from headlines
Glass Edge
#bad7f71f
Hairline borders on buttons, inputs, and links — inset 1px stroke of frosted blue-white that defines edges without hard lines
Moon Mist
#c7d3ea
Body text, secondary labels, muted helper copy
Luminous Fill
#c7d3ea1f
Badge fill and soft surface tint — translucent cool white for tag backgrounds and subtle UI washes
Frost Glow
#d1e4fa
Primary text fill for body and links, badge text, icon fills — the default luminous foreground
Pure White
#ffffff
Button text, input text, maximum-emphasis foreground)
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.