Consultoría
Criterio antes de construir
Diagnóstico y hoja de ruta para decidir dónde actuar primero en el canal digital.
Ver servicio →Referencia visual
Guía de estilos MOWOMO 2026
Fuente de verdad viva del sistema visual: crece cuando se añade o estandariza un componente. Tipografía, color, enlaces, botones, tags, avatares, chrome, blog, formularios y CTA de cierre — no inventar variantes fuera de esta página.
.page-hero h1 · max-width:820px (medida editorial) · .lede conserva medida de lectura (~600px) · no limitar el H1 con contentSize del editor · logos / uso de marca → /marca/ (entrada humana: footer)
Color
Variables CSS de :root en theme.css. Usar siempre var(--token).
--bg
--paper
--bg-soft
--bg-soft-2
--ink
--ink-deep
--blue
--blue-deep
--violet
--green
--amber
--grad
Tipografía
Escala editorial: H1 página, H2 sección, H3 tarjeta / panel, lede, body, eyebrow.
Desde 1998 creando negocios digitales
class="eyebrow" · --type-eyebrow (15px) · Space Grotesk 600 · color --blue
A favor
- Ejemplo de etiqueta de columna
A tener en cuenta
- Misma clase, contexto tech-guide
.eyebrow en .tech-guide__cols (labels) · también h3.eyebrow (nombre de servicio) · Home: .hero-copy > .eyebrow.hero-eyebrow · no usar .eyebrow suelto en .page-hero / .section-head (se oculta)
Titular de página (H1)
h1 · --type-page-title / --type-h1 · en .page-hero max-width:820px
Titular de sección (H2)
h2 · --type-section-title / --type-h2
Titular de bloque (H3)
h3 · --type-card-title / --type-h3
El lede acompaña al titular: criterio, contexto y promesa en una o dos frases. No compite con el H1.
class="lede" · --type-lede (18px)
Texto de cuerpo: Inter 16px, color tinta, medida cómoda. Usar para párrafos de apoyo, no para CTAs.
p (body) · --type-body (16px)
Enlaces
Regla: enlaces textuales (nav, footer, .go, .btn-ghost) = Inter 500, blue-deep, sin underline en reposo y underline animado 2px en hover/focus (como el nav). Botones .btn-solid / .btn-outline / .nav-item--cta / .team-card__more = nunca underline de prosa. El control cuadrado .team-card__more comparte el chrome sólido del CTA del header — ver Botones / Equipo. No convertir todo <a> en .go. Enlaces de prosa del contenido llevan underline estático (excluyendo botones).
class="go" · CTA textual en fichas / índice (siempre con →) · underline animado
class="go" · patrón textual (archivo A); live equipo usa botón .team-card__more
class="btn-ghost" · CTA de section-head (Home); mismo underline que .go — no mezclar ambas clases
Botones
Variantes usadas en Home, header y CTAs. No inventar radios ni fills nuevos. .btn-solid / .btn-outline / .btn-pill-accent / .nav-item--cta no llevan underline. El + de ficha de equipo (.team-card__more) usa el mismo chrome sólido azul del CTA del header, con esquinas cuadradas (border-radius: 0) e inverso en hover/focus.
class="btn-solid" · class="btn-outline" · class="btn-ghost" · class="btn-pill-accent" (CTA header)
class="team-card__more" · botón cuadrado · chrome = header .nav-item--cta (azul sólido, + blanco, inverso en hover/focus) · border-radius: 0 · no es .go
Tags editoriales
Etiquetas de servicios, tecnologías y casos — no pills SaaS.
class="mw-tags" > class="mw-tag" · --radius-tag, --bg-soft, padding 6×12 · casos: helper mowomo_render_case_term_tags() + post-terms tecnologia_proyecto className="mw-tags" (no tech-pills / case-tags)
Tags en tarjeta de caso
Servicios + tecnologías como .mw-tag (spans) dentro del enlace de la card.
ATM
bloque mowomo/case-card-preview · .case-info > .mw-tags > span.mw-tag · servicios → tecnologías · sin <a> anidados
Caso de éxito (ficha)
Componentes canónicos de single-proyecto: testimonio editorial (solo con quote real) y navegación con .go.
Lo que opina el cliente
Ejemplo de cita editorial: sin tarjeta SaaS, borde izquierdo y tipografía de lectura.
bloque mowomo/case-testimonial · class="case-testimonial" · oculto si meta vacío o placeholder
bloque mowomo/case-navigation · class="case-nav-links" > a.go · blue-deep + underline (sin override ink/600)
Chrome de sección
Cabecera editorial: título a la izquierda, lede a la derecha. Contenedor .wrap.
Ejemplo de section-head
Lede de apoyo alineado a la derecha en desktop: una frase que enmarca el bloque sin repetir el titular.
class="section-head" · class="wrap" · class="page-hero" (muestra arriba)
Variante section-head–cases
Misma idea en columna: título + lede en fila interna.
class="section-head section-head--cases" > class="section-head__row"
Jerarquía ficha / índice de servicio
Nombre primero; slogan después; lede de propósito al final.
h3.eyebrow (nombre) · .services-index__dek (slogan) · .services-index__phrase · .go
Consultoría
Criterio antes de construir
Diagnóstico y hoja de ruta para decidir dónde actuar primero en el canal digital.
page-hero: h1 (nombre) · class="service-dek" (slogan) · class="lede"
Equipo · ficha (live / B)
Retrato con regla — canónico en Nosotros. Padding fino var(--bg) alrededor de la foto, regla 1px var(--line), luego nombre → rol → última línea .team-card__footer con botón cuadrado + (.team-card__more) a la derecha: mismo chrome sólido que el CTA del header (.nav-item--cta), esquinas cuadradas, inverso en hover/focus de la ficha. Nombre y rol sin underline. Sin texto «Ver perfil», sin polaroid, sin radio, sin sombra, sin tilt.
Víctor Sáenz
CEOB · live Nosotros · .team-card · ruled · foto + regla · h3 · .team-role · .team-card__footer (.team-card__more = chrome CTA header, radius 0)
Team card — archive
Archivo de alternativas. Canónico live = B en .team-card. A quedó rechazada; C (polaroid) ya no es el estilo en producción. Specimens sg-team-card — no sustituyen el live.
Foto edge-to-edge · sin marco · sin radio · sin tilt · sin sombra · aire tipográfico bajo la foto
Víctor Sáenz
CEOPadding fino color página (var(–bg)) · regla 1px var(–line) bajo foto · rol · footer botón + (.team-card__more · chrome CTA header, radius 0) der. · portado a .team-card
.sg-team-card--editorial (A rechazada) · .sg-team-card--ruled (referencia B) · live = .team-card
Manifiesto (columna)
Fragmento de columna editorial — sin tarjetas.
Un aliado, no solo un proveedor
Nos implicamos en tu negocio a largo plazo, con un enfoque cercano y estratégico en cada decisión.
Cuando hace falta priorizar, tensionar un briefing o decir que no, lo hacemos con criterio compartido.
class="manifesto-grid" > class="manifesto-col" · section-why--nosotros
Avatares
Recorte cuadrado editorial (--radius-avatar = --radius-tag, 4px). No círculos. Blog, single y cita del footer usan el token; ficha de equipo live (.team-card) va a radio 0.
.post-author__avatar · .quote-avatar · .team-avatar · token --radius-avatar
Meta de tarjeta de blog
Orden canónico del bloque mowomo/blog-card-preview: imagen → fecha + categoría (misma fila, extremos) → título → regla 1px (var(--line)) → autor + CTA (misma fila, extremos).
Título de ejemplo del artículo
article.post · .meta > .meta__facts (fecha izq. · .mw-tag der.) · h3 · .post__footer (border-block-start var(–line) · autor izq. · .go der. · space-between) · bloque blog-card-preview
Paginación (blog / archivos)
Query Pagination del blog y archivos. Editorial: prev/next como .go; números con borde outline (tokens de .btn-outline). Sin pills ni círculos SaaS. Ritmo vertical: margin-block-start: var(--section-head-gap) (~64px) desde la rejilla, padding-block: 16px, gap de grupo 20px 32px.
class="pagination wp-block-query-pagination" · spacing: –section-head-gap + padding-block · .wp-block-query-pagination-previous / -next · .page-numbers · .page-numbers.current
Formulario
Canónico de /contacto/ (CF7): nombre, email, asunto/reto (desplegable con «Selecciona una opción»; «Otro asunto» abre campo libre) y mensaje. Prefill solo con ?reto= desde Home. Campos requeridos; checkbox RGPD a ancho completo; submit .btn-solid.
Muestra no funcional — el envío real vive en Contact Form 7 en Contacto →. En producción, CF7 valida campos * y el consentimiento (acceptance_as_validation).
class="mw-form contact-form" · Asunto/reto (select) · required en nombre/email/asunto/mensaje · .form-legal (checkbox RGPD full-width) · .form-legal-note · .btn-solid · .form-note
Banner CTA de cierre
Patrón canónico mowomo/contact-cta (patterns/contact-cta.php). Mismo markup en Home, Servicios, Tecnologías y fichas — no inventar variantes.
Siguiente paso
¿Dónde conviene actuar primero en tu canal digital?
Da igual si partes de una ilusión, de una idea de negocio o de un problema concreto. Pedimos una reunión, escuchamos y te devolvemos el siguiente paso más sensato — en menos de 48 horas laborables.
Hablemos de tu proyectoclass="contact-cta" · .contact-cta__inner · .eyebrow.contact-cta__eyebrow · .contact-cta__heading · .contact-cta__support · .btn-solid.contact-cta__button · #siguiente-paso