Alexendros Vergina Imperial · design system

Una atmósfera. Dos brillos. Un sistema.

Design system dark-first de la marca Alexendros. Atmósfera púrpura pretoriana en el fondo. Dos acentos metálicos: oro Vergina · titanio. Glassmorphism por defecto. Implementación-agnóstico: tokens, guías, primitivas.

v0.3.0 Tokens canónicos

Variables CSS para color, tipografía, spacing, motion, z-index. Modo dark/light × acento gold/titanium con `data-mode` + `data-accent`.

colors_and_type.css color_modes.css

Manual de diseño

Doctrina completa: las 5 capas (tokens · atmósfera · glass · tipografía display · acento por superficie), reglas inviolables, antipatrones.

SKILL.md README

Showcase + Atelier

UI de referencia con el sistema aplicado. Atelier: panel interactivo de ajustes para validar tokens en vivo. Font Lab: comparativa tipográfica.

showcase repo

Marca · mark

Símbolo Alexendros · monograma A en oro Vergina con halo. Solo para superficies de marca, no para iconografía funcional.

alexendros-mark.svg

Versiones

Releases inmutables bajo paths versionados. Pinea siempre una versión concreta en producción; no uses `latest`.

CHANGELOG.md

Quick start · 5 segundos

<!doctype html>
<html lang="es" data-mode="dark" data-accent="gold">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://design.alexendros.me/v0.3.0/colors_and_type.css">
  <link rel="stylesheet" href="https://design.alexendros.me/v0.3.0/color_modes.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
</head>
<body>
  <div class="atm"></div><div class="spark"></div>
  <div class="dust"></div><div class="vignette"></div>
  <main> ... tu contenido ... </main>
</body>
</html>

Ver el snippet completo con las 5 capas (atmósfera · glass · display · acento) en SKILL.md §Aplicación completa.