// Lab foundation
Design system
The same language the network reels and the site are drawn with: palette, typography and tokens. Two levels — primitive and semantic — reusable by anyone.
01 · COLOR
Primitive → semantic
Raw value below; role per theme above. The palette comes from the videos.
Semantic
- --bg
- base #0A0E16
- --surface
- #101725
- --border
- mute 20%
- --text
- → ink
- --text-muted
- → mute
- --primary
- → teal
- --success
- → teal
- --warning
- → amber
- --danger
- → red
02 · TYPOGRAPHY
Three voices
Mono for headlines, serif for reading, grotesk for the interface.
display · monoTCP connection
serif · cuerpoThe sender walks the data down its seven layers and adds a header at each one.
sans · UIButtons, labels and navigation
mono · datosseq=1 ack=1 · 192.0.2.10 · :443
03 · TOKENS
Radius · motion
Curves and timings derived from the reels’ animation.
Radio
- --r-xs
- 6px
- --r-sm
- 9px
- --r-md
- 14px
- --r-lg
- 20px
Duration
- 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
For Figma, IDEs and other agents.
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"; /* style with var(--role) */05 · A11Y
Accesibilidad
WCAG 2.2 AAink/bg 16:1foco 2.5pxtap ≥44pxreduced-motioncolour ≠ sole indicator