Authkit

# Authkit — Style Reference
> Midnight Command Center. Imagine a high-tech dashboard glowing softly in a dark room, with frosted glass elements reflecting subtle light.

**Theme:** dark

**Site:** https://authkit.com

AuthKit's design evokes an 'internal dashboard' feel — polished and functional without being sterile. Dark, translucent surfaces glow with subtle inner shadows and a restrained use of soft, muted blues. The sharp contrast between the deep `Midnight Abyss` background and crisp white text, paired with a limited palette of nearly achromatic blues, creates a sense of digital precision. The deliberate mix of round (`Pill`) and subtly rounded (`Subtle`) corners on different elements adds a tactile quality to the otherwise sleek, high-tech aesthetic, hinting at user-friendliness within a complex system.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Comet | `#d8ecf8` | `--color-comet` | Primary body text, prominent links, and headings; provides high readability against dark backgrounds. |
| Arctic Mist | `#d1e4fa` | `--color-arctic-mist` | Secondary body text, icon outlines, button text; a cool, muted off-white for softer emphasis. |
| Celestial Light | `#b6d9fc` | `--color-celestial-light` | Focus states for interactive elements, subtle highlights. |
| Twilight Gradient Overlay | `#d8ecf8` | `--color-twilight-gradient-overlay` | Subtle background element for atmospheric effect, indicating light source. |
| System Highlight Border | `#bacff7` | `--color-system-highlight-border` | Interactive element borders and inner glows, creating a subtle sci-fi effect. |
| Neon Violet | `#663af3` | `--color-neon-violet` | Action buttons and primary interactive elements; a vibrant, focused color against the dark backdrop. |
| Midnight Abyss | `#05060f` | `--color-midnight-abyss` | Page backgrounds, elevated card backgrounds, deep shadows. |
| Ghost White | `#ffffff` | `--color-ghost-white` | Primary text for headings and high-contrast elements, icon fills. |
| Azure Glow | `#c7d3ea` | `--color-azure-glow` | Less prominent body text, disabled states, and subtle borders; a desaturated blue-gray that recedes gracefully. |
| Slate Dew | `#3f4959` | `--color-slate-dew` | Outline for informational badges and subtle accents. |
| Whisper Blue | `#9da7ba` | `--color-whisper-blue` | Placeholder text in inputs, less important body text. |
| Interstellar Gray | `#81899b` | `--color-interstellar-gray` | Faint text color for small captions or secondary labels. |

## Tokens — Typography

### Untitled Sans
- **Substitute:** Inter
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 16px, 18px, 24px
- **Line height:** 1.17, 1.2, 1.33, 1.43, 1.5, 2.29, 2.57
- **Letter spacing:** -0.01
- **Role:** Used for all general body text, form elements, button labels, and secondary information. The slight negative letter spacing creates a compact, refined feel.

### aeonikPro
- **Substitute:** Space Grotesk
- **Weights:** 400, 500
- **Sizes:** 28px, 44px, 48px
- **Line height:** 1.14, 1.16, 1.17, 1.2
- **Letter spacing:** 0
- **Role:** Exclusively for prominent headings and display text. Its distinct, clean geometry defines the primary content hierarchy and brand voice, appearing slightly wider than Untitled Sans for visual contrast.

### dotDigital
- **Substitute:** IBM Plex Mono
- **Weights:** 400
- **Sizes:** 15px
- **Line height:** 1.2
- **Letter spacing:** 0.1
- **Role:** Used for specific, small informational text. The `tnum` font feature setting ensures consistent monospaced numbers, ideal for technical details or data display.

## Tokens — Type Scale

Minor Third (1.2) from 14px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 12px | 1.5 | -0.01em |
| body | 14px | 1.5 | -0.01em |
| body-lg | 16px | 1.5 | -0.01em |
| subheading | 18px | 1.43 | -0.01em |
| heading | 24px | 1.33 | -0.01em |
| heading-lg | 28px | 1.2 | — |
| display | 44px | 1.16 | — |
| display-xl | 48px | 1.14 | — |

## Tokens — Spacing

- **Section gap:** 48px
- **Card padding:** 24px
- **Element gap:** 8px

## Tokens — Radius

- **Buttons:** 999px
- **Inputs:** 2-4px
- **Cards:** 12-16px
- **badges:** 6px
- **pill:** 999px

## Tokens — Elevation

- **Glassy Feature Card:** `inset rgba(199, 211, 234, 0.12) 0px 1px 1px 0px, inset rgba(199, 211, 234, 0.05) 0px 24px 48px 0px, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px`
- **Login Form Card:** `inset rgba(216, 236, 248, 0.2) 0px 1px 1px 0px, inset rgba(168, 216, 245, 0.06) 0px 24px 48px 0px, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px`
- **Outline Button / Focus State:** `inset rgba(186, 215, 247, 0.12) 0px 0px 0px 1px`
- **Pill Button:** `inset rgba(186, 214, 247, 0.06) 0px 0px 0px 1px`
- **Icon Button Glow:** `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px`
- **Accent Element Glow:** `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px`

## Layout

The page uses a full-bleed dark background (`Midnight Abyss`) with content contained to a logical max-width. The hero section features a prominent, centered headline over a subtle background gradient and atmospheric glow. Sections follow a consistent top-to-bottom flow, with `sectionGap` providing generous vertical rhythm. Content often appears as centered stacks, sometimes with embedded UI components (like the login form) serving as visual focal points. Navigation is a simple, sticky top bar.

## Imagery

