html html html scriptLabel — Manual de Identidad & Brand Guidelines Oficial Tipografías Oficiales (Sistema Dual Exclusivo) TOP NAVBAR
COVER / HERO
Manual Oficial de Identidad Visual

El Sistema de Marca de scriptLabel

Este documento estipula las directrices matemáticas, reglas de contraste cromático, proporciones geométricas y normas tipográficas que rigen la identidad de scriptLabel. Su aplicación coherente garantiza la máxima pregnancia, solvencia tecnológica y distinción de marca en todos los puntos de contacto digitales y físicos.

Versión: 1.0 Oficial Modo Primario: Claro (Light) Variante Adaptativa: Oscuro (Dark) Retícula: Proporción Áurea & Grid Suizo
PAQUETE MAESTRO DE MARCA (DISEÑADORES, AGENTES & IA)
scriptLabel Isotipo
PAQUETE MAESTRO OFICIAL · 2026

Brand Kit para Diseñadores, Desarrolladores y Agentes de IA

Descarga en un solo archivo comprimido todo el ecosistema de marca: los vectores SVG oficiales del Logo (claros y oscuros), Favicon adaptativo, tokens de diseño estructurados en JSON, manual de identidad completo en Markdown y el System Prompt con el código SVG embebido para alimentar modelos de Inteligencia Artificial (ChatGPT, Claude, Gemini o agentes autónomos de código).

VISTA PREVIA VISUAL DEL LOGOTIPO & ACTIVOS
Logo Oficial (Modo Claro)
scriptLabel Logo Claro
Logo Oficial (Modo Oscuro)
scriptLabel Logo Oscuro
Favicon Oficial
Favicon Oficial
✓ SVGs Master (Logo Oficial Claro, Oscuro y Favicon) ✓ Tokens JSON para Agentes y Frontend ✓ Código SVG Embebido para IA ✓ Manual Completo en Markdown
01. ESENCIA Y VOZ
01 / FILOSOFÍA DE MARCA

Esencia, Dualidad & Posicionamiento

scriptLabel nace de la tensión fértil entre la ingeniería de software y el diseño editorial de alta gama.

EL CÓDIGO

script

Representa la ingeniería de software, el código artesanal, la arquitectura robusta, los scripts de automatización y el rigor técnico. Escrito en minúsculas y tipografía monospaced.

LA IDENTIDAD

Label

Representa la etiqueta de alta costura, la marca memorable, la experiencia de usuario y el diseño con intención. Escrito en mayúscula display con la 'L' en gradiente para marcar la transición.

EL ROL

Estudio Digital

Soluciones web que no sacrifican rendimiento por belleza ni estética por funcionalidad. Sitios web y aplicaciones que venden con identidad.

02. EL LOGO OFICIAL (CANONICAL TAG)
02 / LOGO OFICIAL

El Logo Oficial (Canonical Tag)

El Isotipo es ahora el Logotipo Oficial y único símbolo de identidad de scriptLabel. Es la insignia primaria, autosuficiente e indivisible que representa al estudio en todas las plataformas: barra de navegación web, pantallas de inicio, avatares, favicons y material gráfico.

