identidad visual

Brand Book MdPDev.

Guía completa de identidad: logo, colores, tipografía, voz y componentes UI de la comunidad tech de la costa atlántica.

1. Logo 2. Colores 3. Tipografía 4. Voz y tono 5. Componentes 6. Do's & Don'ts

01 — Logo

Logo y variantes

MdPDev

Sobre fondo oscuro

Hero, Navbar, Footer

MdPDev

Sobre fondo claro

Secciones internas, documentos

Escala de tamaños

48px — Normal

40px — Compacto (navbar)

32px — Mínimo

Anatomía del ícono SVG

viewBox="0 0 24 24"  fill="none"  stroke="white"

Cabeza     ellipse  cx="8"   cy="7.5"  rx="4"  ry="3.5"
Ojo        circle   cx="7"   cy="6.5"  r="0.8"
Hocico     path     M11.5 8.5 C13 8 14 8.5 13.5 9.5
Bigotes    path     M11.5 8 L14.5 7   (superior)
           path     M11.5 9 L14.5 9.5 (inferior)
Cuello     path     M6 11 C5.5 13 6 15 7 16
Cuerpo     path     M7 16 C9 17.5 13 18 17 16.5 …
Aleta frt  path     M5.5 14.5 C3.5 15.5 3 17.5 5 18.5
Aletas tr  path     M17.5 17 C19.5 16 21 17.5 19.5 19
           path     M16 17.5 C17 19.5 19 20.5 18 21.5

02 — Colores

Paleta de colores

Ocean — Primaria

Principal

ocean-900

#020030

Hero, footer

ocean-800

#03045E

Navbar scrolled

ocean-700

#023E8A

Gradientes

ocean-600

#0077B6

Botón WhatsApp

ocean-500

#0096C7

Íconos, bordes

ocean-400

#00B4D8

CTA primario

ocean-300

#48CAE4

Gradient-text

ocean-200

#90E0EF

Texto sobre oscuro

ocean-100

#ADE8F4

Badges light

ocean-50

#CAF0F8

Fondos suaves

Sand — Acento cálido

Solo acento

sand-500

#D4B483

Acento fuerte

sand-400

#E9D5A0

Acento medio

sand-300

#F4E4C1

Acento suave

sand-200

#F8EDD8

Fondos cálidos

sand-100

#FEF9EE

Casi blanco

Gradientes y efectos especiales

.bg-transparent

145deg: #020030 → #0077B6

.bg-transparent

180deg: #f0f9ff → #e0f4fb

MdPDev

.gradient-text

135deg: #48CAE4 → #023E8A

03 — Tipografía

Sistema tipográfico

Display

Space Grotesk

Títulos

H1 — 5xl

font-display font-bold text-5xl

H2 — 4xl

font-display font-bold text-4xl

H3 — 2xl

font-display font-bold text-2xl

H4 — lg

font-display font-semibold text-lg

Label uppercase

font-display text-xs tracking-widest uppercase

Body

Inter

Cuerpo

Subtítulo — 2xl

text-2xl leading-relaxed

Copy de sección — lg. Conectamos desarrolladores, diseñadores y emprendedores.

text-lg leading-relaxed

Texto de card y nav — sm medium

text-sm font-medium

Texto secundario y metadatos — xs

text-xs text-white/65

Variables CSS de fuente

--font-sans:    var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;

/* Aplicación en Tailwind */
font-sans     → Inter    (body por defecto)
font-display  → Space Grotesk (headings, wordmark)

04 — Voz y tono

Cómo habla MdPDev

💬

Directo y cercano

Tuteo, primera persona del plural. "Conectamos", "Impulsamos", "Hablemos".

🌊

Local con orgullo

Identidad costera y marplatense. "La costa atlántica", "Ecosistema tech de Mar del Plata".

🤝

Accesible

Sin jerga excesiva, sin tecnicismos innecesarios. Inclusivo para devs de todos los niveles.

⚡

Orientado a la acción

CTAs en imperativo, siempre con destino claro. "Unirse", "Ver Eventos", "Hablemos".

🚀

Optimista

Futuro posible y concreto. No promesas vacías, sino construcción real.

🚫

Lo que NO somos

No somos corporativos, no somos fríos, no somos genéricos ni excluyentes.

Ejemplos de copy

CTA principal

✓

Unirse a la comunidad

Subtítulo hero

✓

Conectamos desarrolladores, diseñadores y emprendedores en Mar del Plata

La plataforma líder de networking tech

Call para colaboradores

✓

¿Tu organización quiere impulsar el tech de la costa?

Oportunidades de patrocinio disponibles

Evento

✓

Un encuentro para conectar y compartir

Networking event for professionals

05 — Componentes

Componentes UI

Botones

Unirse a la comunidad

Primario — CTA principal

bg-ocean-400 hover:bg-ocean-300
text-white px-8 py-4 rounded-full
font-semibold text-lg
hover:shadow-2xl hover:shadow-ocean-400/40
hover:-translate-y-1