Minimalist and highly stylized. Photography is absent. Illustrations are abstract, geometric forms with subtle glows and transparent layers, often depicting UI components or data structures in a 'blueprint' or 'schematic' style against the dark background. Icons are simple, filled or outlined glyphs with high contrast, often set within softly rounded or pill-shaped containers. The imagery's role is primarily decorative atmosphere and conceptual explanation rather than literal depiction, with images sparsely used and serving as visual anchors in content sections. Overall density is text-dominant, allowing UI elements and graphics to 'breathe' in the dark space.

## Components

### Login Form Card

### Dark/Light Mode Toggle + Feature Badges

### Section Heading + Glassy Feature Cards

### Primary Pill Button
*Action*

Ghost White text on a translucent background (rgba(186, 214, 247, 0.06)) with a subtle Ghost White border. Radius is `Pill` (999px) for a soft, approachable action element. Padding: 0px vertical, 16px horizontal. Background rgba(186, 214, 247, 0.06), text #ffffff, border color #ffffff.

### Secondary Outline Button
*Secondary action*

Arctic Mist text on a transparent background with a subtle border (rgba(186, 215, 247, 0.12)). Radius is `Pill` (999px). Padding: 0px vertical, 16px horizontal. Text #d1e4fa, border color rgba(186, 215, 247, 0.12).

### Solid Primary Button
*Call to Action*

White text on `Neon Violet` background (#663af3) with 0px padding and 6px border radius. Used for critical actions like 'Continue'.

### Glassy Feature Card
*Information Display*

Transparent background (rgba(186, 214, 247, 0.03)) with `Subtle` (12px) border radius. Features a complex inner shadow: `rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px` to create a deep, frosted glass effect.

### Login Form Card
*Data Input Container*

Near-black background (rgba(5, 6, 15, 0.97)) and `Subtle` (16px) border radius. Distinct inner shadows: `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px` to suggest depth and a light source from above.

### Minimal Input Field
*Text Input*

White text and Ghost White border on translucent background (rgba(199, 211, 234, 0.06)). Border radius varies from 2px to 4px. Padding: 0px vertical, 10px horizontal. Placeholder text uses `Whisper Blue` (#9da7ba).

### Status Badge
*Metatag / Categorization*

Arctic Mist text on `Midnight Abyss` background, with `Subtle` (6px) border radius. Padding: 4px vertical, 8px horizontal. Text #d1e4fa, background #05060f.

### Icon Button
*Small interactive element*

Transparent background with a subtle border matching `Secondary Outline Button` (rgba(186, 215, 247, 0.12)) and `Pill` (999px) border radius. Contains icons which are typically `Ghost White`.

## Guidelines

### Do

- Prioritize `Midnight Abyss` (#05060f) as the primary background color for all main page sections and large surface areas.
- Use `aeonikPro` (sub. Space Grotesk) for all marketing headlines (28-48px) and `Untitled Sans` (sub. Inter) for all body copy and UI elements (12-24px).
- Apply `Pill` (999px) radius to all primary and secondary action buttons, and `Subtle` (12-16px) radius to cards and containers.
- Employ the complex inner shadow `rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px` on elevated cards to create visual depth.
- Reserve `Neon Violet` (#663af3) exclusively for critical call-to-action buttons, maintaining its impact.
- Use subtle linear gradients for decorative elements, such as `linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(186, 215, 247, 0.12), rgba(0, 0, 0, 0))` for dividers or highlights.

### Don't

- Avoid using highly saturated, non-brand colors outside of the designated `Neon Violet` accent.
- Do not use generic drop shadows; instead, utilize the specified `inset` shadows and soft outer glows to achieve depth.
- Do not deviate from the specified font families; their visual distinction is core to the brand identity.
- Do not apply standard rectangular shapes to buttons; all interactive buttons should use `Pill` (999px) radius.
- Avoid using flat, opaque background colors for cards; instead, use translucent backgrounds with subtle inner shadows to maintain the 'frosted glass' effect.
- Do not use letter-spacing on display headings; `aeonikPro` should maintain `normal` letter spacing at larger sizes, while `Untitled Sans` uses a subtle negative spacing.

## Agent Prompt Guide

### Quick Color Reference
- **Text (Primary):** #d8ecf8
- **Background (Primary):** #05060f
- **CTA (Primary):** #663af3
- **Border (Subtle):** rgba(186, 215, 247, 0.12)
- **Accent (Highlight):** #b6d9fc

### 3-5 Example Component Prompts
1. **Create a Hero Section:** Set background to `Midnight Abyss` (#05060f). Center a headline: 'AuthKit' using `aeonikPro` 48px, `Ghost White` (#ffffff), no letter spacing. Below it, a subheadline: 'The world’s best login box, powered by WorkOS + Radix.' using `Comet` (#d8ecf8) 24px `Untitled Sans`. Add a 'Get started' button: `Primary Pill Button` style.
2. **Generate a Login Form Card:** Use `Login Form Card` component style with `Midnight Abyss` background and 16px radius, including its specific inner shadow `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px`. Inside, include an 'Email' input: `Minimal Input Field` style. Follow with a 'Continue' button: `Solid Primary Button` style. Stack elements vertically with an `elementGap` of 16px.
3. **Design a Feature Grid Section:** Use a transparent background (rgba(186, 214, 247, 0.01)) within a main section (section gap: 48px from top/bottom). Create a 3-column grid of `Glassy Feature Card` components. Each card should contain a headline using `Untitled Sans` 18px 600, Arctic Mist text, and a `Ghost White` icon. Place a `Status Badge` (e.g., 'Single Sign-On') below the headline inside each card. `elementGap` between title, text, and badge should be 8px.