Cada historia tiene su propia escala.
TEXT.H1encabezado de primer nivel
Tamaño H1 dentro del área de texto. El título de la página se presenta con un encabezado separado; sus opciones se muestran a continuación.
Style Guide
Un catálogo de estilos para publicaciones: tipografía, imágenes, galerías, tarjetas, vídeo y cabeceras. Compara los ejemplos, elige un estilo y copia su comando para el chat. Cada ejemplo tiene un código fijo: indica ese código y su ubicación en el artículo para dar formato al fragmento o la imagen que quieras.
A veces, «un poco más ancho» significa 800 píxeles y, a veces, casi toda la pantalla. Aquí puede señalar con el dedo la opción deseada y copiar su código. Las palabras finalmente tuvieron un tamaño común.
Seleccione una muestra, copie el comando y especifique una ubicación en el material. Cada técnica tiene un código constante: QUOTE.RULE, IMAGE.WIDE o, por ejemplo, GALLERY.TWO-ONE.
Texto y ritmo
TEXT.H2Título de la sección
Un nuevo pensamiento tiene un comienzo notable. Este es el nivel principal dentro del artículo.
El título da la dirección del texto.
TEXT.H3Subtítulo
La sección ha crecido; dividámosla en partes comprensibles.
Ahora puedes ver los detalles.
TEXT.H4Subtítulo pequeño
Otro nivel cuando sin él al lector le resulta más complicado navegar.
Un ligero giro dentro de la sección.
TEXT.H5Cabecera compacta
Nivel extra poco común. No reemplaza las secreciones aceitosas normales.
Aclaración tranquila
TEXT.H6Encabezado más pequeño
El último nivel de la jerarquía; en la mayoría de los artículos no llegamos a eso.
El último paso
TEXT.PARAGRAPHPárrafo normal
La base del artículo. Aquí el texto puede explicar, conectar y contar con calma.
El diseño funciona cuando dejas de notarlo. El párrafo mantiene un ancho de línea cómodo, el enlace conoce su ubicación y el siguiente título aparece exactamente cuando llega el momento de cambiar de tema.
TEXT.BOLDSecreción aceitosa
Resalte una palabra importante manteniendo un párrafo normal.
Lo importante de esta frase es una solución. El resto de las palabras no es necesario pronunciarlas en voz más alta.
TEXT.UNDERLINEsubrayado
Un pequeño truco dentro de la línea. Cada selección tiene su propia tarea.
Ejemplo: fragmento subrayado
TEXT.STRIKETachado
Un pequeño truco dentro de la línea. Cada selección tiene su propia tarea.
Ejemplo: redacción antigua
TEXT.CODEcodigo en linea
Un pequeño truco dentro de la línea. Cada selección tiene su propia tarea.
Ejemplo: image.wide
TEXT.SUPSuperíndice
Un pequeño truco dentro de la línea. Cada selección tiene su propia tarea.
Área — m2
TEXT.SUBSubíndice
Un pequeño truco dentro de la línea. Cada selección tiene su propia tarea.
Fórmula — H2O
TEXT.LINKEnlace de texto
El enlace habitual sigue siendo parte de la oferta.
Cuando necesite un conjunto de colores y botones, abra Sistema de diseño.
QUOTE.RULECita con línea vertical
Geist Mono y raya vertical. Resalta una idea manteniendo el ancho del texto.
Una buena cita deja al lector con un pensamiento y el diseño sólo el trabajo de resaltarlo.
QUOTE.ACCENTcita de acento
Línea grande sin raya. Para una introducción o una reflexión en la que valga la pena detenerse.
El lector nota primero el ritmo. Luego… lo que querían decirle.
LIST.BULLETLista con viñetas
Varios pensamientos iguales, incluidos puntos anidados.
- Primero elegimos el significado.
- Entonces — la forma
- Ancho
- Ritmo y acentos
- Luego miramos el resultado.
LIST.NUMBERlista numerada
El orden es importante: pasos, secuencia, coherencia.
- Encuentra un ejemplo en el catálogo.
- Copia su código
- Indicar lugar de publicación
TEXT.DIVIDERSeparador
Una pausa entre partes de una historia sin un título nuevo.
TEXT.CODE-BLOCKbloque de código
Los comandos y ejemplos tienen su propio lugar.
Стиль: IMAGE.WIDE
Пропорция: RATIO.4X5
Место: после второго абзаца
Текст: без измененийTEXT.TABLEmesa
Cuando varias opciones son más fáciles de comparar una al lado de la otra.
| Tarea | Formato |
|---|---|
| Resalta un pensamiento | Cita con línea vertical |
| Mostrar episodio | Galería |
| continuar la conversación | Tarjeta con enlace |
proporciones
Para materiales nuevos, mantenemos cinco ajustes preestablecidos principales: 9:16, 16:9, 4:5, 5:4 y 1:1. El resto son opciones adicionales para fotografía y vistas previas. La proporción es la forma fuente; “regular / ancho / ancho completo”: tamaño de bloque en la página.
Para Instagram, distinguimos entre feeds de fotografías y vídeos verticales. 9:16 preparándose para Historias/Reels; para cintas fotográficas, el retrato básico es 4:5. Los formatos de aplicación, API y publicidad pueden variar. Para el blog, todas estas proporciones se conservan sin recortar; Antes de transferir a Instagram, seleccionamos el ajuste preestablecido apropiado para una ubicación específica.
RATIO.9X169:16
Pantalla vertical · 1080 × 1920. Lienzo principal para Stories y Reels. Para la foto del feed necesitarás un marco aparte.
RATIO.16X916:9
Vídeo horizontal · 1920 × 1080. Bueno para YouTube, screencasts e ilustraciones amplias.
RATIO.4X54:5
Retrato · 1080 × 1350. El formato vertical principal para fotografías y tarjetas gráficas.
RATIO.5X45:4
Marco horizontal tranquilo · 1350 × 1080. El mismo par de lados, girados 90°.
RATIO.1X11:1
Cuadrado · 1080×1080. Tarjeta universal, portada o parcela compacta.
RATIO.3X43:4
Retrato adicional · 1080 × 1440. Guardar como un ajuste preestablecido independiente; Verificamos la compatibilidad de un método de carga específico en Instagram antes del lanzamiento.
RATIO.4X34:3
Marco horizontal clásico · 1440 × 1080. Bueno para fotografías y diagramas detallados.
RATIO.3X23:2
Marco fotográfico horizontal · 1620 × 1080. Formato natural de muchas cámaras.
RATIO.2X32:3
Foto vertical · 1080 × 1620. La foto completa se guarda para el blog; Para el feed de Instagram estamos preparando un recorte 4:5 independiente.
RATIO.191X1001.91:1
Tarjeta ancha · 1910 × 1000, o 1200 × 630 con casi la misma proporción. Útil para vistas previas de enlaces.
Imágenes
IMAGE.REGULARimagen normal
Permanece en la columna de texto: máximo 800 px.
IMAGE.WIDEImagen amplia
Se extiende más allá del texto pero conserva los márgenes laterales. Máximo 1400 píxeles.
IMAGE.FULLAncho completo
Llega hasta los bordes del área de publicación. La barra lateral permanece en su lugar.
IMAGE.CAPTIONTítulo debajo de la imagen.
La pie de imagen está en una línea separada debajo de la imagen. No hay un punto final; alt describe la imagen para aquellos que no pueden verla.
Galerías
De una a tres imágenes seguidas. La galería tiene una pie de imagen común; Cada imagen tiene su propia alternativa. Las etiquetas individuales no se muestran en la cuadrícula actual. En el teléfono, las filas se pueden reorganizar según las reglas del tema.
GALLERY.TWOdos cerca
El ancho total de la fila, las proporciones originales y una pie de imagen para toda la serie. El orden de las imágenes es común a todos los idiomas.
GALLERY.THREEtres cerca
El ancho total de la fila, las proporciones originales y una pie de imagen para toda la serie. El orden de las imágenes es común a todos los idiomas.
GALLERY.TWO-TWOdos mas dos
El ancho total de la fila, las proporciones originales y una pie de imagen para toda la serie. El orden de las imágenes es común a todos los idiomas.
GALLERY.TWO-ONEDos arriba, uno abajo
El ancho total de la fila, las proporciones originales y una pie de imagen para toda la serie. El orden de las imágenes es común a todos los idiomas.
GALLERY.ONE-TWOUno arriba, dos abajo
El ancho total de la fila, las proporciones originales y una pie de imagen para toda la serie. El orden de las imágenes es común a todos los idiomas.
GALLERY.MIXEDDiferentes proporciones en una serie.
El ancho total de la fila, las proporciones originales y una pie de imagen para toda la serie. El orden de las imágenes es común a todos los idiomas.
GALLERY.REGULARGalería por ancho de texto
La misma técnica, recogida en una columna regular.
GALLERY.FULLGalería de ancho completo
La serie llega hasta los bordes del área de publicación.
Tarjetas
Aquí están todas las tarjetas que se encuentran en las publicaciones actuales y las opciones de temas ya preparadas etiquetadas por separado. Nuevas inscripciones explican la técnica en sí y las imágenes se sustituyen por marcadores de posición.
CARD.BOOKMARKtarjeta de enlace
Cuando un enlace merece una pequeña portada, título y explicación.
CARD.CALLOUTNota en recuadro
Un fondo gris separa la aclaración de la historia principal.
Una pequeña aclaración. No todos los comentarios necesitan una nueva sección: a veces basta con un globo que permanezca al lado del párrafo deseado.
CARD.FILEArchivo para descargar
Título, explicación y el propio fichero en un solo bloque.
CARD.BUTTONBotón en texto
Una acción separada cuando un enlace normal no es suficiente.
CARD.CTA.MINIMAL-IMAGECTA compacto con imagen
La opción ya se encuentra en publicaciones. El texto y la imagen aquí se reemplazan por muestras educativas.
Aquí la historia se detiene y sugiere el siguiente paso. La imagen respalda la idea y el botón le indica claramente adónde ir.
Seleccione el siguiente paso
CARD.CTA.MINIMALCTA compacto sin imagen
La opción ya se encuentra en publicaciones. El texto y la imagen aquí se reemplazan por muestras educativas.
Aquí la historia se detiene y sugiere el siguiente paso. La imagen respalda la idea y el botón le indica claramente adónde ir.
Seleccione el siguiente paso
CARD.CTA.IMMERSIVECTA grande con imagen
La opción ya se encuentra en publicaciones. El texto y la imagen aquí se reemplazan por muestras educativas.
Ejemplo de formato
Aquí la historia se detiene y sugiere el siguiente paso. La imagen respalda la idea y el botón le indica claramente adónde ir.
Seleccione el siguiente paso
CARD.CTA.CENTEREDGran CTA en el centro.
La opción ya se encuentra en publicaciones. El texto y la imagen aquí se reemplazan por muestras educativas.
Ejemplo de formato
Aquí la historia se detiene y sugiere el siguiente paso. La imagen respalda la idea y el botón le indica claramente adónde ir.
Seleccione el siguiente paso
CARD.HEADER-SPLITBanner grande con imagen en el lateral.
Dos campos: ilustración y mensaje corto. La opción de ancho completo ya se utiliza en el blog.
Este pensamiento tiene su propia portada.
Un bloque grande cambia el tempo de la página. Aquí es donde puedes presentar un proyecto o finalizar una historia con una frase clara.
Ver ejemploCARD.TOGGLEbloque desplegable
La breve pregunta es inmediatamente visible. Haga clic en él para revelar la respuesta detallada.
¿Qué se puede ocultar bajo divulgación?
Una adición que no será útil para todos los lectores: una composición detallada, una explicación o una respuesta larga.
CARD.PRODUCTTarjeta de producto
Diseño de tema listo. No utilizado en publicaciones actuales; Agregamos precios y calificaciones solo basados en datos reales.
El nombre del producto irá aquí.
Aquí hay una breve descripción. La muestra muestra la composición sin precio ni calificación ficticia.
CARD.BUTTON.CENTERBotón central
La misma acción, ubicada en el centro de la columna.
CARD.BUTTON.SECONDARYbotón de calma
Acción secundaria con diseño secundario.
CARD.CALLOUT.ACCENTRecuadro con color de acento
Una línea de color destaca la nota. El texto conserva el fondo de la página, sin relleno ni forma de botón.
Aquí hay una advertencia importante. La leyenda lo mantiene cerca del pensamiento con el que se relaciona.
CARD.CTA.WHITECTA sobre fondo blanco.
Versión ligera de la tarjeta; El color también se nota en un tema oscuro.
El siguiente paso se puede sugerir con calma. Todo lo que se necesita es una breve explicación y un enlace claro.
Abrir ejemplo
CARD.HEADER.ACCENTBanner con color de acento
Una pausa breve con un título grande y un acento de color.
Pausa visible
Un acento fuerte entre dos partes tranquilas del texto.
CARD.SIGNUPtarjeta de suscripción
Diseñar un formulario a partir de un tema. En el catálogo, los campos están deshabilitados: la conexión de correo se selecciona por separado.
Una buena historia tiene una secuela.
Aquí puedes invitar al lector a suscribirse a las siguientes publicaciones
CARD.CALLOUT.EMOJILlamada de emoji
El emoji de la izquierda establece la entonación, el texto de la derecha revela la idea.
💡
Aquí puedes dejar un hallazgo, consejo o aclaración importante. La notita también tiene voz.
CARD.CALLOUT.BLUELlamada azul
Color listo de la paleta temática. El color de fondo y el emoji se pueden seleccionar por separado.
🌊
Una leyenda azul resalta un pensamiento breve. Elija un tono que se adapte al estado de ánimo del material.
CARD.CALLOUT.GREENLlamada verde
Color listo de la paleta temática. El color de fondo y el emoji se pueden seleccionar por separado.
🌱
Un globo verde resalta un pensamiento breve. Elija un tono que se adapte al estado de ánimo del material.
CARD.CALLOUT.YELLOWLlamada amarilla
Color listo de la paleta temática. El color de fondo y el emoji se pueden seleccionar por separado.
☀️
Una leyenda amarilla resalta un pensamiento breve. Elija un tono que se adapte al estado de ánimo del material.
CARD.CALLOUT.REDLlamada roja
Color listo de la paleta temática. El color de fondo y el emoji se pueden seleccionar por separado.
📍
Un globo rojo resalta un pensamiento breve. Elija un tono que se adapte al estado de ánimo del material.
CARD.CALLOUT.PINKLlamada rosa
Color listo de la paleta temática. El color de fondo y el emoji se pueden seleccionar por separado.
🌸
Un globo rosa resalta un pensamiento breve. Elija un tono que se adapte al estado de ánimo del material.
CARD.CALLOUT.PURPLELlamada morada
Color listo de la paleta temática. El color de fondo y el emoji se pueden seleccionar por separado.
🔮
Una leyenda violeta resalta un pensamiento breve. Elija un tono que se adapte al estado de ánimo del material.
CARD.CALLOUT.WHITELíder de la luz
Color listo de la paleta temática. El color de fondo y el emoji se pueden seleccionar por separado.
💭
Una leyenda de color claro resalta un pensamiento breve. Elija un tono que se adapte al estado de ánimo del material.
Vídeo
VIDEO.FILE.PORTRAITVídeo vertical
Archivo 9:16, columna normal. El vídeo lo inicia el propio lector.
VIDEO.FILE.LANDSCAPEVídeo horizontal
Archivo 16:9 en formato ancho. Adecuado para screencasting y demostración de interfaz.
VIDEO.FILE.FULLVídeo de ancho completo
El mismo archivo hasta los bordes del área de publicación. El tamaño del bloque no cambia la relación de aspecto del vídeo.
VIDEO.FILE.SQUAREVídeo cuadrado
Archivo cuadrado real de la publicación. No es necesario cortarlo para obtener un cuadrado.
VIDEO.LOOP.MUTEDBucle sin sonido
El vídeo está en bucle y silenciado. El directorio se inicia haciendo clic; La reproducción automática de un artículo se especifica como un comando separado.
Contenido incrustado y audio
EMBED.YOUTUBEYouTube dentro de la publicación
Utiliza un enlace real de una publicación de diseño e inmobiliaria. Si el vídeo no está disponible, aún puedes ir a la fuente.
EMBED.INSTAGRAMPublicación de Instagram
La inserción nativa de Instagram y el vídeo guardado en el CDN del sitio. Cambia de pestaña para comparar ambas versiones.
AUDIO.PLAYERAudio
El diseño de la tarjeta de audio está en el tema; No se encontraron archivos de audio en la biblioteca publicada. Este es un reproductor de muestra sin grabación.
Cabeceras y listas de publicaciones
Siete opciones de encabezado corresponden a la lista general de plantillas del sitio y al editor actual. Cambiar el encabezado no cambia el texto, el orden de los bloques ni las versiones de idioma. La configuración del material se guarda como borrador; La publicación se realiza por separado.
El ejemplo de pantalla completa se muestra en una ventana separada dentro del directorio para que su fondo y estilos de navegación no cambien toda la página de la Guía de estilo.
POST.HEADER.STANDARDTítulo encima de la imagen
El título y la descripción aparecen encima de la imagen de portada, que conserva sus proporciones.
Dos horas en un café: cómo creamos inteligencia industrial con ChatGPT y Codex
En dos horas en un café de Dubái, Anna, mi «consultora secreta», y yo pasamos de idea a producto B2B: ChatGPT definió lógica y datos, Codex creó el servicio y Cloudflare lo llevó a producción
Alexander Nevsky
Diseñador y creador con IA
AI Designer & Builder en Dubái. Diseño y construyo productos digitales con IA. Escribo sobre diseño, tecnología, el sector inmobiliario y la vida familiar
POST.HEADER.LEFTImagen de portada a la izquierda
La imagen de portada queda a la izquierda y el título y la descripción a la derecha. En pantallas estrechas, el tema reorganiza los elementos.
Dos horas en un café: cómo creamos inteligencia industrial con ChatGPT y Codex
En dos horas en un café de Dubái, Anna, mi «consultora secreta», y yo pasamos de idea a producto B2B: ChatGPT definió lógica y datos, Codex creó el servicio y Cloudflare lo llevó a producción
Alexander Nevsky
Diseñador y creador con IA
AI Designer & Builder en Dubái. Diseño y construyo productos digitales con IA. Escribo sobre diseño, tecnología, el sector inmobiliario y la vida familiar
POST.HEADER.RIGHTImagen de portada a la derecha
El título y la descripción quedan a la izquierda y la imagen de portada a la derecha. En pantallas estrechas, el tema reorganiza los elementos.
Dos horas en un café: cómo creamos inteligencia industrial con ChatGPT y Codex
En dos horas en un café de Dubái, Anna, mi «consultora secreta», y yo pasamos de idea a producto B2B: ChatGPT definió lógica y datos, Codex creó el servicio y Cloudflare lo llevó a producción
Alexander Nevsky
Diseñador y creador con IA
AI Designer & Builder en Dubái. Diseño y construyo productos digitales con IA. Escribo sobre diseño, tecnología, el sector inmobiliario y la vida familiar
POST.HEADER.TOPImagen encima del título
La imagen de portada aparece antes del título y la descripción y conserva sus proporciones.
Dos horas en un café: cómo creamos inteligencia industrial con ChatGPT y Codex
En dos horas en un café de Dubái, Anna, mi «consultora secreta», y yo pasamos de idea a producto B2B: ChatGPT definió lógica y datos, Codex creó el servicio y Cloudflare lo llevó a producción
Alexander Nevsky
Diseñador y creador con IA
AI Designer & Builder en Dubái. Diseño y construyo productos digitales con IA. Escribo sobre diseño, tecnología, el sector inmobiliario y la vida familiar
POST.HEADER.WIDEImagen ancha debajo del título
El título y la descripción mantienen el ancho de la columna de texto, con una imagen de portada ancha debajo.
Dos horas en un café: cómo creamos inteligencia industrial con ChatGPT y Codex
En dos horas en un café de Dubái, Anna, mi «consultora secreta», y yo pasamos de idea a producto B2B: ChatGPT definió lógica y datos, Codex creó el servicio y Cloudflare lo llevó a producción
Alexander Nevsky
Diseñador y creador con IA
AI Designer & Builder en Dubái. Diseño y construyo productos digitales con IA. Escribo sobre diseño, tecnología, el sector inmobiliario y la vida familiar
POST.HEADER.TEXT-ONLYSolo texto
La cabecera muestra el título y la descripción. La portada queda oculta, pero no se elimina del contenido.
Dos horas en un café: cómo creamos inteligencia industrial con ChatGPT y Codex
En dos horas en un café de Dubái, Anna, mi «consultora secreta», y yo pasamos de idea a producto B2B: ChatGPT definió lógica y datos, Codex creó el servicio y Cloudflare lo llevó a producción
Alexander Nevsky
Diseñador y creador con IA
AI Designer & Builder en Dubái. Diseño y construyo productos digitales con IA. Escribo sobre diseño, tecnología, el sector inmobiliario y la vida familiar
POST.HEADER.FULLSCREENPortada a pantalla completa
La portada ocupa la altura de la pantalla como fondo. El título y la descripción se superponen a la imagen, con una capa oscura para facilitar la lectura.
POST.CARD.VERTICALtarjeta postal vertical
Imagen de portada en la parte superior, luego título, descripción y metadatos.
Cómo el ancho cambia el ritmo
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
POST.CARD.HORIZONTALpostal horizontal
La portada está al lado de la descripción. Para una lista compacta.
Cómo el ancho cambia el ritmo
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
POST.FEED.THREEAlimentación de tres columnas
Composición nativa utilizada en la página principal. Las columnas se adaptan al ancho disponible.
Cómo el ancho cambia el ritmo
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
Un episodio — diferentes tomas
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
¿Adónde lleva la siguiente historia?
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
POST.FEED.LISTLista de feeds
Composición del tema listo. En una pantalla estrecha, se reduce el número de columnas.
Cómo el ancho cambia el ritmo
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
Un episodio — diferentes tomas
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
¿Adónde lleva la siguiente historia?
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
POST.FEED.GRID-VERTICALCuadrícula de tarjetas verticales
Composición del tema listo. En una pantalla estrecha, se reduce el número de columnas.
Cómo el ancho cambia el ritmo
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
Un episodio — diferentes tomas
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
¿Adónde lleva la siguiente historia?
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
POST.FEED.GRID-HORIZONTALCuadrícula de tarjetas horizontales
Composición del tema listo. En una pantalla estrecha, se reduce el número de columnas.
Cómo el ancho cambia el ritmo
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
Un episodio — diferentes tomas
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
¿Adónde lleva la siguiente historia?
La portada, el título y la breve descripción funcionan juntos. Esta es una tarjeta real de una plantilla de blog.
@nevsky_alexander
En Instagram, Dubái más allá de la postal: familia, ciudad, descubrimientos y la vida entre proyectos. En Threads, ideas en voz alta sobre diseño e IA. En YouTube, vídeos que necesitan más espacio que una historia. Sígueme donde te sientas más a gusto y seguimos en contacto