¿Qué hace muji-design?
Skill de diseño para generar y modificar interfaces de usuario. Se basa en la filosofía de MUJI (無印良品) con la optimización como núcleo, toma la gramática espacial de la arquitectura de una habitación japonesa (washitsu) y utiliza una paleta de 46 colores como base.
Núcleo – Optimización
Se traducen los tres puntos de vista de MUJI a la práctica de la UI:
- Selección de materiales – Se usan directamente los colores y texturas derivados de los materiales. Crudo, madera maciza, tatami, piedra, musgo, cerezo. Los colores se eligen dentro del rango de esta paleta.
- Revisión de procesos – Se eliminan pasos innecesarios en los flujos de operación y transiciones de pantalla. Las acciones clave se colocan al alcance con pocos pasos.
- Simplificación del empaquetado – Se reducen los "envoltorios" como marcos, insignias y decoraciones, mostrando directamente el contenido.
El criterio de evaluación es uno solo: "¿Esta pantalla se vería natural colocada en un estante de MUJI?". Cuando tengas dudas, decide con esta pregunta.
Procedimiento
- Decide el protagonista – Cada pantalla tiene un solo protagonista (como el tokonoma). Todos los demás elementos son secundarios.
- Asegura el espacio (ma) – Primero, reserva un área vacía. El espacio en blanco no es un remanente, sino un elemento que se coloca primero.
- Dibuja la estructura – Divide con listones (san) y rejillas (koshi). Las líneas divisorias, filas de listas y líneas verticales de navegación deben ser finas; los colores se toman de la gama de maderas.
- Coloca las superficies – Las divisiones se muestran con umbrales y escalones. Cambia ligeramente el color de la superficie para dividir, sin depender de bordes fuertes ni sombras marcadas.
- Coloca un solo punto de acento – Como en el ikebana, solo un acento de color y diseño por pantalla, colocado descentrado.
- Autoinspección – Realiza la inspección que se indica a continuación y aplica una corrección reduciendo elementos antes de presentar.
Capa 1 – Valores numéricos (valores fijos)
Color
La paleta es la base. En la pantalla real, usa estos valores según el rol y ajústalos ligeramente según el proyecto. Al ajustar, mantén la saturación baja, dentro del rango de neutros cálidos y preserva la escala de claroscuro y los roles.
Asignación por rol (por defecto)
| Rol | Color | HEX |
|---|---|---|
| Fondo | Crudo | #FBFAF5 |
| Superficie (tarjeta/panel) | Blanco de shōji | #F5F5F4 |
| Superficie (un nivel más abajo) | Luz difusa | #E5DCD7 |
| Escalón de división | Sombra suave de tatami | #D5C0B0 |
| Texto del cuerpo | Marrón oscuro de viga | #2E1E12 |
| Texto auxiliar | Gris Rikyū | #888E7E |
| Línea divisoria/Listón | Listón (san) | #9F7153 |
| Elementos de madera | Textura de madera | #B3987E |
| Superficie fuerte/Banda de título | Marrón medio de viga | #745E4A |
Paleta completa de 46 colores
- Medición desde imágenes de referencia: Blanco de shōji
#F5F5F4/ Luz difusa#E5DCD7/ Sombra suave de tatami#D5C0B0/ Tatami#BEB09A/ Textura de madera#B3987E/ Listón#9F7153/ Marrón medio de viga#745E4A/ Marrón oscuro de viga#2E1E12 - Tatami Morning Light:
#F7F3EA/#E0D2B5/#C1A879/#8E6B3F/#5A4A38 - Minimalismo japonés: Blanco refinado
#F5F0E8/ Color paja#E8DFC8/ Crudo#EDE0C4/ Té matcha#7A8C5E/ Tinta sumi#6B6B6B/ Azul intenso#1C1F2B - Colores japoneses (Washoku): Crudo
#FBFAF5/ Color amasado#EDE4CD/ Té blanco#DDBB99/ Color nuez#A86F4C/ Té Rikyū#A59564/ Gris Rikyū#888E7E - Misty Tatami:
#F2EFE6/#D9D1C1/#B7B0A2/#7C776E/#3F3C37 - Plantas: Color hoja de pino
#839B5C/ Color musgo#6C8253/ Color bambú joven#6B9362/ Color ruiseñor#928C36/ Sombra de pino#3D4F3C - Agua, cielo, piedra, tierra: Verde azulado claro
#80ABA9/ Azul índigo#165E83/ Grava#E8E3D6/ Basalto mojado#35393B/ Color tierra#BC763C - Cerezo: Color cerezo
#FEF4F4/ Cerezo claro#FDEFF2/ Gris cerezo#E9DFE5/ Cerezo gris#E8D3D1/ Color clavel#EEBBCB/ Color ciruelo rojo#F2A0A1
Uso del color
- El protagonista de la pantalla son los neutros de shōji, tatami y madera. Los colores naturales (plantas, agua, cerezo) se usan como acento: solo un color por pantalla y su área no debe superar el 10 % del total. Los tonos de cerezo son los que menos área deben ocupar.
- Las superficies de color se aplican planas. La relación entre colores se crea mediante la escala de claroscuro; los degradados se usan solo donde se necesite expresar luz.
- El conjunto de variables CSS está en
references/design-tokens.css.
Espaciado y dimensiones
- Escala de espaciado: 4 / 8 / 16 / 24 / 40 / 64 (px). El espacio entre elementos se elige de esta escala.
- El margen en los bordes de la pantalla debe ser amplio. No comprimas el ancho del contenido; mantén la proporción del espacio.
- La altura de los elementos debe ser baja y uniforme (línea horizontal baja). La altura de línea y la altura de los controles deben alinearse dentro de la pantalla.
Líneas, bordes y sombras
- Las líneas divisorias son de 1px y el color se toma de la gama de listón
#9F7153, usado de forma sutil. - Los bordes redondeados son de máximo 4px. El redondeo se limita al de las esquinas de un material.
- Las sombras se crean mediante la diferencia de claroscuro entre superficies. Si se aplica sombra, que sea suave, amplia y ligera como luz difusa.
Tipografía
- Los encabezados usan tipo serif (minchō) (
'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif). - El cuerpo del texto y los elementos interactivos usan tipo sans-serif (gothic) (
'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif). - Escala de tamaños de texto: 12 / 13 / 15 / 17 / 22 / 28 (px). La negrita se usa solo para encabezados y el elemento protagonista. El interletraje se amplía ligeramente en los encabezados y se mantiene estándar en el cuerpo.
Animación
- Las transiciones de pantalla imitan el movimiento de una puerta corredera (shōji). Se usa un deslizamiento lateral suave como base, con una duración de 200–300 ms y una curva de easing de desaceleración suave (
cubic-bezier(0.22, 1, 0.36, 1)). - El movimiento se aplica solo donde sea necesario para comunicar un cambio de estado.
Capa 2 – Juicio (partes no medibles numéricamente)
Los valores numéricos son la base. El resultado final se define con estos juicios:
- Ma (espacio vacío) – Observa si el lugar vacío tiene significado. Antes de añadir elementos, verifica que el vacío no se haya roto.
- Tranquilidad – Observa si toda la pantalla transmite calma. Cuantos más colores, líneas y movimientos, más se pierde la tranquilidad.
- Textura del material y luz – No te limites a reproducir códigos de color. La textura del material incluye la calidez del tatami y la madera, y la sensación de luz suave que se refleja. Se expresa mediante la elección del color de las superficies y el contraste de claroscuro.
- Sustracción – La decisión de qué no colocar define el resultado más que qué colocar. Cuando dudes, elige no colocar el elemento.
Contraste entre estado bueno y estado alterado
| Aspecto | Estado bueno | Estado alterado |
|---|---|---|
| Protagonista | El protagonista se identifica de un vistazo | Todo tiene la misma fuerza y se amontona |
| Espacio en blanco | Hay respiración en el vacío | Los elementos llegan hasta los bordes |
| Color | Los neutros dominan y un solo acento brilla | Varios acentos compiten |
| División | Las divisiones son sutiles mediante escalones de superficie | Los marcos y sombras se superponen y son ruidosos |
| Flujo visual | La mirada fluye de arriba abajo sin dudas | Hay múltiples puntos de atención |
Autoinspección (obligatorio antes de presentar)
- ¿El protagonista está claramente definido como uno solo?
- ¿No hay sensación de saturación? ¿No hay elementos apretados hasta los bordes?
- ¿La mirada no duda? ¿Está definido el primer punto de atención y la dirección del flujo?
- ¿La pantalla es tranquila? Cuenta el número de colores, líneas y movimientos; si son muchos, redúcelos.
- ¿El acento es un solo color, en un solo lugar y ocupa menos del 10 % del área?
- ¿Cumple con el criterio de evaluación (se vería natural colocado en un estante de MUJI)?
Los problemas encontrados en la inspección se corrigen reduciendo elementos, no añadiendo. Aplica una corrección antes de presentar.
Referencias
references/design-tokens.css– Variables CSS de roles de color, espaciado, tipografía y animación.assets/japanese-color-palette.png– Muestra de la paleta de 46 colores.assets/cover-mincho.png– Imagen simbólica del estilo (shōji, tatami, mesa baja, un solo ikebana).