AuthKit convierte un problema funcional en una escena de producto muy específica: near-black, líneas técnicas, texto azul helado y tarjetas de login que parecen interfaces ya listas para producción.
Screenshot real del hero de AuthKit, ya con sus tres tarjetas, la retícula luminosa y el spotlight vertical. Esta escena explica mejor la marca que cualquier swatch aislado.
AuthKit distribuye la personalidad entre una sans limpia para producto y una familia display muy sobria. El toque de `dotDigital` aparece como textura de UI, no como voz principal del sistema.
La interfaz principal necesita desaparecer lo suficiente para que la composición y el glow hagan el trabajo. Por eso la sustitución correcta aquí no es excéntrica: es limpia, precisa y algo técnica.
El sistema no busca drama por serif o contraste alto. Busca precisión. La energía visual viene de luz, grids, bordes y motion conic. La tipografía solo mantiene el entorno legible y moderno.
La identidad cromática se organiza con pocos ingredientes: un fondo casi negro, azules blanquecinos para texto y glow, y transparencias azules repetidas como capa técnica.
Estas piezas siguen las recetas detectadas: radio de 4px, outline blue, campos sólidos oscuros y cards con borde interior, glow y profundidad real.
Tarjeta oscura con sombra interior, borde sutil y trazo conic animado como firma del sistema.
El sistema evita rellenos intensos y se apoya en outline, glass tenue y texto azul hielo.
Chips, gradient headings y divisores finos sostienen la coherencia entre marketing y producto.
AuthKit funciona porque hace mucho con muy poco. El error más común al reinterpretarlo sería exagerar la teatralidad o, al revés, neutralizarlo hasta convertirlo en otra landing SaaS cualquiera.
Los bloques de abajo condensan los valores observados del sitio y una traducción operacional para reutilizarlos en otro entorno sin perder tono.
:root {
--dark-background: #05060F;
--body-loud: #C7D3EA;
--body-muted: #C7D3EAA3;
--gradient-loud-100: linear-gradient(0deg, #D8ECF8 0%, #98C0EF 100%);
--gradient-background-6: linear-gradient(0deg, #D8ECF80F 0%, #98C0EF0F 100%);
--blue-6: #BAD6F70F;
--blue-12: #BAD7F71F;
--blue-24: #BAD6F73D;
--blue-90: #BAD6F7E6;
--line-color: #ADBBFF;
--font-display: "Sora", system-ui, sans-serif; /* original: aeonikPro */
--font-body: "Instrument Sans", system-ui, sans-serif; /* original: Untitled Sans */
--font-deco: "DotGothic16", monospace; /* original: dotDigital */
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--radius-sm: 4px;
--radius-md: 16px;
--shadow-card: inset 0 1px 1px rgba(216, 236, 248, 0.20),
inset 0 24px 48px rgba(168, 216, 245, 0.06),
0 16px 32px rgba(0, 0, 0, 0.30);
}
@theme {
--color-authkit-bg: #05060F;
--color-authkit-ink: #D8ECF8;
--color-authkit-body: #C7D3EA;
--color-authkit-muted: #C7D3EAA3;
--color-authkit-blue: #98C0EF;
--color-authkit-blue-soft: #BAD6F7;
--color-authkit-purple: #ADBBFF;
--color-authkit-glass: #BAD6F708;
--font-display: "Sora", system-ui, sans-serif;
--font-sans: "Instrument Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--radius-authkit-xs: 4px;
--radius-authkit-card: 16px;
--shadow-authkit-card: inset 0 1px 1px rgba(216, 236, 248, 0.20),
inset 0 24px 48px rgba(168, 216, 245, 0.06),
0 16px 32px rgba(0, 0, 0, 0.30);
}
.authkit-card {
@apply rounded-[16px] border border-white/10 bg-[rgba(5,6,15,0.97)] text-authkit-ink;
box-shadow: var(--shadow-authkit-card);
}
.authkit-outline-btn {
@apply inline-flex h-8 items-center justify-center rounded-[4px] border border-white/10 px-4 text-sm font-medium text-authkit-ink;
}
{
"brand": "AuthKit",
"source": "https://authkit.com/",
"theme": "dark",
"sections": ["Oscuro Cinemático", "Minimal Tech", "Moderno"],
"colors": {
"background": "#05060F",
"bodyLoud": "#C7D3EA",
"bodyMuted": "#C7D3EAA3",
"gradientTop": "#D8ECF8",
"gradientBottom": "#98C0EF",
"blue6": "#BAD6F70F",
"blue12": "#BAD7F71F",
"blue24": "#BAD6F73D",
"blue90": "#BAD6F7E6",
"lineColor": "#ADBBFF"
},
"fonts": {
"displayOriginal": "aeonikPro",
"bodyOriginal": "Untitled Sans",
"decorativeOriginal": "dotDigital",
"displayHtml": "Sora",
"bodyHtml": "Instrument Sans",
"decorativeHtml": "DotGothic16",
"monoHtml": "IBM Plex Mono"
},
"components": {
"buttonHeight": "32px",
"buttonRadius": "4px",
"cardRadius": "16px",
"cardHeight": "392px",
"inputPaddingInline": "10px",
"animatedBorderLoop": "12s"
}
}
---
version: "1.0"
name: "AuthKit"
description: "Sistema de autenticacion oscuro y luminoso: fondo near-black, tipografia neo-grotesk contenida, gradientes azul hielo y tarjetas de login con lineas conic, blur sutil y brillo tecnico de precision."
colors:
primary: "#98C0EF"
primary-hover: "#AAD0F6"
primary-active: "#7DAEE8"
secondary: "#D8ECF8"
accent: "#BAD6F7"
accent-soft: "#BAD6F70F"
accent-line: "#ADBBFF"
neutral: "#05060F"
background: "#05060F"
surface: "rgba(186, 214, 247, 0.03)"
surface-elevated: "rgba(5, 6, 15, 0.97)"
surface-glass: "rgba(186, 214, 247, 0.05)"
text-primary: "#D8ECF8"
text-secondary: "#C7D3EA"
text-muted: "#C7D3EAA3"
text-on-primary: "#05060F"
border: "#BAD7F71F"
border-strong: "#BAD7F738"
success: "#98C0EF"
success-bg: "#BAD6F714"
warning: "#ADBBFF"
warning-bg: "#ADBBFF14"
error: "#C7D3EA"
error-bg: "#C7D3EA14"
info: "#D8ECF8"
info-bg: "#D8ECF814"
typography:
display-lg:
fontFamily: "aeonikPro"
fontSize: "56px"
fontWeight: 400
lineHeight: "56px"
letterSpacing: "-0.04em"
body-md:
fontFamily: "Untitled Sans"
fontSize: "14px"
fontWeight: 400
lineHeight: "20px"
label-md:
fontFamily: "Untitled Sans"
fontSize: "14px"
fontWeight: 500
lineHeight: "20px"
mono-sm:
fontFamily: "IBM Plex Mono"
fontSize: "11px"
fontWeight: 400
lineHeight: "16px"
rounded:
xs: "4px"
sm: "6px"
md: "12px"
lg: "16px"
xl: "28px"
full: "999px"
spacing:
base: "4px"
sm: "8px"
md: "16px"
lg: "24px"
xl: "32px"
gap: "40px"
section-padding: "80px"
components:
button-primary:
backgroundColor: "transparent"
textColor: "#D1E4FA"
typography: "{typography.label-md}"
rounded: "{rounded.xs}"
padding: "0 16px"
height: "32px"
border: "1px solid #BAD7F71F"
button-secondary:
backgroundColor: "#FFFFFF"
textColor: "#111111"
typography: "{typography.label-md}"
rounded: "{rounded.xs}"
padding: "0 16px"
height: "32px"
card:
backgroundColor: "rgba(5, 6, 15, 0.97)"
rounded: "{rounded.lg}"
padding: "42px 36px"
shadow: "inset 0 1px 1px rgba(216,236,248,.20), inset 0 24px 48px rgba(168,216,245,.06), 0 16px 32px rgba(0,0,0,.30)"
---
# DESIGN.md - AuthKit
> Sistema de diseno extraido de `https://authkit.com/`.
> Generado siguiendo el skill `url-inspiration-styleguide`.
> Base observada en HTML, CSS y captura real del sitio.
---
## 1. Tema Visual y Atmosfera
AuthKit no presenta autenticacion como una necesidad administrativa. La presenta como una pieza de producto deseable. La base es extremadamente oscura, casi negra, pero no cae en el drama pesado del negro absoluto. El fondo `#05060F` y sus variaciones sostienen una profundidad silenciosa donde la luz azul puede respirar y marcar jerarquia sin esfuerzo.
La personalidad del sistema viene de la combinacion entre rigor tecnico y pulso cinematografico. Hay reticulas visibles, lineas de referencia, divisores finos, haces de luz, halos controlados y bordes brillantes que recorren las cards. Nada de esto se siente decorativo en exceso. Todo apunta a construir la idea de una interfaz de autenticacion moderna, robusta y lista para integrarse en apps serias.
La tipografia no busca protagonismo extravagante. Su papel es ser clara, limpia y ligeramente precisa. La emocion se desplaza hacia la direccion de arte del canvas, las transiciones de luz y la fisica aparente de las cards. AuthKit se siente mas como una herramienta de infraestructura premium que como una landing de consumo masivo.
En digital, la traduccion correcta debe conservar tres tensiones al mismo tiempo:
- oscuridad suficiente para que el glow viva
- limpieza suficiente para que el sistema no se vuelva un efecto
- producto suficiente para que la composicion no termine siendo solo ambientacion
**Palabras clave de personalidad**: tecnico, frio, preciso, moderno, silencioso, luminoso, confiable, sistemico
**Densidad del layout**: media, con mucho aire estructural
**Modo preferido**: oscuro
**Nivel de ornamentacion**: controlado, con enfasis en lineas, halos y superficies
**Audiencia visual objetivo**: desarrolladores, equipos de producto, SaaS y plataformas que necesitan auth enterprise con una presentacion contemporanea
### Lectura de direccion de arte
- El hero depende de una escena completa, no de un solo titular.
- La reticula es parte de la atmosfera.
- Las cards de login son el activo visual principal.
- El color no se reparte democráticamente, se concentra en luz y acentos.
- El sistema no parece branding lifestyle.
- El sistema no parece cyberpunk recargado.
- El sistema se siente dev-friendly.
- El sistema se siente premium por precisión, no por lujo ornamental.
- El sistema sugiere escalabilidad.
- El sistema sugiere infraestructura ya resuelta.
---
## 2. Paleta de Colores y Roles Semánticos
La paleta observada del sitio es sorprendentemente corta. En lugar de repartir varios acentos saturados, AuthKit trabaja con una familia de azules blanquecinos sobre un fondo near-black. Esa restriccion hace que cada brillo, borde y gradiente importe mas.
### Colores de marca
| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Azul primario | `--color-primary` | `#98C0EF` | Glow, gradiente, foco principal | `#05060F` |
| Azul primario hover | `--color-primary-hover` | `#AAD0F6` | Hover luminoso derivado para CTA y estados | `#05060F` |
| Azul primario active | `--color-primary-active` | `#7DAEE8` | Estado activo derivado, mas denso | `#05060F` |
| Azul loud | `--color-secondary` | `#D8ECF8` | Texto degradado, highlights, contraste principal | `#05060F` |
| Azul soporte | `--color-accent` | `#BAD6F7` | Bordes, dots, lineas, sombras suaves | `#05060F` |
| Line accent | `--color-accent-line` | `#ADBBFF` | Borde conic animado y trazos brillantes | `#05060F` |
### Colores de superficie
| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo base | `--color-bg` | `#05060F` | Canvas principal del sitio |
| Fondo seccion | `--color-bg-soft` | `#090B16` | Variacion sutil para secciones y profundidad |
| Surface tenue | `--color-surface` | `rgba(186, 214, 247, 0.03)` | Glass suave, botones hero, cards ligeras |
| Surface glass | `--color-surface-glass` | `rgba(186, 214, 247, 0.05)` | Planos secundarios con blur |
| Surface elevada | `--color-surface-elevated` | `rgba(5, 6, 15, 0.97)` | Cards de login y modulos principales |
| Surface luminous | `--color-surface-luminous` | `rgba(186, 214, 247, 0.08)` | Hover o seleccion derivada |
### Colores de texto
| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#D8ECF8` | Titulares, CTA outline, foco visual |
| Texto secundario | `--color-text-secondary` | `#C7D3EA` | Copy base, labels, contenido de card |
| Texto muted | `--color-text-muted` | `#C7D3EAA3` | Descripciones, placeholders, notas |
| Texto sobre primario | `--color-text-on-primary` | `#05060F` | Texto sobre azul claro |
| Texto sobre claro | `--color-text-on-light` | `#111111` | Botones light y surfaces blancas |
### Colores de estado
> El sitio no expone un set semantico tradicional completo. Los siguientes estados se derivan para completar el sistema sin romper la familia real.
| Estado | Variable CSS | Hex | Texto | Nota |
|--------|-------------|-----|-------|------|
| Success | `--color-success` | `#98C0EF` | `#05060F` | derivado para completar el sistema |
| Success bg | `--color-success-bg` | `#BAD6F714` | `#D8ECF8` | derivado para completar el sistema |
| Warning | `--color-warning` | `#ADBBFF` | `#05060F` | derivado para completar el sistema |
| Warning bg | `--color-warning-bg` | `#ADBBFF14` | `#D8ECF8` | derivado para completar el sistema |
| Error | `--color-error` | `#C7D3EA` | `#05060F` | derivado para completar el sistema |
| Error bg | `--color-error-bg` | `#C7D3EA14` | `#D8ECF8` | derivado para completar el sistema |
| Info | `--color-info` | `#D8ECF8` | `#05060F` | derivado para completar el sistema |
| Info bg | `--color-info-bg` | `#D8ECF814` | `#D8ECF8` | derivado para completar el sistema |
### Tiras de tinte útiles
- `#D8ECF8` = extremo alto del degradado
- `#CFE2F7` = transición útil derivada
- `#BAD6F7` = tono medio observador
- `#98C0EF` = acento dominante
- `#7DAEE8` = densidad activa derivada
### Relación de contraste
- `#D8ECF8` sobre `#05060F` ofrece contraste alto.
- `#C7D3EA` sobre `#05060F` conserva legibilidad fuerte.
- `#C7D3EAA3` sobre `#05060F` sirve para texto secundario.
- `#05060F` sobre `#98C0EF` funciona para badges o chips claros.
- `#05060F` sobre `#D8ECF8` funciona para botones y labels claros.
- `#BAD6F708` no debe usarse como color de texto.
- `#ADBBFF` no debe usarse como fondo extenso de lectura.
---
## 3. Reglas de Tipografía
```css
--font-heading: "aeonikPro", "Sora", system-ui, sans-serif;
--font-body: "Untitled Sans", "Instrument Sans", system-ui, sans-serif;
--font-deco: "dotDigital", "DotGothic16", monospace;
--font-mono: "IBM Plex Mono", monospace;
```
**Google Fonts para la version HTML:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=IBM+Plex+Mono:wght@400;500;700&family=Instrument+Sans:wght@400;500;600&family=Sora:wght@400;500;600&display=swap" rel="stylesheet">
```
**Nota de sustitución tipográfica**
- Display original: `aeonikPro`
- Display HTML: `Sora`
- Body original: `Untitled Sans`
- Body HTML: `Instrument Sans`
- Decorativa original: `dotDigital`
- Decorativa HTML: `DotGothic16`
- Mono original: `IBM Plex Mono`
- Mono HTML: `IBM Plex Mono`
### Por qué esta sustitucion
- `aeonikPro` tiene una precision neo-grotesk suave, no excesivamente mecanica.
- `Sora` conserva cierta limpieza geometrica sin verse corporativa generica.
- `Untitled Sans` es una grotesk utilitaria y muy neutral.
- `Instrument Sans` mantiene esa claridad con una tension contemporanea similar.
- `dotDigital` no es una voz principal, es una señal secundaria.
- `DotGothic16` cumple ese rol sin volverse caricaturesca.
### Escala tipográfica observada
| Token | rem | px | line-height | uso |
|-------|-----|----|-------------|-----|
| `--text-2xs` | 0.75rem | 12px | 16px | metadata y microcopy |
| `--text-xs` | 0.875rem | 14px | 20px | body base, labels, botones |
| `--text-sm` | 1rem | 16px | 24px | card titles secundarios |
| `--text-md` | 1.25rem | 20px | 24px | headline de soporte |
| `--text-lg` | 1.5rem | 24px | 28px | hero headline en mobile |
| `--text-xl` | 2.5rem | 40px | 44px | section headline |
| `--text-2xl` | 2.75rem | 44px | 48px | heading grande |
| `--text-3xl` | 3rem | 48px | 52px | display inicial |
| `--text-4xl` | 3.5rem | 56px | 56px | hero display desktop |
### Pesos tipográficos
```css
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700; /* para Untitled Sans custom cargada como medium/700 */
```
### Letter spacing
```css
--tracking-tight: -0.04em;
--tracking-ui-tight: -0.24px;
--tracking-normal: 0em;
--tracking-wide: 0.12em;
--tracking-mono: 0.16em;
```
### Regla clave
La tipografia de AuthKit no debe teatralizar. Su trabajo es sostener una UI sofisticada sin imponerse sobre la luz, las lines y los bordes animados. Si el texto empieza a sentirse expresivo por si mismo, la marca se desvía.
---
## 4. Estilos de Componentes
### Botones
**Botón primary observado en cards**
```css
background: transparent;
color: #D1E4FA;
border: 1px solid #BAD7F71F;
height: 32px;
padding-inline: 16px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
line-height: 32px;
:hover {
border-color: #BAD7F738;
transition: all 0.2s ease-out;
}
:active {
border-color: #BAD7F738;
background: rgba(186,214,247,0.03);
}
:focus-visible {
outline: 2px solid #BBD7F74D;
}
:disabled {
opacity: 0.45;
cursor: not-allowed;
}
```
**Botón hero glass**
```css
background: rgba(186,214,247,0.03);
color: rgba(186,214,247,0.64);
backdrop-filter: blur(3px);
box-shadow:
inset 0 0 0 1px rgba(186,215,247,0.12),
inset 0 1px 1px rgba(216,236,248,0.06),
inset 0 4px 12px rgba(216,236,248,0.04);
:hover {
box-shadow:
inset 0 0 0 1px rgba(186,215,247,0.12),
inset 0 1px 1px rgba(216,236,248,0.11),
inset 0 4px 12px rgba(216,236,248,0.09);
}
```
**Botón light**
```css
background: #FFFFFF;
color: #111111;
box-shadow:
0 0 0 1px rgba(0,0,59,0.05),
0 1px 2px rgba(0,0,59,0.06);
:hover {
box-shadow:
0 0 0 1px rgba(0,0,59,0.10),
0 1px 2px rgba(0,0,59,0.16);
}
```
### Inputs
**Input solid observado en card de login**
```css
background: rgba(199, 211, 234, 0.06);
border: 1px solid rgba(186,215,247,0.12);
border-radius: 4px;
padding-inline: 10px;
min-height: 32px;
font-size: 14px;
font-weight: 400;
line-height: 32px;
color: #FFFFFF;
:hover {
border-color: rgba(186,215,247,0.17);
}
:focus {
background: rgba(199,211,234,0.10);
border-color: rgba(186,215,247,0.17);
}
::placeholder {
color: rgba(186,214,247,0.32);
}
```
**Input hero observado**
```css
background: rgba(186,214,247,0.03);
backdrop-filter: blur(3px);
border-radius: 6px;
box-shadow:
inset 0 0 0 1px rgba(186,215,247,0.12),
inset 0 1px 1px rgba(216,236,248,0.06),
inset 0 4px 12px rgba(216,236,248,0.04);
color: rgba(198,204,236,0.95);
```
### Cards
**Card hero principal**
```css
background: rgba(5, 6, 15, 0.97);
border-radius: 16px;
padding: 42px 36px;
box-shadow:
inset 0 1px 1px rgba(216,236,248,0.20),
inset 0 24px 48px rgba(168,216,245,0.06),
0 16px 32px rgba(0,0,0,0.30);
border: 1px solid rgba(186,215,247,0.12);
::before {
content: "";
position: absolute;
inset: 16px;
background:
radial-gradient(#D1E4FA 50%, transparent 50%) 0 0/4px 4px no-repeat,
radial-gradient(#D1E4FA 50%, transparent 50%) 100% 0/4px 4px no-repeat,
radial-gradient(#D1E4FA 50%, transparent 50%) 0 100%/4px 4px no-repeat,
radial-gradient(#D1E4FA 50%, transparent 50%) 100% 100%/4px 4px no-repeat;
filter: drop-shadow(0 0 8px rgba(209,228,250,0.5));
}
```
**Card animada**
```css
border-radius: inherit;
filter: drop-shadow(0 0 10px var(--line-color));
::before {
content: "";
padding: 1px;
background: conic-gradient(
from calc(var(--angle) + var(--start-angle)),
transparent 0%,
var(--line-color) 20%,
transparent 25%
);
animation: line-anim 12s linear infinite, line-opacity-loop 3s linear infinite;
}
```
### Badges / Chips
```css
background: rgba(186,214,247,0.04);
border: 1px solid rgba(186,215,247,0.12);
border-radius: 999px;
padding: 6px 10px;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #D8ECF8;
```
### Alertas / Toasts
> Alertas visibles del sistema como componente marketing: (no detectado)
Derivación recomendada para completar el sistema:
```css
background: rgba(186,214,247,0.05);
border: 1px solid rgba(186,215,247,0.12);
border-left: 3px solid #98C0EF;
backdrop-filter: blur(6px);
color: #D8ECF8;
padding: 14px 16px;
border-radius: 12px;
```
### Navegación / Header
```css
layout: grid;
align-items: center;
background: transparent;
color: #BAD6F7;
padding-top: 24px;
logo center:
color: rgba(186,214,247,0.48);
right ctas:
gap: 8px mobile, 16px desktop
github button:
glass dark
get started:
hero style, blur 3px, text pale blue
```
---
## 5. Principios de Layout
### Escala de espaciado observada
```css
--space-1: 4px;
--space-2: 8px;
--space-3: 10px;
--space-4: 12px;
--space-5: 16px;
--space-6: 20px;
--space-7: 24px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 42px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
```
### Contenedores
```css
--container-main: 1200px;
--container-mobile: 390px;
--page-max: 1440px;
```
### Grid
- El hero usa una retícula visible de columnas y filas.
- En desktop, la escena hero está compuesta por áreas explícitas.
- Las tarjetas se sitúan en una banda central específica.
- El sistema usa mucha separación vertical medida, no orgánica.
- Las líneas horizontales y verticales funcionan como estructura real, no ornamento casual.
### Filosofía de espaciado
AuthKit necesita mucho vacío controlado. Si se comprime, pierde claridad y la escena se vuelve pesada. El espacio alrededor de las cards no es desperdicio: es el campo de prueba donde la luz, la grilla y el producto pueden convivir sin competir.
Reglas prácticas:
- deja grandes márgenes alrededor del grupo principal de cards
- centra la atención verticalmente
- usa separaciones precisas entre label, input y botón
- evita apilar muchos elementos sin respiración
- cuando uses líneas o dots, nunca deben tocar el copy útil
---
## 6. Profundidad y Elevación
AuthKit es un sistema de profundidad interna, no de elevación flotante caricaturesca. Las sombras son oscuras y moderadas. El brillo más importante viene por dentro: bordes, trazos, blur y luces insertas en la propia superficie.
### Sistema de sombras
```css
--shadow-none: none;
--shadow-inset-sm: inset 0 1px 1px rgba(216,236,248,0.06);
--shadow-inset-md: inset 0 4px 12px rgba(216,236,248,0.04);
--shadow-inset-lg: inset 0 24px 48px rgba(168,216,245,0.06);
--shadow-drop-sm: 0 1px 2px rgba(0,0,59,0.06);
--shadow-drop-md: 0 16px 32px rgba(0,0,0,0.30);
--shadow-drop-lg: 0 24px 32px rgba(6,6,14,0.70);
--shadow-glow-line: 0 0 10px rgba(173,187,255,0.52);
```
### Niveles de elevación
| Nivel | Token | Uso |
|------|-------|-----|
| 0 | `--shadow-none` | canvas base |
| 1 | `--shadow-inset-sm` | botones hero, inputs hero |
| 2 | `--shadow-inset-sm + drop-sm` | boton light |
| 3 | `--shadow-card` | cards hero principales |
| 4 | `--shadow-glow-line + shadow-card` | cards animadas con borde conic |
### Radios de borde
```css
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 28px;
--radius-pill: 999px;
```
### Principio de superficie
- Los radios pequeños son parte de la precisión.
- El sistema no usa pill para todo.
- El pill aparece más en chips o acciones complementarias.
- Las cards principales son de 16px.
- Inputs y botones base son de 4px.
- El contraste entre 4px y 16px ayuda a distinguir UI operativa de UI de escena.
---
## 7. Lo que Sí y lo que No
### Sí hacer
1. **Sí usar near-black como base real**. La profundidad oscura es el soporte que permite que los azules respiren con autoridad.
2. **Sí construir glow desde bordes y tipografía**. La luz debe sentirse integrada en el sistema, no añadida como efecto tardío.
3. **Sí mostrar autenticación como producto visible**. Las cards y sus estados son la identidad central del sitio.
4. **Sí mantener el color restringido**. Unos pocos azules bien usados hacen más que una paleta extensa.
5. **Sí dejar que la retícula sea visible**. La malla técnica sostiene el tono de precisión.
6. **Sí usar motion largo y limpio**. El sistema se beneficia de loops suaves, no de pulsos agresivos.
### No hacer
1. **No usar negro puro sin textura**. El sistema necesita matiz y profundidad, no vacío absoluto.
2. **No volver el glow demasiado brillante**. Si la luz domina, la UI deja de sentirse utilitaria.
3. **No introducir tipografías expresivas ajenas**. La marca necesita una neutralidad calculada.
4. **No convertir toda la página en vidrio**. El glass aquí es puntual y controlado.
5. **No rellenar botones con azul por defecto**. El outline y la transparencia son parte del carácter real.
6. **No eliminar la estructura lineal**. Sin líneas, divisores y malla, gran parte de la identidad se pierde.
---
## 8. Comportamiento Responsive
### Breakpoints observados
```css
@media (min-width: 440px) { ... }
@media (min-width: 640px) { ... }
@media (min-width: 940px) { ... }
@media (max-width: 996px) { ... }
@media (max-width: 1200px) { ... }
```
### Cambios por breakpoint
**Mobile**
- Hero simplifica la retícula.
- El layout del header reduce presencia.
- Algunas piezas como GitHub CTA se ocultan.
- Las cards se apilan con menos anchura.
- La composición sigue centrada.
**Tablet**
- Vuelven más columnas visibles.
- Las separaciones crecen.
- El logo central recupera escala.
- Los módulos inferiores pasan de apilarse a mostrarse lado a lado.
**Desktop**
- Se activa la grilla completa del hero.
- Las tres cards pueden convivir en la misma escena.
- Los indicadores, líneas y badges tienen espacio para respirar.
- La narrativa visual se vuelve más fuerte.
### Touch targets
- Botón base: 32px reales detectados
- CTA de navegación: alrededor de 32px a 36px
- Recomendación derivada para mobile: 44px mínimos si se adapta a producción app
### Filosofía responsive
El sitio sigue siendo atmosférico en pantallas pequeñas, pero prioriza el producto. La dirección de arte no debe depender exclusivamente del ancho desktop. Si una versión mobile pierde cards, glow y estructura, ya no se siente AuthKit.
---
## 9. Guía de Prompts para Agentes
### Prompt de inicialización de sesión
```text
Trabaja con el sistema visual de AuthKit.
MODO: oscuro, near-black.
PALETA: azules hielo y transparencias frías sobre #05060F.
TIPOGRAFIA: sans limpia y precisa, nada expresivo ni ornamental.
COMPONENTES: cards de login oscuras, bordes sutiles, glow lineal, inputs de 4px.
PRINCIPIO: hacer que la autenticación se vea como producto premium y listo para integrar.
```
### Prompt: crear nueva pantalla
```text
Crea una nueva pantalla inspirada en AuthKit.
Debe:
- sentirse técnica y moderna
- usar fondo near-black
- priorizar azul hielo para glow, texto y bordes
- incluir una card de producto real, no solo un hero abstracto
- sostener la claridad funcional de un sistema auth
```
### Prompt: añadir componente al UI kit
```text
Añade un componente al sistema de AuthKit.
Requisitos:
- usa radios pequeños para controles base
- trabaja con outlines, blur suave y borders finos
- no uses colores ajenos a la familia azul hielo
- entrega estados default, hover, active, focus y disabled
```
### Prompt: revisión de consistencia
```text
Revisa esta interfaz y detecta si rompe el sistema de AuthKit.
Verifica:
1. si la oscuridad base sigue siendo limpia
2. si el glow está medido y no excesivo
3. si la UI sigue viéndose precisa
4. si las cards conservan su profundidad interna
5. si el producto sigue siendo visible como protagonista
```
### Prompt: variante de campaña o producto
```text
Genera una variante para AuthKit manteniendo el sistema base.
Conserva:
- fondo #05060F
- familia azul hielo
- card oscura con line glow
- tipografía limpia y técnica
Puedes variar:
- intensidad de halo
- disposición de cards
- badges y micro líneas
- nivel de protagonismo del producto
```
---
## 10. Movimiento (Motion)
El motion del sitio es una parte real de la identidad. No es accesorio. Las cards tienen bordes conic, los spotlights respiran, los separadores en features revelan brillo y varias piezas se animan por loops largos.
### Nivel de motion
- medio
- constante en algunos módulos
- silencioso, no agresivo
### Duraciones observadas
- `12s` para line-anim loop en cards
- `3s` para line-opacity-loop
- `5s` para spotlight y varias animaciones de soporte
- `6s` para `cta-line-anim`
- `10s` para `complete-single-line`
- `30s` para `complete-line`
- `1.5s` para intro y reveals en algunos módulos
### Easings observados
- `linear`
- `ease-out`
- `cubic-bezier(.6, .6, 0, 1)`
### Propiedades animadas
- `opacity`
- `transform`
- `filter`
- variables CSS tipo `--angle`
- `mask-position`
- brillo de texto o borde
### Tokens de motion útiles
```css
--duration-fast: 200ms;
--duration-feature: 1.5s;
--duration-spotlight: 5s;
--duration-loop: 12s;
--duration-bg: 30s;
--ease-standard: cubic-bezier(.16, 1, .3, 1);
--ease-system: cubic-bezier(.6, .6, 0, 1);
--ease-linear: linear;
```
### Patrones de motion
- spotlight respirando en el hero
- borde conic girando en cards seleccionadas
- separadores con máscara revelada
- dots o indicadores con respiración de brillo
- halos con opacidad variable
### Accesibilidad de motion
El CSS real ya contempla `prefers-reduced-motion` en partes del sistema. Cualquier derivación debe:
- pausar loops largos
- congelar rotaciones conic
- mantener solo cambios de opacidad o color
- evitar blur animado constante
---
## Anexo: Stack técnico detectado
- Plataforma: Next.js
- Render del home: componentes React y chunks estáticos
- CSS: hojas estáticas y módulos CSS compilados
- Tipografías detectadas:
- `Untitled Sans` desde CDN WorkOS
- `IBM Plex Mono` desde CDN WorkOS
- `aeonikPro` desde asset local `_next/static/media`
- `dotDigital` desde asset local `_next/static/media`
- Builder o framework adicional: Radix mencionado en copy
- Video en hero: sí
- Canvas en hero: sí
- Luces / spotlights: sí
- Animaciones con `@property` y `conic-gradient`: sí
- WebGL / Three.js: (no detectado)
- Glassmorphism: parcial, controlado
- Light mode support: sí, mencionado y con switch visible
- Dominante actual del home capturado: dark
- Dominant accent for gallery: `#98C0EF`
- Sections for gallery: `Oscuro Cinemático`, `Minimal Tech`, `Moderno`
### Resumen ejecutivo
- AuthKit es una marca-producto de autenticación con dirección de arte técnica.
- Su fuerza está en tratar login como pieza central del producto.
- El color es restringido y preciso.
- La tipografía acompaña, no grita.
- La profundidad viene desde dentro de las cards.
- La grilla visible sostiene el tono de ingeniería.
- El glow existe, pero está disciplinado.
- La oscuridad está muy trabajada.
- El sistema se vuelve memorable por escena y ejecución, no por saturación.
La paleta AuthKit opera con disciplina cromática extrema: una familia de azules hielo sobre near-black. Cada tono tiene un rol preciso; ninguno es decorativo.
Tres familias con roles distintos: una display neo-grotesk, una body utilitaria y una decorativa de señal. La tipografia no teatraliza; sostiene la UI sin imponerse sobre la luz.
| Token | px | Weight | Line-height | Uso |
|---|---|---|---|---|
| display-lg | 56px | 400 | 56px | Hero headline desktop |
| display-md | 40-44px | 400-600 | 44-48px | Section headline |
| body-lg | 16px | 400 | 24px | Card titles secundarios |
| body-md | 14px | 400 | 20px | Body base, labels, botones |
| mono-sm | 11px | 400 | 16px | Labels mono, metadata, kickers |
Originales: aeonikPro / Untitled Sans / dotDigital (self-hosted WorkOS CDN). HTML: Sora / Instrument Sans / DotGothic16.
El lenguaje de componentes de AuthKit opera en outlines, glass tenue y profundidad interna. Ningun relleno masivo de azul. Ningun boton de color opaco.
Card oscura rgba(5,6,15,.97) con inset glow, 4 dots de esquina y trazo conic animado a 12s. Radio: 16px.
Outline base 4px (cards), glass hero, light blanco, pill complementario. Nunca relleno azul opaco en el estado default.
Input card 4px (dark fill), input hero 6px (glass), ambos con border rgba(186,215,247,.12). Chips pill con DotGothic16.
Base 4px con escala precisa hasta 96px de padding de seccion. Radios pequenos para controles, medianos para cards. El contraste 4px / 16px distingue UI operativa de UI de escena.
La parte mas dificil de AuthKit es la contencion. El sistema funciona porque hace mucho con muy poco. El error mas comun al reinterpretarlo es exagerar la teatralidad o neutralizarlo hasta convertirlo en otra landing SaaS cualquiera.