AuthKit

starlit blueprint under a spotlight

Bookmark

Developer Tools Dark dark technical precise cool minimal Built with Next.js Built with React Aeonik Pro Untitled Sans dotDigital

Visit website

A near-black, blue-tinted stage on which a single login box is lit like a product on a plinth. Faint grid lines, corner ticks and pinprick stars give the page the feel of an engineering blueprint, while a soft conical light bleed from the top centre makes the oversized 'AuthKit' wordmark glow in pale ice blue. Everything is low-contrast and cool except the hero type and the one violet CTA — the restraint is the point: the UI being sold is the only bright object.

Technically it is achieved with a #05060f base, translucent frosted surfaces built from rgba(199,211,234,0.06) fills and 1px rgba(186,215,247,0.12) hairlines, and text that never goes pure white except in inputs — body copy sits at #c7d3ea with a 64% muted variant. Type pairs Aeonik Pro (44–48px, weight 500) for section headlines with Untitled Sans at 14–24px for everything else, on an 8px spacing rhythm inside a 1200px container. Radii are deliberately plural — 999px pills in the hero card, 2–4px in the themable demo cards — because the product demo shows the same login box restyled. Depth comes from inset glows rather than drop shadows.

Listed on Refero Styles · Seesaw

Sections

Browse the library by section

AuthKit social proof section — Social Proof

AuthKit 404 section — 404 /devdojo-inspiration-404-probe-mviqltjs

Colors

Click a swatch to copy

Typography

display

Aeonik Pro

400 · 500 · falls back to Inter, Helvetica Neue, Arial, sans-serif

Section headlines only, 28–48px at weight 500, tight 1.14–1.17 line-height. Also the shape of the giant hero wordmark.
body

Untitled Sans

400 · 500 · 600 · 700 · falls back to Inter, system-ui, Helvetica Neue, sans-serif

Everything else: lead copy, UI labels, buttons, captions. 24px lead uses -0.24px tracking; all smaller sizes run at normal tracking.
mono

dotDigital

400 · falls back to Berkeley Mono, IBM Plex Mono, monospace

Used only for masked password dots (15px, 1.5px letter-spacing). Treat as a decorative accent, not a code face.

Display (hero wordmark)

clamp(72px, 14vw, 180px) / 1.0

500 · -0.02em

AuthKit

H1 / Section headline

48px / 1.17

500 · normal

AuthKit

44px / 1.16

500 · normal

AuthKit

28px / 1.14

500 · normal

Starlit blueprint under a spotlight

Lead / hero subcopy

24px / 1.33

400 · -0.01em

Starlit blueprint under a spotlight

Body

16px / 1.5

400 · normal

The quick brown fox jumps over the lazy dog

UI / Label

14px / 1.43

500 · normal

The quick brown fox jumps over the lazy dog

Caption

12px / 1.33

400 · normal

The quick brown fox jumps over the lazy dog

Mono dots

15px / 1

400 · 1.5px

The quick brown fox jumps over the lazy dog

Spacing & Shape

Spacing

Base unit: 8px
Density: comfortable
Container: 1200px
Section gap: 120px
Card padding: 32px

100

120

Radius

Pill button / badge / nav CTA 999px
Hero login card 16px
Demo card / stage panel 12px
Themed button & input (default demo) 3px
Themed button & input (sharp variant) 2px
Icon tile / swatch 6px
Avatar / logo mark 50%

Shadows

glow-sm Pinprick stars, corner ticks and active control glows — the most common depth cue on the page.

rgba(186, 207, 247, 0.32) 0px 0px 6px 0px

glow-violet Halo around the brand mark and the violet CTA in the theming demo.

rgba(238, 186, 247, 0.24) 0px 0px 12px 0px

hairline-inset The universal 1px frosted border on cards, buttons and inputs — use instead of a real border where layout must not shift.

rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset

panel-bloom Large frosted cards: a top-left edge catch plus a wide internal bloom that mimics the overhead spotlight.

rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset

surface-sheen Subtle inner sheen on inputs and secondary buttons on hover/focus.

rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset

Components

Live previews rendered from recipes

AuthKit ProductPricingChangelogDocs Get started

Buttons

Inputs

Do / Don't

Build every surface from translucent pale-blue overlays — rgba(199,211,234,0.06) fill with a 1px rgba(186,215,247,0.12) hairline — never from a solid lighter grey.
Keep body copy at #c7d3ea and reserve #ffffff for typed input values and the violet button label only.
Use inset glows (0 0 96px rgba(186,215,247,0.08) inset) for depth instead of drop shadows; outer shadow is reserved for 6px star-glows.
Centre everything: eyebrow rule, headline, paragraph, and the demo artefact on a single vertical axis within 1200px.
Pair Aeonik Pro 500 at 44–48px with Untitled Sans 400/500 at 14–16px; never set long paragraphs in the display face.
Let the blueprint grid, corner ticks and star dots carry the texture — they should be barely visible (<8% alpha).
Set all controls to 32px height with 14px/500 labels and 16px horizontal padding, whatever the radius.

Don't introduce a second saturated colour alongside #663af3 — the violet CTA is the only bright fill on the page.
Don't use pure black or neutral grey; every dark value carries the blue cast of #05060f.
Don't add a sticky or blurred nav bar — the header is static, transparent and borderless.
Don't mix radii arbitrarily within one component group: pick 999px for hero chrome or 2–4px for themed demos and stay consistent.
Don't place hard-edged drop shadows under cards; depth is light bleed, not elevation.
Don't set paragraph text above 16px or below 12px, and never use all-caps tracked headings.
Don't fill the page with photography, illustration or gradient blobs — the only imagery is the product UI itself.

Screens

Brand assets

As served by the site

Favicon Download

AuthKit open graph image — Open Graph image Download

More Developer Tools Browse by section Surprise me

Download .md

AuthKit — Design Reference

starlit blueprint under a spotlight

Source: https://authkit.com
Theme: dark
Category: Developer Tools
Mood: dark, technical, precise, cool, minimal
Captured: 2026-10-21

Overview

Tokens — Colors

Name	Value	Token	Role
Deep Space	`#05060f`	`--color-bg-base`	Page background across every section; the blue-black canvas behind grid lines and stars.
Void Shade	`#06060e`	`--color-bg-alt`	Barely-distinct second surface step used for large inset panels and the demo stage.
Spotlight Ice	`#bbd7f7`	`--color-glow-primary`	The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows.
Nav Ice	`#bad6f7`	`--color-link`	Nav link and logo colour; 16px/400 header text.
Pale Steel	`#c7d3ea`	`--color-text-body`	Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha).
Button Frost	`#d1e4fa`	`--color-text-control`	Label colour inside ghost buttons and pill controls.
Signal White	`#ffffff`	`--color-text-strong`	Typed input values and primary-button labels only; never used for body paragraphs.
Radix Violet	`#663af3`	`--color-primary`	The single saturated CTA: filled 'Continue' button in the theming demo.
Periwinkle Chip	`#b3b3ff`	`--color-accent-soft`	Brand mark fill and soft accent swatches in the customisation panel.
Ember Swatch	`#e46d4c`	`--color-swatch-warm`	Colour-picker swatch in the theming demo (warm option).
Signal Blue	`#027dea`	`--color-swatch-info`	Colour-picker swatch in the theming demo (info/blue option).
Teal Swatch	`#269684`	`--color-swatch-success`	Colour-picker swatch in the theming demo; usable as the success hue.

Semantic roles

Role	Value
background	`#05060f`
surface	`rgba(199, 211, 234, 0.06)`
surface raised	`#06060e`
border	`rgba(186, 215, 247, 0.12)`
text	`#c7d3ea`
primary	`#663af3`
primary text	`#ffffff`
accent	`#bbd7f7`
success	`#269684`
warning	`#e46d4c`

Tokens — Typography

