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

## Source
- Original site: https://authkit.com
- Captured: 2026-04-11T16:00:50.728Z

## Tags
- dark mode
- futuristic
- translucent
- geometric
- minimal tech
- frosted glass
- subtle glow
- developer tool
- high contrast
- blue-tinged

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

## Typography
- role: Used for all general body text, form elements, button labels, and secondary information. The slight negative letter spacing creates a compact, refined feel.; sizes: 12px, 14px, 16px, 18px, 24px; family: Untitled Sans; weight: 400, 500, 600, 700; weights: 400, 500, 600, 700; lineHeight: 1.17, 1.20, 1.33, 1.43, 1.50, 2.29, 2.57; substitute: Inter; letterSpacing: -0.01
- 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.; sizes: 28px, 44px, 48px; family: aeonikPro; weight: 400, 500; weights: 400, 500; lineHeight: 1.14, 1.16, 1.17, 1.20; substitute: Space Grotesk; letterSpacing: 0
- role: Used for specific, small informational text. The `tnum` font feature setting ensures consistent monospaced numbers, ideal for technical details or data display.; sizes: 15px; family: dotDigital; weight: 400; weights: 400; lineHeight: 1.20; substitute: IBM Plex Mono; letterSpacing: 0.1; fontFeatureSettings: "tnum"

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "pill": "999px",
      "cards": "12-16px",
      "badges": "6px",
      "inputs": "2-4px",
      "buttons": "999px"
    },
    "elementGap": "8px",
    "sectionGap": "48px",
    "cardPadding": "24px"
  },
  "radius": {
    "pill": "999px",
    "cards": "12-16px",
    "badges": "6px",
    "inputs": "2-4px",
    "buttons": "999px"
  }
}
```

## Component Patterns
- name: Login Form Card
- name: Dark/Light Mode Toggle + Feature Badges
- name: Section Heading + Glassy Feature Cards
- name: Primary Pill Button; role: Action
- name: Secondary Outline Button; role: Secondary action
- name: Solid Primary Button; role: Call to Action
- name: Glassy Feature Card; role: Information Display
- name: Login Form Card; role: Data Input Container
- name: Minimal Input Field; role: Text Input
- name: Status Badge; role: Metatag / Categorization
- name: Icon Button; role: Small interactive element

## 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.