Identidad de marca
La voz que se vuelve publicación.
FlowPub es voice-first: hablas y la voz se vuelve un artículo con portada, sin perder nunca el audio ni el transcript. Esta es su identidad —«tinta, grana y amate», un códice mesoamericano hecho software— y cómo usarla bien.
Speak · Flow · Publish
La marca
La vírgula
La vírgula es la voluta de la palabra en los códices: el aliento que se vuelve signo. Es un solo trazo monolínea —una gota dorada que gira—, con puntas redondas. Está viva: se dibuja al aparecer, respira en reposo y se inclina al pasar el cursor.
Reglas
- • Un solo path. Nunca la redibujes ni la rellenes.
- • Trazo = color de texto (currentColor); puntas redondas.
- • Aire libre alrededor ≥ el 40% de su alto.
- • Tamaño mínimo 20 px; por debajo pierde la voluta.
- • No la rotes, deformes ni le pongas sombra dura.
Es la única «emoji» de la marca. En claro va en tinta; en oscuro, en amate. El acento grana se reserva para lo vivo (grabar, publicar).
Wordmark
FlowPub
El wordmark se compone en Fraunces: «Flow» en itálica (la voz, en movimiento) y «Pub» en romana (lo que queda publicado). Juntos, la vírgula y el wordmark forman el lockup.
En texto corrido se escribe «FlowPub», una sola palabra, sin espacio. Nunca «Flowpub» ni «FLOWPUB».
Color
Tinta, grana y amate
La paleta nace del códice: la tinta negra, la grana cochinilla (ese rojo que México le dio al mundo) y el amate, el papel de corteza. La grana está reservada: grabar, publicar, like activo, CTA primario y el focus ring. Nada más es rojo.
Paleta base (fija en ambos temas)
tinta
Tinta: texto y trazo
grana
Acento — reservado
grana-700
Grana profundo
ocre
Acento cálido
amate
Lienzo
amate-2
Lienzo en sombra
papel
Cards
champagne
Palabra activa (karaoke)
ok
Éxito
Roles semánticos (claro ↔ oscuro)
ink
Texto principal
ink-on
Texto sobre tinta
text-2
Texto secundario (AA)
text-3
Texto mute
surface
Superficie
surface-2
Superficie 2
surface-3
Superficie 3
grana-text
Grana como texto (AA)
Los acentos (grana, ocre) no cambian entre temas; solo voltean las superficies y el texto. El contraste se mide en vivo: el texto secundario cumple AA.
Tipografía
Tres voces
Cada familia tiene un papel. Fraunces es la voz; Hanken Grotesk, el chrome; Space Mono, los datos. No se mezclan roles.
La voz
Fraunces · 400 / 500Habla. FlowPub lo vuelve publicación.
Serif con optical sizing: titulares, cuerpo del artículo, transcripts. La itálica marca «Flow».
El chrome
Hanken Grotesk · 400 / 500 / 600Grabar · Publicar · Seguir · Ajustes
Sans para la interfaz: botones, labels, navegación.
Los datos
Space Mono · 400 / 70002:47 · 1.2k · 18+ · hace 3 min
Mono para lo medido: duraciones, contadores, timestamps.
Movimiento
Calmo, sin rebote
Todo se mueve con un mismo easing y tres duraciones. Nada rebota. La marca respira; las partículas van a la deriva. Y todo se apaga bajo prefers-reduced-motion.
easing
cubic-bezier(.22,1,.36,1)
duraciones
140 · 240 · 320 ms
respira (hover: inclina)
Sonido
Cinco blips
El sonido de FlowPub son osciladores sine con envolvente exponencial de ~140 ms — nada de samples. Discretos, atados a gestos reales, y siempre con silencio global. Toca para escucharlos.
Portadas
Cuatro direcciones de arte
Cada Flow recibe una portada 16:9 abstracta, generada por semilla —barata, on-brand y determinista— con la paleta bloqueada y grano. Cuatro lenguajes, un mismo códice.
Escher · LeWitt
Isométrico imposible
Turrell
Apertura de luz
Flavin
Neón
Collage 90s
Ben-Day · papel
Voz y tono
Cálido y llano
FlowPub habla en español mexicano: cálido, directo, un poco íntimo —como quien te cuenta algo de cerca—. Sin corporativismo, sin gritar, sin emojis (la única es la vírgula).
Sí
- «Habla hasta 3 minutos y lo volvemos publicación.»
- «Tu voz, siempre disponible: el transcript no se esconde.»
- «Sé la primera voz de este tema.»
No
- «¡SUBE TU CONTENIDO AHORA!» (gritos, signos de más)
- «Leverage nuestra plataforma de audio-publishing.»
- «Haz clic aquí para más información.»
El chrome se traduce ES/EN; el contenido de un Flow se queda en su idioma (con «Traducir» opcional). La unidad es el «Flow»; el timeline es «el Pub».
Descargas
Materiales
Todo lo esencial para usar la marca bien. La vírgula es un SVG exacto; los tokens vienen listos para pegar en CSS o consumir como JSON.
El lockup en SVG usa Fraunces por nombre; para materiales finales, instala Fraunces, Hanken Grotesk y Space Mono (Google Fonts, licencia abierta) o convierte el texto a trazos.