Display: Aeonik Pro (400, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Section headlines only, 28–48px at weight 500, tight 1.14–1.17 line-height. Also the shape of the giant hero wordmark.
Body: Untitled Sans (400, 500, 600, 700) — fallbacks: Inter, system-ui, Helvetica Neue, sans-serif. Everything else: lead copy, UI labels, buttons, captions. 24px lead uses -0.24px tracking; all smaller sizes run at normal tracking.
Mono: dotDigital (400) — fallbacks: Berkeley Mono, IBM Plex Mono, monospace. Used only for masked password dots (15px, 1.5px letter-spacing). Treat as a decorative accent, not a code face.

Role	Size	Line height	Weight	Letter spacing	Family
Display (hero wordmark)	clamp(72px, 14vw, 180px)	1.0	500	-0.02em	display
H1 / Section headline	48px	1.17	500	normal	display
H2	44px	1.16	500	normal	display
H3	28px	1.14	500	normal	display
Lead / hero subcopy	24px	1.33	400	-0.01em	body
Body	16px	1.5	400	normal	body
UI / Label	14px	1.43	500	normal	body
Caption	12px	1.33	400	normal	body
Mono dots	15px	1	400	1.5px	mono

Tokens — Spacing & Layout

Base unit: 8px
Density: comfortable
Container max width: 1200px
Section gap: 120px
Card padding: 32px
Scale: 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 40px, 48px, 100px, 120px

Tokens — Radius

Element	Value
Pill button / badge / nav CTA	999px
Hero login card	16px
Demo card / stage panel	12px
Themed button & input (default demo)	3px
Themed button & input (sharp variant)	2px
Icon tile / swatch	6px
Avatar / logo mark	50%

Tokens — Shadows

Name	Value	Usage
glow-sm	`rgba(186, 207, 247, 0.32) 0px 0px 6px 0px`	Pinprick stars, corner ticks and active control glows — the most common depth cue on the page.
glow-violet	`rgba(238, 186, 247, 0.24) 0px 0px 12px 0px`	Halo around the brand mark and the violet CTA in the theming demo.
hairline-inset	`rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset`	The universal 1px frosted border on cards, buttons and inputs — use instead of a real border where layout must not shift.
panel-bloom	`rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset`	Large frosted cards: a top-left edge catch plus a wide internal bloom that mimics the overhead spotlight.
surface-sheen	`rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset`	Subtle inner sheen on inputs and secondary buttons on hover/focus.

Components

Primary button (themed CTA) (button)

Property	Value
background	`#663af3`
color	`#ffffff`
border	`none`
radius	`3px`
padding	`0 16px`
font size	`14px`
font weight	`500`
shadow	`rgba(238, 186, 247, 0.24) 0px 0px 12px 0px`
hover	`brightness(1.08) and strengthen the violet glow to 0 0 16px rgba(238,186,247,0.32)`

32px tall, full-width inside the login card. The only saturated fill on the page — use once per view.

Ghost pill button (button)

Property	Value
background	`transparent`
color	`#d1e4fa`
border	`1px solid rgba(186, 215, 247, 0.12)`
radius	`999px`
padding	`0 16px`
font size	`14px`
font weight	`500`
shadow	`none`
hover	`background rgba(199, 211, 234, 0.06); border-color rgba(186, 215, 247, 0.2)`

32px tall. Default action style in the hero login box ('Continue', 'Continue with Google/Microsoft') and the nav 'Get started'. Social buttons prefix a 16px brand glyph with an 8px gap, label centred.

Frosted input (input)

Property	Value
background	`rgba(199, 211, 234, 0.06)`
color	`#ffffff`
border	`1px solid rgba(186, 215, 247, 0.12)`
radius	`3px`
padding	`0 10px`
font size	`14px`
font weight	`400`
shadow	`none`
hover	`focus: border-color rgba(186, 215, 247, 0.28) + box-shadow 0 0 6px rgba(186,207,247,0.32)`

32px tall, full width, placeholder in #c7d3eaa3. Paired with a 14px/500 label above at an 6–8px gap. Radius swaps to 999px / 4px / 2px in the theming demo to show the same component restyled.

Spotlit login card (card)

Property	Value
background	`linear-gradient(0deg, rgba(216,236,248,0.06) 0%, rgba(152,192,239,0.06) 100%), #05060f`
color	`#c7d3ea`
border	`1px solid rgba(186, 215, 247, 0.12)`
radius	`16px`
padding	`32px 24px`
font size	`14px`
font weight	`400`
shadow	`rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset`
hover	`none — the foreground card is static; flanking cards sit at ~45% opacity behind it`

~376px wide, centred, with 2px glowing dots pinned at the top-left and top-right inner corners. Contents stack at 8–16px gaps: logo mark, 16px/500 title, label+input, button, 'OR' rule, social buttons, 14px footer line with a 600-weight inline link.

Transparent nav (nav)

Property	Value
background	`transparent`
color	`#bad6f7`
border	`none`
radius	`0`
padding	`36px 40px`
font size	`16px`
font weight	`400`
shadow	`none`
hover	`link colour to #d8ecf8`

105px tall, static (not sticky), no border or backdrop blur. Three-zone layout: wordmark left, centred brand glyph, GitHub icon + ghost pill CTA right.

Eyebrow rule (badge)

Property	Value
background	`transparent`
color	`#c7d3eaa3`
border	`none`
radius	`0`
padding	`0 16px`
font size	`14px`
font weight	`400`
shadow	`none`
hover	`none`

Centred label ('Introducing', 'Show bright', 'Extensible by design') flanked by 1px hairline rules that fade out via linear-gradient to transparent. Sits 24px above the headline.

Feature icon tile (other)

Property	Value
background	`rgba(199, 211, 234, 0.06)`
color	`#c7d3ea`
border	`1px solid rgba(186, 215, 247, 0.12)`
radius	`6px`
padding	`10px`
font size	`12px`
font weight	`400`
shadow	`rgba(186, 207, 247, 0.32) 0px 0px 6px 0px`
hover	`lift glow to 0 0 10px rgba(186,207,247,0.4)`

Row of 6 tiles (Single Sign-On, Passkeys, MFA, Social Login, RBAC, Magic Auth) connected by dashed hairlines, each with a 12px caption 8px beneath.

Layout

Single centred column inside a 1200px container, every section symmetrical about the vertical axis. A full-bleed blueprint layer sits behind everything: ~1px rgba(186,215,247,0.06) grid lines, small X and corner-tick marks at intersections, and scattered 1–2px glowing star dots. The hero is a stacked composition — eyebrow, giant wordmark, two-line lead, then three overlapping login cards where the centre one is fully opaque and the flanks are dimmed and clipped by the viewport edge. Sections are separated by ~120px of vertical space and introduced by an eyebrow rule + 44px headline + 16px paragraph, always centred and max ~520px wide. The 'Your brand. Your style.' section nests a dark browser-chrome panel containing the login box surrounded by floating control cards that demonstrate theming.

Imagery

No photography. All visuals are rendered UI: the product's own login box, isometric architecture diagrams built from frosted tiles and dashed connector lines, and small iconography in pale blue line style. The dominant 'image' is light itself — a conical spotlight gradient from the top centre of the hero plus internal 96px blooms inside cards. Keep all decoration monochrome blue-grey; colour appears only in the theming swatches and the violet CTA.

Motion

Restrained and atmospheric. Glow intensity and card opacity transition on 200–300ms ease-out; the flanking login cards may drift subtly on scroll parallax. Section content fades up ~12px on enter. Hover states change border alpha and background alpha only — no scale, no bounce. The theming demo animates radius, colour and font swaps on the live login box as the controls change.

Responsive

At phone widths the nav keeps all three zones but drops to ~24px side padding with no hamburger — the wordmark, centre glyph and 'Get started' pill simply tighten; the GitHub icon is dropped. The hero does not stack: the wordmark scales fluidly to fill the viewport width (~14vw, clamped) and the three-card composition crops hard, with the flanking cards running off both edges at reduced opacity while the centre card stays full width minus ~24px gutters. Lead copy shrinks from 24px to ~18px, section headlines from 44px to ~28px, and section gaps collapse from 120px to ~64px. Inside cards, buttons and inputs are 100% width and keep the 32px height and 14px type unchanged — the login box is deliberately identical to its desktop rendering. The blueprint grid stays but at a coarser cell size; the browser-chrome theming panel becomes horizontally scrollable rather than reflowing.

Do

Build every surface from translucent pale-blue overlays — rgba(199,211,234,0.06) fill with a 1px rgba(186,215,247,0.12) hairline — never from a solid lighter grey.
Keep body copy at #c7d3ea and reserve #ffffff for typed input values and the violet button label only.
Use inset glows (0 0 96px rgba(186,215,247,0.08) inset) for depth instead of drop shadows; outer shadow is reserved for 6px star-glows.
Centre everything: eyebrow rule, headline, paragraph, and the demo artefact on a single vertical axis within 1200px.
Pair Aeonik Pro 500 at 44–48px with Untitled Sans 400/500 at 14–16px; never set long paragraphs in the display face.
Let the blueprint grid, corner ticks and star dots carry the texture — they should be barely visible (<8% alpha).
Set all controls to 32px height with 14px/500 labels and 16px horizontal padding, whatever the radius.

Don't

Don't introduce a second saturated colour alongside #663af3 — the violet CTA is the only bright fill on the page.
Don't use pure black or neutral grey; every dark value carries the blue cast of #05060f.
Don't add a sticky or blurred nav bar — the header is static, transparent and borderless.
Don't mix radii arbitrarily within one component group: pick 999px for hero chrome or 2–4px for themed demos and stay consistent.
Don't place hard-edged drop shadows under cards; depth is light bleed, not elevation.
Don't set paragraph text above 16px or below 12px, and never use all-caps tracked headings.
Don't fill the page with photography, illustration or gradient blobs — the only imagery is the product UI itself.

Agent prompt

Build a dark, blueprint-themed developer product page on a #05060f blue-black canvas with a faint full-bleed grid (1px rgba(186,215,247,0.06) lines, small X/corner tick marks, scattered 1–2px dots with box-shadow 0 0 6px rgba(186,207,247,0.32)) and a conical #bbd7f7 spotlight gradient bleeding down from the top centre of the hero. Type: Aeonik Pro (fallback Inter) weight 500 for headlines — 44–48px at 1.16 line-height — and Untitled Sans (fallback Inter) for everything else: 24px/1.33 lead with -0.24px tracking, 16px/1.5 body, 14px/1.43 UI labels at weight 500, 12px/1.33 captions; the hero wordmark is display face at clamp(72px,14vw,180px) filled with a pale #bbd7f7-to-#d8ecf8 vertical gradient. Colour: body text #c7d3ea, muted #c7d3eaa3, control labels #d1e4fa, nav links #bad6f7, pure #ffffff only for typed input values and the one violet CTA (#663af3, radius 3px, 32px tall, glow 0 0 12px rgba(238,186,247,0.24)). Every surface is translucent: background rgba(199,211,234,0.06) with 1px rgba(186,215,247,0.12) borders; large cards add inset depth via 'rgba(199,211,234,0.12) -0.5px 0.5px 1px inset, rgba(186,215,247,0.08) 0 0 96px inset' — no outer drop shadows. Controls are uniformly 32px tall with 0 16px padding, 14px/500 labels; ghost pill buttons use radius 999px and transparent fill, themed demo variants use 2–4px. Layout: single centred 1200px column, ~120px section gaps, each section opening with a centred eyebrow label in muted blue flanked by fading hairline rules, then a 44px headline and a ~520px-wide paragraph. The hero shows three overlapping login cards — a 16px-radius, ~376px-wide frosted centre card (glowing 2px dots pinned in its top inner corners, containing logo, 16px/500 title, label+input, ghost Continue button, 'OR' divider, Google/Microsoft buttons, 14px footer with a 600-weight inline link) flanked by dimmed, viewport-cropped siblings. Motion is restrained: 200–300ms ease-out opacity, glow and border-alpha transitions only. On mobile keep the static three-zone transparent nav (no hamburger), let the wordmark scale fluidly, crop the card composition at the edges, and render controls full-width while keeping their 32px height and 14px type.

CSS custom properties

/* AuthKit — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg-base: #05060f; /* Page background across every section; the blue-black canvas behind grid lines and stars. */
  --color-bg-alt: #06060e; /* Barely-distinct second surface step used for large inset panels and the demo stage. */
  --color-glow-primary: #bbd7f7; /* The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows. */
  --color-link: #bad6f7; /* Nav link and logo colour; 16px/400 header text. */
  --color-text-body: #c7d3ea; /* Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha). */
  --color-text-control: #d1e4fa; /* Label colour inside ghost buttons and pill controls. */
  --color-text-strong: #ffffff; /* Typed input values and primary-button labels only; never used for body paragraphs. */
  --color-primary: #663af3; /* The single saturated CTA: filled 'Continue' button in the theming demo. */
  --color-accent-soft: #b3b3ff; /* Brand mark fill and soft accent swatches in the customisation panel. */
  --color-swatch-warm: #e46d4c; /* Colour-picker swatch in the theming demo (warm option). */
  --color-swatch-info: #027dea; /* Colour-picker swatch in the theming demo (info/blue option). */
  --color-swatch-success: #269684; /* Colour-picker swatch in the theming demo; usable as the success hue. */

  /* Semantic roles */
  --background: #05060f;
  --surface: rgba(199, 211, 234, 0.06);
  --surface-raised: #06060e;
  --border: rgba(186, 215, 247, 0.12);
  --text: #c7d3ea;
  --primary: #663af3;
  --primary-text: #ffffff;
  --accent: #bbd7f7;
  --success: #269684;
  --warning: #e46d4c;

  /* Typography */
  --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
  --text-display-hero-wordmark: clamp(72px, 14vw, 180px);
  --text-display-hero-wordmark--line-height: 1.0;
  --text-display-hero-wordmark--letter-spacing: -0.02em;
  --text-display-hero-wordmark--font-weight: 500;
  --text-h1-section-headline: 48px;
  --text-h1-section-headline--line-height: 1.17;
  --text-h1-section-headline--letter-spacing: normal;
  --text-h1-section-headline--font-weight: 500;
  --text-h2: 44px;
  --text-h2--line-height: 1.16;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 500;
  --text-h3: 28px;
  --text-h3--line-height: 1.14;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 500;
  --text-lead-hero-subcopy: 24px;
  --text-lead-hero-subcopy--line-height: 1.33;
  --text-lead-hero-subcopy--letter-spacing: -0.01em;
  --text-lead-hero-subcopy--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 400;
  --text-ui-label: 14px;
  --text-ui-label--line-height: 1.43;
  --text-ui-label--letter-spacing: normal;
  --text-ui-label--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 400;
  --text-mono-dots: 15px;
  --text-mono-dots--line-height: 1;
  --text-mono-dots--letter-spacing: 1.5px;
  --text-mono-dots--font-weight: 400;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 100px;
  --space-12: 120px;
  --container: 1200px;
  --section-gap: 120px;

  /* Radius */
  --radius-pill-button-badge-nav-cta: 999px;
  --radius-hero-login-card: 16px;
  --radius-demo-card-stage-panel: 12px;
  --radius-themed-button-input-default-demo: 3px;
  --radius-themed-button-input-sharp-variant: 2px;
  --radius-icon-tile-swatch: 6px;
  --radius-avatar-logo-mark: 50%;

  /* Shadows */
  --shadow-glow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-glow-violet: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline-inset: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-panel-bloom: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-surface-sheen: rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset;
}

