Colores, membrete, tarjeta y logo.

Colores

Seis colores, nada más. Toca un código para copiarlo. La Salina es solo del sitio web: todo lo impreso, el membrete y la tarjeta incluidos, va en blanco, que es el papel sin tinta.

Cómo se combinan

Contraste medido · WCAG 2.1

Piso 4.5:1 para texto. La damiana pasa el piso sobre el cardón con poco margen: úsala en overlines desde 11 px y nunca en párrafos. CMYK aproximado a partir del valor de pantalla: validar con prueba de color antes de imprimir.

Regla por medio

Para copiar la paleta completa

Tipografía

Cuatro fuentes y nada más, y cada una tiene un solo trabajo. Una serif de display en un solo peso, para titulares y nombres propios, siempre en mixed case; una cara de capitulares que hace únicamente los títulos de sección en caja alta; una sans que se encarga de todo lo demás, incluidas las demás mayúsculas; y la del wordmark, que no se usa en ningún otro lado. Las cuatro son de Google Fonts, gratuitas y de uso libre, pero el sitio, los micrositios y esta misma página las alojan ellos mismos: no se llama a Google en ninguna.

La escala

En impreso el cuerpo baja a 9.5 pt con interlineado de 15 pt, y el asunto del membrete va en Cormorant Garamond Regular a 16 pt.

Reglas

• Nada se sintetizaEl CSS lleva font-synthesis:none. Si hace falta negrita o itálica, se pide el peso real; el navegador tiene prohibido inventarlo deformando la letra.
• Un solo peso de displayTodo el display va en 400. No hay contraste de peso: la jerarquía sale de tamaño, tracking y color. La itálica sí existe y es verdadera, nunca sintetizada.
• El énfasisVa en itálica de Cormorant donde el tono lo pida. El énfasis por color en damiana oscura es el alterno.
• Títulos largosUn nombre de MLS de 80 caracteres o más debe respirar en la tarjeta chica. Si no respira, se baja el tamaño; nunca se condensa la letra.
• Las mayúsculas de título son de ItalianaLos títulos de sección van en Italiana 400, caja alta, tracking 0.06 em. Es una cara de capitulares: sus altas vienen de la inscripción romana y se sostienen solas, pero sus minúsculas son débiles, así que solo puede ir donde el texto va en mayúsculas. Nunca en un nombre de propiedad ni en un titular largo: eso es Cormorant, en mixed case. Es estática de un solo peso, así que no se le puede pedir negrita; cuando hace falta más cuerpo se engruesa con un filete de medio píxel, nunca sintetizando. En el sitio vive en su propio token, --font-section, para que no se filtre a los nombres propios.
• El sitio NO carga de Google Fontsbajacore.com aloja los cuatro archivos él mismo y tiene el CDN de Google retirado a propósito, por velocidad. Poner un <link> a Google Fonts en el sitio deshace esa decisión. Y una fuente en el sitio es dependencia triple: el .woff2, la regla @font-face y el preload. Si falta una de las tres la letra cae a Georgia en silencio y se ve casi bien, que es el peor modo de falla.
• Cormorant pide +12% de tamaño, Italiana noMedido de los archivos: altura de mayúscula 0.625 en Cormorant contra 0.700 en Italiana, que es también la de la serif que corría antes. En el sitio se corrige con size-adjust:112% dentro del propio @font-face de Cormorant: un solo lugar en vez de las 21 reglas que fijan un tamaño de display. Se iguala la MAYÚSCULA y no la altura de x; igualar la x pediría +31% y se vería desproporcionado.
• Las mayúsculas son de ManropeOverlines, etiquetas, botones y navegación: Manrope SemiBold 600 con tracking de 0.2 a 0.3 em. Aguanta caja alta para etiquetas y controles; la de los títulos de sección es de Italiana y la del wordmark de Jost.
• CorreoArial. Las fuentes de marca no llegan de forma confiable a los clientes de correo, así que ahí no se usan.

Fuera del sistema

Geist, Marcellus, Spectral y Literata estuvieron en versiones anteriores y ya no se usan. Italiana sí vuelve, pero acotada a los títulos de sección en caja alta. El build del kit se cae si alguna reaparece.

