Sistema de diseño
Cada valor de aquí sale de SunnySort.View.Palette y del propio kit de interfaz del juego, el mismo código con el que pinta la aplicación. El sitio no puede alejarse del producto, porque está leyendo los números del propio producto.
Marca
Tres fichas apiladas, de cálida a fría de abajo arriba: el emblema es la condición de victoria del juego dibujada como objeto.
La franja festoneada del toldo es la segunda marca. Está en lo más alto de cada página y en ningún otro sitio: una sola aparición, para que siga siendo una llegada y no una textura.
Color
Cálido por construcción: no hay ni un gris neutro en todo el sistema. Cada gris es tinta con alfa reducido sobre un fondo crema, y por eso la página nunca se enfría.
#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#E8412FKindThemeTipografía
Baloo 2 sostiene todos los títulos: redondeada y pesada, la voz de un cartel de mercado pintado a mano. Nunito Sans se encarga del texto corrido; sus ojos abiertos mantienen ligeros los párrafos largos junto a ese peso de display.
| Función | Tamaño | Fuente |
|---|---|---|
| Display / portada | clamp(40px, 6.4vw, 68px) | Baloo 2 800 |
| Título de sección | clamp(30px, 4.2vw, 44px) | Baloo 2 800 |
| Título de tarjeta | 21px | Baloo 2 800 |
| Entradilla | 20px | Nunito Sans 400 |
| Texto corrido | 16.5px | Nunito Sans 400 |
| Antetítulo / etiqueta | 13px, .14em tracking, uppercase | Nunito Sans 700 |
Botones
Los dos botones llevan una sombra de canto sólida y sin desenfoque debajo de otra suave. Viene directamente del juego, donde cada botón es una losa extruida: el canto es el lado que verías de perfil.
Superficies
Las tarjetas también llevan canto, y nada más lo lleva. El borde, el relleno y la sombra se gastan según la función: una tarjeta es un objeto aparte, una sección no.
| --radius | 1.25rem | Tarjetas, paneles y la franja de tinta |
| .lip | 0 4px 0 #D9BD94 + soft drop | El canto sólido bajo una tarjeta |
| .lip-green | 0 5px 0 #2F8C3A + soft drop | El botón principal |
| rounded-full | 999px | Solo botones y etiquetas |
Piezas
Cada tipo es un color y una silueta. Esa pareja es un requisito de accesibilidad del juego, no decoración: el tablero tiene que seguir leyéndose cuando los colores no se separan.
Voz
Todo el argumento del producto es que no te manipula. Un texto que exagera contradiría aquello que se ofrece, así que las reglas son estrictas.
Afirma solo lo que se midió
“Ningún nivel imposible” se puede decir porque un solucionador juega cada nivel antes de publicarlo. Cada afirmación de este sitio se remonta a un número del repositorio.
Nunca tomes prestada la prueba social
Sin valoraciones con estrellas, sin recuentos de descargas, sin “adorado por miles”. La aplicación aún no tiene usuarios y el sitio lo dice.
Nombra las cosas como las nombra quien juega
STACKS, SPACE, MOVES LEFT: las palabras del marcador, no las palabras del código.
Sin urgencia, sin cuenta atrás
Nada en este sitio presiona para que descargues. Un juego sin anuncios y sin compras no tiene prisa que meterle a nadie.