Sistema de design
Cada valor daqui sai de SunnySort.View.Palette e do próprio kit de interface do jogo — o mesmo código com que o aplicativo pinta. O site não tem como divergir do produto, porque está lendo os números do próprio produto.
Marca
Três fichas empilhadas, da quente para a fria de baixo para cima: o emblema é a condição de vitória do jogo desenhada como objeto.
A faixa recortada do toldo é a segunda marca. Ela fica no topo de cada página e em nenhum outro lugar — uma aparição só, para continuar sendo uma chegada e não uma textura.
Cor
Quente por construção: não existe um cinza neutro em lugar nenhum do sistema. Todo cinza é tinta com alfa reduzido sobre um fundo creme, e é por isso que a página nunca esfria.
#FFF7E8Palette.Cream#F3E3C3Palette.CreamDeep#FFF3D9Palette.SkyTop#F1BE84Palette.SkyBottom#3B2314Palette.Ink#8E7A6CPalette.InkSoft @62%#D9BD94Palette.CardLip#4CB853Palette.Primary#2F8C3APalette.PrimaryLip#FFD23FPalette.Yellow#E9553DPalette.CanopyA#B97A43Palette.BoardBase#9E6437Palette.Tray#F6E6C8Palette.Tile#F2A81DKindTheme#8E44C6KindTheme#4A2A6BKindTheme#E8412FKindThemeTipografia
A Baloo 2 sustenta todos os títulos — arredondada e pesada, a voz de uma placa de feira pintada à mão. A Nunito Sans fica com todo o texto corrido; os olhos abertos dela mantêm os parágrafos longos leves ao lado daquele peso de display.
| Função | Tamanho | Fonte |
|---|---|---|
| Display / capa | clamp(40px, 6.4vw, 68px) | Baloo 2 800 |
| Título de seção | clamp(30px, 4.2vw, 44px) | Baloo 2 800 |
| Título de card | 21px | Baloo 2 800 |
| Linha de abertura | 20px | Nunito Sans 400 |
| Texto corrido | 16.5px | Nunito Sans 400 |
| Chapéu / rótulo | 13px, .14em tracking, uppercase | Nunito Sans 700 |
Botões
Os dois botões carregam uma sombra de aresta sólida e sem desfoque embaixo de outra suave. Isso vem direto do jogo, onde cada botão é uma placa extrudada — a aresta é o lado que você veria de perfil.
Superfícies
Os cards também ganham aresta, e mais nada ganha. Borda, preenchimento e sombra são gastos por função: um card é um objeto separado, uma seção não é.
| --radius | 1.25rem | Cards, painéis e a faixa de tinta |
| .lip | 0 4px 0 #D9BD94 + soft drop | A aresta sólida embaixo de um card |
| .lip-green | 0 5px 0 #2F8C3A + soft drop | O botão principal |
| rounded-full | 999px | Só botões e etiquetas |
Peças
Cada tipo é uma cor e uma silhueta. Esse par é requisito de acessibilidade no jogo, não enfeite — o tabuleiro precisa continuar legível quando as cores não se separam.
Voz
O argumento inteiro do produto é que ele não manipula você. Um texto que exagera contradiria justamente o que está sendo oferecido, então as regras são rígidas.
Afirme só o que foi medido
“Nenhum nível impossível” é dizível porque um solucionador joga cada nível antes de ele ser publicado. Toda afirmação deste site remonta a um número no repositório.
Nunca pegue prova social emprestada
Sem nota em estrelas, sem contagem de downloads, sem “amado por milhares”. O aplicativo ainda não tem usuários e o site diz isso.
Nomeie as coisas como quem joga nomeia
STACKS, SPACE, MOVES LEFT — as palavras do placar, não as palavras do código.
Sem urgência, sem contagem regressiva
Nada neste site pressiona por um download. Um jogo sem anúncio e sem compra não tem pressa nenhuma para empurrar em ninguém.