Visual Identity

Logo · paleta · tipografía · iconografía · grid · ejemplos de uso · do/don't visuales.

Versión

1.0

Fecha

2026-05-26

Autor

Functional-Lead

Status

🟢 Activo

Tabla de contenidos

Índice

El logo de Marketplace SMC se construye sobre el wordmark Smart Connection con un punto teal (◆) como signo distintivo del holding.

⚠️ Espacio de respiro

Mínimo 1x (donde x = altura de la M de Smart) alrededor del logo. NUNCA pegarlo a borde · texto · imagen.

Click en cualquier swatch copia el hex al portapapeles · cada token mapea a una variable CSS oficial usada en todo el banco y la app.

Mobile-first: contraste WCAG AA mínimo en cuerpo de texto (4.5:1)
Dark surfaces (smc-ink-900 · smc-ink-700) NO usar como fondo de párrafos largos
Teal (smc-primary #00C1C1) es accent · NO fondo full · sobre fondo claro
Semánticos (success/warning/danger/info) solo para señalización · jamás decoración
Colores de bloque (com/biz/marca/legal/sec/gov) solo en marcadores del banco

Rol	Familia	Pesos	Cuándo
Display · Titulares	Inter	800 · 700	Cover · h1 · números KPI
Body	Inter	400 · 500 · 600	Párrafos · listas · tablas
Mono · Código	JetBrains Mono	400 · 600	Code blocks · slugs · IDs

Escala tipográfica (rem, mobile-first):

💡 Iconos custom

Si se necesita icono no disponible en Lucide · diseñar en SVG con stroke 1.75 · viewBox 24x24 · path optimizado · sin fills.

Sistema 8pt:

Componente	Estilo SMC
Hero	Gradient `#0F172A → #0F766E → #00C1C1` · radial overlay
Cards	Border-top 4px color bloque · radius 14px · hover lift -2px
Botones primary	Bg `#00C1C1` · texto blanco · radius 10px · hover dark
Botones secondary	Outline `#00C1C1` · texto teal · transparente
Badges	Pill radius · 11px caps · letter-spacing 1.5px
Boxes premise/anti	Borde 4px lateral · bg leve color · padding 24px

Do:

Don't:

Material	Composición
Email comercial	Header teal · CTA `#00C1C1` · footer con disclaimers
Pitch deck slide	Bg dark · titular Display L · 1 KPI grande accent
Doc legal (este banco)	Cover dark · cuerpo light · acento por bloque
Banner LinkedIn	Iso ◆ teal · wordmark blanco · gradient diagonal
Producto app	Sidebar dark · canvas light · CTA teal