El Estudio de Marca

El Estudio de Marca en #/start es el único lugar donde das forma a tu marca - sus logotipos, colores, tipografía, el resto de tus tokens y los archivos que guarda. Configúralo aquí una vez y cada herramienta, página y exportación lo sigue por construcción, no por revisión.

Los cambios se previsualizan en vivo en toda la app a medida que los haces, así puedes ver cómo un color o una fuente aterrizan en todas partes antes de confirmarlos. Todo ocurre en el dispositivo: tus archivos de marca y tokens nunca salen de tu máquina (elegir una fuente de Google descarga esa única familia desde Google, una vez, tras un diálogo de consentimiento), y la marca viaja en un único archivo de paquete de marca.

Este es el editor. El panel es el espejo. La pestaña Sistema de diseño del Panel (#/d) muestra tu marca en modo solo lectura; la editas aquí en #/start. Si quieres cambiar un color más adelante, vuelve al Estudio de Marca.

Las salas

El estudio es un conjunto de salas listadas en un riel lateral - no pasos. Nada está numerado, nada depende de nada más, y llegar a cualquiera de ellas es legítimo:

En un móvil la misma lista se convierte en una tira horizontal de chips fijada bajo la cabecera. Cambiar de sala nunca recarga nada - el editor mantiene todos sus paneles montados y simplemente muestra el que pediste.

Enlaza directamente a una sala con #/start?area=<key>. Las claves son overview, color (fíjate en la ortografía estadounidense en la URL), type, logos, tokens, catalogue (la sala Archivos - la clave del panel es un contrato permanente, así que la URL conserva el nombre antiguo) y versions. ?tab= es el alias de siempre para lo mismo y sigue resolviendo, así que los enlaces y marcadores antiguos siguen funcionando; cualquier valor no reconocido abre Overview en lugar de dar un callejón sin salida.

Fijadas al pie del riel están las acciones que pertenecen a todo el sistema de diseño y no a una sala concreta:

El riel de salas del estudio - Overview, Colours, Type, Logos, Tokens y Filessigned by Lollyvector SVGCompruébalo tú mismoGet the signed file20 paths~1.1k nodes37 groups19 KBEl riel de salas del estudio - Overview, Colours, Type, Logos, Tokens y Filessigned by Lollyvector SVGCompruébalo tú mismoGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Overview

Overview es la sala en la que aterrizas, y tiene dos caras.

Con nada configurado todavía ofrece dos puertas - Empezar desde un archivo (tokens de diseño, un proyecto de Penpot, un paquete de sistema de diseño o un SVG) y Empezar de cero (añade un color, y sigue cuando quieras) - y una discreta salida Explorar las herramientas debajo de ellas, porque marcharse también es una respuesta legítima.

Una vez que existe un sistema de diseño, la misma sala muestra lo que tienes: la paleta y su número de colores, las familias tipográficas en vigor, cuántas ranuras de logotipo están rellenas, cuántos tokens hay y la sala Archivos. Cada bloque es una puerta a su sala. Aquí hay recuentos, nunca una barra de progreso ni una tarjeta de finalización - nada en este estudio se debe.

Logotipos

Empieza vaciando tu carpeta de marcas en la zona de arrastre de arriba: "Suelta marcas aquí, o elige varias a la vez" admite tantos archivos como tengas de una sola vez. Cada archivo se analiza por su forma y su tinta, y luego se pone en cola bajo Esperando una ranura como una etiqueta que dice lo que cree - "Parece el Horizontal primario", con la medida en la que se basó, y un botón Colocar (Reemplazar, donde esa ranura ya está ocupada). Cuando no está segura, la etiqueta lo dice claramente y ofrece Cambiar ranura en su lugar, que lista las ocho. Nada se coloca hasta que pulsas algo.

En torno a esa cola ocurren dos cosas. Una marca con margen vacío de sobra recibe primero una oferta de recorte - respóndela o pulsa Escape y el archivo original se coloca sin tocar. Y donde una marca puede cubrir una ranura hermana vacía, la sala ofrece la versión derivada mono o invertida como su propia etiqueta, marcada Generada, que desaparece de nuevo si rellenas esa ranura de otra manera.

Debajo de eso está la cuadrícula en la que acaba cada marca - ranuras orientación × tratamiento:

Eso son ocho ranuras opcionales. Haz clic en una ranura para añadir un PNG, SVG, JPEG o WebP; haz clic en una ranura ocupada para reemplazarla. Todas las ranuras son opcionales y todo permanece en este dispositivo.

La matriz de logotipos - cada orientación en la parte superior, cada tratamiento como su propia ranura discontinua, todas opcionalessigned by Lollyvector SVGCompruébalo tú mismoGet the signed file8 paths~4.8k nodes19 groups54 KBLa matriz de logotipos - cada orientación en la parte superior, cada tratamiento como su propia ranura discontinua, todas opcionalessigned by Lollyvector SVGCompruébalo tú mismoGet the signed file8 paths~4.8k nodes19 groups54 KB

Colores

The Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVGCompruébalo tú mismoGet the signed file114 paths~26k nodes149 groups4 images523 KBThe Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVGCompruébalo tú mismoGet the signed file114 paths~26k nodes149 groups4 images523 KB

La sala más rica, en dos paneles. El izquierdo es donde trabajas; el derecho es tu paleta en vivo. Arrastra el divisor entre ambos para redimensionar (Intro sobre él pliega la paleta a un lado).

La sala Colores - un color primario deriva rampas, tarjetas de muestra con ratios de contraste y una paleta en vivosigned by Lollyvector SVGCompruébalo tú mismoGet the signed file61 paths~9.4k nodes77 groups200 KBLa sala Colores - un color primario deriva rampas, tarjetas de muestra con ratios de contraste y una paleta en vivosigned by Lollyvector SVGCompruébalo tú mismoGet the signed file61 paths~9.4k nodes77 groups200 KB

Añade un color, luego dale un cometido

Añadir un color es toda la ruta sencilla: pega o elige un color en cualquier notación y se convierte en exactamente un token. No se deriva nada de él, no se sugiere nada a partir de él, no se exige nada más. Pega una lista entera de colores y cada uno se convierte en una etiqueta que puedes añadir por su cuenta.

Roles es la capa por encima de eso - qué color desempeña cada papel. Los roles son opcionales (un sistema de diseño con tres colores sueltos y sin roles es perfectamente válido), cualquier muestra puede tomar uno y la lectura de contraste se mide contra la superficie, APCA primero.

Las alas de experto

Cuatro secciones plegadas se sitúan debajo de esas dos. Abre la que quieras; cada una tiene enlace directo como #/start?area=color&focus=<wing>:

Un color, toda una paleta

Dentro de Generar una paleta inicial, elige un Color primario y Lolly calcula una paleta completa - superficies claras y oscuras, texto, acentos y rampas completas de matiz/tono - usando las mismas matemáticas de color perceptual (OKLCH) que el motor usa en todas partes. Ajusta la derivación:

Nada en esta ala escribe nada en tu marca. Es una vista previa, en vivo en toda la aplicación para que la juzgues, hasta que pulsas Reemplazar paleta (abajo).

Debajo del primario verás rampas en vivo Primario / Neutro / Secundario / Mezcla y tarjetas de muestra Claro y Oscuro, cada una con su propia lectura de contraste - el ratio WCAG con la cifra APCA Lc al lado. Haz clic en un paso de la rampa Neutro o Secundario para anclar ese tono en lugar del valor derivado por defecto.

Las cuatro rampas apiladas sobre tarjetas de muestra claras y oscuras, cada tarjeta con su propio ratio de contraste WCAGsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file25 paths~4.6k nodes60 groups57 KBLas cuatro rampas apiladas sobre tarjetas de muestra claras y oscuras, cada tarjeta con su propio ratio de contraste WCAGsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file25 paths~4.6k nodes60 groups57 KB

Construye tu paleta (generador de armonías)

Todavía en la misma ala, Construye tu paleta genera colores de acento a juego a partir de tu primario. Elige una Armonía - Complementaria, Adyacente, Tríada, Tétrada o Análoga (que trae su propio número de Acentos, de 2 a 5, y un Ángulo de matiz de 10° a 45°) - y cada candidato llega con un nombre legible generado automáticamente y un botón + Añadir. Añadir uno pone ese color en tu paleta de inmediato, una pulsación a un token. "Tu paleta, aplicada" muestra el conjunto completo sobre gráficos reales.

Acentos generados, cada uno con una muestra, un nombre generado automáticamente, su hex y un botón Añadirsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file8 paths936 nodes14 groups15 KBAcentos generados, cada uno con una muestra, un nombre generado automáticamente, su hex y un botón Añadirsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file8 paths936 nodes14 groups15 KB

Confirmar una paleta generada

Reemplazar paleta es el único control de esta ala que escribe algo, y nunca lo escribe de inmediato. Púlsalo y primero se abre una tarjeta de revisión, encabezada "¿Reemplazar la paleta?", que detalla exactamente lo que está a punto de ocurrir: cuántos roles se mantienen como los asignaste, cuántos colores que añadiste tú se conservan, cuántas curvas de tono se reanclan, cuántos bloqueos de impresión se refijan, cuántos tonos ocultos permanecen ocultos, cuántas paradas de degradado conservan su color.

Reemplazar paleta en esa tarjeta lo confirma; Cancelar se retira y no cambia nada. Una vez ejecutado, la tarjeta se convierte en "Paleta reemplazada." con un único Deshacer ya enfocado - y se toma un punto de control de todo el sistema de diseño antes del cambio, así que "volver a como estaba" es una restauración y no una tarde perdida.

La paleta, el gráfico y cada muestra

El panel derecho lista todos los colores que lleva tu marca, agrupados (Primario, Neutro, Secundario, Espectro, Personalizado, Roles), cada grupo plegable con su propio + Añadir. Debajo, Gráfico de color se despliega en dos vistas de las mismas muestras: la Rueda (la rueda OKLCH - arrastra un punto para recolorearlo, haz clic en un punto para editarlo o haz clic en un espacio vacío para soltar una muestra nueva) y el gráfico de Gamut, que muestra dónde termina realmente el rango representable. #/start?area=color&focus=chart abre la tarjeta directamente, igual que ?wheel siempre ha hecho.

El panel de la paleta, cada grupo plegable, con la píldora de descarga situada en su borde inferiorsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file155 paths~14k nodes199 groups1 image191 KBEl panel de la paleta, cada grupo plegable, con la píldora de descarga situada en su borde inferiorsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file155 paths~14k nodes199 groups1 image191 KB

La rueda OKLCH - el ángulo es el tono, la distancia hacia fuera es el croma y los grises recorren un carril de luminosidad en el lateralsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file274 paths~3.7k nodes67 groups83 KBLa rueda OKLCH - el ángulo es el tono, la distancia hacia fuera es el croma y los grises recorren un carril de luminosidad en el lateralsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file274 paths~3.7k nodes67 groups83 KB

Haz clic en cualquier muestra para abrir su editor:

Estos bloqueos de impresión son lo que usa una imprenta cuando exportas un PDF o TIFF en CMYK - consulta Exportar.

Eliminar una muestra es seguro: los pasos de rampa derivados y los roles de tema quedan ocultos (el token subyacente sigue resolviéndose, así que nada aguas abajo se rompe), mientras que los colores que añadiste tú mismo se eliminan por completo.

Degradados

Un panel opcional de Degradados construye tokens de mezcla a partir de tu paleta para fondos y acentos. Omítelo por completo si tu marca no usa degradados. Cada degradado tiene una vista previa, paradas con nombre (2-8) y un ángulo. El comportamiento clave: una parada hace referencia a una muestra, así que si recoloreas esa muestra, el degradado la sigue. La interpolación se ejecuta en OKLCH para mezclas limpias. Elimina una parada para recortar la secuencia.

Lleva la paleta a otro sitio

La píldora flotante situada en el borde inferior del panel de paleta descarga la paleta completa como Tokens de diseño (JSON), variables CSS, clases CSS, variables SCSS, una paleta GIMP (.gpl) o un Adobe Swatch Exchange (.ase) - así la marca entra directamente en Illustrator, Figma, GIMP o una hoja de estilos. Está fuera del scroller del panel, así que mantiene su lugar por mucho que se desplace la paleta. (También puedes descargar la paleta desde la vista Catálogo.)

Tipografía

The compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file74 paths~11k nodes99 groups234 KBThe compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGCompruébalo tú mismoGet the signed file74 paths~11k nodes99 groups234 KB

La sala empieza con cuatro tarjetas de rol - las cuatro fuentes que la app, tus herramientas y cada exportación realmente leen. Cada tarjeta muestra qué sirve ese rol ahora mismo, tipografiado en esa fuente, con una línea de texto real debajo:

Titulares, código y cursiva recurren cada uno a la principal hasta que se los asignas, así que una marca de una sola fuente no necesita ninguna decisión aquí. Nada en una tarjeta compromete nada: Cambiar (o Elegir una fuente en un rol vacío) abre el escenario de comparación centrado en ese rol.

La sala de Tipografía - las tarjetas de rol y un espécimen en vivo de cada fuente haciendo su trabajosigned by Lollyvector SVGCompruébalo tú mismoGet the signed file59 paths~9.3k nodes73 groups196 KBLa sala de Tipografía - las tarjetas de rol y un espécimen en vivo de cada fuente haciendo su trabajosigned by Lollyvector SVGCompruébalo tú mismoGet the signed file59 paths~9.3k nodes73 groups196 KB

El escenario de comparación

El escenario se abre integrado en la sala, no en un diálogo, así que las tarjetas de las que viniste permanecen en pantalla. Busca una familia de Google Fonts (Inter, Fraunces, Space Grotesk…) o suelta un archivo de fuente, pulsa Añadir a la comparación y las candidatas se colocan lado a lado con las mismas palabras antes de que ninguna se instale. Escape cancela y devuelve el teclado a la tarjeta desde la que lo abriste.

Esa es la única puerta de entrada, por lo que nada entra en tu marca sin ser visto. Bajo el escenario están los dos paneles de gestión:

En ambos casos, la fuente permanece en este dispositivo, se representa en la app, en tus herramientas y en cada exportación, sin conexión para siempre, y viaja en tu paquete de marca - nada se descarga en el momento de renderizar. Todo lo que hay en Google Fonts se distribuye bajo una licencia abierta (OFL/Apache/UFL).

El panel Roles de tipografía al pie muestra un espécimen en vivo de cada rol - cuerpo e interfaz en la principal, una fuente de visualización opcional para los titulares superiores, una cursiva para énfasis, una monoespaciada para código y datos - así puedes ver todo el conjunto funcionando junto.

El espécimen de Roles de tipografía - titular, cuerpo, cursiva y código, cada uno tipografiado en la fuente a la que resuelve ese rol, con el nombre de la fuente al ladosigned by Lollyvector SVGCompruébalo tú mismoGet the signed file17 paths~5.6k nodes29 groups68 KBEl espécimen de Roles de tipografía - titular, cuerpo, cursiva y código, cada uno tipografiado en la fuente a la que resuelve ese rol, con el nombre de la fuente al ladosigned by Lollyvector SVGCompruébalo tú mismoGet the signed file17 paths~5.6k nodes29 groups68 KB

Tokens

El resto del sistema de diseño, editable sin tocar código:

La sala de Tokens - un control deslizante de radio de esquina más espaciado, tamaño, sombras y el resto del sistemasigned by Lollyvector SVGCompruébalo tú mismoGet the signed file73 paths~14k nodes95 groups1 image292 KBLa sala de Tokens - un control deslizante de radio de esquina más espaciado, tamaño, sombras y el resto del sistemasigned by Lollyvector SVGCompruébalo tú mismoGet the signed file73 paths~14k nodes95 groups1 image292 KB

Archivos

Suelta aquí los archivos que guarda tu marca -aparte de los logos-: recursos vectoriales, de imagen, de audio y de movimiento (vídeo, Lottie, animados). Llegan a tu Catálogo, clasificados en secciones y listos en el selector de recursos de cada herramienta. Todo permanece en este dispositivo. (El riel etiqueta la sala como Archivos; la clave de URL sigue siendo catalogue, porque la clave de un panel es un contrato permanente.)

Traer una marca

Añadir desde… al pie del riel abre un selector de dos fases. La primera fase pregunta qué tienes, no en qué formato está:

Elige la fuente de archivo de diseño y la segunda fase es la tarjeta de abajo: los formatos aceptados encabezan como fichas con icono en orden de preferencia, y toda la tarjeta es un único destino de arrastre - haz clic en cualquier parte de ella o arrastra un archivo hasta ella. También puedes soltar un archivo directamente sobre el estudio.

La tarjeta de importación - los formatos aceptados encabezan como fichas con icono, y toda la tarjeta es un único destino de arrastresigned by Lollyvector SVGCompruébalo tú mismoGet the signed file19 paths~3.2k nodes35 groups2 images175 KBLa tarjeta de importación - los formatos aceptados encabezan como fichas con icono, y toda la tarjeta es un único destino de arrastresigned by Lollyvector SVGCompruébalo tú mismoGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

Qué te ofrece cada archivo de diseño:

Una instalación desde una fuente crea primero un punto de control, así que "volver a como estaba antes de la importación" es una sola restauración. Y lo que encuentra un escaneo no entra directamente: los candidatos llegan a la Bandeja, donde cada uno se añade con su propia pulsación, a través de la sala que posee ese tipo de material.

#/start?source=<kind> abre el selector en una fuente dada (file, pdf, image, font, url), y ?import lo abre en la lista simple.

Mover una marca entre dispositivos

Exportar al pie del riel escribe un único LollyBrand-…zip - tus tokens, fuentes, logos y preferencia de tema, con un manifiesto de integridad que se verifica al volver a importarlo. Junto a él, Tokens (.json) escribe el documento de tokens de diseño en solitario: sin fuentes, sin logos, solo los tokens, que es lo que realmente lee un repositorio, un paso de CI u otra herramienta de tokens.

Traer una de vuelta es Añadir desde… → Tokens de diseño o un archivo de diseño (arriba), o un arrastrar y soltar sobre el estudio. Así es como un compañero te entrega una marca, o cómo llevas una a una segunda instalación - sin cuenta, sin nube. Para traer una marca desde la línea de comandos, consulta ingest:brand.

Versiones

Versiones, al pie de la barra, es donde un design system deja de ser un objetivo móvil. Publica una y obtienes una copia permanente y con nombre conservada en este dispositivo: nunca cambia después, así que una herramienta que la fija sigue dibujando lo mismo. El panel permanece oculto hasta que hay algo propio que publicar, así que un estudio que nunca publica nunca ve los controles.

Tres cosas que conviene saber antes de pulsar nada, y el panel las dice las tres antes de pulsar, no después:

Puedes Publicar solo, o Publicar y activar - la diferencia está en si las herramientas y la app siguen esa versión a partir de ahora o siguen tu última edición. Volver a seguir la última pone en vivo cada edición en el momento en que se hace. #/start?area=versions abre el panel directamente.

Cuando la marca es fija

Algunas compilaciones incluyen una marca bloqueada - sus colores, fuentes y tokens son los que usan todas las herramientas y exportaciones, y no hay nada que cambiar. En ese caso, el estudio se sustituye por una nota breve que explica que esta compilación incluye una marca fija y que la edición está desactivada. Esto es deliberado: así es como una organización garantiza que todo se mantenga fiel a la marca.

A dónde ir ahora