El sistema tiene reglas.
También tiene grietas.
Sistema de diseño para la web de Nicolás Mendive, abogado penalista. Traduce la identidad existente (logo, key visual y maqueta de la home) a un lenguaje de interfaz completo: tokens, componentes, iconografía, movimiento y patrones mobile.
Dirección creativa
La grieta en la columna.
El concepto no se inventó para este sistema: ya estaba en el logo. Una columna dórica, símbolo de la institución, con una grieta de la que sale una paloma. Todo lo que sigue traduce esa idea a pantalla.
La tensión
La marca vive entre dos fuerzas. Institucional: columna, navy profundo, serif clásica, retrato con biblioteca, el "Dr.". Desafiante: la grieta, la paloma, el voseo, la primera persona, la promesa de usar el sistema "en tu favor". No es un estudio jurídico solemne ni un abogado mediático: es alguien que conoce las reglas tan bien que sabe dónde ceden.
Cómo se ve en pantalla
Fondo navy casi negro que da calma en un momento de crisis. Tipografía sans ancha y liviana para todo lo que informa. Serif itálica dorada reservada para una palabra por título: la grieta en el bloque. Verde WhatsApp como única acción que grita. Formas de píldora: nada tiene aristas, porque quien llega está al límite.
Para quién diseñamos
Alguien a quien acaban de detener, allanar o citar, o más frecuentemente un familiar (madre, pareja, hermano) buscando desde el celular, de madrugada, con una mano, con miedo. No compara estudios: busca a alguien que le conteste ahora. Segundo usuario, minoritario: otros abogados que consultan o derivan causas complejas.
Brief asumido. Sin brief formal del cliente, el perfil se infiere de la maqueta ("Detuvieron a tu hijo menor de edad", "Familiar preso: domiciliaria"). Rango de edad, nivel socioeconómico y peso del segundo usuario quedan por confirmar.
El botón de WhatsApp es el único elemento verde del sistema. Todo lo demás es navy, blanco y dorado. En mobile vive fijo en la zona del pulgar.
Lectura con estrés y en movimiento. La maqueta usa el peso 200 para párrafos; el sistema lo admite solo desde 18 px sobre oscuro y usa 300 por defecto.
Las opciones del selector de situación ocupan todo el ancho. Se tocan sin apuntar.
"Escribime un WhatsApp ahora", "Te citaron a declarar". El usuario tiene que reconocerse en la frase, no interpretarla.
Qué convención del rubro se rompe y cuál se respeta
Decisiones clave
Son las dos familias del paquete de marca. NewBlack (sans ancha, sin itálicas) hace todo el trabajo: títulos en 300, cuerpo en 300, botones en 700. Behind The Nineties aparece solo en itálica y solo en una palabra por título, como en la maqueta ("grietas.", "situación?").
El navy pinta superficies enteras (tema base oscuro). El dorado nunca es fondo: es texto de acento, overlines, bordes y el play del video. El verde existe únicamente para la acción de WhatsApp. El beige de la maqueta se convierte en el tema claro completo.
Botones, chips y opciones son píldoras (radio total). Cards y video usan 20 px. Nada tiene esquina viva salvo el logo.
Secciones separadas por 64 a 96 px. Las cards de prueba social van una debajo de otra en mobile, en grilla de 3 en desktop.
120 a 320 ms, easing de salida sin rebote. Un penalista no hace piruetas. La única animación continua es el pulso del botón flotante de WhatsApp.
La foto del cliente es el único recurso fotográfico. Se trata con un degradado navy hacia abajo, como en el hero de la maqueta. Ilustraciones y tramas salen de las estrías, la grieta y el marco octogonal del isotipo.
Decisiones pendientes con el cliente
Cuatro puntos que el material no resuelve y que este sistema asume provisoriamente: (1) el lockup oficial es el serif con "Abogado penalista", porque es el que usa la maqueta web; (2) el dorado es acento, no superficie; (3) el beige es tema claro completo; (4) al tocar una opción del selector de situación se abre WhatsApp con un mensaje prellenado. Cualquiera de las cuatro se puede revertir cambiando tokens, no componentes.
Logo y marca
Una columna, una grieta, una paloma.
Extraído en vector de los archivos de Illustrator del paquete de marca. Dos lockups conviven en el material; el sistema usa el serif porque es el que aparece en la maqueta web.
Reglas de uso en pantalla
| Regla | Valor | Por qué |
|---|---|---|
| Tamaño mínimo lockup | 140 px de ancho (mobile) · 180 px (desktop) | Por debajo, "ABOGADO PENALISTA" deja de leerse. |
| Tamaño mínimo isotipo | 24 px de alto (favicon 32 px) | La grieta y la paloma necesitan ese mínimo para distinguirse. |
| Zona de seguridad | La altura de la "N" del nombre alrededor de todo el lockup | Nada se pega al logo: ni texto, ni botones, ni bordes de foto. |
| Fondos permitidos | navy-900, navy-950, sand-100, blanco, foto con overlay | Sobre foto siempre con el overlay del sistema debajo. |
| Colores del logo | brand-logo-gold #eec985 · brand-logo-navy #121427 | Son primitivos propios; no se usan en interfaz. En UI el dorado es gold-400 y el navy es navy-900. |
| Prohibido | Recolorear el isotipo en verde, rotarlo, separar la paloma, aplicar sombra | El verde es acción, no marca. |
Color
Navy que calma, dorado que señala.
Cada color de marca cae exacto en un paso de su rampa. Los neutros están tintados hacia el beige de la maqueta. Los funcionales se armonizaron con la paleta en lugar de copiarse de una librería.
Colores de marca, tal cual vienen del material
Dos ajustes por accesibilidad. La maqueta pone texto blanco sobre el verde WhatsApp (2.2:1, no pasa AA en ningún tamaño): el sistema usa texto navy sobre el verde (8.5:1). Y usa un dorado apagado #c1ac77 sobre beige (1.9:1): el sistema lo reemplaza por gold-700 en títulos y gold-800 en texto chico.
Semánticos en contexto
Overline en text-accent
Texto primario sobre página
Texto secundario para descripciones.
Texto muted para captions y metadatos.
Link con subrayado que creceCard sobre surface
Borde fino en border-strong, como en la maqueta.
Card raised
Sin borde, con elevación.
Colores de situación
Tres colores con significado propio del dominio. No son funcionales: el rojo de "urgencia" no es "error". Se declaran como tokens semánticos separados para que nadie los mezcle.
Pares de contraste verificados
49 pares declarados en tokens.json y verificados con check_contrast.py. Los más exigidos:
Tipografía
Una sans que informa, una serif que subraya.
NewBlack Typeface hace todo el trabajo: títulos livianos, cuerpo, botones. Behind The Nineties aparece solo en itálica y solo en una palabra por título. Ambas vienen del paquete de marca en woff2 y se sirven localmente.
NewBlack 200
NewBlack 300
NewBlack 400
NewBlack 600
NewBlack 700
Nineties itálica 400
Nineties itálica 500
Nineties itálica 600
Nineties recta 400 (no usar)
Escala con texto real
El sistema tiene reglas. También tiene grietas.
display-xl · NewBlack 300 · clamp(2.5rem, 1.75rem + 3.2vw, 4.5rem) · lh 1.05 · tracking -0.01em · acento: display 400 italic 1.08em¿Cuál es tu situación?
display-lg · NewBlack 300 · clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem) · lh 1.1Por qué conozco el sistema como nadie
heading-1 · NewBlack 300 · clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) · lh 1.15Conocerlas marca la diferencia
heading-2 · NewBlack 700 · clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem) · lh 1.2+10 años litigando todos los días.
heading-3 · NewBlack 700 · clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem) · lh 1.25Detuvieron a un conocido o familiar
heading-4 · NewBlack 600 · 1.0625rem · lh 1.3Soy Dr. Nicolás Mendive, abogado penalista. Brindo defensa urgente ante detenciones, allanamientos, denuncias o declaraciones. Conozco el sistema desde adentro y sé cómo usarlo en tu favor.
body-lg · NewBlack 300 · 1.125rem · lh 1.55 · (peso 200 admitido solo ≥18 px sobre oscuro)Sus procedimientos, sus criterios, sus tiempos. Estrategias con eficacia comprobada por personas que hoy están libres y reincorporadas a su vida.
body · NewBlack 300 · 1rem · lh 1.55Consulta gratuita y confidencial las 24 hs. Respuesta en minutos.
body-sm · NewBlack 400 · 0.875rem · lh 1.5Dr. Nicolás Mendive · Defensa penal
caption · NewBlack 400 · 0.8125rem · lh 1.4 · tracking 0.01emSé lo que te está pasando o a tu familia
overline · NewBlack 300 · 0.8125rem · uppercase · tracking 0.2em · color text-accentEscribime un WhatsApp ahora
button-lg · NewBlack 700 · 1.125rem · lh 1 · (button-md 1rem · button-sm 0.875rem/600)Te allanaron o te secuestraron el celular
option · NewBlack 600 · 1rem · lh 1.3 · opciones del selector de situaciónDefensa penal · CABA y GBA
chip · NewBlack 300 · 0.75rem · tracking 0.02emReglas del dúo
La itálica dorada funciona por escasez. "grietas.", "situación?", "subraya." Si dos palabras van en serif en el mismo título, se pierde el efecto de grieta.
Behind The Nineties tiene la altura de x más baja; el 8 % extra la iguala ópticamente a NewBlack.
Es la lógica de la maqueta: el hero es liviano y aireado, las cards de prueba social son bold y densas. La inversión respecto de lo habitual es parte de la identidad.
NewBlack no tiene itálicas: si hace falta énfasis, se usa peso 600 o el acento serif. Los pesos disponibles son exactamente 200, 300, 400, 600 y 700.
Las dos familias vienen de Envato Elements, sin archivo de licencia en el paquete. Hay que registrar el uso web en el proyecto de Envato antes de publicar.
Espaciado y forma
Aire entre bloques, píldoras en las manos.
Escala base de 4 px. Radios de píldora para todo lo que se toca, 20 px para lo que contiene. En tema oscuro la elevación se marca con bordes finos, no con sombras.
Espaciado
Radios
sm inputs chicos, badges, code · md inputs, alerts, menús · lg cards, video, hero, modales · full botones, chips, opciones del selector, avatar
Elevación
Grilla y breakpoints
| Token | Valor | Qué cambia |
|---|---|---|
bp-sm | 480 px | Los botones del hero dejan de ser full-width y se ponen lado a lado. |
bp-md | 768 px | Aparece la navegación horizontal; cards de prueba social en 2 columnas; footer en 3 columnas; el CTA banner pasa a 2 columnas. |
bp-lg | 1024 px | Cards en 3 columnas; la guía muestra su sidebar; el selector de situación puede ir en 3 columnas. |
bp-xl | 1280 px | Los clamp() tipográficos llegan a su máximo. Contenedor de 1200 px. |
container-sm/md/lg | 640 / 960 / 1200 px | Texto largo en sm, secciones en md, hero y grillas en lg. Padding lateral 16 px (mobile) y 32 px (≥768). |
Iconografía
Trazo fino, como las estrías de la columna.
Un solo estilo: outline de 1.5 px, esquinas redondeadas, viewBox 24×24, color heredado del texto. Toda acción lleva icono. Los iconos del dominio (detención, allanamiento, citación, tribunal) son los que le dan personalidad al set.
Tamaños y aplicación
Cómo usar el sprite
<!-- una vez, al inicio del body: el sprite completo --> <svg style="display:none"><symbol id="i-whatsapp" viewBox="0 0 24 24">...</symbol></svg> <!-- en cualquier lugar --> <svg class="icon"><use href="#i-whatsapp"/></svg> <svg class="icon icon-lg"><use href="#i-court"/></svg>
Imagen e ilustración
Un retrato real y motivos que salen del isotipo.
Todas las fotos son de Nicolás, en su estudio o en los medios. Ninguna de stock. Seis fotos reveladas con el mismo tratamiento y recortadas para cada componente forman el sistema. Las ilustraciones y tramas repiten las estrías, la grieta y el marco octogonal del logo.
Sistema de fotos
Revelado de marca
Baja el color de la foto de celular sin llegar al blanco y negro.
22 % con máscara (1−luma)². Las sombras se funden con el fondo de la web.
Máscara luma³. Une la piel y la lámpara con el acento de marca.
Es un pipeline, no un filtro a ojo. Toda foto nueva pasa por el mismo script (fotos_pipeline.py) y sale con los mismos recortes. Los originales quedan intactos en fotos/_originales/.
Recortes por componente
| Componente | Foto y recorte | Tratamiento encima |
|---|---|---|
| Hero mobile | 01 · hero-mobile | overlay-photo: degradado a navy desde el 30 %. Texto en el tercio inferior. |
| Hero desktop | 02 · hero-desktop | Degradado lateral navy → transparente. Texto a la izquierda, cara a la derecha. |
| Poster de video | 04 · square (o el frame real del video) | Oscurecido 40 % + play dorado. |
| Video formato historia | 03 · story | Degradado navy arriba y abajo para los segmentos y la cita. |
| Cards de blog | 02, 03, 05 · card, rotando; nunca la misma foto en dos cards contiguas | Degradado al pie del 50 % para el chip. |
| Avatar (comentarios, tab bar, historia) | 01 · avatar | Borde dorado de 2 px. |
| Tira de prensa / banner "en los medios" | 06 · wide | Overlay navy 60 % y logos de medios encima. |
| Contacto, about | 03 · square / 02 · card | Sin overlay, con borde del sistema. |
Qué falta pedir. Fotos en tribunales o en la calle (contexto de urgencia), una foto con el equipo si lo hay, y versiones horizontales de 01 y 03. Se piden con aire alrededor, luz natural y sin retoque: el pipeline hace el resto.
Tramas
Regla. La trama acompaña, nunca compite. Sobre texto largo va la variante sutil o no va. Se dibuja con currentColor: el color lo da el contenedor.
Ilustraciones de marca
Tratamiento sobre la foto
Qué no hacer. Nada de balanzas, martillos, esposas, patrulleros ni alambres de púa de stock: el sitio anterior los tenía y quedan afuera. Nada de blanco y negro dramático. Solo fotos reales de Nicolás y su contexto, reveladas con el pipeline.
Movimiento y micro-interacciones
Rápido, seco, sin piruetas.
Tres duraciones, dos easings. Lo único que se mueve solo es el pulso del botón flotante de WhatsApp. Todo lo demás responde a la mano. Con prefers-reduced-motion quedan solo los fundidos.
| Token | Valor | Uso |
|---|---|---|
duration-fast | 120 ms | Hover, focus, color, presión de botón. |
duration-base | 200 ms | Desplazamiento de iconos, subrayados, indicador de tabs, tooltip. |
duration-slow | 320 ms | Acordeones, drawer mobile, reveal al scroll, toast. |
ease-out | cubic-bezier(0.2, 0, 0, 1) | Casi todo. Arranca rápido y frena sin rebote. |
ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | Cambios de tema y transiciones de fondo. |
| spring (excepción) | cubic-bezier(0.34, 1.3, 0.64, 1) | Solo el switch y la entrada del toast: un leve sobrepaso que confirma la acción. |
Catálogo con demos
Pasá el mouse
translateY(-3px) + elevation-3
Las secciones de esta guía entran con fade + rise de 16 px y stagger de 60 ms entre hijos. Es la demo.
Componentes
Todo construido con tokens, nada suelto.
Cada componente se muestra en todos sus estados con HTML real. Si un componente necesitara un valor que no existe como token, el token se agrega al sistema. Los snippets se copian tal cual.
Acciones
Código
<a class="mv-btn mv-btn--primary mv-btn--lg" href="https://wa.me/549..."> <svg class="icon icon-lg"><use href="#i-whatsapp"/></svg> Escribime un WhatsApp ahora <svg class="icon icon-slide"><use href="#i-arrow-right"/></svg> </a> <a class="mv-btn mv-btn--secondary mv-btn--lg" href="tel:+549..."> <svg class="icon icon-lg"><use href="#i-phone"/></svg>Llamame </a> <button class="mv-btn mv-btn--primary is-loading">Enviando</button> <button class="mv-btn mv-btn--primary" disabled>Deshabilitado</button>
Código
<a class="mv-link" href="#">Ver mi situación<svg class="icon icon-sm"><use href="#i-arrow-right"/></svg></a>
Formularios
Código
<div class="mv-field is-error"> <label class="mv-label" for="tel">Tu WhatsApp <span class="req">*</span></label> <input class="mv-input" id="tel" type="tel" aria-invalid="true" aria-describedby="tel-e"> <span class="mv-error" id="tel-e"><svg class="icon icon-sm"><use href="#i-alert"/></svg>Faltan números.</span> </div>
Código
<label class="mv-check"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24"><path d="m5 12 5 5L20 7"/></svg></span>Quiero que me llamen</label> <label class="mv-radio"><input type="radio" name="r"><span class="dot"></span>Es para mí</label> <label class="mv-switch"><input type="checkbox"><span class="track"></span>Avisarme por WhatsApp</label>
Contención
Trabajé junto a ex jueces federales.
Aprendí el sistema desde adentro.
Card flat
Borde en border-default. Para listas y contenido secundario.
Card raised
Superficie más clara y elevación 2. Para destacar sin borde.
Código
<div class="mv-container">
<div class="mv-card">
<p class="mv-card__title">Trabajé junto a ex jueces federales.</p>
<p class="mv-card__text">Aprendí el sistema desde adentro.</p>
</div>
<hr class="mv-divider">
</div>Feedback
Código
<div class="mv-alert mv-alert--success" role="status"> <svg class="icon"><use href="#i-check-circle"/></svg> <div><strong>Mensaje enviado</strong>Te respondo en minutos por WhatsApp.</div> </div>
Código
<span class="mv-chip">Defensa penal · CABA y GBA</span> <span class="mv-chip mv-chip--gold"><svg class="icon icon-sm"><use href="#i-clock-24"/></svg>Atención 24 hs</span> <span class="mv-badge mv-badge--danger">Urgente</span> <div class="mv-toast" role="status">Copiado al portapapeles</div> <div class="mv-skeleton" style="height:16px;width:70%"></div>
Todavía no hay mensajes
Cuando alguien escriba por el selector de situación, aparece acá.
Overlay
¿Te abro WhatsApp?
Va a abrirse un chat con el mensaje "Hola Nicolás, detuvieron a un familiar" ya escrito. Vos lo revisás y lo mandás.
Código
<div class="mv-modal" role="dialog" aria-modal="true" aria-labelledby="t"> <div class="mv-modal__head"><p class="t-h3" id="t">¿Te abro WhatsApp?</p><button class="mv-iconbtn" aria-label="Cerrar">...</button></div> <p class="t-body t-secondary">...</p> <div class="mv-modal__actions"><button class="mv-btn mv-btn--ghost">Cancelar</button><button class="mv-btn mv-btn--primary">Abrir WhatsApp</button></div> </div>
Código
<div class="mv-menu" role="menu"> <a class="mv-menu__item" role="menuitem" href="#"><svg class="icon"><use href="#i-whatsapp"/></svg>Escribir por WhatsApp</a> </div> <div class="mv-tooltip"><button aria-describedby="tt">?</button><span class="mv-tooltip__bubble" role="tooltip" id="tt">Ayuda</span></div>
Navegación
Código
<header class="mv-navbar"> <a href="/"><svg viewBox="0 0 2068 901" style="width:150px"><use href="#logo-serif-color"/></svg></a> <ul class="mv-navbar__links"><li><a href="#situacion">Tu situación</a></li>...</ul> <a class="mv-btn mv-btn--primary mv-btn--sm" href="https://wa.me/...">WhatsApp</a> </header> <div class="mv-tabs" role="tablist"><button role="tab" aria-selected="true">Urgencias</button>...<span class="mv-tabs__ind"></span></div>
Ritmo: bloques de contraste
Código
<div class="mv-announce"><svg class="icon icon-sm"><use href="#i-clock-24"/></svg>Consulta gratuita y confidencial las 24 hs</div> <section class="mv-cta-banner"> <svg class="mv-pattern"><rect width="100%" height="100%" fill="url(#trama-estrias)"/></svg> <div><p class="t-h2">¿Detuvieron a alguien? No esperes a mañana.</p></div> <a class="mv-btn mv-btn--primary" href="...">Escribime</a> </section> <section class="mv-stat-band"><div class="mv-stat-band__grid"><div class="mv-stat"><span class="mv-stat__num">+10</span><span class="mv-stat__label">años</span></div></div></section>
Web institucional
El sistema tiene reglas.
También tiene grietas.
Conocerlas marca la diferencia
Soy Dr. Nicolás Mendive, abogado penalista. Brindo defensa urgente ante detenciones, allanamientos, denuncias o declaraciones. Conozco el sistema desde adentro y sé cómo usarlo en tu favor.
Consulta gratuita y confidencial las 24 hs. Respuesta en minutos.
Código
<section class="mv-hero">
<div class="mv-hero__photo" style="background-image:url(retrato.webp);background-size:cover;background-position:top"></div>
<div class="mv-hero__top"><a href="/">[logo]</a><a class="mv-btn mv-btn--primary mv-btn--sm" href="...">WhatsApp</a></div>
<div class="mv-hero__body">
<span class="mv-chip">Defensa penal · CABA y GBA</span>
<h1 class="t-display-xl">El sistema tiene reglas.<br><span class="t-accent">También tiene grietas.</span></h1>
<p class="t-h2">Conocerlas marca la diferencia</p>
<p class="t-body-lg">Soy Dr. Nicolás Mendive...</p>
<div class="mv-hero__actions">[btn primary lg] [btn secondary lg]</div>
<p class="mv-hero__note">Consulta gratuita y confidencial las 24 hs.</p>
</div>
</section>Por qué conozco el sistema como nadie
+10 años litigando todos los días.
No es teoría: es experiencia real.
Trabajé junto a ex jueces federales.
Aprendí el sistema desde adentro.
Defendí a un juez en ejercicio.
Conozco los juzgados y fiscalías de CABA, GBA y otros puntos del país.
Sus procedimientos, sus criterios, sus tiempos.
Estrategias con eficacia comprobada
por personas que hoy están libres y reincorporadas a su vida.
Otros abogados penalistas me consultan
en causas de alta complejidad.
Sé lo que te está pasando o a tu familia
¿Cuál es tu situación?
Identificá la que más se parezca a lo tuyo y te explico cómo seguir.
Código
<div class="mv-situacion">
<div class="mv-situacion__cat mv-situacion__cat--urgencia is-open">
<button class="mv-situacion__head" aria-expanded="true" aria-controls="s1">
Te pasó o llegó algo <svg class="icon"><use href="#i-chevron-down"/></svg>
</button>
<ul class="mv-situacion__list" id="s1">
<li><a class="mv-situacion__opt" href="https://wa.me/549...?text=Hola%20Nicol%C3%A1s%2C%20detuvieron%20a%20un%20familiar">Detuvieron a un conocido o familiar</a></li>
</ul>
</div>
<div class="mv-situacion__cat mv-situacion__cat--acusacion">...</div>
<div class="mv-situacion__cat mv-situacion__cat--revision">...</div>
</div>
<!-- JS: al click en .mv-situacion__head, togglear .is-open en su .mv-situacion__cat y cerrar las demás -->Me llamó a los diez minutos, a las tres de la mañana. Al otro día mi hermano estaba en casa.Familiar de un defendido · Lomas de Zamora
¿La consulta tiene costo?
No. La primera consulta es gratuita y confidencial, las 24 horas.
¿Atendés fuera de CABA y GBA?
Sí, conozco juzgados y fiscalías de otros puntos del país.
¿Qué hago si están deteniendo a alguien ahora?
Que no declare nada. Escribime o llamame en este momento.
Blog y admin del blog
Notas que explican el sistema, y un panel para escribirlas.
El blog es la cara pública: cards con portada, categoría y tiempo de lectura. El admin es la herramienta interna: tabla de notas, editor y estados de publicación. Los dos salen de los mismos tokens; el admin sube la densidad y usa números tabulares.
Cards de blog
Detuvieron a un familiar: qué hacer en las primeras 24 horas
Las primeras horas definen la causa. Qué pedir en la comisaría, qué no firmar, y por qué la persona detenida no tiene que declarar hasta hablar con su abogado.
Leer la notaTe secuestraron el celular: qué pueden ver y qué no
La orden de allanamiento tiene límites. Cuáles son y cómo se controlan después.
LeerTe citaron a declarar: la diferencia entre testigo e imputado
Una citación no es una acusación, pero hay que leerla bien antes de ir.
LeerDomiciliaria, condicional o traslado: qué se puede pedir y cuándo
Tres herramientas distintas para tres momentos distintos de la condena.
LeerCódigo
<div class="mv-post-grid">
<a class="mv-post mv-post--featured" href="/blog/detuvieron-a-un-familiar">
<div class="mv-post__cover" style="background-image:url(portada.webp)"><span class="mv-chip">Detenciones</span></div>
<div class="mv-post__body">
<div class="mv-post__meta"><span>28 ago 2026</span><span>6 min de lectura</span></div>
<h3 class="mv-post__title">Detuvieron a un familiar: qué hacer en las primeras 24 horas</h3>
<p class="mv-post__excerpt">...</p>
<span class="mv-link mv-post__link">Leer la nota<svg class="icon icon-sm"><use href="#i-arrow-right"/></svg></span>
</div>
</a>
<a class="mv-post" href="...">...</a>
</div>Admin del blog
Producto interno. Lo usa Nicolás o alguien del equipo, sentado, con calma. Por eso sube la densidad: tipografía de 14 px en tablas, filas de 48 px, hover rico, números tabulares. Los tokens son los mismos; cambia la escala.
Notas del blog
| Categoría | Estado | Lecturas | ||||
|---|---|---|---|---|---|---|
| Detuvieron a un familiar: qué hacer en las primeras 24 horas/blog/detuvieron-a-un-familiar | Detenciones | Publicada | 28 ago 2026 | 2.318 | ||
| Te secuestraron el celular: qué pueden ver y qué no/blog/secuestro-de-celular | Allanamientos | Publicada | 21 ago 2026 | 1.904 | ||
| Restricción perimetral: qué implica y cómo se cumple/blog/restriccion-perimetral | Denuncias | Programada | 5 sep 2026 · 09:00 | — | ||
| Te mandaron a juicio: cómo se prepara una defensa/blog/juicio-oral | Juicio | Borrador | hace 2 días | — | ||
| Domiciliaria, condicional o traslado/blog/domiciliaria-condicional-traslado | Familiar preso | Publicada | 7 ago 2026 | 3.117 |
Código
<div class="mv-admin">
<aside class="mv-admin__side"><a href="/admin/notas" class="is-active"><svg class="icon"><use href="#i-document"/></svg>Notas</a>...</aside>
<div class="mv-admin__main">
<div class="mv-kpis"><div class="mv-kpi"><span class="mv-kpi__label">Publicadas</span><span class="mv-kpi__num">24</span></div>...</div>
<div class="mv-table-wrap"><table class="mv-table">
<thead><tr><th>Título</th><th>Estado</th><th class="num">Lecturas</th></tr></thead>
<tbody><tr><td><span class="title">...</span></td><td><span class="mv-status mv-status--pub">Publicada</span></td><td class="num">2.318</td></tr></tbody>
</table></div>
</div>
</div>Editar nota
Código
<form class="mv-editor">
<div>
<div class="mv-field"><label class="mv-label" for="t">Título</label><input class="mv-input" id="t"></div>
<div class="mv-field"><label class="mv-label" for="c">Contenido</label><textarea class="mv-textarea" id="c"></textarea></div>
</div>
<aside class="mv-editor__side">
<div class="mv-card mv-card--flat"><label class="mv-switch"><input type="checkbox"><span class="track"></span>Publicada</label></div>
<div class="mv-card mv-card--flat"><div class="mv-upload">Arrastrá una imagen</div></div>
</aside>
</form>Reglas del admin
Tabla en body-sm (14 px), filas de 48 px, KPI en 28 px bold con números tabulares. Nada de esto se usa en la web pública.
Publicada en success, Programada en warning, Borrador en muted. Nunca los colores de situación: acá el rojo es solo para eliminar.
Cada nota lleva categoría y "situación relacionada". Así la home puede mostrar la nota correcta debajo de cada opción, y el admin mide qué notas generan consultas.
"Borrador · guardado hace 1 min" siempre en la cabecera. Publicar pide confirmación en modal; eliminar también.
El sidebar pasa a drawer, las KPI a 2 columnas, la tabla scrollea horizontalmente dentro de su contenedor y el editor apila la columna lateral debajo del contenido.
Mobile
Todo lo importante a un pulgar de distancia.
La maqueta es mobile. El sistema también. WhatsApp y Llamar viven abajo, en la zona del pulgar. Dos opciones de navegación: drawer o tab bar tipo app (la sugerida). Las cards se deslizan en carrusel con indicadores y los testimonios en video van en formato historia.
El sistema tiene reglas. También tiene grietas.
Soy Dr. Nicolás Mendive, abogado penalista. Brindo defensa urgente.
Menú drawer. Tocá el menú. Entra desde la derecha en 320 ms, con las dos acciones al final.
Por qué conozco el sistema
+10 años litigando todos los días.
No es teoría: es experiencia real.
Trabajé junto a ex jueces federales.
Aprendí el sistema desde adentro.
Defendí a un juez en ejercicio.
Y a personas que hoy están libres.
Otros penalistas me consultan.
En causas de alta complejidad.
Notas recientes
Detuvieron a un familiar: las primeras 24 horas
Carrusel con indicadores + barra inferior. Las cards se deslizan con snap y misma altura. Debajo, barra de progreso y puntos tocables que muestran dónde estás. Deslizá para probarlo.
Lo que dicen de él
"Me llamó a los diez minutos, a las tres de la mañana."
Familiar de un defendido · Lomas de ZamoraVideo formato historia. 9:16 como historia de Instagram o Short de YouTube: segmentos arriba, avatar y handle, cita al pie. Los testimonios cortos se cargan tal cual se graban con el celular.
Sé lo que te está pasando
¿Cuál es tu situación?
Menú tipo app (sugerido). Tab bar fija con cinco destinos y WhatsApp como botón central elevado. Reemplaza al drawer: la navegación queda siempre visible y en la zona del pulgar. Convive con el botón Llamar en la cabecera de cada sección.
Zona de pulgar. Las acciones primarias viven en el 38 % inferior. Nada crítico arriba a la izquierda.
Reglas táctiles
| Regla | Valor | Componentes afectados |
|---|---|---|
| Target mínimo | 44 × 44 px (tap-target) | Botones, icon buttons, opciones del selector (52 px), items de menú, checks y radios (toda la fila). |
| Fuente en inputs | ≥ 16 px | Input, select, textarea. Evita el zoom automático de iOS al enfocar. |
| Safe areas | env(safe-area-inset-bottom) sumado al padding de la barra inferior | Bottom bar, FAB, drawer. |
| Scroll horizontal | scroll-snap-type: x mandatory, items al 82 % | Cards de prueba social, tira de prensa si crece. |
| Hero en pantalla chica | Foto 4:5, texto en el tercio inferior, CTAs full-width apilados | Hero. |
| Selector de situación | Una categoría abierta a la vez; al abrir, scroll suave hasta el título de la categoría | Selector de situación. |
| Gestos | Swipe para cerrar el drawer; sin pull-to-refresh (es web, no app) | Drawer. |
| Navegación principal | Dos opciones: drawer (menú oculto, más limpio) o tab bar tipo app (siempre visible, WhatsApp al centro). Recomendación: tab bar, porque el usuario en crisis no busca menús. | Drawer, Tab bar. |
| Carrusel | Snap obligatorio, barra de progreso y puntos tocables; nunca autoplay | Cards de prueba social, testimonios en video, notas del blog. |
| Video vertical | 9:16, máximo 320 px de ancho, sin autoplay con sonido; poster + play | Testimonios formato historia. |
Composiciones
La home, armada solo con el sistema.
Es la maqueta de la home reconstruida con los componentes de esta guía, más la tira de prensa de la web actual y un cierre con CTA. Abajo, la misma home en un teléfono.
El sistema tiene reglas.
También tiene grietas.
Conocerlas marca la diferencia
Soy Dr. Nicolás Mendive, abogado penalista. Brindo defensa urgente ante detenciones, allanamientos, denuncias o declaraciones. Conozco el sistema desde adentro y sé cómo usarlo en tu favor.
Consulta gratuita y confidencial las 24 hs. Respuesta en minutos.
Por qué conozco el sistema como nadie
+10 años litigando todos los días.
No es teoría: es experiencia real.
Trabajé junto a ex jueces federales.
Aprendí el sistema desde adentro.
Defendí a un juez en ejercicio.
Conozco los juzgados y fiscalías de CABA, GBA y otros puntos del país.
Sus procedimientos, sus criterios, sus tiempos.
Estrategias con eficacia comprobada
por personas que hoy están libres y reincorporadas a su vida.
Otros abogados penalistas me consultan
en causas de alta complejidad.
Sé lo que te está pasando o a tu familia
¿Cuál es tu situación?
Identificá la que más se parezca a lo tuyo y te explico cómo seguir.
La misma home en el teléfono
El sistema tiene reglas.
También tiene grietas.
Soy Dr. Nicolás Mendive, abogado penalista. Defensa urgente ante detenciones, allanamientos, denuncias o declaraciones.
Por qué conozco el sistema
+10 años litigando todos los días.
No es teoría: es experiencia real.
Trabajé junto a ex jueces federales.
Aprendí el sistema desde adentro.
Defendí a un juez en ejercicio.
Sé lo que te está pasando
¿Cuál es tu situación?
Voz de interfaz
Primera persona, voseo, frases cortas.
La voz sale de la maqueta: "Escribime", "Llamame", "Identificá", "te explico cómo seguir". Habla Nicolás, no "el estudio". Quien lee está asustado: cada palabra tiene que bajar la ansiedad, no subirla.
"Escribime un WhatsApp ahora" · "Te citaron a declarar" · "Conozco el sistema desde adentro" · "No declares nada hasta hablar con un abogado" · "Te respondo en minutos"
"Contáctenos" · "Nuestro estudio ofrece asesoramiento integral" · "Solicite una consulta" · "Servicios jurídicos" · jerga procesal sin explicar ("indagatoria", "excarcelación") en botones o títulos
Voseo argentino con imperativos: escribime, llamame, contame, identificá. Nunca "usted", nunca tuteo.
Las situaciones críticas (detención en curso) usan el alert warning con una instrucción concreta antes de cualquier formulario.
| Momento | Microcopy |
|---|---|
| Éxito al enviar | Listo. Te respondo en minutos por WhatsApp. |
| Error de envío | No pudimos enviar el mensaje. Probá de nuevo o escribime directo por WhatsApp. |
| Campo vacío obligatorio | Necesito tu WhatsApp para responderte. |
| Teléfono mal escrito | Faltan números. Tiene que ser como 11 2345 6789. |
| Estado vacío | Todavía no hay mensajes. Cuando alguien escriba, aparece acá. |
| Confirmación antes de WhatsApp | Va a abrirse un chat con el mensaje ya escrito. Vos lo revisás y lo mandás. |
| Cargando | Enviando… |
| Fuera de horario (no aplica) | Atiendo las 24 hs. No hay "fuera de horario". |
Para desarrollo
Tokens primero, componentes después, nada hardcodeado.
Tres archivos: tokens.json (fuente de verdad, formato W3C Design Tokens), tokens.css (custom properties listas) y esta guía. Las fuentes woff2 están en fonts/.
Empezar
<!-- 1. tokens y fuentes -->
<link rel="stylesheet" href="tokens.css">
<!-- 2. tema: oscuro por defecto; claro con data-theme -->
<html lang="es-AR" data-theme="dark">
<html lang="es-AR" data-theme="light">
<!-- 3. el sprite de iconos y los símbolos del logo,
copiados de esta guía, una vez al inicio del body -->
<!-- 4. componentes: solo tokens -->
.mi-componente {
background: var(--color-bg-surface);
color: var(--color-text-primary);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
transition: transform var(--duration-base) var(--ease-out);
}Primitivos: --navy-900, --space-4, --radius-lg. Semánticos: --color-bg-page, --color-text-accent, --color-action-primary. Dominio: --color-situacion-urgencia. Los componentes usan solo semánticos.
No se escribe un hex ni un px suelto. Se agrega el token a tokens.json y tokens.css con nombre semántico, se declara su par de contraste si es texto/fondo, y se corre check_contrast.py.
El oscuro es el base (:root). El claro se activa con data-theme="light" en html. No hay inversión automática: cada semántico se mapeó a mano.
Autohospedadas en woff2 con font-display: swap. Precargar NewBlack Light y Bold y Nineties Italic (son las del hero). Licencia Envato Elements: registrar el proyecto.
49 pares de contraste verificados. Focus visible dorado en todo lo interactivo. prefers-reduced-motion anula duraciones. Targets de 44 px. aria-expanded en el selector, aria-label en icon buttons.
WhatsApp: https://wa.me/549XXXXXXXXX?text=... con el mensaje prellenado por situación. Teléfono: tel:+549.... Los números reales están pendientes.