swiss. bauhaus. pasaporte. metro.
src/ui/ y se documenta en src/ui/README.md.el << del pasaporte, en el cuadrado rojo.
En la zona de lectura de un pasaporte, << separa el apellido del nombre. Dibujado con geometría, no con una fuente: dos ángulos de 45°, trazo de 11 unidades sobre 100, esquinas vivas.
- Trazo
- 11 u (15 bajo 20 px)
- Área del signo
- 62 × 52 u
Firmas
vegaVEGA<<NICO
Fondos
Tamaños
los tres primarios, cada uno con su forma.
Como en la Bauhaus: rojo es cuadrado, azul es círculo, amarillo es triángulo. Cada uno es una línea del sitio. El rojo además es la marca y la acción, y el amarillo nunca va como texto.
papel
#F3EFE6
Fondo · 60 %
tinta
#141414
Texto · línea 3 · 22 %
rojo
#E1251B
Marca, acción · línea 4
azul
#1D4FB8
Línea 1
amarillo
#F2B705
Línea 2 · solo relleno
blanco
#FBF9F4
Paneles, fotos
tinta-2
#45423B
Texto secundario
gris
#67635B
Rótulos
filete
#DCD6C9
Filetes
tinte
#E4E7EF
Seguridad
Línea 1 · Artículos
azul · círculo · /articles
Línea 2 · Proyectos
amarillo · triángulo · /projects
Línea 3 · Librería
tinta · medio círculo · /books
Línea 4 · Sobre mí
rojo · cuadrado · /about
geométrica para titular, grotesca para leer.
Jost en minúscula para los titulares (Bauhaus), Instrument Sans para el texto (Swiss), JetBrains Mono para los datos (pasaporte) y Caveat solo para la firma.
- display-xlH1 de portada · Jost 700nico vega.
- displayH1 de páginaartículos.
- headlineH2 de secciónlo que voy anotando.
- titleH3 · Jost 600¿Qué pasa por la mente de un computín?
- ledeBajada · Instrument SansSoy Nico, ingeniero de software y cofundador de Carvuk.
- labelDatos · JetBrains MonoProfesión / Occupation · SCL → TRN · 22.06.2022
- firmaSolo la firma · CaveatNico Vega
cada sección, una línea; cada contenido, una estación.
Líneas de 12 px, solo a 0°, 45° y 90°. Estaciones blancas con borde de tinta; la actual, de combinación con usted está aquí; lo que viene, punteado.
Estación
Combinación
Terminal
Usted está aquí
En construcción
Estación cerrada
LifeLine · la línea de vida
- SCLPUC2015
- PHLDrexel2019
- SZXHuawei2019
- TRNPolito y Vodafone2019
- MEXXepelin2020
- SCLCarvukHoy
LineList · una lista como línea
Composición · Artículos
Composición · Proyectos
Composición · Librería
Composición · Sobre mí
los datos se escriben como en un pasaporte.
Rótulos bilingües, la zona de lectura de 44 caracteres por fila, el rosetón de seguridad, los timbres y una sola firma a mano.
- Profesión / Occupation
- Ingeniero de software
- Cargo / Position
- Cofundador, Carvuk
- Residencia / Residence
- Santiago, Chile
Firma / Signature
Nico Vega
Mrz · se imprime carácter a carácter; el << termina en rojo
StampSheet · ● estudios · ■ trabajo · ▲ lo que fundé (el actual, en rojo)
fotos reales, a color, recortadas en formas.
Sin filtros ni fotos de stock. La Bauhaus entra en el recorte y en el bloque de color de la sección que va detrás.
retrato · rojo
círculo · azul
medio · amarillo
portada · tinta
la misma geometría del símbolo.
Íconos con trazo de 2,5 y ángulos de 45°. Un solo botón rojo por pantalla; los enlaces con flecha avanzan una línea hasta su estación.
- Ir
- Externo
- Bajar
- Volver
- Abrir
- Cerrar
- Menú
- Correo
- RSS
- Descargar
arranca y frena como un tren.
Las piezas se animan al entrar en pantalla, una sola vez. Con menos movimiento activado o sin JavaScript, todo se ve quieto.
ease-metro
cubic-bezier(.65, 0, .35, 1)
Líneas, páginas, enlaces
ease-timbre
cubic-bezier(.2, 1.6, .4, 1)
Timbres, estaciones
ease-salida
cubic-bezier(.2, .7, .2, 1)
Entradas
- 120 ms
- Micro: botones, foco
- 240 ms
- Enlaces, menús
- 600 ms
- Cambio de línea (el tren)
- 1,2 s
- Logo, línea que se dibuja