Hemos desarrollado una identidad para la Alianza sumamente sencilla, modular, y versátil. Consiste de una serie de elementos visuales y conceptos de comunicación consistentes y uniformes, con la intención de crear un andamiaje dentro del cual cada campaña o iniciativa que se acoja a la Alianza pueda explorar ejecuciones más expresivas, individuales, y a tono con sus marcas individuales. La marca de la Alianza consite de los siguientes elementos:
La identidad gráfica de la Alianza es sencilla a propósito—los elementos están diseñados para que se utilicen como elementos secundarios dentro de las campañas de cada candidatura.
La estrella en el círculo
La marca de la Alianza se limita al blanco y negro, y un color de acento, el cual puede ser cualquier color. Esto para darle flexibilidad a cada campaña para integrar la marca de la Alianza en sus comunicaciones de forma consistente.
La tipografía de la marca de la Alianza es la familia Red Hat, compuesta de Red Hat Text y Red Hat Display. Es moderna y versátil, y cuenta con una variedad de psoso que se prestan para crear una escala tipográfica balanceada. Para frases conectoras, usamos una ejecución custom de la tipografía Maytra, la cual crea un contraste cálido con la presentación más severa de Rede Hat. Para los titulares, aliviamos un poco el peso de Red Hat Display al aplicarle un outline en vez de un color sólido.
La escala tipográfica que se usa con la marca en contextos digitales está basada en una escala fluida y programática. Se desarrolló tomando en cuenta los diferentes contextos en la cual se va a utilizar—léase, diferentes tamaños de pantalla. Se diseñaron dos escalas—una para un viewport size de 320px, basado en la proporción de 1.25 (major third); la otra para viewports de 1280px, basado en la proporción de 1.414 (augmented fourth).
La escala programática se encarga de generar los tamaños de la escala para los viewport sizes entre esos dos polos. Cambia el tamaño de tu ventana del browser para verlo en acción
La escala tipográfica que se usa con la marca en contextos impresos está basada en la misma escala . Sin embargo, en aplicaciones estáticas se usan las dos escalas base (@320px y @1240px) como escalas fijas, y se le cambia el tamaño base de la escala de 16px a 12pt.
Los titulares usan Red Hat Display con un peso de 700, y recorren la escala completa.
Strong Step 5
Red Hat Display 700
61.04px/61.04px @320px
143.87/143.87 @1240px
Leading: 100% (locked up) @320px
Strong Step 4
Red Hat Display 700
39.063/39.063 @320px
71.957px/79.152px @1240px
Leading: 100% (locked up) @320px; 110% @1240px
Strong Step 3
Red Hat Display 700
31.25px/35.937px @320px
50.889px/58.522px @1240px
Leading: 115%
Strong Step 2
Red Hat Display 700
25px/30px @320px
35.989px/43.187px @1240px
Leading: 120%
Strong Step 1
Red Hat Display 700
20px/24px @320px
25.452px/30.542px @1240px
Leading: 120%
Strong Step 0
Red Hat Display 700
16px/19.2px @320px
18px/21.6px @1240
Leading: 120%
Strong Step -1
Red Hat Display 700
12.8px/15.36px @320px
12.73px/15.276px @1240
Leading: 120%
Strong Step -2
Red Hat Display 700
10.24px/12.288px @320px
9.003px/10.803px @1240
Leading: 120%
Strong Step -3
Red Hat Display 700
8.192px/9.83px @320px
6.367px/7.64px @1240
Leading: 120%
El texto editorial usa Red Hat Text con un peso de 400, y recorren solo la parte más pequeña de la escala, ya que se usa para artículos, posts, y otro contenido editorial.
Prose Step 1
Red Hat Text 400
20px/32px @320px
25.452px/40.723px @1240
Leading: 120%
Prose Step 0
Red Hat Text 400
16px/25.6px @320px
18px/28.8px @1240
Leading: 160%
Prose Step -1
Red Hat Text 400
12.8px/20.48px @320px
12.73px/20.368px @1240
Leading: 160%
Prose Step -2
Red Hat Text 400
10.24px/16.384px @320px
9.003px/14.404px @1240
Leading: 160%
Prose Step -3
Red Hat Text 400
8.192px/13.107px @320px
6.367px/10.187px @1240
Leading: 160%
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
Bold
Italic
Underline
Deleted
Inserted
Strikethrough
Small
Text Sub
Text Sup
Abbr.
Keyboard
Highlighted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.
Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra rutrum.