Flow Collective Studio — Guía de Uso del Logo

Anatomía del Logo

El logo de Flow Collective Studio se compone de tres elementos integrados: el símbolo orgánico (hoja), el wordmark "FLOW" y el descriptor "COLLECTIVE STUDIO". Estos elementos siempre funcionan como una unidad — nunca se separan.

Elemento	Descripción	Notas
Símbolo orgánico	Forma de hoja estilizada con dos tonos de verde	Usa `#3BEB64` (green.500) y `#2AAE4A` (verde armonizado)
Wordmark "FLOW"	Tipografía personalizada con formas redondeadas orgánicas	Color: `#0F2C24` (charcoal) — NO es una tipografía estándar
Descriptor	"COLLECTIVE" + "STUDIO" apilados a la derecha	Letras con tracking amplio, alineadas con el wordmark

Ratio del logo: El formato es horizontal con proporción 4.59 : 1 (viewBox 4959 × 1081). El símbolo orgánico ocupa aproximadamente el 25% izquierdo del ancho total.

Colores del Logo

El logo utiliza exactamente tres colores derivados de los design tokens oficiales. Estos valores son canónicos y no deben alterarse bajo ninguna circunstancia.

Charcoal #0F2C24

Brand Green #3BEB64

Dark Green #2AAE4A

Color	Token	Uso en el logo
#0F2C24	`color.reference.neutral.charcoal`	Wordmark "FLOW", descriptor, y el 95% de los paths del símbolo
#3BEB64	`color.reference.green.500`	Elemento orgánico principal del símbolo (hoja exterior)
#2AAE4A	Derivado armonizado	Elementos secundarios del símbolo (detalles de la hoja)

Variantes de Color

El logo tiene cuatro variantes aprobadas según el fondo donde se aplique. La versión full-color es siempre la preferida.

Full Color Preferida

✓ Aprobado Fondo Cream #F7F5F3

✓ Aprobado Fondo Off-white #F0EEE9

Versión Inversa (sobre fondos oscuros)

✓ Aprobado Fondo Charcoal #0F2C24

✓ Aprobado Fondo Black #06221A

Monocromático

✓ Mono Charcoal

✓ Mono Off-white

Especial Mono sobre Green

Regla del blanco puro: Flow nunca usa blanco puro (#FFFFFF) como fondo. En las versiones inversas, el texto del logo cambia a #F0EEE9 (off-white), no a blanco.

Fondos Aprobados

El logo solo debe colocarse sobre los colores de superficie definidos en los design tokens. Nunca sobre colores arbitrarios, degradados no autorizados o fotografías sin overlay.

Fondo	Hex	Token	Versión del logo
Cream	`#F7F5F3`	`surface.primary`	Full color o Mono Charcoal
Off-white	`#F0EEE9`	`surface.secondary`	Full color o Mono Charcoal
Charcoal	`#0F2C24`	`surface.inverse`	Inversa o Mono Off-white
Black-green	`#06221A`	`surface.inverse-deep`	Inversa o Mono Off-white
Brand Green	`#3BEB64`	`surface.accent`	Mono Charcoal (uso especial)
Foto + overlay	`rgba(15,44,36,0.75)`	`photography.overlay-dark`	Inversa — solo con overlay ≥ 75%

Sobre fotografía: El logo solo puede colocarse sobre fotografías si tienen el overlay oscuro de marca (rgba(15, 44, 36, 0.75) mínimo). Nunca directamente sobre una foto sin tratamiento.

Zona de Seguridad

La zona de seguridad (clear zone) es el espacio mínimo libre alrededor del logo donde no debe aparecer ningún otro elemento gráfico, texto o borde. Esto garantiza legibilidad e impacto visual.

← X → ← X →

Medida	Valor	Referencia
Unidad X	= Altura de la letra "O" en FLOW	Aprox. 22% de la altura total del logo
Zona superior/inferior	1X mínimo	Libre de cualquier elemento
Zona izquierda/derecha	0.5X mínimo	Libre de cualquier elemento
Recomendación	1.5X en todas las direcciones	Para máximo impacto visual

Tamaños Mínimos de Reproducción

Para garantizar la legibilidad del descriptor "COLLECTIVE STUDIO", el logo tiene tamaños mínimos según el medio. Por debajo de estos tamaños, las letras pequeñas se vuelven ilegibles.

Medio	Ancho mínimo	Contexto
Digital (pantalla)	200px de ancho	Web, apps, redes sociales, presentaciones
Impresión	45mm de ancho	Tarjetas, documentos, papelería
Favicon / Avatar	32px × 32px	Solo el símbolo (sin wordmark ni descriptor)
Aplicaciones tiny	16px × 16px	Solo el símbolo simplificado (sin detalle interno)

Regla de tamaños pequeños: Cuando el espacio disponible es menor a 200px de ancho, usar únicamente el símbolo orgánico (hoja) sin el wordmark ni descriptor. Esto aplica a favicons, avatares de redes sociales, e iconos de apps.

Lo Que Sí y Lo Que No

Estas reglas protegen la integridad visual de la marca. Seguirlas asegura consistencia en todos los puntos de contacto.

✓ Correcto

✓

Usar el logo completo en su proporción original sobre fondos aprobados

✓

Versión inversa sobre fondos oscuros de la paleta, manteniendo el verde del símbolo

✗ Incorrecto

✗

Nunca colocar sobre fondos de colores fuera de la paleta o degradados no autorizados

✗

Nunca distorsionar, estirar o comprimir el logo. Siempre mantener la proporción original

✗

Nunca aplicar opacidad al logo, usarlo como marca de agua, ni reducir su visibilidad

✗

Nunca cambiar los colores del logo. Solo usar los colores definidos en los design tokens

Reglas Adicionales

Prohibido	Motivo
Añadir sombras, brillos o efectos 3D	Flow usa diseño plano (flat). Sin excepciones.
Rotar el logo	Siempre debe estar horizontal y nivelado
Separar el símbolo del wordmark	Excepto para favicon/avatar (solo símbolo)
Recortar o enmascarar partes del logo	Siempre debe mostrarse completo
Colocar sobre fotografía sin overlay	Usar overlay `rgba(15,44,36,0.75)` mínimo
Usar blanco puro (#FFFFFF) en el logo	Reemplazar con off-white `#F0EEE9`
Outline, stroke o contorno al logo	El logo es sólido, no tiene versión outline
Colocar dentro de formas (círculos, badges)	El logo respira en espacio abierto

Archivos Disponibles

Inventario de archivos del logo actualmente en el design system. Usa siempre la versión corregida como archivo fuente.

Archivo	Formato	Estado	Uso
logo-flow-corrected.svg	SVG	Canónico	Archivo fuente principal. Colores alineados a tokens.
logo-flow-original-backup.svg	SVG	Backup	Respaldo del original. NO usar en producción.

Archivos pendientes de crear: Se necesitan exportar versiones PNG (@1x, @2x, @3x), versión inversa SVG (texto off-white), versión monocromática SVG, favicon SVG (solo símbolo), y formatos para impresión (EPS/PDF con perfiles CMYK).