cambiate a swapy
El símbolo es el cambio de batería.
El logo de swapy está conformado por el símbolo que resalta el cambio de baterías, el rasgo distintivo de la marca.
Acá están los elementos básicos: la marca, los colores, la tipografía y el tono de voz.
- Tipografía
- Manrope
- Paleta primaria
- Manzana y Oliva
- Tagline
- cambiate a swapy
- Grupo
- Quantik
Logo
El isotipo es el cambio de batería y la palabra es Neulis Sans con los vértices redondeados.
Lockups
Versión principalIsotipo manzana y palabra oliva, sobre blanco. Sobre oliva y sobre negroEl isotipo mantiene el manzana y la palabra pasa a blanco. 
Con taglineEl tagline se apoya arriba, alineado con la a de swapy. 
IsotipoEl signo solo, cuando la palabra no entra. 
Una tintaNegro pleno; en blanco pleno para fondos oscuros.
Clear space
El módulo es la S del logotipo, un módulo libre en los cuatro lados.
- Clear space
- 1 × the height of the mark, all four sides
- Measured from
- The height of the supplied file. A bitmap carries no cap height, so nothing inside the letterforms is measured here.
- At a 64px-tall mark
- 64 px on every side
Misuse
No alterar la relación de proporciones.
El isotipo y la palabra tienen una sola relación de tamaño.
No deformar.
La marca escala en proporción, nunca en un solo eje.
No modificar elementos.
Los vértices redondeados son la intervención tipográfica.
No aplicar otros colores.
Las cinco versiones cromáticas son las que hay.
No aplicar efectos.
Ni sombra, ni relieve, ni degradado.
No alterar el orden de los elementos.
El isotipo va a la izquierda de la palabra.
No invadir el área de resguardo.
Ningún elemento entra en el módulo libre.
No inclinar.
La marca se apoya siempre en la horizontal.
No bajar de 30 mm de base, o 150 px.
El isotipo solo llega a 10 mm y a 20 px.
Colour
Manzana y Oliva son la paleta primaria; naranja, blanco y negro la acompañan.
Primaria
Manzana
Role: accent
C30 M0 Y80 K0. El verde del isotipo.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 8.16:1, AAA
Oliva
Role: ink
C90 M35 Y90 K60. El verde del logotipo y del fondo institucional.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 11.92:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 11.92:1, AAA
Secundaria
Naranja
Role: signal
C0 M67 Y81 K0. El acento de la paleta secundaria.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 4.17:1, AA Large
Blanco
Role: background
C0 M0 Y0 K0. El fondo por defecto de la marca.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 11.92:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 11.92:1, AAA
Negro
Role: neutral
C0 M0 Y0 K100. Fondo pleno y versión de una tinta.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 21.00:1, AAA
CMYK is converted from RGB with no colour profile, so it is an approximation. A print value needs a profile and a proof.
Proportions
- Blanco74%
- Oliva18%
- Manzana4%
- Negro3%
- Naranja1%
Rules
- El manzana sobre blanco mide 1,46:1: es fondo, isotipo y relleno, nunca texto.
- El naranja pide fondo oscuro: sobre oliva llega a 4,17:1, sobre blanco se queda en 2,86:1.
- La descomposición cromática va de Oliva a Manzana en nueve pasos.
- Sobre fondos complejos la marca necesita alto contraste y espacio libre alrededor.
Typography
Manrope es una tipografía palo seco y de uso libre, para plataformas digitales, cartelería y merchandising.
The family
Manrope
- Source
- Google Fonts
- Fallback
- system-ui, sans-serif
- Licence
- De uso libre: cualquiera la puede descargar.
| Axis | Name | Range | Named instances |
|---|---|---|---|
| wght | Peso | 200 – 800 |
|
- Uppercase
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Lowercase
- abcdefghijklmnopqrstuvwxyz
- Numerals
- 0123456789
- Punctuation
- . , : ; ! ? ‘ ’ “ ” ( ) [ ] – — … / & @ # % + = < >
Roles
| Role | Weight | Optical size | Tracking | Size | Usage |
|---|---|---|---|---|---|
| Display | 600 | not set | −0.02em | Títulos y aperturas | SemiBold, tracking cerrado. |
| Regular | 400 | not set | 0em | 16px, medida 62ch | Texto corrido en todos los medios. |
| Etiqueta | 500 | not set | +0.01em | 11–12px | Rótulos y datos. |
The scale
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Cambiate a swapy.
Optical corrections
Manrope tiene un solo eje, wght, así que ningún plano corrige el tamaño óptico.
| Plane | Ground | Weight | Tracking | Calibrated |
|---|---|---|---|---|
| Blanco |
| 600 | −0.02em | no date |
| OlivaSin calibrar. |
| not calibrated | no date | |
| ManzanaSin calibrar. |
| not calibrated | no date | |
| NegroSin calibrar. |
| not calibrated | no date | |
El logotipo va en caja baja; en texto corrido la marca se escribe Swapy.
Movimiento
Casi todo se mueve con una misma curva; lo más grande se lleva con el scroll.
En movimiento
Mover
Botones, flechas, subrayados, menús y zooms.
450ms
Avisar
Una sola cosa: el aviso de cookies.
400ms
En uso
Giro 360 de la moto
Letras fantasma
Filas de productos
Menú
Líneas del menú
Cambio de polo
Aviso de cookies
La curva
Mover
Avisar
Una sola curva empuja casi todo lo que se mueve: botones, flechas, subrayados, menús, filas y zooms. La otra curva hace una sola cosa: entrar el aviso de cookies.
Lo más grande se lleva con el scroll: el giro 360 recorre sus cuadros al ritmo de la página y las letras fantasma dan una vuelta cada 22 segundos, más rápido cuando el scroll empuja. Con reduced-motion todo esto queda quieto.
Imágenes
La moto, la estación y la app, en una Montevideo que existe de día y de noche.
Nada de banco de imágenes: siempre el producto, el gabinete, la app y las escenas de calle, que son generadas y no muestran personas reales. Los pares día y noche no son un tema de interfaz: el control Día/Noche del encabezado cambia solo la fotografía, cada toma por su versión nocturna, y el resto de la página queda igual. Acá va el par completo del hero de la portada.
Tratamiento
- Día y noche
- Cada foto emparejada carga de día y cambia a su versión nocturna con el control Día/Noche. Cambia solo la imagen: el fondo, el texto y el resto de la página quedan como están.
- Recorte
- Los heroes van a sangre con object-fit: cover y la imagen apenas escalada, transform: scale(1.02). Las bandas con paralaje desbordan 8 por ciento arriba y abajo, para que el desplazamiento no descubra el borde.
- Lavados direccionales
- Sobre foto no hay sombra de texto: la legibilidad la ponen los lavados. El de abajo a la izquierda son dos degradados sobre rgba(6, 22, 12): de abajo hacia arriba, 62 por ciento que baja a 28 al 26 por ciento de altura y a 0 al 52; de izquierda a derecha, 34 por ciento hasta 0 al 55. Arriba, una banda de 150 px baja de 55 por ciento a 0 para que el encabezado se lea.
- El zoom es del hover
- La imagen se agranda al pasar el mouse, no al aparecer: las tarjetas de la galería escalan a 1.04 en 0,7 s y las del mega menú a 1.045 en 0,6 s, siempre recortadas por su marco.
- Lightbox
- Cualquier foto de la galería se abre a pantalla completa sobre rgba(4, 12, 7, 0.94) con blur de 10 px. La imagen entra completa: hasta 88 por ciento del ancho o 1400 px, 84 por ciento del alto y 12 px de radio.
- El producto, sobre fondo neutro
- Las motos se presentan solas: sobre el polo papel, un plato radial que va de blanco a #E2E9DD; en el giro 360, una viñeta radial funde los bordes del cuadro con la tinta del fondo.
- Las marcas aliadas van planas
- Los logos de terceros van en blanco al 82 por ciento sobre el polo cinema y llegan al 100 al pasar el mouse; sobre papel se aplanan a tinta con filter: brightness(0), al 55 por ciento.
- Acá van sin nada
- En esta página las imágenes se muestran sin lavado, sin recorte y sin marco, a su proporción real: los recortes y los velos son de la puesta en página, no del archivo.
El material
Voice
Claro y directo, sin jerga ni tecnicismos innecesarios.
Pillars
Simplicidad y claridad
Es fácil: ubicás una estación con baterías disponibles, cambiás las baterías y ¡listo!
Comunicación directa y sencilla.
Amigable y cercano
Acá estamos para hacerte la vida más fácil.
Lenguaje casual pero profesional, con repartidores y con empresas.
Empatía y respeto
Cada entrega es más que un simple trayecto. Estamos acá para respaldarte en cada viaje.
El trabajo del repartidor se nombra y se reconoce.
Enfocado en beneficios
No solo hacés bien al planeta: también ahorrás dinero en mantenimiento.
La sostenibilidad, la eficiencia y el ahorro son la guía.
Do and don’t
Explicar el swap
Do
Cambiás la batería y seguís.
Don’t
Optimizá tu operativa con nuestro ecosistema de intercambio energético.
Hablarle al repartidor
Do
Estamos acá para respaldarte en cada viaje.
Don’t
El usuario deberá dirigirse a la estación más próxima.
Un beneficio
Do
Ahorrás en mantenimiento.
Don’t
Tecnología de última generación.
El cierre
Do
Cambiate a swapy.
Don’t
¡SWAPY, LA REVOLUCIÓN DE LA MOVILIDAD!
Accessibility
Medido con WCAG 2.1 sobre los colores de esta página.
Commitments
- La marca se elige por el fondo
- Sobre oliva y negro va la palabra blanca; sobre blanco y manzana, la oliva.
- El manzana no es color de texto
- Sobre blanco mide 1,46:1. Es fondo, isotipo y relleno.
- El naranja pide fondo oscuro
- Llega a 4,17:1 sobre oliva y a 7,34:1 sobre negro; sobre manzana se cae a 1,96:1.
Contrast
4 of 10 pairs fall short: Manzana sobre blanco measures 1.46:1 against a required 4.5:1; Naranja sobre blanco measures 2.86:1 against a required 3:1; Naranja sobre manzana measures 1.96:1 against a required 3:1; Oliva sobre negro measures 1.76:1 against a required 3:1.
| Pair | Specimen | Foreground | Background | Measured | Required | Result |
|---|---|---|---|---|---|---|
| Manzana sobre blanco | Visual sample | #B4E570 | #FFFFFF | 1.46:1 | 4.5:1 | Fail |
| Naranja sobre blanco | Visual sample | #FA6E33 | #FFFFFF | 2.86:1 | 3.0:1 | Fail |
| Naranja sobre manzana | Visual sample | #FA6E33 | #B4E570 | 1.96:1 | 3.0:1 | Fail |
| Oliva sobre negro | Visual sample | #103F27 | #000000 | 1.76:1 | 3.0:1 | Fail |
| Oliva sobre blanco | Visual sample | #103F27 | #FFFFFF | 11.92:1 | 4.5:1 | PassAAA |
| Blanco sobre oliva | Visual sample | #FFFFFF | #103F27 | 11.92:1 | 4.5:1 | PassAAA |
| Manzana sobre oliva | Visual sample | #B4E570 | #103F27 | 8.16:1 | 4.5:1 | PassAAA |
| Naranja sobre oliva | Visual sample | #FA6E33 | #103F27 | 4.17:1 | 3.0:1 | PassAA Large |
| Oliva sobre manzana | Visual sample | #103F27 | #B4E570 | 8.16:1 | 4.5:1 | PassAAA |
| Blanco sobre negro | Visual sample | #FFFFFF | #000000 | 21.00:1 | 4.5:1 | PassAAA |
Ratios use the WCAG 2.1 relative-luminance formula and are computed from the hex values on this page, so they move the moment a colour does. A required 3:1 applies to large display type and non-text marks; everything else is held to 4.5:1.
Focus
Press Tab. The outline that lands on the control below is the focus-visible style the whole system uses: 2px of the accent colour, offset 3px, on a 1px radius. This section does not restyle it.
Assets
Los archivos.
Manrope se distribuye bajo la SIL Open Font License.
Marcas
Vectores: cinco versiones cromáticas del logotipo, dos con tagline y el isotipo suelto.
- Principal
- swapy_oliva.svg
- Palabra en blanco
- swapy_blanco.svg
- Oliva pleno
- swapy_oliva_solido.svg
- Blanco pleno
- swapy_blanco_solido.svg
- Negro pleno
- swapy_negro.svg
- Con tagline
- swapy_tagline_oliva.svg
- Con tagline, blanco
- swapy_tagline_blanco.svg
- Isotipo
- swapy_isotipo_manzana.svg
Íconos
El isotipo en manzana sobre un cuadrado oliva. La geometría viene del ícono del sitio, con el manzana que muestra el manual; el PNG se rasterizó desde ese SVG, porque el sitio no publica uno. No hay .ico.
- Vector
- icon.svg
- Apple touch
- apple-icon.png — 180 × 180
Tipografía
Manrope variable, wght 200 a 800. Subconjunto latino, 218 glifos.
- Manrope
- manrope-latin-vf.woff2 — 200 a 800, precargada