Tres funciones: «primary» para la identidad de marca, «ink» para tipografías y superficies, y «signals» para tintes y bordes. Haz clic en cualquier código hexadecimal o RGB para copiarlo.

Primario y de marca

Tinta y tipografía

Señales y superficies

Una tipografía con serifas para los títulos y una sans-serif para todo lo demás. DM Serif Display aporta calidez y solidez editorial; Inter se adapta a la lectura de textos largos y a la interfaz de usuario sin distraer la atención.

Dos balanzas. Artículo está pensado para contenidos extensos, entradas de blog y páginas de programas. Pantalla Es ideal para secciones destacadas, páginas de destino y momentos de marketing en los que la tipografía debe destacar más. Los tamaños que se indican a continuación son el límite máximo para ordenadores de sobremesa; los títulos se muestran como clamp() por lo que se reducen en los móviles.

Inter 16 / 600, espaciado: 1rem 2rem, radio de 8 píxeles, transición de color de 0,18 s. Los estilos de los enlaces de Squarespace se extienden a los bloques de código, por lo que los enlaces de los botones siempre se configuran color y text-decoration con !important.

Elementos básicos reutilizables. Estos aparecen en entradas de blog, páginas de programas y contenidos dirigidos a los donantes. Recurre a un patrón ya existente antes de inventar uno nuevo: la coherencia de la marca se consigue mediante la repetición, no mediante la novedad.

El movimiento es una sugerencia, no una actuación. Todo se mueve siguiendo la misma curva corta, y nada se mueve si no es necesario.

• Transiciones

  De 0,18 s a 0,2 s facilidad en cuanto al color, el fondo, el borde y la opacidad. Nada más largo, nada que rebote.

• Al pasar el cursor por encima de una tarjeta

  El borde es de color cian TCF con un anillo a juego de 1 píxel (box-shadow: 0 0 0 1px #00B4DB). No transY Incorporación de tarjetas en los nuevos proyectos: las tarjetas antiguas se están eliminando a medida que se rediseñan las páginas.

• Pasar el cursor por el libro mayor

  Al pasar el cursor por encima de una fila, sus elementos adyacentes se desplazan a opacidad: 0,55, cambia el color de la frase en cursiva a cian y desplaza la flecha 4 píxeles. La fila sobre la que se pasa el cursor mantiene su opacidad total.

• Enfoque

  Cada elemento interactivo recibe :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. No retires nunca los anillos de enfoque sin volver a colocarlos.

• No está permitido

  Sin pulsaciones, brillos, rebotes, efecto de paralaje ni movimientos que se reproduzcan automáticamente. Sin animaciones que se repitan mientras la página permanece inactiva.

La web funciona con Squarespace 7.1, por lo que la mayor parte del trabajo de diseño nuevo se entrega como un bloque de código independiente que se inserta en una sección de Fluid Engine. Estas reglas evitan que esos bloques entren en conflicto entre sí o con la plataforma.

• Prefijo de clase

  Cada nuevo bloque utiliza el tcfx- prefijo. tcf- Pertenece al CSS personalizado heredado y provocará un conflicto.

• Solo restablecimiento de ámbito

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } y nada más ancho. Un ancho de página * El restablecimiento ya ha provocado fallos en la página web en otras ocasiones.

• Aplicar espacios de nombres a todo

  Analiza todas las reglas de la clase raíz del bloque. Un bloque de código debe poder pegarse en cualquier página sin que ello tenga efectos secundarios.

• Importar primero

  Si un <style> usos @import En el caso de las fuentes, debe aparecer en la primera línea de esa etiqueta; de lo contrario, el navegador la ignora.

• Sin comentarios

  El código HTML y CSS de producción se entrega sin comentarios. Documenta el bloque en las notas del proyecto.

• No se utilizan emojis como iconos

  Texto, números o SVG integrado. Los emojis se muestran de forma inconsistente en las distintas plataformas y se perciben como algo informal.

• Azul marino, no negro

  El azul marino oscuro sustituye al negro en toda la interfaz de usuario. El negro puro se reserva para los contenidos multimedia.

• «Mobile first»

  Utiliza el diseño del teléfono como base y añade ancho mínimo consultas ascendentes. Pilas de una sola columna, clamp() tipo de letra, relleno reducido por debajo de 640 píxeles, elementos fáciles de pulsar.

• Enlaces externos

  target="_blank" siempre se envía con rel="noopener noreferrer".

• El texto se reproduce tal cual

  Al rediseñar una página ya existente, mantén exactamente los mismos titulares, el texto del cuerpo, las URL y los parámetros UTM. Indica cualquier modificación en lugar de realizarla sin avisar.

• Mantén el H1

  Los héroes reconstruidos conservan exactamente un H1 con su texto original, por motivos de SEO. Evita el uso de Squarespace's texto-escalado-al-cuadrado elemento contenedor: su tamaño en línea puede desaparecer durante la ejecución y hacer que el encabezado se colapse.

• Adquisición de la sección

  Para oscurecer la sección de un bloque, selecciona la capa de fondo, no el cuadro de la sección — pintura .page-section alinea cualquier divisor de ruta de recorte.

.page-section:has(.tcfx-block) .section-background {
  background: #0F172A !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}