Tailwind v4 theme

/* AuthKit — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg-base: #05060f;
  --color-bg-alt: #06060e;
  --color-glow-primary: #bbd7f7;
  --color-link: #bad6f7;
  --color-text-body: #c7d3ea;
  --color-text-control: #d1e4fa;
  --color-text-strong: #ffffff;
  --color-primary: #663af3;
  --color-accent-soft: #b3b3ff;
  --color-swatch-warm: #e46d4c;
  --color-swatch-info: #027dea;
  --color-swatch-success: #269684;
  --color-background: #05060f;
  --color-surface: rgba(199, 211, 234, 0.06);
  --color-surface-raised: #06060e;
  --color-border: rgba(186, 215, 247, 0.12);
  --color-text: #c7d3ea;
  --color-primary: #663af3;
  --color-primary-text: #ffffff;
  --color-accent: #bbd7f7;
  --color-success: #269684;
  --color-warning: #e46d4c;
  --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
  --text-display-hero-wordmark: clamp(72px, 14vw, 180px);
  --text-display-hero-wordmark--line-height: 1.0;
  --text-display-hero-wordmark--letter-spacing: -0.02em;
  --text-display-hero-wordmark--font-weight: 500;
  --text-h1-section-headline: 48px;
  --text-h1-section-headline--line-height: 1.17;
  --text-h1-section-headline--letter-spacing: normal;
  --text-h1-section-headline--font-weight: 500;
  --text-h2: 44px;
  --text-h2--line-height: 1.16;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 500;
  --text-h3: 28px;
  --text-h3--line-height: 1.14;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 500;
  --text-lead-hero-subcopy: 24px;
  --text-lead-hero-subcopy--line-height: 1.33;
  --text-lead-hero-subcopy--letter-spacing: -0.01em;
  --text-lead-hero-subcopy--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 400;
  --text-ui-label: 14px;
  --text-ui-label--line-height: 1.43;
  --text-ui-label--letter-spacing: normal;
  --text-ui-label--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 400;
  --text-mono-dots: 15px;
  --text-mono-dots--line-height: 1;
  --text-mono-dots--letter-spacing: 1.5px;
  --text-mono-dots--font-weight: 400;
  --radius-pill-button-badge-nav-cta: 999px;
  --radius-hero-login-card: 16px;
  --radius-demo-card-stage-panel: 12px;
  --radius-themed-button-input-default-demo: 3px;
  --radius-themed-button-input-sharp-variant: 2px;
  --radius-icon-tile-swatch: 6px;
  --radius-avatar-logo-mark: 50%;
  --shadow-glow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-glow-violet: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline-inset: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-panel-bloom: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-surface-sheen: rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset;
  --container-site: 1200px;
}

Theme tokens — light + dark

The shadcn-named layer DevDojo Sites speaks (bg-background, text-foreground, bg-primary, rounded-medium…). Paste into site.css after @import "tailwindcss" to restyle any site in this look.

/* AuthKit — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: captured; the light half is estimated — the site is dark by default. Add class="dark" to <html> for the site's native look. */
@custom-variant dark (&:where(.dark, .dark *));

:root {
    color-scheme: light;

    --background: #ffffff;
    --foreground: #05060f;
    --card: #ffffff;
    --card-foreground: #05060f;
    --popover: #ffffff;
    --popover-foreground: #05060f;
    --primary: #663af3;
    --primary-foreground: #ffffff;
    --secondary: #f5f5f5;
    --secondary-foreground: #05060f;
    --muted: #f5f5f5;
    --muted-foreground: #76767b;
    --accent: #bbd7f7;
    --accent-foreground: #0a0a0a;
    --destructive: #e7000b;
    --destructive-foreground: #ffffff;
    --border: #e6e6e7;
    --input: #e6e6e7;
    --ring: #a3a3a6;

    --radius-small: 2px;
    --radius-medium: 6px;
    --radius-large: 16px;
    --radius: var(--radius-medium);

    --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
    --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
}

.dark {
    color-scheme: dark;

    --background: #05060f;
    --foreground: #c7d3ea;
    --card: #06060e;
    --card-foreground: #c7d3ea;
    --popover: #06060e;
    --popover-foreground: #c7d3ea;
    --primary: #663af3;
    --primary-foreground: #ffffff;
    --secondary: rgba(199, 211, 234, 0.06);
    --secondary-foreground: #c7d3ea;
    --muted: rgba(199, 211, 234, 0.06);
    --muted-foreground: #707787; /* estimated */
    --accent: #bbd7f7;
    --accent-foreground: #0a0a0a; /* estimated */
    --destructive: #ff6467; /* estimated */
    --destructive-foreground: #ffffff; /* estimated */
    --border: rgba(186, 215, 247, 0.12);
    --input: rgba(186, 215, 247, 0.12); /* estimated */
    --ring: #5c6272; /* estimated */
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --radius-small: var(--radius-small);
    --radius-medium: var(--radius-medium);
    --radius-large: var(--radius-large);
    --font-display: var(--font-display);
    --font-body: var(--font-body);
    --font-mono: var(--font-mono);
}

AuthKit — Style Reference

starlit blueprint under a spotlight

Theme: dark · Mood: dark, technical, precise, cool, minimal

Tokens — Colors

