Guía de marca de Spoy

El logotipo en cada tamaño

Para fondos claros y oscuros

Isotipo

• Ink55%

  HEX

  #0B0B0A

  RGB

  11, 11, 10

  CMYK

  0, 0, 9, 96

  OKLCH

  14.9% 0.002 107

  El fondo de todo: las páginas, el portal y cada correo.

• Surface20%

  HEX

  #111110

  RGB

  17, 17, 16

  CMYK

  0, 0, 6, 93

  OKLCH

  17.7% 0.002 107

  Paneles y tarjetas sobre Ink.

• Paper15%

  HEX

  #F5F4EE

  RGB

  245, 244, 238

  CMYK

  0, 0, 3, 4

  OKLCH

  96.6% 0.008 99

  Texto y marcas sobre fondos oscuros, y el fondo claro cuando hace falta.

• Stone5%

  HEX

  #AAA9A1

  RGB

  170, 169, 161

  CMYK

  0, 1, 5, 33

  OKLCH

  73.3% 0.011 101

  Texto secundario: entradillas, etiquetas y pies de foto.

• Signal5%

  HEX

  #FFDE21

  RGB

  255, 222, 33

  CMYK

  0, 13, 87, 0

  OKLCH

  90.1% 0.181 98

  Una sola cosa iluminada por pantalla: la acción principal o la capa actual. Nunca texto de lectura.

• Amber

  HEX

  #FFB802

  RGB

  255, 184, 2

  CMYK

  0, 28, 99, 0

  OKLCH

  82.7% 0.171 80

  Signal sobre fondos claros, donde el amarillo se apaga: el chevrón y los acentos.

Proporciones de color

Cuánto de cada color usa una composición típica.

Combinaciones legibles

Cada par de colores como texto sobre fondo, evaluado con WCAG 2.2. AA es el mínimo para texto normal; AA large cubre 24 px o más.

• Paper sobre Ink17.9:1AAA
• Paper sobre Surface17.1:1AAA
• Signal sobre Ink14.7:1AAA
• Signal sobre Surface14.1:1AAA
• Amber sobre Ink11.4:1AAA
• Amber sobre Surface10.9:1AAA
• Stone sobre Ink8.3:1AAA
• Stone sobre Surface8.0:1AAA
• Paper sobre Stone2.1:1No cumple
• Signal sobre Stone1.8:1No cumple
• Paper sobre Amber1.6:1No cumple
• Amber sobre Stone1.4:1No cumple
• Signal sobre Amber1.3:1No cumple
• Paper sobre Signal1.2:1No cumple

• Aa

  Geist

  Titulares y texto

  Titulares y texto de trabajo. Espaciado ajustado en tamaños grandes, normal para leer.

  Pesos 400 · 500 · 600Obtener la fuente

• Aa

  Geist Mono

  Etiquetas, números y código

  Etiquetas, cifras y código, en mayúsculas con espaciado abierto para las etiquetas.

  Pesos 500Obtener la fuente

La vista previa usa la fuente si está instalada o disponible en la web.

• Di lo que pasa

  Nombra la acción y su resultado. Un botón dice lo que hace; el mensaje que sigue usa la misma palabra.

  Di

  • Tu llamada está reservada.
  • Al guardarlo se envía una invitación actualizada.

  Evita

  • ¡Genial, ya está todo! 🎉
  • Tus cambios se propagarán.

• Enseña el trabajo, no adjetivos

  Un detalle concreto dice más que una afirmación sobre la calidad.

  Di

  • Un estudio desde la primera conversación hasta el lanzamiento.
  • Prueba de entrega con fotos y firma.

  Evita

  • Soluciones digitales innovadoras de primer nivel.
  • Una experiencia fluida de principio a fin.

• Respeta el tiempo de quien lee

  Empieza por lo que necesita, pide una cosa cada vez y da una fecha cuando la hay.

  Di

  • Necesitamos las direcciones de los almacenes antes del viernes.
  • Comparte el contexto primero. No se envía nada hasta que lo revises.

  Evita

  • Solo para retomar el tema de las direcciones.
  • ¿Hacemos una llamada rápida para alinearnos?

• Una voz en cada idioma

  Búlgaro formal con вие (en mayúscula en las cartas), inglés claro y español de tú. Los mismos datos en todos.

  Di

  • Какво чакаме от вас
  • Elige otro horario que te venga bien.

  Evita

  • Чакаме те!
  • Una traducción automática tal como salió.

• 

  Cabecera de correo La cabecera de cada correo transaccional: la luz de la página principal, la capa iluminada y el logotipo.

Isotipo

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Logotipo

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Fotos de perfil

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Favicons e iconos de app

• Favicon SVGfavicon.svg

• Favicon PNGfavicon-32.png

• Favicon ICOfavicon.ico

• Icono de Appleapple-touch-icon.png

• Icono PWAicon-192.png

• Icono PWA, grandeicon-512.png

:root {
  --color-ink: #0b0b0a; /* oklch(14.9% 0.002 107) */
  --color-surface: #111110; /* oklch(17.7% 0.002 107) */
  --color-paper: #f5f4ee; /* oklch(96.6% 0.008 99) */
  --color-stone: #aaa9a1; /* oklch(73.3% 0.011 101) */
  --color-signal: #ffde21; /* oklch(90.1% 0.181 98) */
  --color-amber: #ffb802; /* oklch(82.7% 0.171 80) */
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --text-display: 3.05rem; /* 48.8px */
  --text-h1: 2.444rem; /* 39.1px */
  --text-h2: 1.956rem; /* 31.3px */
  --text-h3: 1.563rem; /* 25px */
  --text-lead: 1.25rem; /* 20px */
  --text-body: 1rem; /* 16px */
  --text-small: 0.8rem; /* 12.8px */
}