El sistema de diseño de Studio LXD: los componentes React, los tokens y la documentación con los que se visten las doce aplicaciones de la suite SLXD. No es un tema ni una hoja de estilos suelta — es la capa de interfaz completa, y el catálogo de Storybook es su fuente de verdad.
pnpm add @studiolxd/brandEl paquete declara como peer dependencies react y react-dom (>=18) y
react-hook-form (>=7), del que dependen el Form y todos los campos que se
atan a él. react-email (>=6) es un peer opcional: solo hace falta si se
consume el subpath @studiolxd/brand/email.
Los estilos se importan una vez, en el layout raíz. brand.css trae el
normalize, los tokens y la base tipográfica; fonts.css es la hoja de
@font-face con las tres familias de la marca, que el paquete sirve por su
cuenta —no hace falta next/font ni un <link> a Google Fonts.
import '@studiolxd/brand/brand.css';
import '@studiolxd/brand/fonts.css';No hay barril: cada componente se importa por su propia subruta, y el CSS de ese componente viaja con él.
import { Button } from '@studiolxd/brand/button';
import { InputField } from '@studiolxd/brand/input-field';
export function Ejemplo() {
return (
<form>
<InputField id="correo" name="correo" label="Correo electrónico" type="email" />
<Button type="submit">Entrar</Button>
</form>
);
}La subruta es el nombre del componente en kebab-case. El bloque exports del
package.json las lista todas.
Los componentes se organizan en Atomic Design, y el paquete publica 164 subrutas de componente repartidas así:
- 64 átomos — los elementos básicos:
Button,Input,Link,Heading,Tabs,Tooltip,Icon(77 glifos dibujados en el propio repo)… - 73 moléculas — combinaciones de átomos:
InputField,Form,Modal,Table,Menu,Calendar,Pagination… - 5 organismos — piezas complejas con lógica propia:
Chart,DataTable,Steps,ConversationThread,AnnotationThread. - 11 secciones — bloques de página:
AppHeader,SiteHeader,Sidebar,SiteShell,Hero… - 11 plantillas — páginas enteras listas para envolver contenido:
PublicPageShell,OnboardingShell,ChatShell,ErrorPage,NotFoundPagey las seis piezas del consentimiento de conectores.
Cada uno de los 159 componentes tiene sus stories en el catálogo, y 155 llevan además una página propia de documentación en MDX con su API y sus reglas de uso.
Fuera del Atomic Design hay tres subpaths más: @studiolxd/brand/email, con
las primitivas de correo sobre react-email; @studiolxd/brand/og, para las
tarjetas sociales; y @studiolxd/brand/brand-assets, con el logotipo y las
marcas.
Toda propiedad visual del sistema sale de un token. Las definiciones viven en
tokens/, en ficheros JSON con el formato del Design Tokens Community Group
($value, $type, $description), y Style Dictionary las compila a cuatro
salidas. Hoy son 3.265 tokens.
Una aplicación React ya los tiene: brand.css los declara en :root, así que
se consumen como custom properties.
.mi-bloque {
color: var(--color-primary);
padding-block: var(--spacing-4);
}Una aplicación que no use React —PHP, un servidor, una herramienta de diseño—
recibe los mismos tokens en SCSS, con los valores ya resueltos y prefijo
$lxd-. Hay un entrypoint moderno con @forward y otro legacy con @import,
para compiladores sin @use.
@use '@studiolxd/brand/scss' as brand;
.mi-bloque { color: brand.$lxd-color-primary; }Y quien necesite el valor como dato y no como CSS —un correo, un canvas, un
PDF— tiene @studiolxd/brand/tokens, un mapa plano con los valores resueltos
y dos ayudas, token() y tokenPx().
El sistema tiene tema claro y oscuro. El oscuro no se escribe a mano: se
deriva de los propios tokens y se activa con data-theme="dark", html.dark
o la clase .surface-dark en cualquier contenedor.
pnpm install
pnpm storybookStorybook arranca en el puerto 6006 y es la fuente de verdad del sistema: las props de un componente, sus variantes y sus reglas de uso son las que están ahí, no las que uno supondría por el nombre. Junto a los componentes hay 17 páginas de fundamentos —color, tipografía, espaciado, bordes y radios, iconografía, movimiento, capas, marca, internacionalización— que explican el porqué de las decisiones; la documentación de cada componente explica su API y remite a ellas.
La regresión visual se comprueba en Chromatic, con cada story capturada en claro y en oscuro.
Esto no es una librería de propósito general ni pretende serlo. Es el sistema de diseño de una suite concreta, y se publica porque las aplicaciones que lo consumen lo instalan como cualquier otra dependencia. El código está a la vista y se puede leer y estudiar; lo que no está abierto es el diseño: la paleta, la escala tipográfica, las variantes de cada componente y las reglas que las gobiernan responden a la marca de Studio LXD y se deciden aquí dentro. Si el sistema le sirve tal cual a alguien más, encantados; si hace falta que sea otra cosa, un fork es mejor camino que una petición.