---
version: alpha
name: Authkit
description: Frosted glass cathedral at midnight
colors:
  on-surface: "#ffffff"
  surface: "#05060f"
  outline: "#bad7f71f"
  primary: "#663af3"
  canvas-deep: "#06060e"
  steel-plate: "#2f343e"
  ink-grey: "#232425"
  fog-veil: "#9da7ba"
  moon-mist: "#c7d3ea"
  body-normal: "#c8d4ea"
  frost-glow: "#d1e4fa"
  ice-highlight: "#d8ecf8"
  sky-blue: "#98c0ef"
  frost-blue: "#bad6f7"
  blueprint-blue: "#b6d9fc"
  violet-mist: "#b3b3ff"
  ember-glow: "#e46d4c"
  signal-blue: "#027dea"
  deep-teal: "#269684"
  gridline-blue: "#3f4959"
  frost-wash-6: "#bad6f70f"
  frost-wash-24: "#bad6f73d"
  frost-wash-90: "#bad6f7e6"
  luminous-fill: "#c7d3ea1f"
typography:
  caption:
    fontFamily: Untitled Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0em
  body-sm:
    fontFamily: Untitled Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0em
  eyebrow:
    fontFamily: Untitled Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.10em
  body:
    fontFamily: Untitled Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  subheading:
    fontFamily: Untitled Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0em
  heading-sm:
    fontFamily: Untitled Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: -0.24px
  heading:
    fontFamily: Untitled Sans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0em
  heading-lg:
    fontFamily: Untitled Sans
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: 0em
  display:
    fontFamily: aeonikPro
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0em
rounded:
  badges: 6px
  inputs: 6px
  small-chips: 2px
  pills-buttons: 999px
  cards: 16px
  modals: 16px
  large-panels: 28px
  icon-containers: 9999px
spacing:
  "4": 4px
  "8": 8px
  "12": 12px
  "16": 16px
  "20": 20px
  "24": 24px
  "32": 32px
  "36": 36px
  "40": 40px
  "48": 48px
  "56": 56px
  "100": 100px
  "120": 120px
  "200": 200px
---
# Authkit — Style Reference
> Frosted glass cathedral at midnight

**Theme:** dark