Name	Value	Token	Role
Deep Space	`#05060f`	`--bg-base`	Page background across every section; the blue-black canvas behind grid lines and stars.
Void Shade	`#06060e`	`--bg-alt`	Barely-distinct second surface step used for large inset panels and the demo stage.
Spotlight Ice	`#bbd7f7`	`--glow-primary`	The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows.
Nav Ice	`#bad6f7`	`--link`	Nav link and logo colour; 16px/400 header text.
Pale Steel	`#c7d3ea`	`--text-body`	Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha).
Button Frost	`#d1e4fa`	`--text-control`	Label colour inside ghost buttons and pill controls.
Signal White	`#ffffff`	`--text-strong`	Typed input values and primary-button labels only; never used for body paragraphs.
Radix Violet	`#663af3`	`--primary`	The single saturated CTA: filled 'Continue' button in the theming demo.
Periwinkle Chip	`#b3b3ff`	`--accent-soft`	Brand mark fill and soft accent swatches in the customisation panel.
Ember Swatch	`#e46d4c`	`--swatch-warm`	Colour-picker swatch in the theming demo (warm option).
Signal Blue	`#027dea`	`--swatch-info`	Colour-picker swatch in the theming demo (info/blue option).
Teal Swatch	`#269684`	`--swatch-success`	Colour-picker swatch in the theming demo; usable as the success hue.

Tokens — Typography

Display: Aeonik Pro (Inter, Helvetica Neue, Arial, sans-serif) — weights 400/500
Body: Untitled Sans (Inter, system-ui, Helvetica Neue, sans-serif) — weights 400/500/600/700
Mono: dotDigital (Berkeley Mono, IBM Plex Mono, monospace) — weights 400

Tokens — Radius

Element	Value
Pill button / badge / nav CTA	`999px`
Hero login card	`16px`
Demo card / stage panel	`12px`
Themed button & input (default demo)	`3px`
Themed button & input (sharp variant)	`2px`
Icon tile / swatch	`6px`
Avatar / logo mark	`50%`

Do

Build every surface from translucent pale-blue overlays — rgba(199,211,234,0.06) fill with a 1px rgba(186,215,247,0.12) hairline — never from a solid lighter grey.
Keep body copy at #c7d3ea and reserve #ffffff for typed input values and the violet button label only.
Use inset glows (0 0 96px rgba(186,215,247,0.08) inset) for depth instead of drop shadows; outer shadow is reserved for 6px star-glows.
Centre everything: eyebrow rule, headline, paragraph, and the demo artefact on a single vertical axis within 1200px.
Pair Aeonik Pro 500 at 44–48px with Untitled Sans 400/500 at 14–16px; never set long paragraphs in the display face.
Let the blueprint grid, corner ticks and star dots carry the texture — they should be barely visible (<8% alpha).
Set all controls to 32px height with 14px/500 labels and 16px horizontal padding, whatever the radius.

Don't

Don't introduce a second saturated colour alongside #663af3 — the violet CTA is the only bright fill on the page.
Don't use pure black or neutral grey; every dark value carries the blue cast of #05060f.
Don't add a sticky or blurred nav bar — the header is static, transparent and borderless.
Don't mix radii arbitrarily within one component group: pick 999px for hero chrome or 2–4px for themed demos and stay consistent.
Don't place hard-edged drop shadows under cards; depth is light bleed, not elevation.
Don't set paragraph text above 16px or below 12px, and never use all-caps tracked headings.
Don't fill the page with photography, illustration or gradient blobs — the only imagery is the product UI itself.

/* AuthKit — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg-base: #05060f;
  --color-bg-alt: #06060e;
  --color-glow-primary: #bbd7f7;
  --color-link: #bad6f7;
  --color-text-body: #c7d3ea;
  --color-text-control: #d1e4fa;
  --color-text-strong: #ffffff;
  --color-primary: #663af3;
  --color-accent-soft: #b3b3ff;
  --color-swatch-warm: #e46d4c;
  --color-swatch-info: #027dea;
  --color-swatch-success: #269684;
  --color-background: #05060f;
  --color-surface: rgba(199, 211, 234, 0.06);
  --color-surface-raised: #06060e;
  --color-border: rgba(186, 215, 247, 0.12);
  --color-text: #c7d3ea;
  --color-primary: #663af3;
  --color-primary-text: #ffffff;
  --color-accent: #bbd7f7;
  --color-success: #269684;
  --color-warning: #e46d4c;
  --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
  --text-display-hero-wordmark: clamp(72px, 14vw, 180px);
  --text-display-hero-wordmark--line-height: 1.0;
  --text-display-hero-wordmark--letter-spacing: -0.02em;
  --text-display-hero-wordmark--font-weight: 500;
  --text-h1-section-headline: 48px;
  --text-h1-section-headline--line-height: 1.17;
  --text-h1-section-headline--letter-spacing: normal;
  --text-h1-section-headline--font-weight: 500;
  --text-h2: 44px;
  --text-h2--line-height: 1.16;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 500;
  --text-h3: 28px;
  --text-h3--line-height: 1.14;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 500;
  --text-lead-hero-subcopy: 24px;
  --text-lead-hero-subcopy--line-height: 1.33;
  --text-lead-hero-subcopy--letter-spacing: -0.01em;
  --text-lead-hero-subcopy--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 400;
  --text-ui-label: 14px;
  --text-ui-label--line-height: 1.43;
  --text-ui-label--letter-spacing: normal;
  --text-ui-label--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 400;
  --text-mono-dots: 15px;
  --text-mono-dots--line-height: 1;
  --text-mono-dots--letter-spacing: 1.5px;
  --text-mono-dots--font-weight: 400;
  --radius-pill-button-badge-nav-cta: 999px;
  --radius-hero-login-card: 16px;
  --radius-demo-card-stage-panel: 12px;
  --radius-themed-button-input-default-demo: 3px;
  --radius-themed-button-input-sharp-variant: 2px;
  --radius-icon-tile-swatch: 6px;
  --radius-avatar-logo-mark: 50%;
  --shadow-glow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-glow-violet: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline-inset: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-panel-bloom: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-surface-sheen: rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset;
  --container-site: 1200px;
}

/* AuthKit — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg-base: #05060f; /* Page background across every section; the blue-black canvas behind grid lines and stars. */
  --color-bg-alt: #06060e; /* Barely-distinct second surface step used for large inset panels and the demo stage. */
  --color-glow-primary: #bbd7f7; /* The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows. */
  --color-link: #bad6f7; /* Nav link and logo colour; 16px/400 header text. */
  --color-text-body: #c7d3ea; /* Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha). */
  --color-text-control: #d1e4fa; /* Label colour inside ghost buttons and pill controls. */
  --color-text-strong: #ffffff; /* Typed input values and primary-button labels only; never used for body paragraphs. */
  --color-primary: #663af3; /* The single saturated CTA: filled 'Continue' button in the theming demo. */
  --color-accent-soft: #b3b3ff; /* Brand mark fill and soft accent swatches in the customisation panel. */
  --color-swatch-warm: #e46d4c; /* Colour-picker swatch in the theming demo (warm option). */
  --color-swatch-info: #027dea; /* Colour-picker swatch in the theming demo (info/blue option). */
  --color-swatch-success: #269684; /* Colour-picker swatch in the theming demo; usable as the success hue. */

  /* Semantic roles */
  --background: #05060f;
  --surface: rgba(199, 211, 234, 0.06);
  --surface-raised: #06060e;
  --border: rgba(186, 215, 247, 0.12);
  --text: #c7d3ea;
  --primary: #663af3;
  --primary-text: #ffffff;
  --accent: #bbd7f7;
  --success: #269684;
  --warning: #e46d4c;

  /* Typography */
  --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
  --text-display-hero-wordmark: clamp(72px, 14vw, 180px);
  --text-display-hero-wordmark--line-height: 1.0;
  --text-display-hero-wordmark--letter-spacing: -0.02em;
  --text-display-hero-wordmark--font-weight: 500;
  --text-h1-section-headline: 48px;
  --text-h1-section-headline--line-height: 1.17;
  --text-h1-section-headline--letter-spacing: normal;
  --text-h1-section-headline--font-weight: 500;
  --text-h2: 44px;
  --text-h2--line-height: 1.16;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 500;
  --text-h3: 28px;
  --text-h3--line-height: 1.14;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 500;
  --text-lead-hero-subcopy: 24px;
  --text-lead-hero-subcopy--line-height: 1.33;
  --text-lead-hero-subcopy--letter-spacing: -0.01em;
  --text-lead-hero-subcopy--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 400;
  --text-ui-label: 14px;
  --text-ui-label--line-height: 1.43;
  --text-ui-label--letter-spacing: normal;
  --text-ui-label--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 400;
  --text-mono-dots: 15px;
  --text-mono-dots--line-height: 1;
  --text-mono-dots--letter-spacing: 1.5px;
  --text-mono-dots--font-weight: 400;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 100px;
  --space-12: 120px;
  --container: 1200px;
  --section-gap: 120px;

  /* Radius */
  --radius-pill-button-badge-nav-cta: 999px;
  --radius-hero-login-card: 16px;
  --radius-demo-card-stage-panel: 12px;
  --radius-themed-button-input-default-demo: 3px;
  --radius-themed-button-input-sharp-variant: 2px;
  --radius-icon-tile-swatch: 6px;
  --radius-avatar-logo-mark: 50%;

  /* Shadows */
  --shadow-glow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-glow-violet: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline-inset: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-panel-bloom: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-surface-sheen: rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset;
}

