// Fundación del Lab
Sistema de diseño
El mismo lenguaje con que se dibujan los reels de redes y la web: paleta, tipografía y tokens. Dos niveles — primitivos y semánticos — reutilizables por terceros.
01 · COLOR
Primitivos → semánticos
Valor crudo abajo; rol por tema arriba. La paleta viene de los videos.
Semánticos
- --bg
- base #0A0E16
- --surface
- #101725
- --border
- mute 20%
- --text
- → ink
- --text-muted
- → mute
- --primary
- → teal
- --success
- → teal
- --warning
- → amber
- --danger
- → red
02 · TIPOGRAFÍA
Tres voces
Mono para titulares, serif para leer, grotesk para la interfaz.
display · monoConexión TCP
serif · cuerpoEl emisor baja el dato por sus siete capas y agrega una cabecera en cada una.
sans · UIBotones, etiquetas y navegación
mono · datosseq=1 ack=1 · 192.0.2.10 · :443
03 · TOKENS
Radio · movimiento
Curvas y tiempos derivados de la animación de los reels.
Radio
- --r-xs
- 6px
- --r-sm
- 9px
- --r-md
- 14px
- --r-lg
- 20px
Duración
- quick
- 150ms
- base
- 250ms
- slow
- 400ms
- drama
- 700ms
Easing
- std
- .4,0,.2,1
- spatial
- .2,0,0,1
- spring
- .34,1.56,.64,1
04 · DESCARGAS
Machine-readable
Para Figma, IDEs y otros agentes.
tokens.jsonW3C DTCG. Figma (Tokens Studio), build tools y agentes IA.
tokens.cssCustom properties, dark + light. Importa y usa var(--role).
tokens.tailwind.jsPreset de Tailwind: colores, tipos, radios, easing.
@import "tokens.css"; /* estila con var(--role) */05 · A11Y
Accesibilidad
WCAG 2.2 AAink/bg 16:1foco 2.5pxtap ≥44pxreduced-motioncolor ≠ único indicador