Ver Eventos

Secundario — outline (sobre oscuro)

border border-white/12 text-white/65
hover:bg-white/[0.05] hover:text-white
hover:border-white/30
px-8 py-4 rounded-full font-semibold
backdrop-blur-sm hover:-translate-y-1

Hablemos por WhatsApp

WhatsApp — botón de contacto

bg-ocean-600 hover:bg-ocean-700 text-white
px-8 py-4 rounded-full font-semibold text-lg
hover:shadow-xl hover:shadow-ocean-600/30
hover:-translate-y-0.5
+ SVG WhatsApp inline (fill="currentColor")

Unirse a la comunidad

Compacto — Navbar

bg-ocean-400 hover:bg-ocean-300 text-white
px-5 py-2.5 rounded-full
text-sm font-semibold
hover:shadow-lg hover:shadow-ocean-400/40

Cards

EMPLEOS

Compartimos ofertas laborales

Card oscura (hero features)

bg-white/[0.05] backdrop-blur-sm
border border-ocean-600/30
rounded-2xl p-5

Visibilidad

Tu org frente a la comunidad

Card clara (colaboradores)

bg-white/5 border border-white/10
rounded-2xl p-7
hover:-translate-y-1
hover:shadow-lg hover:shadow-ocean-600/10
transition-all duration-300

⭐ Co-fundador

Franco Petruccelli

QA Engineer

Card de equipo

bg-transparent rounded-3xl
border border-white/10 shadow-sm p-7
hover:-translate-y-1.5
hover:shadow-xl hover:shadow-ocean-600/10
transition-all duration-300

Badges

🤝 Colaboradores

Badge de sección (sobre H2)

bg-white/5 text-sky-300
rounded-full px-4 py-2
text-sm font-semibold

Comunidad marplatense

Badge hero (sobre oscuro)

bg-white/[0.05] border border-white/10
backdrop-blur-sm rounded-full
px-5 py-2 text-white/65 text-sm

⭐ Co-fundador

Badge inline (en card)

bg-sky-500/15 text-sky-300
rounded-full px-3 py-1
text-xs font-semibold

06 — Reglas

Do's & Don'ts

Logo

✓ Do

✓Escribir siempre "MdPDev" (M, P y D en mayúsculas)
✓Mantener el ratio cuadrado del contenedor (mínimo 32×32 px)
✓Respetar 8px de espacio libre alrededor del logo
✓Usar el faro únicamente como decoración de fondo del hero

✕ Don't

✕"mdpdev", "MDP Dev" o "Mdp dev" son incorrectos
✕No estirar ni aplanar el contenedor del ícono
✕No superponer otros elementos sobre el logo
✕No usar el faro como ícono de la marca

Color

✓ Do

✓Texto blanco sobre ocean-700 o más oscuro
✓.gradient-text solo sobre fondos blancos o muy claros
✓.bg-transparent únicamente en la sección hero y navbar
✓Sand como acento puntual, nunca como color principal

✕ Don't

✕No usar texto blanco sobre ocean-400 o más claro
✕No aplicar .gradient-text sobre fondos oscuros
✕No reutilizar .bg-transparent en secciones internas
✕No usar sand como fondo de una sección completa

Tipografía

✓ Do

✓Space Grotesk para headings, wordmark y labels de sección
✓Inter para párrafos, nav links y texto de footer
✓tracking-widest en labels uppercase
✓leading-[1.1] en títulos grandes

✕ Don't

✕No mezclar ambas fuentes en el mismo bloque de texto
✕No usar labels uppercase sin tracking extra
✕No usar leading-normal en títulos grandes (queda muy espaciado)
✕No usar font-display en párrafos de texto corrido

Voz

✓ Do

✓"Unirse a la comunidad" como CTA principal
✓"La costa atlántica" para identidad regional
✓Tuteo o primera persona del plural
✓Copy en español siempre

✕ Don't

✕No usar "Join our community" ni inglés para CTAs
✕No usar "la región" (demasiado genérico)
✕No usar tercera persona formal ni lenguaje corporativo
✕No traducir el nombre de la comunidad

07 — Identidad v2

Dos capas, una comunidad

Brand Core (ocean) para comunicación externa. Editorial Shell para la experiencia web inmersiva.

Capa 1 — Brand Core

Paleta ocean + sand
Space Grotesk + Inter
Mascota león marino
Posts, press, sponsors, marketing kit

Capa 2 — Editorial Shell

Fondo #06070d
Fraunces + JetBrains Mono
Wordmark mardelplata.dev
Home y secciones editoriales

Posicionamiento

Comunidad independiente y grassroots de Mar del Plata y la costa atlántica. Aliados estratégicos de ATICMA — no competidores. WhatsApp-first, bolsa de trabajo, Primer Trabajo OS y Red OSS.

BRAND.md·Marketing Kit·#MdPDev #MarDelPlata