Para instalarlas

Sitio web

Las reglas que solo aplican en pantalla: qué superficie va dónde, cómo se comportan los botones y qué pasa cuando hay una fotografía debajo del texto. Los botones ya están aprobados y sus doce estados están medidos.

Superficies

Botones Aprobado

El presionado aclara, no oscurece. Es contraintuitivo: como la etiqueta del hover es cardón oscuro, oscurecer el relleno la acerca y pierde contraste. Un #8B976F da 3.55:1 y reprueba. Cada paso hacia el claro gana contraste.

En página clara el hover exige el filete de cardón. La damiana contra la Salina da 2.17:1, por debajo del 3:1 que pide un control: sin borde, el botón se disuelve en la página justo al pasar el cursor.

Texto sobre fotografía

• El texto va en blancoSobre una foto, siempre. La damiana desaparece sobre fotografía clara igual que desaparece sobre la Salina. Solo se sostiene sobre cardón sólido.
• La foto lleva veladuraCardón al 70 a 90 por ciento encima de la imagen, más el grano. Sin ella no hay contraste garantizado, porque la foto cambia con cada propiedad.
• El logo sobre fotoEl bicolor de superficie oscura: BAJA blanco y CORE damiana.

Enlaces y foco

• Enlaces en textoCardón Olivo, con subrayado. Sobre fondo oscuro, damiana.
• Anillo de focoVisible siempre, nunca outline:none sin reemplazo. Dos píxeles de cardón sobre claro, de damiana sobre oscuro, separados un píxel del control.
• Piso de contraste4.5:1 para texto, 3:1 para bordes de control y para iconos que comunican algo.

Membrete

Papel blanco, sin tinta de fondo y sin grano. Solo lleva el logo, en la esquina superior derecha; la dirección de la oficina va abajo a la izquierda y la página web abajo a la derecha. Tipografía definitiva: Cormorant Garamond para el asunto, Manrope para el cuerpo y el pie.

Tarjeta de presentación

Sin puesto. La tarjeta lleva nombre y contacto, nunca cargo. El frente es cardón con grano y el logo a dos tonos; el reverso es papel blanco con el mismo logo bicolor, en su versión sobre claro.

Tamaño real 88.9 × 50.8 mm (3.5 × 2 in). Sin puesto, sin teléfono en el frente, sin más texto que el nombre y los datos de contacto. Papel blanco sin tinta de fondo.

Logo

El bicolor de la marca, BAJA de un color y CORE de otro, ya vive en las dos superficies: sobre el cardón (damiana clara) y sobre cualquier fondo claro, papel blanco incluido (damiana oscura). La mono queda como versión secundaria, para tamaños chicos y una tinta. Nuevo: un lockup stacked, BAJA arriba y CORE abajo, para avatares circulares, favicon y espacios cuadrados. Nunca una placa o caja alrededor del logo; los archivos son contornos vectoriales, sin depender de ninguna fuente instalada.

Sobre el cardón

Primaria oscura · BAJA blanco + CORE damiana

SVGPNG

Sobre claro

Primaria clara · BAJA cardón + CORE damiana oscura

SVGPNG

Mono cardón

Secundaria: tamaños chicos, una tinta

SVGPNG

Mono blanco

Marca de agua sobre verde o foto

SVGPNG

Mono negro

Una tinta, sellos, fax

SVGPNG

Lockup, sobre el cardón

Con filete y descriptor

SVGPNG

Lockup, sobre claro

Con filete y descriptor, mono

SVGPNG

Stacked, sobre el cardón

BAJA arriba / CORE abajo · avatar, favicon

SVGPNG

Stacked, sobre claro

BAJA arriba / CORE abajo · avatar, favicon

SVGPNG

Stacked, mono

Una tinta, tamaños chicos

SVGPNG

El ZIP trae los diez logos en SVG y PNG (los stacked también a 1024×1024), más el logo en cada aplicación: tarjeta, membrete, firma de correo, redes, presentación, letrero, folleto y encabezado web, con un README de uso.