Sistema de diseño synthwave / retro ochentero. Neón sobre violeta-noche: magenta (marca), cian (acento), violeta (realce) y atardecer (secundario), sobre una escala de neutros con tinte violáceo (ink). Brillos de neón como recurso firma y degradados de horizonte outrun.
Tipografía: Orbitron (display sci-fi), Rajdhani (texto condensado), Share Tech Mono (HUD / datos).
La fuente de verdad son los tokens en formato W3C Design Tokens (DTCG). De ahí se derivan el CSS y el export JS.
outrun-design-system/
├── tokens/
│ └── tokens.json ← fuente de verdad (DTCG)
├── dist/
│ ├── tokens.css ← CSS custom properties (dark por defecto + modo claro)
│ └── tokens.js ← export ESM para JS / React
├── preview/
│ └── index.html ← showcase (sirve como GitHub Pages)
├── package.json
└── LICENSE
CSS
<link rel="stylesheet" href="dist/tokens.css" />.boton {
background: var(--color-brand-base);
color: var(--color-fg-on-brand);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
box-shadow: var(--shadow-glow-brand); /* el brillo neón */
font-family: var(--font-family-display);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}JavaScript / React
import tokens, { semantic, shadow } from "./dist/tokens.js";
const styles = {
background: semantic.brand.base,
boxShadow: shadow.glowBrand,
};Sistema dark por defecto (la noche es lo natural aquí). dist/tokens.css incluye un modo claro tipo "daytime arcade":
<html data-theme="light">Solo cambian los tokens semánticos (bg, fg, border, brand…). Los primitivos (neones y escala ink) no se tocan.
| Capa | Ejemplo | Para qué |
|---|---|---|
| Primitivos | color.magenta.400, space.4 |
Inventario crudo. No en componentes. |
| Semánticos | color.brand.base, color.fg.muted |
Lo que consumes en la UI. |
| Firma | shadow.glow-brand, gradient.horizon |
El neón y los degradados que dan el look. |
Regla: en los componentes referencia semánticos, no primitivos.
El brillo no es un efecto suelto: vive en tokens (shadow.glow-brand/accent/violet). Para subir o bajar la intensidad de todo el sistema, edita esos tokens en un sitio. Úsalo con moderación — el glow rinde más cuando lo rodea oscuridad disciplinada.
- Sube este repositorio a GitHub.
- En Claude Design, conecta el repo o pásale la URL de
tokens/tokens.json. - Indícale que use
tokens/tokens.jsoncomo sistema de tokens ypreview/index.htmlcomo referencia visual.
El flujo exacto de importación puede variar según la versión de Claude Design. Si no ves opción de tokens, pega el contenido de
tokens/tokens.jsonen la conversación y pídele que lo adopte como base. Conviene revisar la documentación vigente del producto.
Cambia primero tokens/tokens.json y propaga a dist/. Para automatizarlo, Style Dictionary lee este formato y regenera CSS/JS y más targets.
MIT — ver LICENSE.