Categoría
La línea que remata, abajo a la izquierda. Nunca centrada.
Color
La paleta sale de /lab/tokens.css; aquí sólo se comprueba contra qué se puede poner texto encima. La cifra es la razón de contraste contra papel y contra el azul de fondo. El mínimo es 4.5 para texto normal y 3 para texto grande.
Tipografía
Tres familias con un trabajo cada una: Sentient para lo que se lee de un vistazo, Public Sans para lo que se lee de verdad y IBM Plex Mono sólo para rotular. La mono nunca narra.
Espacio
Nada respira igual a propósito: el argumento central y el cierre llevan más aire que lo operativo. Si todos los bloques pesaran lo mismo, ninguno destacaría.
Botones y enlaces
Tres variantes y todos sus estados. Los de la fila de abajo llevan la clase forzada para que se vean los estados a la vez; en el sitio salen del pseudo-selector.
Especular · experimento
El componente que pasaste, portado a WebGL plano: sin React y sin ogl. Es un triángulo que tapa el cuadro y un shader; la forma se dibuja con una función de distancia con signo, no con una máscara, y por eso el reflejo puede salirse de la orilla y desvanecerse por fuera. Eso es lo que lo hace parecer luz y no un borde pintado.
Acércale el cursor: la luz gira siguiéndolo y sube con la cercanía, igual que el resplandor de arriba. Lejos, se queda en un barrido lento.
La barra
Papel sólido, sin borde inferior, sin sombra y sin blur. El navbar translúcido con blur es el glassmorphism de 2021 y se ve a un kilómetro. Las rayas son anchas y gruesas, que es de donde le viene el carácter.
Acordeón
Va con <details>, así que funciona sin JavaScript y con teclado. Al abrir, el signo se vuelve un menos: la raya vertical se colapsa y la horizontal se queda. No rota a equis.
Grupo rotulado
Una pregunta abierta
La respuesta va en la sans, más chica que la pregunta y con el interlineado cerrado. Aquí cabe una idea, no un párrafo largo.
Una pregunta cerrada
Segunda respuesta.
Una pregunta que ocupa dos renglones para ver cómo se porta
Tercera respuesta.
Tarjetas
Dos piezas. La apilada va a todo lo ancho, con la categoría en serif arriba y la línea que remata abajo; en fila de tres iguales sería la salida por defecto de cualquier generador. La encajada lleva rótulo arriba y dos datos abajo.
Rótulo arriba
La fraseDatoOtro dato
Formulario
Vive sobre fondo oscuro. Los rótulos van en mono; los campos, en la sans del cuerpo para que se pueda leer lo que uno escribe.
Filas
Dos ritmos de lista. Las numeradas van sobre papel con el número en serif; la cuenta va sobre oscuro y es lo único que entra animado en toda la landing, renglón por renglón, porque ahí el argumento es la acumulación.
01
Un paso
Su explicación, en la sans y en tono tenue.
02
Otro paso
Su explicación.
Lo de la izquierdase paga enlo de la derecha
Otra cosase paga enotro precio