Modo Claro (Primario)
★ Primario Oficial (Fondo Claro) scriptLabel Logo Oficial Claro
Logo Oficial para Fondos Claros (#FFFFFF) Etiqueta oscura (#090D16) · Corchetes blancos (#FFFFFF) · Barra diagonal con Gradiente Solar
⬇ Descargar SVG Primario
Modo Oscuro (Secundario)
Adaptativo (Fondo Oscuro) scriptLabel Logo Oficial Oscuro
Logo Oficial para Fondos Oscuros (#090D16) Etiqueta blanca (#FFFFFF) · Corchetes oscuros (#090D16) · Barra diagonal con Gradiente Solar
⬇ Descargar SVG Oscuro
03. RETÍCULA Y GEOMETRÍA MATEMÁTICA
03 / INGENIERÍA GRÁFICA

Retícula & Calibración Geométrica

El logo oficial está estructurado matemáticamente. Cada cota está calculada para que no existan desfases ópticos ni asimetrías accidentales.

SVG con Cotas y Blueprint del Logo Oficial Líneas de Guía de Retícula Técnica Cotas de Medida Techo Y=36 Piso Y=264 Ápex izquierdo X=80 Límite derecho X=460 H = 46px W = 72px (Proporción Canónica) R = 7 Logo Oficial Escalado Central
Anatomía Geométrica del Logo Oficial Estructurado sobre una retícula matemática de 72 × 46 unidades: la flecha izquierda converge en un vértice suave a 45°, los bordes derechos cierran con radio R=7, los corchetes stencil < > poseen un grosor calibrado de 2.8px a 45°, y la barra central se proyecta con una inclinación oblicua a 67.4° con el Gradiente Solar oficial.
04. SISTEMA CROMÁTICO
04 / PALETA DE COLOR

Colores Oficiales & Gradiente Solar

La identidad cromática se funda en el contraste de alta pureza entre el Blanco Puro, el Grafito Profundo y la tríada energética del Gradiente Solar.

Azul Eléctrico
COPIAR HEX

Azul Eléctrico

Base del Gradiente · Código & Lógica
HEX: #2563EB RGB: 37, 99, 235 CMYK: 84, 58, 0, 8
Rojo Neón
COPIAR HEX

Rojo Neón

Centro del Gradiente · Energía & Pasión
HEX: #F21F4B RGB: 242, 31, 75 CMYK: 0, 87, 69, 5
Amarillo Solar
COPIAR HEX

Amarillo Solar

Tope del Gradiente · Optimismo & Luz
HEX: #FBBF24 RGB: 251, 191, 36 CMYK: 0, 24, 86, 2
Grafito Profundo
COPIAR HEX

Grafito Profundo

Texto Primario · Isotipo Modo Claro
HEX: #090D16 RGB: 9, 13, 22 CMYK: 59, 41, 0, 91
Blanco Puro
COPIAR HEX

Blanco Nieve

Fondo Primario · Corchetes Modo Claro
HEX: #FFFFFF RGB: 255, 255, 255 CMYK: 0, 0, 0, 0
Slate Técnico
COPIAR HEX

Gris Neutro

Texto secundario y metadatos modo claro
HEX: #475569 RGB: 71, 85, 105 Oscuro: #94A3B8
FÓRMULA DEL GRADIENTE

Especificación Vectorial del Gradiente Solar

Ángulo: Vertical ascendente (y1="100%" y2="0%") · Parada 1: #2563EB (0% a 15%) · Parada 2: #F21F4B (50%) · Parada 3: #FBBF24 (95% a 100%).

05. SISTEMA TIPOGRÁFICO
05 / TIPOGRAFÍA CORPORATIVA

Sistema Tipográfico Dual (2 Familias Oficiales)

Dos familias tipográficas de calibre mundial con roles indivisibles. La marca utiliza exclusivamente este sistema dual en web, interfaz y comunicación.

IBM PLEX MONO
TIPOGRAFÍA DE CÓDIGO & PRECISIÓN

IBM Plex Mono

Uso: Código fuente, Terminal, Kickers, UI & Datos
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
</> { } [ ] ~ ! @ # $ % ^ & * _ +
Regular 400 · Medium 500 · SemiBold 600 · Bold 700
BRICOLAGE GROTESQUE
TIPOGRAFÍA DISPLAY, LECTURA & ALTA COSTURA

Bricolage Grotesque

Uso: Grandes Titulares H1/H2, Lectura Editorial & Botones UI
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Regular 400 · SemiBold 600 · Bold 700 · ExtraBold 800 · Black 900
06. ÁREA DE SEGURIDAD & TAMAÑOS MÍNIMOS
06 / NORMAS DE ESPACIO

Área de Reserva & Tamaños Mínimos

Garantiza que ningún elemento externo compita o asfixie al logo oficial.

Área de Reserva
ÁREA DE AISLAMIENTO = X Área de Seguridad
Distancia Mínima de Respiro (1X) El espacio libre perimetral debe ser al menos igual a 1X (25% de la altura total del logo).
Tamaños Mínimos
Mínimo Pantalla Pantalla e Interfaces: h = 24px mín.
Mínimo Favicon Favicon y Sistemas: 16 × 16 px mín.
Límites de Legibilidad En impresos físicos, el logo oficial nunca debe medir menos de 10 mm de ancho.
07. USOS PROHIBIDOS
07 / INTEGRIDAD VISUAL

Usos Prohibidos

Muestras visuales de acciones que vulneran la identidad de la marca y están expresamente prohibidas.

01. No deformar proporciones
✕
✕ PROHIBIDO

No deformar las proporciones

No comprimir, estirar ni alterar la relación de aspecto 72:46 original del logo.

02. No alterar el gradiente
✕
✕ PROHIBIDO

No alterar el gradiente

No invertir el orden (Azul abajo, Amarillo arriba) ni sustituir la tríada solar por otros tonos.

03. No pintar corchetes
✕
✕ PROHIBIDO

No colorear los corchetes

Los corchetes stencil deben calarse siempre con el fondo (blancos en claro, oscuros en oscuro).

04. No rotar la insignia
✕
✕ PROHIBIDO

No rotar la insignia

La orientación del logo es estrictamente horizontal con el bisel de 45° dirigido a la izquierda.

05. No usar sombras duras
✕
✕ PROHIBIDO

No aplicar sombras duras ni relieves

No aplicar biseles, sombras difusas pesadas, contornos artificiales ni 3D invasivo.

06. No usar sobre fondos sin contraste
✕
✕ PROHIBIDO

No usar sobre fondos sin contraste

No colocar el logo oscuro sobre fondos grises o texturas que asfixien y camuflen su silueta.

08. APLICACIONES REALES
08 / MOCKUPS & INTERFAZ

Aplicaciones en Ecosistema Digital

Comportamiento en puntos de contacto reales.

NAVBAR MOCKUP MODO CLARO (PRINCIPAL)
Barra de Navegación Oficial (Modo Claro Primario · 70px) https://scriptlabel.com/
Logo Oficial Primario scriptLabel en Navbar
Servicios ¿Cuál elegir? Cotizador Nosotros
Integración en Interfaz Web A 32px de altura, el logo oficial se integra con soltura dentro del header de 70px, reflejando el aspecto minimalista y limpio del sitio web oficial.
REDES SOCIALES & FAVICON
Avatar Redes
Avatar Social
Avatar de Redes (GitHub, X, LinkedIn) Uso del Logo Oficial en proporción centrada.
Favicon Pestaña (Adaptabilidad Real Sin Fondo)
Pestaña Modo Claro
Favicon Modo Claro Pestaña Clara · scriptLabel
Pestaña Modo Oscuro
Favicon Modo Oscuro Pestaña Oscura · scriptLabel
Favicon Adaptativo Sin Fondo (favicon.svg) Sin caja ni contenedor de fondo. Se mimetiza con la pestaña del navegador conservando la proporción 72:46 intacta.
09. CENTRO DE DESCARGAS DE ACTIVOS OFICIALES
09 / ASSET HUB

Centro de Descargas Oficial (Vectorial SVG)

Todos los archivos de producción listos para su uso en desarrollo, diseño UI y piezas gráficas.

00. Master Brand Kit (Full Width)
scriptLabel Logo
TODO-EN-UNO · VECTORES, TOKENS & MANUAL

Paquete Maestro de Marca Completo (.ZIP)

Incluye los vectores SVG oficiales del Logo (claro y oscuro), Favicon adaptativo, tokens de diseño en JSON (con SVG embebido), manual en Markdown y System Prompt para IA.

01. Logo Oficial Claro
Logo Oficial Claro

Logo Oficial Autónomo (Claro)

★ Insignia Principal Oficial de la Marca
⬇ Descargar SVG Primario
02. Logo Oficial Oscuro
Logo Oficial Oscuro

Logo Oficial Autónomo (Oscuro)

Variante adaptativa para fondos oscuros
⬇ Descargar SVG Oscuro
03. Favicon Adaptativo
Favicon

Favicon Oficial Adaptativo (Sin Fondo)

Sin caja de fondo · Proporción 72:46 · Detecta pestaña clara/oscura
⬇ Descargar favicon.svg
04. Master Studio
🛠

Master Studio Interactivo

Herramienta de calibración en vivo
Abrir Master Studio →
PIE INSTITUCIONAL
TOAST
✓ Copiado al portapapeles