AuthKit renders a midnight product-launch aesthetic: a near-black canvas (`#05060f`) with frosted-glass surfaces, a faint blueprint grid, and luminous text that reads as lit from behind a glass layer. The palette is almost entirely white-on-dark — the site declares its own body ramp (`--body-loud` → `--body-normal` → `--body-muted`) in the cool `#c7d3ea`/`#c8d4ea` register — with one vivid violet (`#663af3`) as the single functional accent, appearing only on the auth-form Continue button. Every interactive edge wears a soft inset hairline drawn from a declared frost-alpha ramp (`--blue-6` → `--blue-12` → `--blue-24` → `--blue-90`) rather than a hard border. Components sit on translucent layers stacked above ambient glows: cards look like glass plates lit from below, not paper panels. Spacing is generous and cathedral-like; the hero is a single full-bleed illuminated wordmark ("AuthKit" in a Skywash gradient) surrounded by three floating glass auth cards rather than a conventional split layout.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Canvas | `#05060f` | `--dark-background` | Page background, deepest card surface, badge fills — the near-black base everything floats on (the site's own `--dark-background` and `theme-color`) |
| Canvas Deep | `#06060e` | `--color-canvas-deep` | Near-black sibling of the canvas — the darkest hero corners and modal backing beneath the frosted stack |
| Steel Plate | `#2f343e` | `--color-steel-plate` | Elevated surface, ghost/secondary button fills, subtle panel backing *(grafted from curated — not seen in this scan)* |
| Ink Grey | `#232425` | `--blue-loud` | Deepest neutral in the blue ramp — dividers and the darkest UI chrome |
| Fog Veil | `#9da7ba` | `--color-fog-veil` | Helper copy, faint captions — the most stepped-back readable grey *(grafted from curated — not seen in this scan)* |
| Moon Mist | `#c7d3ea` | `--body-loud` | The declared body base — full-strength at `--body-loud`, `a3` alpha for `--body-muted`; secondary labels and muted helper copy |
| Body Normal | `#c8d4ea` | `--body-normal` | Default paragraph body color (declared at `c7` alpha) — one hair cooler than Moon Mist, the running-text foreground |
| Frost Glow | `#d1e4fa` | `--color-frost-glow` | Primary luminous foreground — body links, badge text, icon fills, outlined-button text |
| Ice Highlight | `#d8ecf8` | `--color-ice-highlight` | Brightest cool white — headline fill, the top stop of the Skywash gradient, high-contrast captions |
| Sky Blue | `#98c0ef` | `--color-sky-blue` | Bottom stop of the Skywash display gradient — the blue the wordmark fades into |
| Frost Blue | `#bad6f7` | `--color-frost-blue` | Base of the frost-alpha ramp (`--blue-6/12/24/90`) — nav link color, hairline strokes, glass washes |
| Blueprint Blue | `#b6d9fc` | `--color-blueprint-blue` | Decorative icon accent, soft highlight wash on feature illustrations |
| Pure White | `#ffffff` | `--color-pure-white` | Button text, input text, maximum-emphasis foreground |
| Void Violet | `#663af3` | `--color-void-violet` | Primary CTA fill — the only chromatic accent, used exclusively for the Continue/submit button inside auth forms; vivid violet against near-black creates focused urgency without breaking the monochrome mood |
| Violet Mist | `#b3b3ff` | `--color-violet-mist` | Light periwinkle tint of the accent — appears as a soft violet background wash (hover/selection and light-mode demo contexts) |
| Ember Glow | `#e46d4c` | `--color-ember-glow` | Demo-only accent — brand-color customization swatch in the "Your brand. Your style." section |
| Signal Blue | `#027dea` | `--color-signal-blue` | Demo-only accent — customization swatch demonstrating brand-color options |
| Deep Teal | `#269684` | `--color-deep-teal` | Demo-only accent — customization swatch |
| Gridline Blue | `#3f4959` | `--color-gridline-blue` | Cool dark blue-grey drop-shadow color — gives elevation a tinted, on-brand cast rather than neutral black *(grafted from curated — not seen in this scan)* |
| Frost Wash 6 | `#bad6f70f` | `--blue-6` | Faintest glass tint — ghost-button fill, barely-there card wash |
| Glass Edge | `#bad7f71f` | `--blue-12` | Universal hairline border — inset 1px frosted-blue-white stroke that defines every edge without a hard line |
| Frost Wash 24 | `#bad6f73d` | `--blue-24` | Stronger glass tint — hover fill, focused-input border step |
| Frost Wash 90 | `#bad6f7e6` | `--blue-90` | Near-solid frost — brightest active/pressed frost surface |
| Luminous Fill | `#c7d3ea1f` | `--color-luminous-fill` | Badge fill and soft surface tint — translucent cool white for tag backgrounds and subtle washes |

## Tokens — Typography

### Untitled Sans — Body, UI, buttons, inputs, badges, small headings — the working typeface for everything functional · `--font-untitled-sans`
- **Substitute:** Inter, system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 16px, 18px, 24px
- **Line height:** 1.17 – 1.50
- **Letter spacing:** -0.01em
- **Role:** Body, UI, buttons, inputs, badges, small headings — the working typeface for everything functional (loaded at 400 and 700)

### aeonikPro — Display headings only — the "AuthKit" wordmark, section headings, hero copy; weight 500 at 44–48px gives a wide, calm presence rather than a bold shout · `--font-aeonikpro`
- **Substitute:** Space Grotesk, ui-sans-serif
- **Weights:** 400, 500
- **Sizes:** 28px, 44px, 48px (hero wordmark extrapolated to display size)
- **Line height:** 1.14 – 1.20
- **Letter spacing:** normal
- **Role:** Display headings only — the wordmark, section headings, hero copy; authority comes from size and weight 500, never bold

### dotDigital — All-caps eyebrow labels ("Introducing", "Extensible by design", "Shine bright") — 0.10em-tracked monospace-flavored caps that act as quiet section markers between display type and body · `--font-dotdigital`
- **Substitute:** IBM Plex Mono (the mono actually loaded on the page), JetBrains Mono
- **Weights:** 400
- **Sizes:** 15px
- **Line height:** 1.20
- **Letter spacing:** 0.10em
- **OpenType features:** `"tnum" on`
- **Role:** All-caps eyebrow labels — dot-tracked caps mark every section opening

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.33 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| eyebrow | 15px | 1.20 | 0.10em | `--text-eyebrow` |
| body | 16px | 1.5 | -0.16px | `--text-body` |
| subheading | 18px | 1.33 | — | `--text-subheading` |
| heading-sm | 24px | 1.17 | -0.24px | `--text-heading-sm` |
| heading | 28px | 1.14 | — | `--text-heading` |
| heading-lg | 44px | 1.16 | — | `--text-heading-lg` |
| display | 48px | 1.17 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Value |
|---------|-------|
| badges | 6px |
| inputs | 6px |
| small chips | 2px |
| pills / buttons | 999px |
| cards | 16px |
| modals | 16px |
| large panels | 28px |
| icon containers | 9999px (perfect circle) |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| sm (glow) | `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px` | `--shadow-sm` |
| md (glow) | `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px` | `--shadow-md` |
| hairline | `rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset` | `--shadow-hairline` |
| hairline-faint | `rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset` | `--shadow-hairline-faint` |
| ambient-inset | `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-ambient` |
| feature-card | `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` | `--shadow-feature-card` |
| auth-modal | `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` | `--shadow-auth-modal` |
| white-ring | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` | `--shadow-white-ring` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 120px
- **Card padding:** 24px (feature cards up to 42px 36px)
- **Element gap:** 16px

## Components

### Ghost Pill Button (Primary)
**Role:** Default button — "Get started", "Continue with Google/Microsoft", "Learn more"

999px radius, padding 8px 16px, background `rgba(186,214,247,0.06)` (`--blue-6` frost wash), text `#ffffff`, 1px inset hairline `rgba(186,215,247,0.12)`. Untitled Sans 500 / 14px. Hover lifts the wash toward `--blue-12` (`rgba(186,215,247,0.12)`).

### Outlined Pill Button (Secondary)
**Role:** Secondary nav / icon buttons — header GitHub link, secondary CTAs

999px radius, padding 0 16px, transparent fill, text `#d1e4fa`, 1px inset hairline `#bad7f71f`. Same geometry as the primary ghost — only the fill differs. A 2px-radius square variant appears for compact icon chips.

### Violet CTA Button
**Role:** Sole chromatic CTA — the "Continue" submit button inside auth-form mockups only

Solid `#663af3`, white text, 6px radius, padding 12px 24px, weight 500. The only non-monochrome button in the system; its violet punches against the midnight palette and never appears outside an auth form.

### Glass Feature Card
**Role:** Feature cards, icon containers, section panels

16px radius, background `rgba(186,214,247,0.03)` (near-invisible frost tint), padding 24px (up to 42px 36px), no hard border. Elevation is built from an inset frost highlight + a soft inset glow + a dark cool drop — reads as a glass plate lit from behind.

### Auth-Form Modal Card
**Role:** The headline product — floating login/signup cards in the hero

16px radius, background `rgba(5,6,15,0.97)` over the `#06060e` canvas, padding 24–32px. Three-layer shadow: top inset frost `rgba(216,236,248,0.2)`, mid inset glow `rgba(168,216,245,0.06)`, bottom drop `rgba(0,0,0,0.3)`. Floats above the hero with the central card scaled larger than its two tilted siblings.

### Text Input
**Role:** Email, password, and code fields inside auth forms

6px radius, translucent cool fill `rgba(199,211,234,0.06)`, text `#ffffff`, placeholder `#c7d3ea` at ~60%, 1px inset hairline `#bad7f71f`, padding 0 10px. Focus steps the border toward `--blue-24` (`#bad6f73d`).

### Provider Button (Social Login)
**Role:** Continue with Google / Microsoft / SSO

Full-width pill (999px), padding 12px 16px, background `rgba(199,211,234,0.06)`, white text, provider glyph left-aligned. A muted 12px "OR" divider sits between the email submit and the social row.

### Section Eyebrow Label
**Role:** All-caps section markers ("Introducing", "Extensible by design", "Shine bright")

15px dotDigital, weight 400, 0.10em tracking, color `#c7d3ea`, centered, flanked by thin horizontal rules that fade transparent → `rgba(186,215,247,0.12)` → transparent.

### Feature Icon Tile
**Role:** Icon containers in the feature row (SSO, Password, MFA, Social Login, RBAC, Magic Auth)

9999px radius (perfect circle), ~56px square, frosted `--blue-6` fill, outlined line-art glyph in `#d1e4fa` (1.5px stroke, mono — no fill, no color variation between tiles). Tiles connected by a 1px `rgba(186,215,247,0.12)` line.

### Badge / Tag
**Role:** Category tags on integration cards (Email & Password, Social Login, MFA, SSO)

6px radius, background `rgba(199,211,234,0.12)` (`--color-luminous-fill`), text `#d1e4fa`, padding 4px 8px, 12px Untitled Sans 500. Multi-layer inset shadow gives a faint inner glow.

### Theme Toggle (Light/Dark)
**Role:** Demonstrates the product's light/dark support (bottom-center of hero)

Pill-shaped segmented control, 999px radius, two segments (moon / sun), ~32px tall. Active segment carries a slightly brighter frost fill; inactive is transparent.

### Customization Swatch
**Role:** Color-picker tiles in the "Your brand. Your style." section

Small 20–24px squares, 4–6px radius, filled with a demo brand color (Void Violet, Signal Blue, Deep Teal, Ember Glow) in a 4px-gap row, labeled "Colour" in 12px muted text.

### Background Grid Layer
**Role:** Ambient page atmosphere — blueprint grid behind all sections

Full-bleed layer of 1px lines at `rgba(186,215,247,0.06)`, ~80–100px cells, masked to fade at the edges. A conic-gradient halo at top-center creates the spotlight that lights the wordmark.

## Do's and Don'ts

### Do
- Use 999px for every interactive element (buttons, provider buttons, toggles); reserve 16px for cards/modals, 6px for badges/inputs, 9999px for circular icon tiles.
- Build elevation from inset frost highlights + soft inset glow + a dark cool drop — pair `rgba(216,236,248,0.2)` 1px top edge with a 24–48px inset glow and a `rgba(0,0,0,0.3)`/`rgba(6,6,14,0.7)` drop.
- Use Void Violet (`#663af3`) exclusively for the auth-form Continue/submit CTA — never as decoration or a non-auth button.
- Set headlines in aeonikPro 500 at 44–48px with the Skywash gradient (`#d8ecf8 → #98c0ef`); body and UI in Untitled Sans 400–500.
- Draw the body ramp from the site's own tokens: `--body-loud #c7d3ea` → `--body-normal #c8d4ea` → `--body-muted (#c7d3ea @ a3)` → `--color-fog-veil #9da7ba`.
- Use the declared frost-alpha ramp (`--blue-6 → --blue-12 → --blue-24 → --blue-90`, all on `#bad6f7`/`#bad7f7`) for washes, hairlines, and hover states — never solid strokes.
- Place centered dotDigital eyebrows (15px, 0.10em, `#c7d3ea`) flanked by fading `rgba(186,215,247,0.12)` rules at every section opening.
- Set section gaps at 120px and card padding at 24px; the rhythm should feel cathedral-like, not dense SaaS.

### Don't
- Do not introduce additional chromatic accents in marketing chrome — the palette is monochrome with one violet CTA; the teal/blue/orange only exist as demo customization swatches.
- Do not use solid colored borders; replace them with 1px inset `#bad7f71f` (`--blue-12`) strokes to preserve the glass aesthetic.
- Do not use bold weights (600+) on aeonikPro display headings — authority comes from size at weight 500, not volume.
- Do not apply conventional drop-shadows; the system reads depth through inset glow + tinted dark halo (Gridline Blue `#3f4959`).
- Do not mix radius families on one component type — every button is a pill, every card 16px, every badge 6px.
- Do not place `#ffffff` on frost tints brighter than `--blue-12` — the contrast floor collapses.
- Do not use the Skywash gradient on body text or buttons; reserve it for the display wordmark and the largest headings.
- Do not bake light-theme colors into core tokens; the marketing site is dark-first and light mode is a product demo, not a palette.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Midnight Canvas | `#05060f` | Full-bleed page background, deepest layer |
| 0b | Canvas Deep | `#06060e` | Near-black hero corners / modal backing beneath the frosted stack |
| 1 | Steel Plate | `#2f343e` | Elevated panels, ghost-button fills *(grafted from curated)* |
| 2 | Frost Wash 6 | `#bad6f70f` | Translucent glass card surface — barely-visible `--blue-6` tint that reads as glass above the canvas |
| 3 | Deep Glass | `rgba(5,6,15,0.97)` | Auth-form modal surface — near-opaque midnight with the frosted-edge shadow stack |

## Elevation

Depth is luminance and glow, never a plain shadow. Every raised surface stacks three ingredients: a bright 1px inset top edge (frost highlight), a large soft inset glow (24–96px), and a cool tinted drop shadow keyed to Gridline Blue / near-black.

- **Auth-form modal / floating hero card:** `inset 0 1px 1px rgba(216,236,248,0.2), inset 0 24px 48px rgba(168,216,245,0.06), 0 16px 32px rgba(0,0,0,0.3)`
- **Feature card:** `inset 0 1px 1px rgba(199,211,234,0.12), inset 0 24px 48px rgba(199,211,234,0.05), 0 24px 32px rgba(6,6,14,0.7)`
- **Ambient panel:** `inset -0.5px 0.5px 1px rgba(199,211,234,0.12), inset 0 0 96px rgba(186,215,247,0.08)`
- **Glow halo (behind hero wordmark):** `0 0 6px rgba(186,207,247,0.32), 0 0 12px rgba(238,186,247,0.24)`

## Imagery

No photography, no lifestyle, no product screenshots — the product *is* the visual. The hero and feature areas are dominated by glass-morphism auth-form mockups (email/password inputs, social-login buttons, passwordless code entry) rendered as floating translucent cards against the midnight canvas. Feature icons are line-art mono glyphs in `#d1e4fa` inside circular frosted tiles. A faint blueprint grid (1px lines at `rgba(186,215,247,0.06)`) covers the full page as ambient atmosphere, and a conic-gradient spotlight halo glows at the top of the hero, lighting the wordmark like a login box arranged in a dark studio.

## Layout

Full-bleed dark canvas, 1200px centered content container. The hero is a single centered illuminated wordmark ("AuthKit" in gradient display type) under a small eyebrow, with three floating glass auth cards fanned behind/below it (left card tilted left, center scaled largest, right tilted right). A light/dark theme toggle sits centered below. The feature row is a horizontal 6-icon timeline with thin connecting lines between circular tiles. Section rhythm repeats: centered eyebrow flanked by fading rules → large centered heading (44–48px) → one line of muted body (16–18px, ~640px max). The customization section frames a mock browser window with the auth card centered, surrounded by floating inspector panels (color swatches, radius sliders, logo picker, button-text field, page-background field) pinned to the corners like a design-tool workspace.

## Typography Voice

Two registers, cleanly separated. **aeonikPro** owns display only — the wordmark and the 44–48px section headings — and its authority is spatial, not heavy: weight 500 at large size, near-normal tracking, so the type reads calm and wide rather than loud. **Untitled Sans** does all the working type (body, UI, buttons, badges) at 400–500 with a subtle -0.01em / -0.16px tightening that keeps the small sizes crisp on dark. Between them sits a third quiet voice: **dotDigital** all-caps eyebrows at 15px / 0.10em with `tnum` on — a monospace-flavored marker (IBM Plex Mono is the loaded fallback) that punctuates each section without competing with the display line. The signature move is the gradient wordmark: aeonikPro filled top-to-bottom with Skywash (`#d8ecf8 → #98c0ef`), lit from a spotlight halo so the text appears to glow from behind glass.

## Agent Prompt Guide

## Quick Color Reference
- background: `#05060f` (canvas) / `#06060e` (deep)
- surface (glass card): `rgba(186,214,247,0.03)` — `--blue-6`
- surface (auth modal): `rgba(5,6,15,0.97)`
- text (headline): `#d8ecf8`
- text (body): `#c8d4ea` / `#d1e4fa`
- text (muted): `#c7d3ea`
- text (helper): `#9da7ba`
- border (hairline): `#bad7f71f` — `--blue-12`
- accent / primary action: `#663af3` (filled — auth CTA only)

## Example Component Prompts

1. **Violet auth CTA:** `#663af3` background, `#ffffff` text, 6px radius, padding 12px 24px, Untitled Sans 500. The only filled/chromatic button — use for the auth-form Continue button only.
2. **Section eyebrow + heading stack:** eyebrow is 15px dotDigital (or IBM Plex Mono) weight 400, letter-spacing 0.10em, `#c7d3ea`, centered, flanked by rules that fade transparent → `rgba(186,215,247,0.12)` → transparent. Below: 44px aeonikPro 500 filled with `linear-gradient(0deg, #d8ecf8, #98c0ef)`. Body below: 16px Untitled Sans 400 `#c8d4ea`, max-width 640px, centered.
3. **Feature icon tile row:** six 56px circular tiles (9999px radius), background `rgba(186,214,247,0.06)`, outlined line-art icon centered in `#d1e4fa`, label below in 14px Untitled Sans `#c7d3ea`, tiles joined by a 1px `rgba(186,215,247,0.12)` line.
4. **Ghost pill button:** 999px radius, padding 8px 16px, background `#bad6f70f` (`--blue-6`), 1px inset border `#bad7f71f` (`--blue-12`), text `#ffffff`, 14px Untitled Sans 500; hover raises the fill to `--blue-12`.
5. **Background canvas with grid + halo:** `#05060f` base, 1px grid lines at `rgba(186,215,247,0.06)` on 80px intervals, full-bleed, masked to fade at edges; conic-gradient spotlight at top center: `conic-gradient(at 50% -5%, transparent 45%, rgba(124,145,182,0.3) 49%, rgba(124,145,182,0.5) 50%, rgba(124,145,182,0.3) 51%, transparent 55%)`.

## Gradient System

Three cool-tinted layers, stacked vertically and never warm:
1. **Skywash** — `linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%)` (the site's `--gradient-loud-100`) fills the display wordmark and largest headings.
2. **Faded frost washes** — `--gradient-subdued-12` (`#d8ecf81f → #98c0ef1f`) and `--gradient-background-6` (`#d8ecf80f → #98c0ef0f`) tint glass surfaces and the eyebrow divider rules (transparent → `rgba(186,215,247,0.12)` → transparent).
3. **Conic spotlight halos** — transparent → `rgba(124,145,182,0.5)` → transparent at the top of full-bleed sections, the ambient illumination that lights the hero.

All gradients stay in the blue-violet spectrum; introducing a warm gradient breaks the system.

## Similar Brands

- **Linear** — Same near-black canvas, monochromatic blue-white text, a single vivid violet as the only chromatic accent, and floating glass-morphism product cards.
- **Vercel** — Dark-first marketing with gradient-filled display type, frosted glass UI mockups, and minimal hairline borders at low opacity.
- **Clerk** — Devtools auth-product landing with a dark canvas, glass-card auth-form mockups as the hero visual, and a monochrome-plus-one-accent palette.
- **Radix** — Companion brand in the WorkOS/Radix lineage — blueprint-grid backgrounds, frosted surfaces, and dot-tracked all-caps eyebrow labels.
- **Stripe** — Gradient-filled display headings on dark, translucent glass cards as product showcases, and a restrained palette with one signature accent.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors — canvas & neutrals */
  --dark-background: #05060f;
  --color-canvas-deep: #06060e;
  --color-steel-plate: #2f343e;   /* grafted from curated */
  --blue-loud: #232425;
  --color-fog-veil: #9da7ba;      /* grafted from curated */

  /* Colors — body text ramp (site's own tokens) */
  --body-loud: #c7d3ea;
  --body-normal: #c8d4eac7;
  --body-muted: #c7d3eaa3;
  --color-frost-glow: #d1e4fa;
  --color-ice-highlight: #d8ecf8;
  --color-sky-blue: #98c0ef;
  --color-frost-blue: #bad6f7;
  --color-blueprint-blue: #b6d9fc;
  --color-pure-white: #ffffff;

  /* Colors — accent + demo swatches */
  --color-void-violet: #663af3;
  --color-violet-mist: #b3b3ff;
  --color-ember-glow: #e46d4c;
  --color-signal-blue: #027dea;
  --color-deep-teal: #269684;
  --color-gridline-blue: #3f4959; /* grafted from curated */

  /* Colors — frost-alpha ramp (site's own tokens) */
  --blue-6: #bad6f70f;
  --blue-12: #bad7f71f;
  --blue-24: #bad6f73d;
  --blue-90: #bad6f7e6;
  --color-luminous-fill: #c7d3ea1f;

  /* Gradients */
  --gradient-loud-100: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);
  --gradient-subdued-12: linear-gradient(0deg, #d8ecf81f 0%, #98c0ef1f 100%);
  --gradient-background-6: linear-gradient(0deg, #d8ecf80f 0%, #98c0ef0f 100%);

  /* Typography — Families */
  --font-untitled-sans: 'Untitled Sans', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-aeonikpro: 'aeonikPro', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-dotdigital: 'dotDigital', 'IBM Plex Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-caption: 12px;      --leading-caption: 1.33;
  --text-body-sm: 14px;      --leading-body-sm: 1.43;
  --text-eyebrow: 15px;      --leading-eyebrow: 1.20;  --tracking-eyebrow: 0.10em;
  --text-body: 16px;         --leading-body: 1.5;      --tracking-body: -0.16px;
  --text-subheading: 18px;   --leading-subheading: 1.33;
  --text-heading-sm: 24px;   --leading-heading-sm: 1.17; --tracking-heading-sm: -0.24px;
  --text-heading: 28px;      --leading-heading: 1.14;
  --text-heading-lg: 44px;   --leading-heading-lg: 1.16;
  --text-display: 48px;      --leading-display: 1.17;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-36: 36px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-100: 100px;
  --spacing-120: 120px; --spacing-200: 200px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 120px;
  --card-padding: 24px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-badge: 6px;
  --radius-input: 6px;
  --radius-card: 16px;
  --radius-modal: 16px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --radius-circle: 9999px;

  /* Shadows */
  --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-hairline-faint: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
  --shadow-ambient: 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-feature-card: 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;
  --shadow-auth-modal: 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;
  --shadow-white-ring: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-dark-background: #05060f;
  --color-canvas-deep: #06060e;
  --color-steel-plate: #2f343e;
  --color-blue-loud: #232425;
  --color-fog-veil: #9da7ba;
  --color-body-loud: #c7d3ea;
  --color-body-normal: #c8d4ea;
  --color-frost-glow: #d1e4fa;
  --color-ice-highlight: #d8ecf8;
  --color-sky-blue: #98c0ef;
  --color-frost-blue: #bad6f7;
  --color-blueprint-blue: #b6d9fc;
  --color-pure-white: #ffffff;
  --color-void-violet: #663af3;
  --color-violet-mist: #b3b3ff;
  --color-ember-glow: #e46d4c;
  --color-signal-blue: #027dea;
  --color-deep-teal: #269684;
  --color-gridline-blue: #3f4959;
  --color-blue-6: #bad6f70f;
  --color-blue-12: #bad7f71f;
  --color-blue-24: #bad6f73d;
  --color-blue-90: #bad6f7e6;
  --color-luminous-fill: #c7d3ea1f;

  /* Typography */
  --font-untitled-sans: 'Untitled Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-aeonikpro: 'aeonikPro', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-dotdigital: 'dotDigital', 'IBM Plex Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-eyebrow: 15px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 28px;
  --text-heading-lg: 44px;
  --text-display: 48px;

  /* Spacing */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-36: 36px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-100: 100px;
  --spacing-120: 120px; --spacing-200: 200px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-badge: 6px;
  --radius-input: 6px;
  --radius-card: 16px;
  --radius-modal: 16px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --radius-circle: 9999px;

  /* Shadows */
  --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-hairline: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-hairline-faint: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
  --shadow-ambient: 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-feature-card: 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;
  --shadow-auth-modal: 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;
  --shadow-white-ring: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}
```