O que muji-design faz?
Skill de design para gerar e reformar UI. A base do design japonês está na filosofia da MUJI, tendo a "otimização" como núcleo. A gramática espacial é extraída da arquitetura de cômodos japoneses (washitsu), e as cores são baseadas em uma paleta de 46 cores.
Núcleo — Otimização
Traduzimos os três pontos de vista da MUJI para o trabalho de UI.
- Seleção de materiais — Cores e texturas são usadas diretamente de suas fontes materiais. Cru, madeira maciça, tatame, pedra, musgo, sakura. As cores são escolhidas dentro do intervalo desta paleta.
- Revisão de processos — Eliminamos desperdícios nos passos de operação e nas transições de tela. As operações essenciais são colocadas em locais de fácil acesso com poucos cliques.
- Simplificação de embalagens — Reduzimos "embrulhos" como molduras, badges e decorações, mostrando o conteúdo diretamente.
O critério de avaliação é um só: "Esta tela pareceria natural se colocada em uma prateleira da MUJI?". Quando estiver em dúvida, decida com base nesta pergunta.
Como Proceder
- Definir o protagonista — Cada tela tem apenas um protagonista (o tokono-ma). Todos os outros elementos são coadjuvantes.
- Garantir o espaço vazio (ma) — Primeiro, reserve uma área onde nada será colocado. O espaço vazio não é sobra; é o primeiro elemento a ser posicionado.
- Traçar a estrutura — Divida com ripas e grades. Linhas divisórias, linhas de lista, linhas verticais de navegação devem ser finas, com cores da família da madeira.
- Colocar as superfícies — As divisões são indicadas por soleiras e degraus. Use uma mudança de cor de superfície para separar, sem depender de bordas fortes e sombras intensas.
- Adicionar um ponto de cor de destaque — Como um arranjo floral (ikebana), coloque apenas uma cor de destaque e um elemento de design por tela, fora do centro.
- Autoinspeção — Passe pela lista de verificação abaixo, faça uma rodada de modificações para reduzir elementos e então submeta.
Camada 1 — Valores Numéricos (Valores Fixos)
Cores
A paleta é a base. Nas telas reais, use estes valores por função e ajuste ligeiramente conforme o projeto. Ao ajustar, mantenha a saturação baixa, dentro de uma faixa neutra e quente, e preserve a escada de claro-escuro e a função.
Atribuição por função (padrão)
| Função | Cor | HEX |
|---|---|---|
| Fundo | Cru | #FBFAF5 |
| Superfície (cartão, painel) | Branco de shōji | #F5F5F4 |
| Superfície (um nível abaixo) | Luz difusa | #E5DCD7 |
| Degrau de divisão | Sombra clara de tatame | #D5C0B0 |
| Texto principal | Castanho escuro de viga | #2E1E12 |
| Texto auxiliar | Ratinho de Rikyū | #888E7E |
| Linha divisória, ripa | Ripa | #9F7153 |
| Elemento de madeira | Pele de madeira | #B3987E |
| Superfície forte, faixa de título | Castanho médio de viga | #745E4A |
Paleta completa de 46 cores
- Medições de imagem de referência: Branco de shōji
#F5F5F4/ Luz difusa#E5DCD7/ Sombra clara de tatame#D5C0B0/ Tatame#BEB09A/ Pele de madeira#B3987E/ Ripa#9F7153/ Castanho médio de viga#745E4A/ Castanho escuro de viga#2E1E12 - Tatami Morning Light:
#F7F3EA/#E0D2B5/#C1A879/#8E6B3F/#5A4A38 - Minimalismo Japonês: Shiroren (Branco puro)
#F5F0E8/ Warairo (Cor de palha)#E8DFC8/ Kiji (Cru)#EDE0C4/ Matcha#7A8C5E/ Sumizome (Tinta)#6B6B6B/ Kachiiro (Azul marinho)#1C1F2B - Cores japonesas (Washoku): Kiji-iro (Cru)
#FBFAF5/ Neri-iro (Bege)#EDE4CD/ Shira-cha (Chá branco)#DDBB99/ Kurumi-iro (Noz)#A86F4C/ Rikyū-cha (Chá de Rikyū)#A59564/ Rikyū-nezumi (Ratinho de Rikyū)#888E7E - Misty Tatami:
#F2EFE6/#D9D1C1/#B7B0A2/#7C776E/#3F3C37 - Plantas: Matsuba-iro (Folha de pinheiro)
#839B5C/ Koke-iro (Musgo)#6C8253/ Wakatake-iro (Bambu jovem)#6B9362/ Uguisu-iro (Rouxinol)#928C36/ Matsu no kage (Sombra de pinheiro)#3D4F3C - Água, Céu, Pedra, Terra: Mizu-asagi (Cebolinha d'água)
#80ABA9/ Ai-iro (Anil)#165E83/ Sareki (Cascalho)#E8E3D6/ Nureta genbu-gan (Basalto molhado)#35393B/ Tsuchi-iro (Terra)#BC763C - Sakura: Sakura-iro (Rosa de cerejeira)
#FEF4F4/ Usuzakura (Sakura claro)#FDEFF2/ Sakura-nezumi (Ratinho de sakura)#E9DFE5/ Haizakura (Sakura cinza)#E8D3D1/ Nadeshiko-iro (Cravo)#EEBBCB/ Kōbai-iro (Ameixeira vermelha)#F2A0A1
Como usar as cores
- O protagonista da tela são os neutros de shōji, tatame e madeira. As cores naturais (plantas, água, sakura) são usadas como cor de destaque: apenas 1 cor por tela, ocupando no máximo 10% da área total. As cores da família sakura são as que devem ter a menor área.
- As superfícies de cor são aplicadas de forma plana. A relação entre as cores é criada pela escada de claro-escuro; gradientes são usados apenas onde for necessário expressar luz.
- Um conjunto de variáveis CSS está disponível em
references/design-tokens.css.
Espaçamento e Dimensões
- Escada de espaçamento: 4 / 8 / 16 / 24 / 40 / 64 (px). O espaçamento entre elementos deve ser escolhido a partir desta escala.
- As margens nas bordas da tela são generosas. A largura do conteúdo não é comprimida; mantenha a proporção de espaço.
- A altura dos elementos deve ser baixa e uniforme (linha horizontal baixa). A altura de linha e a altura dos controles devem seguir a mesma escala na tela.
Linhas, Cantos e Sombras
- Linhas divisórias: 1px, cor usando a família da ripa
#9F7153de forma suave. - Cantos arredondados: máximo 4px. O arredondamento deve ser sutil, como o de um canto de material.
- Sombras: criadas pela diferença de claro-escuro entre as superfícies. Se for necessário projetar uma sombra, que seja suave, ampla e clara como luz difusa.
Tipografia
- Títulos: Fonte serifada Mincho (
'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif). - Texto corrido e elementos de ação: Fonte sans-serif Gothic (
'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif). - Escala de tamanhos de texto: 12 / 13 / 15 / 17 / 22 / 28 (px). O uso de negrito é reservado para títulos e elementos protagonistas. O espaçamento entre caracteres (tracking) é ligeiramente aumentado em títulos e mantido padrão no texto corrido.
Movimento
- As transições de tela seguem o movimento de uma porta deslizante (fusuma). Use um slide suave e silencioso na horizontal como padrão, com duração de 200–300ms e easing de desaceleração suave (
cubic-bezier(0.22, 1, 0.36, 1)). - O movimento é aplicado apenas onde for necessário comunicar uma mudança de estado.
Camada 2 — Julgamento (Partes Não Mensuráveis por Números)
Os números são a base. O resultado final é determinado pelos seguintes julgamentos.
- Ma (espaço vazio) — Verifique se o local onde nada é colocado tem significado. Antes de adicionar um elemento, confirme se o ma não foi quebrado.
- Silêncio — Verifique se toda a tela está silenciosa. Quanto mais cores, linhas e movimentos, mais o silêncio se perde.
- Sensação de material e luz — Não se limite a reproduzir códigos de cor. A sensação de material inclui o calor do tatame e da pele da madeira, e a sensação de luz suave e difusa. Expresse isso pela escolha de cores das superfícies e pela diferença de claro-escuro.
- Subtração — O resultado final é determinado mais pelo que não se coloca do que pelo que se coloca. Quando estiver em dúvida sobre um elemento, opte por não colocá-lo.
Comparação entre estado bom e estado ruim
| Aspecto | Bom estado | Estado ruim |
|---|---|---|
| Protagonista | O protagonista é identificado de imediato | Todos têm a mesma força |
| Espaçamento | Há espaço para respirar | Elementos comprimidos até as bordas |
| Cores | Neutros dominam, uma cor de destaque brilha | Várias cores de destaque competem |
| Divisões | Divisões suaves por degraus de superfície | Molduras e sombras se sobrepõem, poluição visual |
| Fluxo visual | O olhar flui de cima para baixo sem hesitação | Múltiplos pontos de atenção |
Autoinspeção (Obrigatório antes de submeter)
- O protagonista está claramente definido como um só?
- Não há sensação de excesso? Os elementos não estão comprimidos até as bordas?
- O olhar não se perde? O primeiro ponto de atenção e a direção do fluxo visual estão definidos?
- A tela está silenciosa? Conte o número de cores, linhas e movimentos; se houver muitos, reduza.
- A cor de destaque é uma só, em um só local, ocupando no máximo 10% da área?
- O critério de avaliação (a tela pareceria natural em uma prateleira da MUJI?) é atendido?
Os problemas encontrados na inspeção devem ser corrigidos na direção de reduzir elementos, não de adicionar. Faça uma rodada de correções e então submeta.
Referências
references/design-tokens.css— Variáveis CSS para cores funcionais, espaçamento, tipografia e movimento.assets/japanese-color-palette.png— Amostra da paleta de 46 cores.assets/cover-mincho.png— Imagem simbólica do estilo (shōji, tatame, mesa baixa, um arranjo floral de ikebana).