---
title: "AuthKit design system"
variant: extended
source: https://www.authkit.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/authkit-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# AuthKit · Design System

> A luminous interface in a deep, quiet dark

**Theme:** dark · **Industry:** saas · **Source:** https://www.authkit.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

AuthKit presents authentication as a polished, adaptable product through dark canvases, cool luminous type, and layered interface previews. The page stays spacious and restrained, letting detailed product imagery and small accent colours carry the story.

## North star

Keep the page nearly black and spacious, then make product interfaces feel luminous through cool type, fine borders, and restrained layered glow.

## Overview

The visual system is anchored by a near-black navy canvas (#05060f), used consistently across the long page rather than alternating coloured bands. Dark raised surfaces and fine blue-black borders frame interface previews, while cool pale blue text establishes the luminous, technical mood. Muted slate tones keep supporting copy secondary. Purple, coral, and blue are restrained accents, most legible inside the authentication UI and not a reason to recolour the surrounding page. Large, medium-weight Aeonik Pro headings contrast with compact Untitled Sans navigation, body text, and controls. A centered hero pairs oversized product naming with a short description and overlapping login-card mockups. Further sections use centered headlines and broad product illustrations, with a two-column closing area. Generous vertical breathing room, hairline grid details, soft glows, and inset highlights create depth without bright section backgrounds or heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#05060f` | `--color-midnight-canvas` | brand | Continuous page canvas and the dominant background behind every section. |
| Raised Slate | `#10131d` | `--color-raised-slate` | surface | Raised navigation, control, and interface-preview surfaces. |
| Muted Steel | `#9da6ba` | `--color-muted-steel` | semantic | Muted supporting copy within navigation and product UI. |
| Quiet Slate | `#81899c` | `--color-quiet-slate` | semantic | Lower-emphasis supporting text and subdued interface labels. |
| Cloud Blue | `#c7d3ea` | `--color-cloud-blue` | neutral | Secondary pale text, including subdued button and interface copy. |
| Ice Light | `#d8ecf8` | `--color-ice-light` | brand | Primary cool text and link colour for headings and navigation. |
| Night Border | `#1b1f2b` | `--color-night-border` | neutral | Fine outlines on inputs, buttons, and dark interface elements. |
| Glacier Glow | `#bad7f7` | `--color-glacier-glow` | accent | Pale blue used in subtle glows, inset highlights, and interface detailing. |
| Signal Violet | `#663af3` | `--color-signal-violet` | accent | Primary Continue action within the product login preview. |
| Frosted Blue | `#d1e4fa` | `--color-frosted-blue` | neutral | Light button and navigation text against dark surfaces. |
| Deep Indigo | `#0d132b` | `--color-deep-indigo` | surface | Dark blue gradient detail in background and product imagery. |
| Warm Coral | `#e46d4c` | `--color-warm-coral` | accent | Small alternate accent visible inside illustrated product controls. |
| Electric Azure | `#027dea` | `--color-electric-azure` | accent | Small alternate blue accent within product UI illustrations. |
| Jade Signal | `#269684` | `--color-jade-signal` | accent | Small green accent within the illustrated customization palette. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Bright interface labels and selected text within product mockups. |
| Graphite Edge | `#212532` | `--color-graphite-edge` | neutral | Alternate fine border and input outline in interface previews. |

### Semantic aliases

`--color-canvas` → `#05060f` (Midnight Canvas) · `--color-surface` → `#10131d` (Raised Slate) · `--color-text` → `#d8ecf8` (Ice Light) · `--color-text-muted` → `#9da6ba` (Muted Steel) · `--color-text-subtle` → `#81899c` (Quiet Slate) · `--color-border` → `#1b1f2b` (Night Border) · `--color-accent` → `#663af3` (Signal Violet) · `--color-accent-2` → `#e46d4c` (Warm Coral) · `--color-accent-3` → `#027dea` (Electric Azure) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#d8ecf8` | `#05060f` | 16.62:1 | AAA |
| `#d8ecf8` | `#10131d` | 15.25:1 | AAA |
| `#9da6ba` | `#05060f` | 8.27:1 | AAA |
| `#9da6ba` | `#10131d` | 7.59:1 | AAA |
| `#81899c` | `#05060f` | 5.76:1 | AA |
| `#81899c` | `#10131d` | 5.29:1 | AA |
| `#663af3` | `#05060f` | 3.33:1 | AA-large |
| `#663af3` | `#10131d` | 3.06:1 | AA-large |

### Gradients

- `conic-gradient(from 180deg, rgba(0, 0, 0, 0) 0deg, rgb(186, 215, 247) 1deg, rgba(0, 0, 0, 0) 90deg)`
- `conic-gradient(from 180deg, rgba(0, 0, 0, 0) 60deg, rgb(186, 215, 247) 61deg, rgba(0, 0, 0, 0) 150deg)`
- `conic-gradient(from 180deg, rgba(0, 0, 0, 0) 80deg, rgb(186, 215, 247) 81deg, rgba(0, 0, 0, 0) 170deg)`
- `radial-gradient(50% 50%, rgba(75, 113, 250, 0.12) 0%, rgba(5, 5, 11, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Untitled Sans | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, captions, links, and buttons | Inter |
| aeonikPro | `--font-display` | webfont | 500, 400 | Large hero and section headings | Manrope |

- **Untitled Sans:** Practical sans-serif with regular body copy and medium-to-semibold controls; sentence case throughout.
- **aeonikPro:** Medium-weight display sans, clean and open; large headings remain untracked and sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.442, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.17 | 0 | — | aeonikPro | Hero product name, set as the prominent display headline. |
| h2 | 44px | 500 | 1.16 | 0 | — | aeonikPro | Centered major feature-section headlines. |
| h3 | 24px | 400 | 1.33 | -0.01em | — | Untitled Sans | Supporting feature and product-preview headings. |
| body | 16px | 400 | 1.5 | 0 | — | Untitled Sans | Descriptive copy beneath headings and within page content. |
| caption | 14px | 400 | 1.43 | 0 | — | Untitled Sans | Small labels and secondary product-interface annotations. |
| button | 14px | 500 | 2.29 | 0 | — | Untitled Sans | Authentication actions and compact calls to action. |
| nav | 14px | 400 | 2.57 | 0 | — | Untitled Sans | Header navigation and utility links. |
| link | 14px | 600 | 1.43 | 0 | — | Untitled Sans | Emphasized inline links, including sign-up actions. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24, 32, 36, 40, 42, 120 px.
- Section rhythm 100px · element gap 8px · card padding — · max content width 1177px.

A centered, single-column marketing flow sits within a measured maximum width of 1177px, with a spacious density and a section gap around 100px. The hero aligns its headline and copy centrally above overlapping interface cards. Feature sections retain the same dark canvas and alternate centered copy with broad illustrations; the measured closing section uses two columns. Fine grid lines and carefully framed mockups provide structure without boxed content bands.

## Shape & elevation

- Radius: button `2px` · input `2px` · card `16px` · media `50%` · nav `50%` · link `9999px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `10px` · 2xl `12px` · pill `9999px`
- Shadow `md` (other): `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px`
- Shadow `sm` (other): `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px`
- Shadow `inset` (nav, card, other): `rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset`
- Shadow `inset-2` (other): `rgba(199, 211, 234, 0) 0px -6px 12px 0px inset, rgba(199, 211, 234, 0) 0px 1px 1px 0px inset`
- Shadow `inset-3` (text): `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 `inset-4` (button): `rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease-out` on interactive elements.

Depth comes from layered interface cards, thin dark borders, inset highlights, and soft blue-tinted glows rather than hard drop shadows. Keep the overall canvas flat and uninterrupted; give product mockups the strongest separation, with delicate outlines and restrained luminous edges.

## Imagery

The page relies on product UI mockups and technical diagrams rather than photography. The hero stacks multiple sign-in experiences, with the central card in front; later illustrations map product flexibility and show a customization workspace. Keep mockups crisp but subdued, using dark panels, cool edge light, small interface details, and selective violet, coral, blue, and green accents.

## Components

### Header navigation

Minimal top row with WorkOS branding, centered mark, utility icon, and a dark pill-shaped Get started control.

### Hero headline

Large centered Aeonik Pro product name with a short cool-toned supporting statement beneath.

### Authentication preview

Overlapping dark login panels; the central card is foregrounded with outlined fields, compact provider actions, and a violet primary button.

### Outlined utility button

Compact dark control with pale text, a fine border or inset highlight, and a pill-like silhouette where shown.

### Feature illustration

Broad, dark technical product diagram or editor preview, framed by subtle lines and luminous UI details.

### Inline sign-up link

Small semibold pale-blue text link integrated into interface or supporting content.

### Measured component styles

- **Primary button** (“Continue”): background #663af3 · text #ffffff · radius 3px · padding 0px 16px · 500 14px Untitled Sans
- **Secondary button** (“Continue”): transparent background · text #d1e4fa · border 1px solid #1b1f2b · radius 999px · padding 0px 16px · 500 14px Untitled Sans
- **Link** (“Sign up”): transparent background · text #d8ecf8 · radius 0px · padding 0px · 600 14px Untitled Sans
- **Input**: background #11121c · text #ffffff · border 1px solid #1b1f2b · radius 2px · padding 0px 10px · 400 14px Untitled Sans
- **Card** (“Welcome to the Blamer Log in to continue”): transparent background · text #ffffff · radius 16px · padding 0px · 400 16px Untitled Sans · shadow rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24
- **Navigation item** (“Get started”): background #10131d · text #ffffff · radius 999px · padding 0px 16px · 400 14px Untitled Sans · shadow rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset

## Do

- Use #05060f as the continuous page canvas.
- Keep headings and hero content centered and cool-toned.
- Use #10131d and fine borders to distinguish interface surfaces.
- Layer product previews with restrained blue glow and inset highlights.
- Reserve #663af3 for prominent actions inside product UI.
- Leave generous vertical breathing room between content blocks.

## Don't

- Do not introduce bright alternating section backgrounds.
- Do not turn illustration accent colours into dominant page colours.
- Do not use heavy shadows or thick outlines.
- Do not crowd the hero with extra marketing copy.
- Do not use decorative display type for body copy or controls.
- Do not make every panel equally bright or visually prominent.

## Agent prompt

Build a new page in AuthKit’s dark, technical visual style. Use Midnight Canvas (#05060f) as an uninterrupted background, Raised Slate (#10131d) for interface surfaces, and Night Border (#1b1f2b) for delicate outlines. Set large, centered headlines in a medium-weight geometric sans close to Aeonik Pro; use a clean sans like Inter for navigation, copy, and controls. Keep the layout spacious, with a focused hero and broad, carefully composed product previews. Make UI layers feel dimensional with thin borders, pale Glacier Glow (#bad7f7) highlights, and restrained soft light. Use Ice Light (#d8ecf8) for key text and reserve Signal Violet (#663af3) for a primary product action. Avoid bright section bands, heavy shadows, clutter, and oversized decorative colour. Treat accent colours as details inside the product interface.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero on a continuous dark canvas, with headline above layered authentication previews. | Get started navigation action, Product demonstration | Centered display typography, Overlapping login cards, Subtle grid and glow |
| 2 | feature-split | Centered feature heading and copy above a wide product-architecture illustration. | Explain extensibility, Show system connections | Centered headline, Dark technical diagram, Luminous product nodes |
| 3 | other | A spacious dark transition area leading into the next showcase. | Visual pacing | Continuous dark canvas, Generous negative space |
| 4 | product-showcase | Broad centered product workspace preview framed by dark surrounding canvas. | Show customization controls, Demonstrate live product appearance | Editor mockup, Dark framed panels, Selective colour swatches |
| 5 | other | Compact two-column closing area on the same dark canvas. | Provide closing navigation | Two-column composition, Small links, Sparse footer details |

## Source CSS custom properties (selected)

```css
--dark-background: #05060f;
--gradient-background-6: linear-gradient(0deg, #d8ecf80f 0%, #98c0ef0f 100%);
--line-color: #00003b0d;
--focus-color: #000a1333;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/authkit-com