{
  "$name": "AuthKit",
  "$source": "https://authkit.com",
  "$theme": "dark",
  "$generated": "inspiration library",
  "color": {
    "bg-base": {
      "$type": "color",
      "$value": "#05060f",
      "$description": "Page background across every section; the blue-black canvas behind grid lines and stars."
    },
    "bg-alt": {
      "$type": "color",
      "$value": "#06060e",
      "$description": "Barely-distinct second surface step used for large inset panels and the demo stage."
    },
    "glow-primary": {
      "$type": "color",
      "$value": "#bbd7f7",
      "$description": "The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows."
    },
    "link": {
      "$type": "color",
      "$value": "#bad6f7",
      "$description": "Nav link and logo colour; 16px/400 header text."
    },
    "text-body": {
      "$type": "color",
      "$value": "#c7d3ea",
      "$description": "Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha)."
    },
    "text-control": {
      "$type": "color",
      "$value": "#d1e4fa",
      "$description": "Label colour inside ghost buttons and pill controls."
    },
    "text-strong": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Typed input values and primary-button labels only; never used for body paragraphs."
    },
    "primary": {
      "$type": "color",
      "$value": "#663af3",
      "$description": "The single saturated CTA: filled 'Continue' button in the theming demo."
    },
    "accent-soft": {
      "$type": "color",
      "$value": "#b3b3ff",
      "$description": "Brand mark fill and soft accent swatches in the customisation panel."
    },
    "swatch-warm": {
      "$type": "color",
      "$value": "#e46d4c",
      "$description": "Colour-picker swatch in the theming demo (warm option)."
    },
    "swatch-info": {
      "$type": "color",
      "$value": "#027dea",
      "$description": "Colour-picker swatch in the theming demo (info/blue option)."
    },
    "swatch-success": {
      "$type": "color",
      "$value": "#269684",
      "$description": "Colour-picker swatch in the theming demo; usable as the success hue."
    }
  },
  "role": {
    "background": {
      "$type": "color",
      "$value": "#05060f"
    },
    "surface": {
      "$type": "color",
      "$value": "rgba(199, 211, 234, 0.06)"
    },
    "surface_raised": {
      "$type": "color",
      "$value": "#06060e"
    },
    "border": {
      "$type": "color",
      "$value": "rgba(186, 215, 247, 0.12)"
    },
    "text": {
      "$type": "color",
      "$value": "#c7d3ea"
    },
    "primary": {
      "$type": "color",
      "$value": "#663af3"
    },
    "primary_text": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#bbd7f7"
    },
    "success": {
      "$type": "color",
      "$value": "#269684"
    },
    "warning": {
      "$type": "color",
      "$value": "#e46d4c"
    }
  },
  "fontFamily": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Aeonik Pro",
        "Inter",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "Section headlines only, 28–48px at weight 500, tight 1.14–1.17 line-height. Also the shape of the giant hero wordmark."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Untitled Sans",
        "Inter",
        "system-ui",
        "Helvetica Neue",
        "sans-serif"
      ],
      "$description": "Everything else: lead copy, UI labels, buttons, captions. 24px lead uses -0.24px tracking; all smaller sizes run at normal tracking."
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "dotDigital",
        "Berkeley Mono",
        "IBM Plex Mono",
        "monospace"
      ],
      "$description": "Used only for masked password dots (15px, 1.5px letter-spacing). Treat as a decorative accent, not a code face."
    }
  },
  "typography": {
    "display-hero-wordmark": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "clamp(72px, 14vw, 180px)",
        "lineHeight": "1.0",
        "fontWeight": 500,
        "letterSpacing": "-0.02em"
      }
    },
    "h1-section-headline": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "48px",
        "lineHeight": "1.17",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "h2": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "44px",
        "lineHeight": "1.16",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "h3": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "28px",
        "lineHeight": "1.14",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "lead-hero-subcopy": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "24px",
        "lineHeight": "1.33",
        "fontWeight": 400,
        "letterSpacing": "-0.01em"
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "16px",
        "lineHeight": "1.5",
        "fontWeight": 400,
        "letterSpacing": "normal"
      }
    },
    "ui-label": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "14px",
        "lineHeight": "1.43",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "caption": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "12px",
        "lineHeight": "1.33",
        "fontWeight": 400,
        "letterSpacing": "normal"
      }
    },
    "mono-dots": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.mono}",
        "fontSize": "15px",
        "lineHeight": "1",
        "fontWeight": 400,
        "letterSpacing": "1.5px"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "6px"
    },
    "3": {
      "$type": "dimension",
      "$value": "8px"
    },
    "4": {
      "$type": "dimension",
      "$value": "10px"
    },
    "5": {
      "$type": "dimension",
      "$value": "12px"
    },
    "6": {
      "$type": "dimension",
      "$value": "16px"
    },
    "7": {
      "$type": "dimension",
      "$value": "24px"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px"
    },
    "9": {
      "$type": "dimension",
      "$value": "40px"
    },
    "10": {
      "$type": "dimension",
      "$value": "48px"
    },
    "11": {
      "$type": "dimension",
      "$value": "100px"
    },
    "12": {
      "$type": "dimension",
      "$value": "120px"
    }
  },
  "radius": {
    "pill-button-badge-nav-cta": {
      "$type": "dimension",
      "$value": "999px"
    },
    "hero-login-card": {
      "$type": "dimension",
      "$value": "16px"
    },
    "demo-card-stage-panel": {
      "$type": "dimension",
      "$value": "12px"
    },
    "themed-button-input-default-demo": {
      "$type": "dimension",
      "$value": "3px"
    },
    "themed-button-input-sharp-variant": {
      "$type": "dimension",
      "$value": "2px"
    },
    "icon-tile-swatch": {
      "$type": "dimension",
      "$value": "6px"
    },
    "avatar-logo-mark": {
      "$type": "dimension",
      "$value": "50%"
    }
  },
  "shadow": {
    "glow-sm": {
      "$type": "shadow",
      "$value": "rgba(186, 207, 247, 0.32) 0px 0px 6px 0px",
      "$description": "Pinprick stars, corner ticks and active control glows — the most common depth cue on the page."
    },
    "glow-violet": {
      "$type": "shadow",
      "$value": "rgba(238, 186, 247, 0.24) 0px 0px 12px 0px",
      "$description": "Halo around the brand mark and the violet CTA in the theming demo."
    },
    "hairline-inset": {
      "$type": "shadow",
      "$value": "rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset",
      "$description": "The universal 1px frosted border on cards, buttons and inputs — use instead of a real border where layout must not shift."
    },
    "panel-bloom": {
      "$type": "shadow",
      "$value": "rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset",
      "$description": "Large frosted cards: a top-left edge catch plus a wide internal bloom that mimics the overhead spotlight."
    },
    "surface-sheen": {
      "$type": "shadow",
      "$value": "rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset",
      "$description": "Subtle inner sheen on inputs and secondary buttons on hover/focus."
    }
  },
  "component": {
    "primary-button-themed-cta": {
      "kind": "button",
      "background": "#663af3",
      "color": "#ffffff",
      "border": "none",
      "radius": "3px",
      "padding": "0 16px",
      "font_size": "14px",
      "font_weight": 500,
      "shadow": "rgba(238, 186, 247, 0.24) 0px 0px 12px 0px",
      "hover": "brightness(1.08) and strengthen the violet glow to 0 0 16px rgba(238,186,247,0.32)",
      "notes": "32px tall, full-width inside the login card. The only saturated fill on the page — use once per view."
    },
    "ghost-pill-button": {
      "kind": "button",
      "background": "transparent",
      "color": "#d1e4fa",
      "border": "1px solid rgba(186, 215, 247, 0.12)",
      "radius": "999px",
      "padding": "0 16px",
      "font_size": "14px",
      "font_weight": 500,
      "shadow": "none",
      "hover": "background rgba(199, 211, 234, 0.06); border-color rgba(186, 215, 247, 0.2)",
      "notes": "32px tall. Default action style in the hero login box ('Continue', 'Continue with Google/Microsoft') and the nav 'Get started'. Social buttons prefix a 16px brand glyph with an 8px gap, label centred."
    },
    "frosted-input": {
      "kind": "input",
      "background": "rgba(199, 211, 234, 0.06)",
      "color": "#ffffff",
      "border": "1px solid rgba(186, 215, 247, 0.12)",
      "radius": "3px",
      "padding": "0 10px",
      "font_size": "14px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "focus: border-color rgba(186, 215, 247, 0.28) + box-shadow 0 0 6px rgba(186,207,247,0.32)",
      "notes": "32px tall, full width, placeholder in #c7d3eaa3. Paired with a 14px/500 label above at an 6–8px gap. Radius swaps to 999px / 4px / 2px in the theming demo to show the same component restyled."
    },
    "spotlit-login-card": {
      "kind": "card",
      "background": "linear-gradient(0deg, rgba(216,236,248,0.06) 0%, rgba(152,192,239,0.06) 100%), #05060f",
      "color": "#c7d3ea",
      "border": "1px solid rgba(186, 215, 247, 0.12)",
      "radius": "16px",
      "padding": "32px 24px",
      "font_size": "14px",
      "font_weight": 400,
      "shadow": "rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset",
      "hover": "none — the foreground card is static; flanking cards sit at ~45% opacity behind it",
      "notes": "~376px wide, centred, with 2px glowing dots pinned at the top-left and top-right inner corners. Contents stack at 8–16px gaps: logo mark, 16px/500 title, label+input, button, 'OR' rule, social buttons, 14px footer line with a 600-weight inline link."
    },
    "transparent-nav": {
      "kind": "nav",
      "background": "transparent",
      "color": "#bad6f7",
      "border": "none",
      "radius": "0",
      "padding": "36px 40px",
      "font_size": "16px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "link colour to #d8ecf8",
      "notes": "105px tall, static (not sticky), no border or backdrop blur. Three-zone layout: wordmark left, centred brand glyph, GitHub icon + ghost pill CTA right."
    },
    "eyebrow-rule": {
      "kind": "badge",
      "background": "transparent",
      "color": "#c7d3eaa3",
      "border": "none",
      "radius": "0",
      "padding": "0 16px",
      "font_size": "14px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "none",
      "notes": "Centred label ('Introducing', 'Show bright', 'Extensible by design') flanked by 1px hairline rules that fade out via linear-gradient to transparent. Sits 24px above the headline."
    },
    "feature-icon-tile": {
      "kind": "other",
      "background": "rgba(199, 211, 234, 0.06)",
      "color": "#c7d3ea",
      "border": "1px solid rgba(186, 215, 247, 0.12)",
      "radius": "6px",
      "padding": "10px",
      "font_size": "12px",
      "font_weight": 400,
      "shadow": "rgba(186, 207, 247, 0.32) 0px 0px 6px 0px",
      "hover": "lift glow to 0 0 10px rgba(186,207,247,0.4)",
      "notes": "Row of 6 tiles (Single Sign-On, Passkeys, MFA, Social Login, RBAC, Magic Auth) connected by dashed hairlines, each with a 12px caption 8px beneath."
    }
  }
}

