Mint Kit de painéis — painéis com barra de título e botões

Design plano com o raio recolhido quase por completo. A família plano clara usa cantos de 20px e botões em cápsula porque mira o jogo casual; esta usa 8px e botões quadrados porque uma tela de estratégia é quase toda linhas e um raio generoso desperdiça justamente a largura onde vão os números. Não há contornos nem sombreamento em lugar algum — a profundidade são três passadas de sombra empilhadas e nada mais.

Dois painéis nine-slice — uma moldura de janela com barra de título com cantos de 8 px e uma moldura interna rebaixada com cantos de 6 px — cobrem quase toda caixa de que um menu precisa: diálogos, grades de inventário, fundos de lista, dicas de tela e painéis de estatísticas. Uma faixa de título está integrada ao topo do painel, então o cabeçalho de um diálogo não precisa de um segundo sprite nem de alinhamento manual. Os dois esticam de forma limpa em qualquer tamanho porque os cantos nunca escalam e o centro é um preenchimento plano.

Sobre os painéis assentam quatro estados de botão de cantos retos: normal, hover, pressionado e desativado. São desenhados sobre a mesma base 120×36 com cantos de 6 px, então você troca a textura num único widget de botão e obtém todo o ciclo de interação sem mover um retângulo. O estado pressionado baixa sua face dois pixels e remove o brilho superior em vez de apenas escurecer, e é isso que faz um botão parecer clicado e não meramente recolorido.

Tudo vem duas vezes. Os fontes SVG são os arquivos em que o kit foi desenhado — abra-os, mude os seis tons cinza azulado ou o único acento verde menta, e reexporte. As exportações PNG são plano, transparentes e pré-escaladas em 1x, 2x e 4x para motores que querem bitmaps, sem alfa pré-multiplicado e sem sombra assada fora dos limites do sprite.

Creative Commons Zero 1.0 — Domínio público. Sem atribuição. Termos completos · O que isso significa na prática