SENTIDO DE SALIDA:
Un movimiento activo que narra una historia en desarrollo.
El sitio debe sentirse espacioso, contemporáneo, juvenil, seguro y activista, lo suficientemente serio como para... Amazon Watchinvestigación y promoción, y lo suficientemente abierto como para que la gente pueda ver cómo participar.
Dónde estamos
El sitio actual tiene verdaderas fortalezas. Contiene décadas de contenido autorizado, material de investigación y de campaña sólido, fotografías impactantes, voces importantes de socios indígenas y un flujo constante de informes oportunos. Ya es un archivo público sustancial de Amazon WatchSu trabajo y experiencia le permiten obtener resultados de búsqueda e inteligencia artificial muy superiores a lo esperado.
La presentación se ha vuelto densa, repetitiva y excesivamente influenciada por el diseño original. Demasiado contenido tiene el mismo peso visual, a menudo en cuadrículas de tarjetas que dan la sensación de un desplazamiento interminable. Las páginas pueden parecer recargadas y saturadas. La narración, la fotografía, las prioridades de la campaña y los llamados a la acción compiten con todo lo que ya se ha publicado. El resultado se asemeja más a un archivo de noticias que al sitio web de una organización activa en campaña.
Lo que nosotros queremos
Mantén la profundidad y la utilidad. Construye una jerarquía y una narrativa más sólidas. En lugar de ofrecer a los visitantes más contenido, las páginas deberían guiarlos a través de una historia: qué está sucediendo, por qué es importante, qué voces deben ser escuchadas, qué Amazon Watch qué están haciendo y cómo pueden participar.
Priorizamos nuestros recursos más valiosos: la fotografía, las voces e historias de nuestros socios indígenas, reportajes rigurosos y 30 años de relaciones y experiencia. Las noticias y la investigación son fáciles de encontrar, pero sirven de apoyo a la historia principal en lugar de dominar cada página.
Los distintos tipos de contenido deben tener un aspecto diferente, no verse obligados a encajar en la misma plantilla. Fotografías grandes, titulares expresivos, testimonios de socios, declaraciones de campaña, informes, acciones y textos más extensos y pausados deben crear un ritmo variado.
Aspecto y tono
Menos recuadros y tarjetas repetitivas. Más espacio para respirar. Tipografía más clara. El color como acento. Fotografía utilizada con intención. Hay demasiado desorden ahora, y muchas páginas parecen filas de carteles de películas. El sitio necesita enfoque y narrativa.
Sobre todo, Amazon Watch Debería percibirse menos como una organización que muestra todo lo que ha publicado y más como un movimiento activo que cuenta una historia en desarrollo e invita a la gente a formar parte de ella.
Tres llamamientos a la acción
El sitio también necesita mejorar su capacidad para convertir la atención en participación. Hay que integrar estos elementos de forma intencionada. En cada momento, se debe tomar la iniciativa.
Toma Acción
Sobre todo las acciones de promoción en línea, que también son la forma más importante en que nuevas personas se unen a nuestra lista de correo electrónico.
Compartir
Anime a los visitantes a promocionar Amazon Watchlos reportajes, las campañas y las historias de sus socios a sus amigos, familiares y comunidades.
Donar
Resalte y haga atractivo el apoyo financiero, haciendo especial hincapié en convertirse en donante mensual.
Principios
- Una idea principal por sección. Alterne la información densa con fotografías o texto sobrio.
- Las tarjetas son para elementos similares (acciones, campañas, avances), no para la página completa.
- Las fotografías deben tener carácter documental. Superponga texto solo cuando la imagen lo permita, y hágalo con moderación. El texto nunca debe cubrir ni ocultar las fotografías.
- El ancho del texto se mantiene cerca de 18 píxeles, con una altura de línea de 1.7 y un ancho de 760 píxeles.
- Las opciones "Actúa" y "Dona" se mantienen visualmente diferenciadas.
- Solo tres familias tipográficas: Archivo, Barlow Semi Condensed y Montserrat. Sin serifas.
Este es el sistema para el sitio web. Cuando se complete el rediseño, el mismo tipo, color, fotografía y jerarquía deben guiar los informes, presentaciones y otros Amazon Watch materiales.
Tipografía
Archivo publica. Barlow habla. explica Montserrat.
Estas tres familias de fuentes son exclusivamente. No se incluyen fuentes adicionales ni serifas. Las tres son gratuitas y de código abierto, proporcionadas por Google Fonts.
- Montserrat – Cuerpo e interfaz de usuario
- Lectura, navegación, botones, formularios, fechas, subtítulos, pie de página. Token --aw-font-body. Aproximadamente 18px, interlineado 1.7.
- Archivo 600 – titulares editoriales
- Títulos de artículos, páginas, informes y tarjetas normales. Clases .aw-heading-1 a .aw-heading-4. Las tarjetas de características usan el encabezado dos. Las tarjetas de fotos de tres por página, las tarjetas de apoyo verticales y las listas de texto compactas comparten --aw-card-title-size.
- Barlow Semi Condensed 600 – solo para exhibición
- La voz hablada. Página de inicio y declaraciones de campaña, héroes superpuestos, características de acción, material del 30.º aniversario, títulos de Historias de Solidaridad. Clases .aw-display y .aw-display-large. El grosor es 600, nunca 700. No es la fuente predeterminada H1–H3.
Capirona canta a sus ríos
Un subtítulo o dek se escribe con mayúscula inicial y se coloca debajo del título.
De Sarayaku a París en canoa
Triple Trouble
Barlow Semi Condensed · 30 años de solidaridad
Barlow Semicondensado · Historias de Solidaridad
Montserrat · Ceja / tipo de contenido
El texto principal se mantiene en Montserrat. La lectura de textos largos utiliza --aw-reading para que las líneas no se extiendan por un diseño ancho.
No nos hicieron un favor; nos hicieron justicia con la entrega de este título. El título de reserva honra años de lucha y resistencia. También marca solo el comienzo de lo que el gobierno colombiano le debe a una comunidad que sufrió la violencia estatal en carne propia y que aún no se ha recuperado.
Yarley Ramírez
- Los títulos de artículos, blogs, informes y comunicados de prensa se escriben con mayúscula inicial.
- Los subtítulos y los títulos están en mayúsculas y minúsculas.
- El tipo de visualización puede ser mayúsculas o minúsculas. El uso de mayúsculas es una opción editorial mediante .aw-display--uppercase, nunca es la opción predeterminada.
- Nunca uses una raya larga. Usa una raya corta con un espacio a cada lado, así.
- Las citas textuales de los artículos utilizan comillas simples y la abreviatura «Archivo editorial». Cite al autor en la siguiente línea.
- El sitio utiliza Fuente impresionante 6.7.1 Para mostrar iconos. Úselo principalmente para acciones de interfaz como descargar, compartir y símbolos de redes sociales. Debe usarse con moderación como elemento decorativo. No lo combine con otros conjuntos de iconos.
- Las fechas son Mes Día, Año: 15 de julio de 2026.
- Las reglas más detalladas se pueden encontrar en nuestra Guía de estilo de escritura.
Color
Predominan las superficies neutras. Se da énfasis al color distintivo.
Utilice estos colores de identificación. No reutilice otros rojos o verdes de materiales antiguos.
#2e4d2e
--aw-color-forest
Acciones principales, cejas, cifras de impacto, campo del logotipo del encabezado
#3a7241
--aw-color-green
Pasa el cursor sobre las acciones forestales y apoya el medio ambiente.
#e9cb2f
--aw-color-gold
Anillos de enfoque, patadas de pie, campo de forma de acción, bandas ocasionales
#914494
--aw-color-purple
Solo acentos
#c55c46
--aw-donate
Solo botones de donación. Alias del token: red-accent-1
#141b18
--aw-text
Cuerpo, encabezados, interfaz de usuario
#5c675f
--aw-text-muted
Leyendas, metadatos, etiquetas secundarias
#ffffff
--aw-surface
Lienzo de página predeterminado
#f4f1ea
--aw-surface-soft
Secciones alternativas silenciosas y bloques de donación dentro del contenido
MEDIR
Anchos y espaciado
Las páginas crean ritmo mediante la alternancia entre lectura, narración, contenido, formato ancho y, ocasionalmente, sangrado completo. La prosa común nunca tiene un ancho de 1180–1380 píxeles. El encabezado utiliza un espaciado más ajustado; los diseños de página no deben copiarlo.
--aw-reading · 760px · Texto largo
--aw-dek · 840px · Subtítulo / dek
--aw-narrative · 880px · Introducciones de página y héroes basados en texto
--aw-content · 1180px · Secciones estándar
--aw-wide · 1380px · Encabezado, pie de página, filas con imágenes
-
--aw-space-10.5 rem -
--aw-space-21 rem -
--aw-space-31.5 rem -
--aw-space-42 rem -
--aw-space-53 rem -
--aw-space-65 rem -
--aw-space-78 rem
El relleno de sección utiliza .aw-section (espacio-6), .aw-section--compact y .aw-section--spacious. El color de ancho completo es una sección del 100% con un interior restringido.
Fácil de usar
Botones y enlaces
- Las opciones "Primario" y "Actuar" son de tipo bosque. "Donar" es --aw-donate con el glifo existente. "Donar" y "Actuar" nunca son socios iguales en el mismo momento.
- Los enlaces dentro del contenido utilizan un subrayado verde bosque y, al pasar el cursor sobre ellos, se cambia el color del texto. No son botones.
- Sin píldoras, radios gruesos, degradados ni sombras grandes. El foco es un contorno dorado de 2 píxeles. Los objetivos táctiles se mantienen cerca de los 48 píxeles.
Motion
Una idea de movimiento principal por componente
El movimiento es intencionado y fluido. Cada sección puede aparecer una sola vez. Las imágenes y los titulares enlazados se mueven simultáneamente. No es necesario que se muevan todos los párrafos, las cejas o los enlaces del pie de página.
- Rápido 180 ms: navegación, enlaces, botones.
- Normal 350ms – imagen al pasar el cursor (~1.03 zoom, desbordamiento recortado), revelación suave.
- Lento 450 ms: revelación de sección predeterminada, elevación de 18 píxeles.
- Los teasers vinculados tratan la imagen y el titular como un solo objeto al pasar el cursor. Los titulares se muestran con subrayado. No hay rebote, rotación ni cambio de grosor.
Vocabulario
Bloques y patrones en uso
El vocabulario del sitio web. A continuación se muestran ejemplos prácticos. Los materiales impresos y de otro tipo deben reflejar la misma jerarquía, incluso cuando no se utilicen estas estructuras.
Héroes de página
.aw-page-hero--text Título del archivo narrativo. --image Título completo y portada, y a continuación la foto principal. --split imagen/texto. --overlay Fotografía a sangre completa, lente Barlow blanca, degradado inferior localizado únicamente. La superposición queda al ras debajo del encabezado.
Introducción
.aw-intro Con ancho narrativo. Ceja, encabezado, introducción, un enlace de flecha. No es una tarjeta.
Dividida
.aw-split con --57 / --66 / --75Fotografía sin oscurecer. Pilas móviles en orden de origen. Agregar --stack-reverse para invertir la pila en pantallas pequeñas.
Pausa para fotos
.aw-photo-break Permite que la fotografía se convierta en un momento de la página. La declaración superpuesta es opcional y poco frecuente.
Cita del artículo
En línea: blockquote en el cuerpo del artículo: bosque colgante entre comillas, Archivo editorial (negrita), citar como – Name. El mismo tratamiento que .aw-guide__blockquoteNo es una tarjeta de retrato. No está en cursiva.
Comunicado
.aw-statement Transición breve y enfática, a menudo con la tipografía Barlow en mayúsculas sobre fondo verde bosque, dorado o suave. Usar una sola vez, no como una franja repetitiva.
Elemento
.aw-feature Una historia importante. Imagen dividida + texto o superposición de fotos. .aw-photo-feature cuando la imagen puede contener texto.
Editorial
.aw-editorial-row Una función más elementos compactos. Se utiliza en Noticias, Inicio y el módulo de historias.
Función de informe
.aw-report-feature Portada vertical, INFORME sobre cejas, Leer/Descargar. No recortar las portadas a formato horizontal.
Banda de acción casera
.aw-home-action con .aw-action-hero--home: carbón dividido como acciones individuales. Miniatura o texto a la izquierda, título y WPForms a la derecha, esquema de envío más enlace opcional "Más información". El consentimiento para el boletín informativo se encuentra en carbón debajo del botón. No es el cuerpo completo de la página de acción.
Sencillos de acción
.aw-action-hero on action publicaciones: introducción en la columna del formulario; medios, vista previa de la carta o video en la columna izquierda. Una nota puede ubicarse debajo de los medios de la izquierda. El texto y los logotipos de los socios de una introducción de dos columnas, o el marcado de la columna del formulario final, se muestran en .aw-action-hero__partners Debajo del bloque de carbón. Compartir y dar consentimiento a continuación en blanco.
Tarjetas de campaña
.aw-campaign-overview un plomo más artículos de apoyo. .aw-teaser--standard para conjuntos equivalentes como más acciones. Sin cuadrículas de mampostería en caja.
Lista de acciones
Acciones actuales equivalentes en filas de tres, de la más reciente a la más antigua. La página de inicio de «Toma acción» utiliza esta información después del compromiso. Excluir la acción que ya aparece arriba. «Participa» permanece en el menú «Toma acción», no como una tercera banda en la página.
Encabezados de sección
El título de una sección y su enlace "más" se sitúan en la misma línea base. Tras una banda de color, el siguiente encabezado ocupa un espacio completo por encima.
Módulo de historia
Bloque de Gutenberg aw/story-module: Artículo destacado, Fila editorial, Grupo de campaña, Informe, Cuadrícula estándar, Lista compacta. Los editores eligen las publicaciones y pueden aleatorizar su orden. Las zonas más recientes excluyen esos ID. Inicio héroe, introducción, voz, acción, compartir y soporte uso aw/home-section en lugar de HTML personalizado. Los listados de Take Action utilizan aw/action-list.
Apoya y dona
.aw-support carbón vegetal, solicitud mensual. .aw-donate-block Campo de superficie suave, retrato circular, botón de donación. No modifique el diseño de la página de donaciones con estos elementos.
Compartir y relacionados
.aw-share en artículos y aterrizajes seleccionados. .aw-related Seguimiento compacto. Compartir no es una sección Chrome en cada página.
Navegación y pie de página
Principal: Nuestro trabajo, Noticias e historias, Actúa, Sobre nosotros. Donar es una utilidad, no un quinto elemento de navegación. El pie de página es organización, tres acciones, tres grupos de enlaces. RSS permanece en el encabezado, no en el pie de página Conectar.
Módulo de historia
Estilos de módulos de historias de Gutenberg
Ejemplos de publicaciones estáticas para cada diseño de módulo aw/story. El texto y las imágenes permanecen fijos en esta página para que los revisores vean siempre los mismos ejemplos.
Elemento
aw/story-module · feature
Noticias y Novedades
Últimas Noticias
Más noticias e historias
De Sarayaku a París en canoa
Los líderes indígenas llevaron el territorio amazónico a las conversaciones sobre el clima, no como una metáfora, sino como una realidad viva...
Lee la historia
Editorial
aw/story-module · editorial-row
Noticias y Novedades
Historias relacionadas
Más noticias e historias
Grupo de campaña
aw/story-module · campaign
Función de informe
aw/story-module · report
Investigue
Informes
Complicidad en la destrucción
Cómo las finanzas y las cadenas de suministro globales se benefician de la destrucción del Amazonas mientras los defensores indígenas se enfrentan a la violencia.
Por qué es importante esta investigación
Los derechos territoriales indígenas son la primera línea de defensa contra la deforestación y la extracción industrial.
Red estándar
aw/story-module · standard
Lista compacta
aw/story-module · compact
Lista de acciones
aw/action-list
Héroe de texto
.aw-page-hero--text
Sobre Nosotros
Protegiendo la Amazonía y nuestro clima en solidaridad con los pueblos indígenas
Desde 1996, Amazon Watch Se ha asociado con los pueblos indígenas para defender la selva tropical, detener las industrias extractivas y exigir responsabilidades a las empresas.
Héroe de la imagen
.aw-page-hero--image
Nuestro trabajo
La selva tropical no es un recurso. Es una patria.
La Amazonía no es una tierra vacía a la espera de ser urbanizada. Es la patria viva de cientos de naciones indígenas.
Héroe dividido
.aw-page-hero--split
Noticias y Novedades
De Sarayaku a París en canoa
Los líderes indígenas llevaron el territorio amazónico a las negociaciones sobre el clima, no como una metáfora, sino como una reivindicación viva del futuro.
Lee mas historias
Héroe superpuesto
.aw-page-hero--overlay
Introducción
.aw-intro
Quiénes somos
30 años de solidaridad
Por casi 30 años, Amazon Watch Hemos practicado una solidaridad radical y eficaz con los pueblos indígenas de toda la cuenca amazónica. Nuestro trabajo combina acompañamiento sobre el terreno, campañas corporativas, defensa legal y promoción internacional.
No hablamos en nombre de nuestros socios. Ayudamos a canalizar recursos, atención y presión política hacia las personas que ya defienden el bosque.
Lee nuestra historia
Dividida
.aw-split
Campañas
La verdadera seguridad comienza con los pueblos indígenas.
La “seguridad” militarizada no ha protegido la Amazonía. La titulación de tierras, la prohibición de la extracción de petróleo y minerales, y el apoyo a la gobernanza indígena sí lo han hecho.
Detener el crimen en Amazon
Pausa para fotos
.aw-photo-break
Fotografía
Créditos, no descripciones
Un pie de foto visible es un crédito. Indica el nombre del fotógrafo o la fuente. No describe lo que muestra la imagen. Escriba Crédito: Nombre o Crédito: Nombre / Fuente cuando se requiera una fuente. No utilice © a menos que lo exija explícitamente el fotógrafo o el titular de los derechos de autor. El texto alternativo puede describir la imagen para facilitar la accesibilidad; este texto no es el pie de foto.
- Cualquier fotografía que no pertenezca a Amazon Watch Debe mostrarse un crédito visible siempre que sea más grande que una miniatura.
- Las miniaturas en listados, tarjetas y menús no necesitan una mención de crédito visible.
- Las imágenes principales, las imágenes dentro del artículo, las imágenes destacadas, las imágenes de apertura y otras fotografías de gran tamaño sí se incluyen.
- Amazon Watch Las fotografías pueden acreditar al fotógrafo o Crédito: Amazon Watch cuando se sabe, pero esto no es obligatorio.
- El crédito aparece justo en la esquina inferior derecha de la fotografía.
Comunicado
.aw-statement
Los pueblos indígenas defienden el Amazonas.
Elemento
.aw-feature
Editorial
.aw-editorial-row
Función de informe
.aw-report-feature
Reportes
Complicidad en la destrucción
Cómo las finanzas y las cadenas de suministro globales se benefician de la destrucción del Amazonas mientras los defensores indígenas se enfrentan a la violencia.
Banda de acción casera
.aw-action-hero--home
Toma Acción
¡Solidaridad con las mujeres Awajún y Wampis de Condorcanqui!
Soporte
.aw-support
Donar
Apoyar los próximos 30 años
Una donación mensual permite que los servicios de acompañamiento, defensa legal y campañas lideradas por indígenas sigan adelante cuando el ciclo de noticias avanza.
Bloque de donación
.aw-donate-block
Banda de color
.aw-section--accent
Defiendan el Amazonas
Por casi 30 años, Amazon Watch ha practicado una solidaridad radical y eficaz con los pueblos indígenas de toda la cuenca del Amazonas.
Lila
Todavía estoy dándole vueltas al color morado...
Este es probablemente mi color favorito de la nueva paleta, pero me preocupa que eclipse a los demás y que, al incluirlo, haga que todo el sitio parezca un circo. ¿Quizás podría usarse más para detalles o acentos?
Declaración púrpura
.aw-statement--purple
Los pueblos indígenas defienden el Amazonas.
Banda púrpura
.aw-section--purple
Noticias y Novedades
Historias de solidaridad
As Amazon Watch Al cumplir 30 años, compartimos historias de nuestros socios y aliados que reflexionan sobre el verdadero significado de la solidaridad.
Leer las historias
División púrpura
.aw-split--purple
Historias de solidaridad
De Sarayaku a París en canoa
Los líderes indígenas llevaron el territorio amazónico a las negociaciones sobre el clima, no como una metáfora, sino como una reivindicación viva del futuro.
Lee mas historias