Aquí he desmontado el sitio en piezas: colores, fuentes, botones, iconos y esos espacios que a veces lo descuadran todo. Prueba los elementos y compara los temas claro y oscuro. También sirve de chuleta para las páginas nuevas: que los botones sean de la misma familia y ninguna pantalla parezca una extraña en su propio sitio
Colores
El acento base es #46a758. La barra de anuncios usa un fondo gris #2b2c30 y texto blanco en ambos temas. Los botones verdes llevan texto oscuro; los tonos de los enlaces tienen en cuenta el fondo.
--color-accent#46a758#46a758--color-background#ffffff#1d1e20--color-background-100#f9f9f9#2b2c30--color-background-200#f3f3f3#2f3035--color-background-300#ececec#38383d--color-background-400#dbdbdb#404046--color-foreground#252525#c7cbd5--color-secondary#686868#9ca0ac--color-contrast#000000#ffffff--color-success#348f3f#348f3f--color-error#ff4c4c#ff4c4c--announcement-background#2b2c30#2b2c30--announcement-foreground#ffffff#ffffffTipografía
Geist nació en Vercel, en colaboración con basement studio y el diseñador tipográfico Andrés Briganti. A finales de 2022, Vercel encargó al estudio una familia tipográfica abierta para su marca y su comunidad de desarrolladores. La primera versión llegó en 2023. La familia parte de la tipografía suiza: formas sencillas, letras bien definidas y mucha atención a cómo se ven en pantalla
Geist Sans
Elegí Geist Sans para el cuerpo de texto por su carácter tranquilo. Tiene esa precisión que me gusta en las interfaces, tanto para leer un artículo largo como para repasar unas etiquetas. Mantiene la página ordenada y deja que la atención se quede en el texto
Geist Mono
Geist Mono tiene su propio papel. Todos los caracteres ocupan el mismo ancho: una i estrecha recibe tanto espacio como una m ancha. De ahí sale ese ritmo regular que conocemos del código y las terminales. Me gusta ese aire de ingeniería, por eso uso Mono en títulos, navegación y etiquetas técnicas. Junto a Sans, conecta dos caras del sitio: diseño y tecnología
Ambas fuentes se cargan directamente desde este sitio. Cuando falta un carácter en el archivo, el navegador recurre a una fuente del sistema. Se nota especialmente en las versiones china y árabe
Geist · 400 / 450 / 550 / 600
Geist Mono · 400 / 450 / 550 / 600
--font-h1 · 2remDiseño, tecnología y vida en Dubái
--font-h2 · 1.625remDiseño, tecnología y vida en Dubái
--font-h3 · 1.375remDiseño, tecnología y vida en Dubái
--font-h4 · 1.25remDiseño, tecnología y vida en Dubái
--font-h5 · 1.125remDiseño, tecnología y vida en Dubái
--font-h6 · 1remDiseño, tecnología y vida en Dubái
--font-large · 1.125remDiseño, tecnología y vida en Dubái
--font-medium · .9375remDiseño, tecnología y vida en Dubái
--font-small · .875remDiseño, tecnología y vida en Dubái
--font-x-small · .75remDiseño, tecnología y vida en Dubái
Iconos 67
Remix Icon es obra de Remix Design; la historia de su repositorio comienza en diciembre de 2018. Me gusta el carácter común de estos iconos: siluetas claras y una lógica coherente en los detalles. La biblioteca parte de una rejilla de 24 × 24 y muchos símbolos tienen versiones de contorno y rellenas. La navegación, las acciones y los enlaces sociales pueden compartir estilo y aire de familia. El sitio utiliza la versión 4.9.1; aquí aparecen los 36 iconos seleccionados. Los cargo como máscaras CSS locales: los estilos definen el tamaño y el color, sin una fuente de iconos aparte. Miden 32 px en la interfaz, 16 px en el botón de Telegram y 12 px en los metadatos. Una etiqueta o un nombre accesible comunica el sentido de la acción
Remix Icon 4.9.1 · GitHub · Remix Design · Remix Icon License v1.0
Espacios y esquinas
La escala de espacios y los tres radios de esquina se usan en los componentes del sitio. Los valores en rem siguen el tamaño de fuente del navegador.
--spacing-1 · .125rem--spacing-2 · .25rem--spacing-3 · .375rem--spacing-4 · .5rem--spacing-5 · .625rem--spacing-6 · .75rem--spacing-7 · 1rem--spacing-8 · 1.25rem--spacing-9 · 1.875rem--spacing-10 · 2.5rem--radius-1
.375rem--radius-2
.625rem--radius-3
.875rem
@nevsky_alexander
En Instagram, Dubái más allá de la postal: familia, ciudad, descubrimientos y la vida entre proyectos. En Threads, ideas en voz alta sobre diseño e IA. En YouTube, vídeos que necesitan más espacio que una historia. Sígueme donde te sientas más a gusto y seguimos en contacto