No aplastar
Nunca escalar X e Y por separado. La proporcion de la elipse es la flor.
Sistema de identidad / 2026
La flor es la marca.
Ocho pétalos alargados. Un centro terracotta profundo. Este libro es como Margarita Creative se ve, se mueve y se mantiene fiel fuera del estudio.
01 / La marca
Una margarita de ocho pétalos, no un cóctel.
La marca primaria es la flor del footer: terracotta que baja a alabastro en cada pétalo, un disco terracotta profundo en el centro, ocho elipses sobre una rejilla de 45 grados.
- Construccion Ocho elipses, rx 7.5 / ry 23 en un cuadrado de 128. Rotaciones 0, 45, 90, 135, 180, 225, 270, 315. Circulo central radio 12.5, relleno #A44A23.
- Degradado Los pétalos van de terracotta #BF5A2E en la punta a alabastro-dim #E2DAC7 en la base. Nunca al revés. Nunca en arcoiris.
- Una sola marca La flor es la única marca, desde la pestaña del navegador hasta una portada. Sin sustituto simplificado para tamaños pequeños.
02 / Lockups
Flor mas wordmark, nunca una serif suelta.
"Margarita" en Fraunces 500. "Creative" en Fraunces italic. Olive en claro, crema en oscuro. Tracking cerrado. Solo sentence case.
Horizontal, claro
Por defecto en decks, propuestas, cabeceras de email y la cabeza de una pagina impresa.
Horizontal, oscuro
Bandas olive y olive profundo, footers, diapositivas nocturnas, cubiertas inversas.
Apilado, claro
Espacios cuadrados: avatares grandes, pegatinas, el cierre de un caso.
Apilado, oscuro
Cuando el campo es cuadrado y el fondo es olive profundo.
03 / Espacio de respeto y tamaño
Dale a la flor un pétalo de aire.
El espacio de respeto equivale a la longitud de un pétalo en cada lado (el radio mayor de una sola elipse). Nada, ni el tracking del wordmark, entra en esa caja.
x
x
x
x
Tamaño mínimo
- Lockup en pantalla No más estrecho que 160px. Por debajo, solo la flor.
- Flor impresa No menor de 12mm de diametro. Lockup no menor de 40mm de ancho.
- Favicon La flor es el favicon a cualquier tamaño, 16px incluido. No hay un glifo aparte.
04 / Evitar
Protege el recuento, el degradado y el aire.
Si un tratamiento necesita explicación, ya está mal. Estos seis son los fallos que aparecen primero.
No poner sombra
Sin contorno, brillo ni sombra proyectada. La marca se sienta plana.
No rotar a capricho
Los pétalos viven en paradas de 45 grados. Un giro de 17 grados es adorno, no la marca.
No sobre ruido
Los fondos con patron necesitan una placa solida o el velo fotográfico. Nunca el choque crudo.
No simplificar a cuatro circulos
Esto fue un placeholder que se filtro a produccion. La flor es petalos, a cualquier tamaño, favicon incluido.
No recolorear pétalos
Sin menta, sin oro, sin un pétalo destacado. Olive, crema, terracotta. Ese es el set.
05 / Color
Olive sostiene. Alabastro respira. Terracotta actúa.
Sesenta / treinta / diez. Si más de un elemento terracotta compite en un viewport, el acento ya está de más. Ganan los CTA.
Olive sobre alabastro, y crema sobre olive, cumplen WCAG AA para texto de cuerpo. No pongas tipo terracotta sobre olive en tamaños pequenos. Crema para el texto, terracotta para el relleno o el subrayado.
06 / Tipo
Una serif de alto contraste para el pensamiento. Una sans humanista para el trabajo.
Fraunces lleva la señal editorial. Plus Jakarta Sans lleva UI, cuerpo y formularios. Los titulares van en sentence case. Las mayusculas se reservan para el eyebrow.
Considerada, cálida, exacta.
No solo hacemos que las cosas se vean bien. Alineamos el diseño con el numero que paga: ingresos de la lista que ya tienes, con el site y la marca que hacen convertir esas campañas.
Display
Margarita Creative
Italic
Creative
Cuerpo
Plus Jakarta Sans 400 / 17px / 1.7. Largo de linea 60 a 75 caracteres. Nunca UI larga en la serif.
Eyebrow
Para Heads of Growth
07 / Patrones
Pétalos como ritmo, olive como geometría.
Baldosas repetibles para cabeceras de email, fondos de slides, cubiertas de propuesta y bandas quietas de web. Terracotta por debajo del 10% del campo, salvo que el patron sea el unico contenido.
Campo de pétalos
Flores pequenas sobre alabastro. Cabeceras de email, cierre de slides.
Campo de pétalos, olive
El inverso del campo. Cubiertas, footers oscuros, waitlists.
Eje de pétalos
Elipses alargadas en la rejilla de 45 grados. Reverso de papelería.
Celosia olive
Rombos, cruces de filete, centros terracotta. Grids de slides.
Bloques geometricos
Cuadrados olive, alabastro y velo terracotta. Cuartos de poster.
Rayas olive
Bandas verticales vivas. Lomos, cinta, señalética.
08 / Fondos
Seis suelos. Elige uno. No los mezcles en una sola banda.
Una banda es olive, o alabastro, o un velo, o un patron, o un overlay fotográfico, o olive profundo. La flor y el tipo toman el contraste que ese suelo permite.
Olive
Oscuro por defecto. Heroes, prueba, cierre.
Alabastro
Claro por defecto. Cuerpo, formularios, este libro.
Velo terracotta
Calor radial suave. Citas, reversos de ficha.
Patron
Una baldosa de la sección 07, a la deriva lenta.
Imagen a sangre, luego olive al 55 a 80% más grano. Tipo en crema. Nunca foto cruda bajo la flor.
Olive oscuro
Footer, overlays, modo noche del libro.
09 / Iconos
Cromo vivo. El pétalo como punto caliente.
Los iconos del estudio comparten el lenguaje de la flor: elipses alargadas donde vive el acento, esquinas vivas en cada marco de UI. Relleno terracotta, trazo olive. Archivos SVG reales, no una fuente.
El hover rota el glifo ocho grados en 180ms. El press escala el tile a 0.98. Ambos respetan prefers-reduced-motion. Los archivos viven en brand/icons/ y website/assets/brand/icons/.
10 / Movimiento
La flor se mece. Todo lo demas se queda calmo.
El vaiven de los pétalos es el unico loop ambiental. La revelacion del logo, la deriva del patron y el micro movimiento de iconos son actos de apoyo. El movimiento iniciado por el usuario acaba bajo 300ms. Sin easing lineal para el movimiento. Reduced motion apaga cada loop.
Vaiven del pétalo
6.5s ease-in-out, más o menos 4 grados, retrasos escalonados. El footer en vivo ya lo corre. No añadas un segundo loop focal en la misma vista.
Deriva del patron
42s ease-in-out, 72px de viaje. Solo fondos. Nunca sobre el tipo, nunca sobre la marca.
- Revelacion del logo La flor de portada escala y desenfoca en 280ms, cubic-bezier(0.23, 1, 0.32, 1). Luego entra el vaiven.
- Micro movimiento de icono Hover 180ms ease-out. Active escala 0.98 en 160ms. Sin rebote.
- Reduced motion Todo lo anterior se queda estatico. El scroll-reveal tambien entra de golpe.
11 / Voz
Un socio senior que respeta el tiempo, no un vendor vendiendo features.
Tres palabras en cada punto de contacto: considerada, cálida, exacta. Primero el resultado del cliente, luego el oficio. Frases cortas y declarativas. Sustantivos concretos.
Somos
- Resultado primero, luego el hacer.
- Prueba especifica. Solo numeros reales.
- Fluida, síncrona, responsable ante un solo inbox.
No somos
- Tropos de cóctel, chiringuitos, gajos de lima.
- Palabras hype, urgencia falsa, testimonios inventados.
- Rayas em o en, emoji, comillas curvas.
12 / Cómo usar este libro
Los archivos fuente, luego el site en vivo.
El libro es la cara publica del sistema. Los SVG son los archivos que se colocan. La UI del site de marketing puede seguir en píldora; este libro y cada artefacto nuevo mantienen cromo vivo alrededor de pétalos organicos.
- Marcas
margarita-creative/brand/marks/ywebsite/assets/brand/marks/ - Patrones
margarita-creative/brand/patterns/ywebsite/assets/brand/patterns/ - Iconos
margarita-creative/brand/icons/ywebsite/assets/brand/icons/ - Tokens Cerrados en
brand/brand-system.mdywebsite/assets/css/site.css - Contacto yender@margaritacreative.com