# AuthKit — Design Reference
> starlit blueprint under a spotlight

**Source:** https://authkit.com  
**Theme:** dark  
**Category:** Developer Tools  
**Mood:** dark, technical, precise, cool, minimal  
**Captured:** 2026-10-21

## Overview

A near-black, blue-tinted stage on which a single login box is lit like a product on a plinth. Faint grid lines, corner ticks and pinprick stars give the page the feel of an engineering blueprint, while a soft conical light bleed from the top centre makes the oversized 'AuthKit' wordmark glow in pale ice blue. Everything is low-contrast and cool except the hero type and the one violet CTA — the restraint is the point: the UI being sold is the only bright object.

Technically it is achieved with a #05060f base, translucent frosted surfaces built from rgba(199,211,234,0.06) fills and 1px rgba(186,215,247,0.12) hairlines, and text that never goes pure white except in inputs — body copy sits at #c7d3ea with a 64% muted variant. Type pairs Aeonik Pro (44–48px, weight 500) for section headlines with Untitled Sans at 14–24px for everything else, on an 8px spacing rhythm inside a 1200px container. Radii are deliberately plural — 999px pills in the hero card, 2–4px in the themable demo cards — because the product demo shows the same login box restyled. Depth comes from inset glows rather than drop shadows.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Deep Space | `#05060f` | `--color-bg-base` | Page background across every section; the blue-black canvas behind grid lines and stars. |
| Void Shade | `#06060e` | `--color-bg-alt` | Barely-distinct second surface step used for large inset panels and the demo stage. |
| Spotlight Ice | `#bbd7f7` | `--color-glow-primary` | The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows. |
| Nav Ice | `#bad6f7` | `--color-link` | Nav link and logo colour; 16px/400 header text. |
| Pale Steel | `#c7d3ea` | `--color-text-body` | Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha). |
| Button Frost | `#d1e4fa` | `--color-text-control` | Label colour inside ghost buttons and pill controls. |
| Signal White | `#ffffff` | `--color-text-strong` | Typed input values and primary-button labels only; never used for body paragraphs. |
| Radix Violet | `#663af3` | `--color-primary` | The single saturated CTA: filled 'Continue' button in the theming demo. |
| Periwinkle Chip | `#b3b3ff` | `--color-accent-soft` | Brand mark fill and soft accent swatches in the customisation panel. |
| Ember Swatch | `#e46d4c` | `--color-swatch-warm` | Colour-picker swatch in the theming demo (warm option). |
| Signal Blue | `#027dea` | `--color-swatch-info` | Colour-picker swatch in the theming demo (info/blue option). |
| Teal Swatch | `#269684` | `--color-swatch-success` | Colour-picker swatch in the theming demo; usable as the success hue. |

### Semantic roles

| Role | Value |
|---|---|
| background | `#05060f` |
| surface | `rgba(199, 211, 234, 0.06)` |
| surface raised | `#06060e` |
| border | `rgba(186, 215, 247, 0.12)` |
| text | `#c7d3ea` |
| primary | `#663af3` |
| primary text | `#ffffff` |
| accent | `#bbd7f7` |
| success | `#269684` |
| warning | `#e46d4c` |

## Tokens — Typography

