Un sistema, cuatro temas
mal-ds
Un solo juego de componentes y cuatro pieles: la marca, el periódico, las apps y los juegos. Cambia un atributo en la raíz y cambia todo — color, tipografía, forma, borde, elevación y densidad.
Sistemas de diseño
Un sistema, cuatro temas.
Un solo sistema de componentes con cuatro pieles: la marca, el periódico, las apps y los juegos. La arquitectura es la de Material —referencia, roles, componentes—, así que cambiar de tema es cambiar un atributo, no una hoja.
01 / El paquete
Uno solo.
No son tres hojas ni tres carpetas: es un CSS. La arquitectura es la de Material —referencia, roles, componentes— y solo la capa de referencia cambia con el tema, así que un componente se escribe una vez y se ve distinto en cada sitio.
02 / Los cuatro temas
Verlos aplicados.
Un storybook enseña piezas sueltas; esto enseña el sistema puesto. Cada demo es una página de verdad hecha solo con los componentes, cambiando únicamente el tema.
Tema la marca
Portafolio
El escritorio de Fran con el tema por defecto: crema, Syne en los titulares.
Tema mercio
Portada del periódico
EL MERCIO. con el tema de prensa: serif, página blanca, esquinas a escuadra.
Tema apps
Onboarding
Mi Huerto con el tema de producto: controles grandes, una decisión por pantalla.
Tema juegos
HUD de juego
Estado Decepción con el tema de juegos: botones volumétricos y acento holográfico.
03 / Consumirlo
Una línea, y ya.
Las fuentes se sirven desde /ds/fonts/ de una.red con CORS,
así que no hay que instalar nada ni llamar a Google Fonts. El tema se elige con
data-marca en el <html>; claro y oscuro van por
data-tema, que es un eje aparte. Los temas no conviven: un documento,
un tema.
<link rel="stylesheet" href="https://una.red/ds/mal/mal.css"> <script src="https://una.red/ds/mal/mal.js" defer></script>
| Tema | En la raíz | Dónde | Carácter |
|---|---|---|---|
| MAL | — por defecto |
una.red · maldonado.pro | Crema cálida, filete de 1 px, sombra blanda. Syne en los titulares. |
| mercio | data-marca="mercio" |
elmercio.com | Página blanca, PT Serif, radio 0, sin sombras ni salto. Marca en Montserrat. |
| apps | data-marca="apps" |
Quanto · Mi Huerto · Jacky · Test CDS | App nativa: superficies sólidas, controles de 52 px, sin hover y con presión al pulsar. |
| juegos | data-marca="juegos" |
los siete juegos del hub | Volumétrico: sombra dura de 4 px, borde de 2 px y relleno en degradado. |
El <script> es
opcional: sin él todo se ve igual, solo deja de moverse. Es también quien inyecta el
sprite de iconos la primera vez que encuentra un .icono.