- **Display:** Aeonik Pro (400, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Section headlines only, 28–48px at weight 500, tight 1.14–1.17 line-height. Also the shape of the giant hero wordmark.
- **Body:** Untitled Sans (400, 500, 600, 700) — fallbacks: Inter, system-ui, Helvetica Neue, sans-serif. Everything else: lead copy, UI labels, buttons, captions. 24px lead uses -0.24px tracking; all smaller sizes run at normal tracking.
- **Mono:** dotDigital (400) — fallbacks: Berkeley Mono, IBM Plex Mono, monospace. Used only for masked password dots (15px, 1.5px letter-spacing). Treat as a decorative accent, not a code face.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| Display (hero wordmark) | clamp(72px, 14vw, 180px) | 1.0 | 500 | -0.02em | display |
| H1 / Section headline | 48px | 1.17 | 500 | normal | display |
| H2 | 44px | 1.16 | 500 | normal | display |
| H3 | 28px | 1.14 | 500 | normal | display |
| Lead / hero subcopy | 24px | 1.33 | 400 | -0.01em | body |
| Body | 16px | 1.5 | 400 | normal | body |
| UI / Label | 14px | 1.43 | 500 | normal | body |
| Caption | 12px | 1.33 | 400 | normal | body |
| Mono dots | 15px | 1 | 400 | 1.5px | mono |

## Tokens — Spacing & Layout

- **Base unit:** 8px
- **Density:** comfortable
- **Container max width:** 1200px
- **Section gap:** 120px
- **Card padding:** 32px
- **Scale:** 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 40px, 48px, 100px, 120px

## Tokens — Radius

| Element | Value |
|---|---|
| Pill button / badge / nav CTA | 999px |
| Hero login card | 16px |
| Demo card / stage panel | 12px |
| Themed button & input (default demo) | 3px |
| Themed button & input (sharp variant) | 2px |
| Icon tile / swatch | 6px |
| Avatar / logo mark | 50% |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| glow-sm | `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px` | Pinprick stars, corner ticks and active control glows — the most common depth cue on the page. |
| glow-violet | `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px` | Halo around the brand mark and the violet CTA in the theming demo. |
| hairline-inset | `rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset` | The universal 1px frosted border on cards, buttons and inputs — use instead of a real border where layout must not shift. |
| panel-bloom | `rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset` | Large frosted cards: a top-left edge catch plus a wide internal bloom that mimics the overhead spotlight. |
| surface-sheen | `rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset` | Subtle inner sheen on inputs and secondary buttons on hover/focus. |

## Components

### Primary button (themed CTA) (button)

| Property | Value |
|---|---|
| background | `#663af3` |
| color | `#ffffff` |
| border | `none` |
| radius | `3px` |
| padding | `0 16px` |
| font size | `14px` |
| font weight | `500` |
| shadow | `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px` |
| hover | `brightness(1.08) and strengthen the violet glow to 0 0 16px rgba(238,186,247,0.32)` |

32px tall, full-width inside the login card. The only saturated fill on the page — use once per view.

### Ghost pill button (button)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#d1e4fa` |
| border | `1px solid rgba(186, 215, 247, 0.12)` |
| radius | `999px` |
| padding | `0 16px` |
| font size | `14px` |
| font weight | `500` |
| shadow | `none` |
| hover | `background rgba(199, 211, 234, 0.06); border-color rgba(186, 215, 247, 0.2)` |

32px tall. Default action style in the hero login box ('Continue', 'Continue with Google/Microsoft') and the nav 'Get started'. Social buttons prefix a 16px brand glyph with an 8px gap, label centred.

### Frosted input (input)

| Property | Value |
|---|---|
| background | `rgba(199, 211, 234, 0.06)` |
| color | `#ffffff` |
| border | `1px solid rgba(186, 215, 247, 0.12)` |
| radius | `3px` |
| padding | `0 10px` |
| font size | `14px` |
| font weight | `400` |
| shadow | `none` |
| hover | `focus: border-color rgba(186, 215, 247, 0.28) + box-shadow 0 0 6px rgba(186,207,247,0.32)` |

32px tall, full width, placeholder in #c7d3eaa3. Paired with a 14px/500 label above at an 6–8px gap. Radius swaps to 999px / 4px / 2px in the theming demo to show the same component restyled.

### Spotlit login card (card)

| Property | Value |
|---|---|
| background | `linear-gradient(0deg, rgba(216,236,248,0.06) 0%, rgba(152,192,239,0.06) 100%), #05060f` |
| color | `#c7d3ea` |
| border | `1px solid rgba(186, 215, 247, 0.12)` |
| radius | `16px` |
| padding | `32px 24px` |
| font size | `14px` |
| font weight | `400` |
| shadow | `rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset` |
| hover | `none — the foreground card is static; flanking cards sit at ~45% opacity behind it` |

~376px wide, centred, with 2px glowing dots pinned at the top-left and top-right inner corners. Contents stack at 8–16px gaps: logo mark, 16px/500 title, label+input, button, 'OR' rule, social buttons, 14px footer line with a 600-weight inline link.

### Transparent nav (nav)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#bad6f7` |
| border | `none` |
| radius | `0` |
| padding | `36px 40px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `link colour to #d8ecf8` |

105px tall, static (not sticky), no border or backdrop blur. Three-zone layout: wordmark left, centred brand glyph, GitHub icon + ghost pill CTA right.

### Eyebrow rule (badge)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#c7d3eaa3` |
| border | `none` |
| radius | `0` |
| padding | `0 16px` |
| font size | `14px` |
| font weight | `400` |
| shadow | `none` |
| hover | `none` |

Centred label ('Introducing', 'Show bright', 'Extensible by design') flanked by 1px hairline rules that fade out via linear-gradient to transparent. Sits 24px above the headline.

### Feature icon tile (other)

| Property | Value |
|---|---|
| background | `rgba(199, 211, 234, 0.06)` |
| color | `#c7d3ea` |
| border | `1px solid rgba(186, 215, 247, 0.12)` |
| radius | `6px` |
| padding | `10px` |
| font size | `12px` |
| font weight | `400` |
| shadow | `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px` |
| hover | `lift glow to 0 0 10px rgba(186,207,247,0.4)` |

Row of 6 tiles (Single Sign-On, Passkeys, MFA, Social Login, RBAC, Magic Auth) connected by dashed hairlines, each with a 12px caption 8px beneath.

## Layout

Single centred column inside a 1200px container, every section symmetrical about the vertical axis. A full-bleed blueprint layer sits behind everything: ~1px rgba(186,215,247,0.06) grid lines, small X and corner-tick marks at intersections, and scattered 1–2px glowing star dots. The hero is a stacked composition — eyebrow, giant wordmark, two-line lead, then three overlapping login cards where the centre one is fully opaque and the flanks are dimmed and clipped by the viewport edge. Sections are separated by ~120px of vertical space and introduced by an eyebrow rule + 44px headline + 16px paragraph, always centred and max ~520px wide. The 'Your brand. Your style.' section nests a dark browser-chrome panel containing the login box surrounded by floating control cards that demonstrate theming.

## Imagery

No photography. All visuals are rendered UI: the product's own login box, isometric architecture diagrams built from frosted tiles and dashed connector lines, and small iconography in pale blue line style. The dominant 'image' is light itself — a conical spotlight gradient from the top centre of the hero plus internal 96px blooms inside cards. Keep all decoration monochrome blue-grey; colour appears only in the theming swatches and the violet CTA.

## Motion

Restrained and atmospheric. Glow intensity and card opacity transition on 200–300ms ease-out; the flanking login cards may drift subtly on scroll parallax. Section content fades up ~12px on enter. Hover states change border alpha and background alpha only — no scale, no bounce. The theming demo animates radius, colour and font swaps on the live login box as the controls change.

## Responsive

At phone widths the nav keeps all three zones but drops to ~24px side padding with no hamburger — the wordmark, centre glyph and 'Get started' pill simply tighten; the GitHub icon is dropped. The hero does not stack: the wordmark scales fluidly to fill the viewport width (~14vw, clamped) and the three-card composition crops hard, with the flanking cards running off both edges at reduced opacity while the centre card stays full width minus ~24px gutters. Lead copy shrinks from 24px to ~18px, section headlines from 44px to ~28px, and section gaps collapse from 120px to ~64px. Inside cards, buttons and inputs are 100% width and keep the 32px height and 14px type unchanged — the login box is deliberately identical to its desktop rendering. The blueprint grid stays but at a coarser cell size; the browser-chrome theming panel becomes horizontally scrollable rather than reflowing.

## Do

- Build every surface from translucent pale-blue overlays — rgba(199,211,234,0.06) fill with a 1px rgba(186,215,247,0.12) hairline — never from a solid lighter grey.
- Keep body copy at #c7d3ea and reserve #ffffff for typed input values and the violet button label only.
- Use inset glows (0 0 96px rgba(186,215,247,0.08) inset) for depth instead of drop shadows; outer shadow is reserved for 6px star-glows.
- Centre everything: eyebrow rule, headline, paragraph, and the demo artefact on a single vertical axis within 1200px.
- Pair Aeonik Pro 500 at 44–48px with Untitled Sans 400/500 at 14–16px; never set long paragraphs in the display face.
- Let the blueprint grid, corner ticks and star dots carry the texture — they should be barely visible (<8% alpha).
- Set all controls to 32px height with 14px/500 labels and 16px horizontal padding, whatever the radius.

## Don't

- Don't introduce a second saturated colour alongside #663af3 — the violet CTA is the only bright fill on the page.
- Don't use pure black or neutral grey; every dark value carries the blue cast of #05060f.
- Don't add a sticky or blurred nav bar — the header is static, transparent and borderless.
- Don't mix radii arbitrarily within one component group: pick 999px for hero chrome or 2–4px for themed demos and stay consistent.
- Don't place hard-edged drop shadows under cards; depth is light bleed, not elevation.
- Don't set paragraph text above 16px or below 12px, and never use all-caps tracked headings.
- Don't fill the page with photography, illustration or gradient blobs — the only imagery is the product UI itself.

## Agent prompt

> Build a dark, blueprint-themed developer product page on a #05060f blue-black canvas with a faint full-bleed grid (1px rgba(186,215,247,0.06) lines, small X/corner tick marks, scattered 1–2px dots with box-shadow 0 0 6px rgba(186,207,247,0.32)) and a conical #bbd7f7 spotlight gradient bleeding down from the top centre of the hero. Type: Aeonik Pro (fallback Inter) weight 500 for headlines — 44–48px at 1.16 line-height — and Untitled Sans (fallback Inter) for everything else: 24px/1.33 lead with -0.24px tracking, 16px/1.5 body, 14px/1.43 UI labels at weight 500, 12px/1.33 captions; the hero wordmark is display face at clamp(72px,14vw,180px) filled with a pale #bbd7f7-to-#d8ecf8 vertical gradient. Colour: body text #c7d3ea, muted #c7d3eaa3, control labels #d1e4fa, nav links #bad6f7, pure #ffffff only for typed input values and the one violet CTA (#663af3, radius 3px, 32px tall, glow 0 0 12px rgba(238,186,247,0.24)). Every surface is translucent: background rgba(199,211,234,0.06) with 1px rgba(186,215,247,0.12) borders; large cards add inset depth via 'rgba(199,211,234,0.12) -0.5px 0.5px 1px inset, rgba(186,215,247,0.08) 0 0 96px inset' — no outer drop shadows. Controls are uniformly 32px tall with 0 16px padding, 14px/500 labels; ghost pill buttons use radius 999px and transparent fill, themed demo variants use 2–4px. Layout: single centred 1200px column, ~120px section gaps, each section opening with a centred eyebrow label in muted blue flanked by fading hairline rules, then a 44px headline and a ~520px-wide paragraph. The hero shows three overlapping login cards — a 16px-radius, ~376px-wide frosted centre card (glowing 2px dots pinned in its top inner corners, containing logo, 16px/500 title, label+input, ghost Continue button, 'OR' divider, Google/Microsoft buttons, 14px footer with a 600-weight inline link) flanked by dimmed, viewport-cropped siblings. Motion is restrained: 200–300ms ease-out opacity, glow and border-alpha transitions only. On mobile keep the static three-zone transparent nav (no hamburger), let the wordmark scale fluidly, crop the card composition at the edges, and render controls full-width while keeping their 32px height and 14px type.

## CSS custom properties

```css
/* AuthKit — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg-base: #05060f; /* Page background across every section; the blue-black canvas behind grid lines and stars. */
  --color-bg-alt: #06060e; /* Barely-distinct second surface step used for large inset panels and the demo stage. */
  --color-glow-primary: #bbd7f7; /* The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows. */
  --color-link: #bad6f7; /* Nav link and logo colour; 16px/400 header text. */
  --color-text-body: #c7d3ea; /* Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha). */
  --color-text-control: #d1e4fa; /* Label colour inside ghost buttons and pill controls. */
  --color-text-strong: #ffffff; /* Typed input values and primary-button labels only; never used for body paragraphs. */
  --color-primary: #663af3; /* The single saturated CTA: filled 'Continue' button in the theming demo. */
  --color-accent-soft: #b3b3ff; /* Brand mark fill and soft accent swatches in the customisation panel. */
  --color-swatch-warm: #e46d4c; /* Colour-picker swatch in the theming demo (warm option). */
  --color-swatch-info: #027dea; /* Colour-picker swatch in the theming demo (info/blue option). */
  --color-swatch-success: #269684; /* Colour-picker swatch in the theming demo; usable as the success hue. */

  /* Semantic roles */
  --background: #05060f;
  --surface: rgba(199, 211, 234, 0.06);
  --surface-raised: #06060e;
  --border: rgba(186, 215, 247, 0.12);
  --text: #c7d3ea;
  --primary: #663af3;
  --primary-text: #ffffff;
  --accent: #bbd7f7;
  --success: #269684;
  --warning: #e46d4c;

  /* Typography */
  --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
  --text-display-hero-wordmark: clamp(72px, 14vw, 180px);
  --text-display-hero-wordmark--line-height: 1.0;
  --text-display-hero-wordmark--letter-spacing: -0.02em;
  --text-display-hero-wordmark--font-weight: 500;
  --text-h1-section-headline: 48px;
  --text-h1-section-headline--line-height: 1.17;
  --text-h1-section-headline--letter-spacing: normal;
  --text-h1-section-headline--font-weight: 500;
  --text-h2: 44px;
  --text-h2--line-height: 1.16;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 500;
  --text-h3: 28px;
  --text-h3--line-height: 1.14;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 500;
  --text-lead-hero-subcopy: 24px;
  --text-lead-hero-subcopy--line-height: 1.33;
  --text-lead-hero-subcopy--letter-spacing: -0.01em;
  --text-lead-hero-subcopy--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 400;
  --text-ui-label: 14px;
  --text-ui-label--line-height: 1.43;
  --text-ui-label--letter-spacing: normal;
  --text-ui-label--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 400;
  --text-mono-dots: 15px;
  --text-mono-dots--line-height: 1;
  --text-mono-dots--letter-spacing: 1.5px;
  --text-mono-dots--font-weight: 400;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 100px;
  --space-12: 120px;
  --container: 1200px;
  --section-gap: 120px;

  /* Radius */
  --radius-pill-button-badge-nav-cta: 999px;
  --radius-hero-login-card: 16px;
  --radius-demo-card-stage-panel: 12px;
  --radius-themed-button-input-default-demo: 3px;
  --radius-themed-button-input-sharp-variant: 2px;
  --radius-icon-tile-swatch: 6px;
  --radius-avatar-logo-mark: 50%;

  /* Shadows */
  --shadow-glow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-glow-violet: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline-inset: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-panel-bloom: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-surface-sheen: rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset;
}
```

## Tailwind v4 theme

```css
/* AuthKit — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg-base: #05060f;
  --color-bg-alt: #06060e;
  --color-glow-primary: #bbd7f7;
  --color-link: #bad6f7;
  --color-text-body: #c7d3ea;
  --color-text-control: #d1e4fa;
  --color-text-strong: #ffffff;
  --color-primary: #663af3;
  --color-accent-soft: #b3b3ff;
  --color-swatch-warm: #e46d4c;
  --color-swatch-info: #027dea;
  --color-swatch-success: #269684;
  --color-background: #05060f;
  --color-surface: rgba(199, 211, 234, 0.06);
  --color-surface-raised: #06060e;
  --color-border: rgba(186, 215, 247, 0.12);
  --color-text: #c7d3ea;
  --color-primary: #663af3;
  --color-primary-text: #ffffff;
  --color-accent: #bbd7f7;
  --color-success: #269684;
  --color-warning: #e46d4c;
  --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
  --text-display-hero-wordmark: clamp(72px, 14vw, 180px);
  --text-display-hero-wordmark--line-height: 1.0;
  --text-display-hero-wordmark--letter-spacing: -0.02em;
  --text-display-hero-wordmark--font-weight: 500;
  --text-h1-section-headline: 48px;
  --text-h1-section-headline--line-height: 1.17;
  --text-h1-section-headline--letter-spacing: normal;
  --text-h1-section-headline--font-weight: 500;
  --text-h2: 44px;
  --text-h2--line-height: 1.16;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 500;
  --text-h3: 28px;
  --text-h3--line-height: 1.14;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 500;
  --text-lead-hero-subcopy: 24px;
  --text-lead-hero-subcopy--line-height: 1.33;
  --text-lead-hero-subcopy--letter-spacing: -0.01em;
  --text-lead-hero-subcopy--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 400;
  --text-ui-label: 14px;
  --text-ui-label--line-height: 1.43;
  --text-ui-label--letter-spacing: normal;
  --text-ui-label--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 400;
  --text-mono-dots: 15px;
  --text-mono-dots--line-height: 1;
  --text-mono-dots--letter-spacing: 1.5px;
  --text-mono-dots--font-weight: 400;
  --radius-pill-button-badge-nav-cta: 999px;
  --radius-hero-login-card: 16px;
  --radius-demo-card-stage-panel: 12px;
  --radius-themed-button-input-default-demo: 3px;
  --radius-themed-button-input-sharp-variant: 2px;
  --radius-icon-tile-swatch: 6px;
  --radius-avatar-logo-mark: 50%;
  --shadow-glow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-glow-violet: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline-inset: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-panel-bloom: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-surface-sheen: rgba(199, 211, 234, 0.06) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0.08) 0px 1px 1px 0px inset;
  --container-site: 1200px;
}
```

## Theme tokens — light + dark

The shadcn-named layer DevDojo Sites speaks (`bg-background`, `text-foreground`, `bg-primary`, `rounded-medium`…). Paste into site.css after `@import "tailwindcss"` to restyle any site in this look.

```css
/* AuthKit — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: captured; the light half is estimated — the site is dark by default. Add class="dark" to <html> for the site's native look. */
@custom-variant dark (&:where(.dark, .dark *));

:root {
    color-scheme: light;

    --background: #ffffff;
    --foreground: #05060f;
    --card: #ffffff;
    --card-foreground: #05060f;
    --popover: #ffffff;
    --popover-foreground: #05060f;
    --primary: #663af3;
    --primary-foreground: #ffffff;
    --secondary: #f5f5f5;
    --secondary-foreground: #05060f;
    --muted: #f5f5f5;
    --muted-foreground: #76767b;
    --accent: #bbd7f7;
    --accent-foreground: #0a0a0a;
    --destructive: #e7000b;
    --destructive-foreground: #ffffff;
    --border: #e6e6e7;
    --input: #e6e6e7;
    --ring: #a3a3a6;

    --radius-small: 2px;
    --radius-medium: 6px;
    --radius-large: 16px;
    --radius: var(--radius-medium);

    --font-display: 'Aeonik Pro', Inter, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Untitled Sans', Inter, system-ui, 'Helvetica Neue', sans-serif;
    --font-mono: dotDigital, 'Berkeley Mono', 'IBM Plex Mono', monospace;
}

.dark {
    color-scheme: dark;

    --background: #05060f;
    --foreground: #c7d3ea;
    --card: #06060e;
    --card-foreground: #c7d3ea;
    --popover: #06060e;
    --popover-foreground: #c7d3ea;
    --primary: #663af3;
    --primary-foreground: #ffffff;
    --secondary: rgba(199, 211, 234, 0.06);
    --secondary-foreground: #c7d3ea;
    --muted: rgba(199, 211, 234, 0.06);
    --muted-foreground: #707787; /* estimated */
    --accent: #bbd7f7;
    --accent-foreground: #0a0a0a; /* estimated */
    --destructive: #ff6467; /* estimated */
    --destructive-foreground: #ffffff; /* estimated */
    --border: rgba(186, 215, 247, 0.12);
    --input: rgba(186, 215, 247, 0.12); /* estimated */
    --ring: #5c6272; /* estimated */
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --radius-small: var(--radius-small);
    --radius-medium: var(--radius-medium);
    --radius-large: var(--radius-large);
    --font-display: var(--font-display);
    --font-body: var(--font-body);
    --font-mono: var(--font-mono);
}
```

# AuthKit — Style Reference
> starlit blueprint under a spotlight

**Theme:** dark · **Mood:** dark, technical, precise, cool, minimal

A near-black, blue-tinted stage on which a single login box is lit like a product on a plinth. Faint grid lines, corner ticks and pinprick stars give the page the feel of an engineering blueprint, while a soft conical light bleed from the top centre makes the oversized 'AuthKit' wordmark glow in pale ice blue. Everything is low-contrast and cool except the hero type and the one violet CTA — the restraint is the point: the UI being sold is the only bright object.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Deep Space | `#05060f` | `--bg-base` | Page background across every section; the blue-black canvas behind grid lines and stars. |
| Void Shade | `#06060e` | `--bg-alt` | Barely-distinct second surface step used for large inset panels and the demo stage. |
| Spotlight Ice | `#bbd7f7` | `--glow-primary` | The dominant light: hero wordmark fill, conical spotlight bleed, grid-line highlights and focus glows. |
| Nav Ice | `#bad6f7` | `--link` | Nav link and logo colour; 16px/400 header text. |
| Pale Steel | `#c7d3ea` | `--text-body` | Primary body copy and the base colour for all translucent surface fills (at 6–12% alpha). |
| Button Frost | `#d1e4fa` | `--text-control` | Label colour inside ghost buttons and pill controls. |
| Signal White | `#ffffff` | `--text-strong` | Typed input values and primary-button labels only; never used for body paragraphs. |
| Radix Violet | `#663af3` | `--primary` | The single saturated CTA: filled 'Continue' button in the theming demo. |
| Periwinkle Chip | `#b3b3ff` | `--accent-soft` | Brand mark fill and soft accent swatches in the customisation panel. |
| Ember Swatch | `#e46d4c` | `--swatch-warm` | Colour-picker swatch in the theming demo (warm option). |
| Signal Blue | `#027dea` | `--swatch-info` | Colour-picker swatch in the theming demo (info/blue option). |
| Teal Swatch | `#269684` | `--swatch-success` | Colour-picker swatch in the theming demo; usable as the success hue. |

## Tokens — Typography

- **Display:** Aeonik Pro (Inter, Helvetica Neue, Arial, sans-serif) — weights 400/500
- **Body:** Untitled Sans (Inter, system-ui, Helvetica Neue, sans-serif) — weights 400/500/600/700
- **Mono:** dotDigital (Berkeley Mono, IBM Plex Mono, monospace) — weights 400

## Tokens — Radius

| Element | Value |
|---------|-------|
| Pill button / badge / nav CTA | `999px` |
| Hero login card | `16px` |
| Demo card / stage panel | `12px` |
| Themed button & input (default demo) | `3px` |
| Themed button & input (sharp variant) | `2px` |
| Icon tile / swatch | `6px` |
| Avatar / logo mark | `50%` |

## Do

- Build every surface from translucent pale-blue overlays — rgba(199,211,234,0.06) fill with a 1px rgba(186,215,247,0.12) hairline — never from a solid lighter grey.
- Keep body copy at #c7d3ea and reserve #ffffff for typed input values and the violet button label only.
- Use inset glows (0 0 96px rgba(186,215,247,0.08) inset) for depth instead of drop shadows; outer shadow is reserved for 6px star-glows.
- Centre everything: eyebrow rule, headline, paragraph, and the demo artefact on a single vertical axis within 1200px.
- Pair Aeonik Pro 500 at 44–48px with Untitled Sans 400/500 at 14–16px; never set long paragraphs in the display face.
- Let the blueprint grid, corner ticks and star dots carry the texture — they should be barely visible (<8% alpha).
- Set all controls to 32px height with 14px/500 labels and 16px horizontal padding, whatever the radius.

## Don't

- Don't introduce a second saturated colour alongside #663af3 — the violet CTA is the only bright fill on the page.
- Don't use pure black or neutral grey; every dark value carries the blue cast of #05060f.
- Don't add a sticky or blurred nav bar — the header is static, transparent and borderless.
- Don't mix radii arbitrarily within one component group: pick 999px for hero chrome or 2–4px for themed demos and stay consistent.
- Don't place hard-edged drop shadows under cards; depth is light bleed, not elevation.
- Don't set paragraph text above 16px or below 12px, and never use all-caps tracked headings.
- Don't fill the page with photography, illustration or gradient blobs — the only imagery is the product UI itself.

AuthKit

Sections

Colors

Typography

Spacing & Shape

Components

Do / Don't

Screens

Brand assets

Related sites