MARCA

Marca

Misión, visión, valores, voz, tono, personalidad y arquetipos.

Misión

Apoyar el crecimiento y productividad de las empresas mediante diseño, innovación y desarrollo

tecnológico.

Visión

Sin contenido definido. pendiente

Valores

Foco — el punto donde converge toda la energía.
Innovación — buscar siempre una mejor forma de resolver.
Creatividad — la chispa que enciende ideas con sustancia.
Compromiso — respondemos por el resultado, no solo por la tarea.
Diseño centrado en las personas — la tecnología sirve a quien la usa.
Trabajo en equipo — el Spark Team se mueve junto.
Agilidad — avanzar rápido sin romper lo importante.
Integridad — hacemos lo correcto aunque no se vea.

Propuesta de valor

Diseñamos la chispa que mueve tu producto: diseño, innovación y desarrollo tecnológico para que

las empresas crezcan y sean más productivas.

Voz

✅ "Encendemos el potencial de tu empresa." · "Diseñamos la chispa que mueve tu producto." ·

verbos activos y metáforas de fuego ancladas a un valor concreto.

❌ "Somos los mejores…", superlativos vacíos, lenguaje genérico, autocomplacencia.

Tono

Escala de tres ejes:

Bromista ↔ Seria: neutral, ligeramente seria.
Casual ↔ Formal: neutral, ligeramente casual.
Moderna/Innovadora ↔ Madura/Clásica: moderna e innovadora.

Personalidad

Experta pero accesible — mentores, no manuales.
Enérgica y comprometida — con la chispa que impulsa.
Creativa con sustancia — ideas que resuelven, no solo decoran.

Arquetipos

Primario · Héroe — valiente, fuerte, comprometido.
Secundarios: Sabio, Cuidador, Creador.

Segmento

Empresas que buscan crecer con diseño, innovación y desarrollo tecnológico.

Justificación de color

Sistema anclado en el fuego y la chispa: naranja Spotmind (orange.700) como color de marca para

CTAs y highlights; navy profundo para texto y superficies inversas; púrpura como acento creativo.

Neutrales fríos para superficies y estructura.

Do / Don't

✅ Variables semánticas en Figma; CSS variables en código (sin Tailwind).
❌ Hex literales, vectorizar el logo a mano, mezclar Mona Sans con otra display que no sea Inter.

Estado y versión

Fase: Escalar
Marca: v1 · escalas Core completas + semánticos oficiales.
Herencia: marca madre (extends: null); aporta primitivos a quien herede.

COLOR

Color

Muestras por rol. Cada una se copia como SVG (tarjeta completa), como variable CSS o como hex.

Semánticos

border

border.brand #FC642D --sm-semantic-color-border-brand

border.focus #FC642D --sm-semantic-color-border-focus

border.subtle #DDDAE8 --sm-semantic-color-border-subtle

brand

brand.primary #27253F --sm-semantic-color-brand-primary

brand.secondary #FC642D --sm-semantic-color-brand-secondary

brand.tertiary #7566EE --sm-semantic-color-brand-tertiary

surface

surface.accent #7566EE --sm-semantic-color-surface-accent

surface.brand #FC642D --sm-semantic-color-surface-brand

surface.brand-subtle #FFE5D5 --sm-semantic-color-surface-brand-subtle

surface.inverse #172554 --sm-semantic-color-surface-inverse

surface.primary #FFFFFF --sm-semantic-color-surface-primary

surface.secondary #F4F3FF --sm-semantic-color-surface-secondary

surface.tertiary #EEEDF7 --sm-semantic-color-surface-tertiary

text

text.accent #4832A1 --sm-semantic-color-text-accent

text.brand #FC642D --sm-semantic-color-text-brand

text.brand-on-inverse #FD7444 --sm-semantic-color-text-brand-on-inverse

text.inverse #FFFFFF --sm-semantic-color-text-inverse

text.inverse-gray #DDDAE8 --sm-semantic-color-text-inverse-gray

text.primary #0F1A3E --sm-semantic-color-text-primary

text.secondary #1E40AF --sm-semantic-color-text-secondary

text.tertiary #6E7191 --sm-semantic-color-text-tertiary

Escalas · primitivos

navy --sm-primitive-color-navy-*

neutral --sm-primitive-color-neutral-*

orange --sm-primitive-color-orange-*

purple --sm-primitive-color-purple-*

TOKENS

Tokens

Relación completa: token JSON ↔ variable CSS ↔ valor ↔ spec de uso.

Token (JSON)	Variable CSS	Valor	Tipo	Spec · uso
`component.button.primary.background`	`--sm-component-button-primary-background`	`#FC642D`	color	Capa 3 — tokens de componentes.
`component.button.primary.border`	`--sm-component-button-primary-border`	`#FC642D`	color	Capa 3 — tokens de componentes.
`component.button.primary.text`	`--sm-component-button-primary-text`	`#FFFFFF`	color	Capa 3 — tokens de componentes.
`component.card.background`	`--sm-component-card-background`	`#FFFFFF`	color	Capa 3 — tokens de componentes.
`component.card.border`	`--sm-component-card-border`	`#DDDAE8`	color	Capa 3 — tokens de componentes.
`component.card.padding`	`--sm-component-card-padding`	`24px`	dimension	Capa 3 — tokens de componentes.
`primitive.color.navy.0`	`--sm-primitive-color-navy-0`	`#EFF6FF`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.100`	`--sm-primitive-color-navy-100`	`#BFDBFE`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.1000`	`--sm-primitive-color-navy-1000`	`#070D20`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.200`	`--sm-primitive-color-navy-200`	`#93C5FD`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.300`	`--sm-primitive-color-navy-300`	`#60A5FA`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.400`	`--sm-primitive-color-navy-400`	`#3B82F6`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.50`	`--sm-primitive-color-navy-50`	`#DBEAFE`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.500`	`--sm-primitive-color-navy-500`	`#2563EB`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.600`	`--sm-primitive-color-navy-600`	`#1D4ED8`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.700`	`--sm-primitive-color-navy-700`	`#1E40AF`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.800`	`--sm-primitive-color-navy-800`	`#1E3A8A`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.900`	`--sm-primitive-color-navy-900`	`#172554`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.navy.950`	`--sm-primitive-color-navy-950`	`#0F1A3E`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.neutral.0`	`--sm-primitive-color-neutral-0`	`#FFFFFF`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.neutral.100`	`--sm-primitive-color-neutral-100`	`#EEEDF7`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.neutral.200`	`--sm-primitive-color-neutral-200`	`#DDDAE8`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.neutral.50`	`--sm-primitive-color-neutral-50`	`#F4F3FF`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.neutral.600`	`--sm-primitive-color-neutral-600`	`#6E7191`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.neutral.900`	`--sm-primitive-color-neutral-900`	`#27253F`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.0`	`--sm-primitive-color-orange-0`	`#FFF4ED`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.100`	`--sm-primitive-color-orange-100`	`#FFC7A9`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.1000`	`--sm-primitive-color-orange-1000`	`#430907`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.200`	`--sm-primitive-color-orange-200`	`#FEA073`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.300`	`--sm-primitive-color-orange-300`	`#FD8A58`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.400`	`--sm-primitive-color-orange-400`	`#FD7444`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.50`	`--sm-primitive-color-orange-50`	`#FFE5D5`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.500`	`--sm-primitive-color-orange-500`	`#FD6E38`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.600`	`--sm-primitive-color-orange-600`	`#FC6830`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.700`	`--sm-primitive-color-orange-700`	`#FC642D`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.800`	`--sm-primitive-color-orange-800`	`#F8550F`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.900`	`--sm-primitive-color-orange-900`	`#EB2F0B`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.orange.950`	`--sm-primitive-color-orange-950`	`#9B1B11`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.0`	`--sm-primitive-color-purple-0`	`#EEF0FF`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.100`	`--sm-primitive-color-purple-100`	`#C8CCFD`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.1000`	`--sm-primitive-color-purple-1000`	`#0F172A`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.200`	`--sm-primitive-color-purple-200`	`#A7AAFA`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.300`	`--sm-primitive-color-purple-300`	`#8783F6`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.400`	`--sm-primitive-color-purple-400`	`#7566EE`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.50`	`--sm-primitive-color-purple-50`	`#E1E3FE`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.500`	`--sm-primitive-color-purple-500`	`#6649E2`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.600`	`--sm-primitive-color-purple-600`	`#593BC7`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.700`	`--sm-primitive-color-purple-700`	`#4832A1`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.800`	`--sm-primitive-color-purple-800`	`#3E307F`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.900`	`--sm-primitive-color-purple-900`	`#251C4A`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.color.purple.950`	`--sm-primitive-color-purple-950`	`#1A1235`	color	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.family.body`	`--sm-primitive-font-family-body`	`Inter, system-ui, sans-serif`	fontFamily	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.family.display`	`--sm-primitive-font-family-display`	`Mona Sans, Inter, system-ui, sans-serif`	fontFamily	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.family.mono`	`--sm-primitive-font-family-mono`	`JetBrains Mono, ui-monospace, monospace`	fontFamily	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.weight.black`	`--sm-primitive-font-weight-black`	`900`	fontWeight	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.weight.bold`	`--sm-primitive-font-weight-bold`	`700`	fontWeight	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.weight.extrabold`	`--sm-primitive-font-weight-extrabold`	`800`	fontWeight	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.weight.light`	`--sm-primitive-font-weight-light`	`300`	fontWeight	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.weight.medium`	`--sm-primitive-font-weight-medium`	`500`	fontWeight	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.weight.regular`	`--sm-primitive-font-weight-regular`	`400`	fontWeight	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.font.weight.semibold`	`--sm-primitive-font-weight-semibold`	`600`	fontWeight	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.space.6`	`--sm-primitive-space-6`	`24px`	dimension	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`primitive.space.8`	`--sm-primitive-space-8`	`32px`	dimension	Capa 1 — Core. Escalas cerradas. Nunca directo en UI.
`semantic.color.border.brand`	`--sm-semantic-color-border-brand`	`#FC642D`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.border.focus`	`--sm-semantic-color-border-focus`	`#FC642D`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.border.subtle`	`--sm-semantic-color-border-subtle`	`#DDDAE8`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.brand.primary`	`--sm-semantic-color-brand-primary`	`#27253F`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.brand.secondary`	`--sm-semantic-color-brand-secondary`	`#FC642D`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.brand.tertiary`	`--sm-semantic-color-brand-tertiary`	`#7566EE`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.surface.accent`	`--sm-semantic-color-surface-accent`	`#7566EE`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.surface.brand`	`--sm-semantic-color-surface-brand`	`#FC642D`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.surface.brand-subtle`	`--sm-semantic-color-surface-brand-subtle`	`#FFE5D5`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.surface.inverse`	`--sm-semantic-color-surface-inverse`	`#172554`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.surface.primary`	`--sm-semantic-color-surface-primary`	`#FFFFFF`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.surface.secondary`	`--sm-semantic-color-surface-secondary`	`#F4F3FF`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.surface.tertiary`	`--sm-semantic-color-surface-tertiary`	`#EEEDF7`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.accent`	`--sm-semantic-color-text-accent`	`#4832A1`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.brand`	`--sm-semantic-color-text-brand`	`#FC642D`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.brand-on-inverse`	`--sm-semantic-color-text-brand-on-inverse`	`#FD7444`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.inverse`	`--sm-semantic-color-text-inverse`	`#FFFFFF`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.inverse-gray`	`--sm-semantic-color-text-inverse-gray`	`#DDDAE8`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.primary`	`--sm-semantic-color-text-primary`	`#0F1A3E`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.secondary`	`--sm-semantic-color-text-secondary`	`#1E40AF`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.color.text.tertiary`	`--sm-semantic-color-text-tertiary`	`#6E7191`	color	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.font.body`	`--sm-semantic-font-body`	`Inter, system-ui, sans-serif`	fontFamily	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.
`semantic.font.display`	`--sm-semantic-font-display`	`Mona Sans, Inter, system-ui, sans-serif`	fontFamily	Capa 2 — intención de uso. Usar SIEMPRE estos en vez de primitivos.

TIPOGRAFÍA

Tipografía

Aa Gg 0123 · El club entero

primitive.font.family.bodyInter, system-ui, sans-serif

Aa Gg 0123 · El club entero

primitive.font.family.displayMona Sans, Inter, system-ui, sans-serif

Aa Gg 0123 · El club entero

primitive.font.family.monoJetBrains Mono, ui-monospace, monospace

Aa Gg 0123 · El club entero

semantic.font.bodyInter, system-ui, sans-serif

Aa Gg 0123 · El club entero

semantic.font.displayMona Sans, Inter, system-ui, sans-serif

COMPONENTES

Componentes

Tokens de componente (capa 3). La referencia de uso vive en la sección Marca.

Componente · token	Valor	Spec · uso
`button.primary.background`	`#FC642D`	Capa 3 — tokens de componentes.
`button.primary.border`	`#FC642D`	Capa 3 — tokens de componentes.
`button.primary.text`	`#FFFFFF`	Capa 3 — tokens de componentes.
`card.background`	`#FFFFFF`	Capa 3 — tokens de componentes.
`card.border`	`#DDDAE8`	Capa 3 — tokens de componentes.
`card.padding`	`24px`	Capa 3 — tokens de componentes.

LOGOTIPOS

Logotipos

Estructura de variantes de logo. Lo que falta queda marcado como pendiente.

Sin tagline

Sin variantes sin tagline. pendiente

Con tagline

Sin variantes con tagline. pendiente

Convención: spotmind-<tipo>[-tagline]-<tema>.svg · tipos: landscape, stacked, wordmark, logomark, squaremark, roundmark, monogram · temas: Color, Light, Dark, Light gray, Dark gray.

DOCUMENTOS

Documentos

Brochure, tema de presentación y PDFs de venta/marketing.

Aún no hay documentos (brochure, tema de presentación, PDFs de venta/marketing). pendiente

DESCARGAS

Kit de marca

↓ assets.zip tokens.json tokens.css figma-variables.json

CHANGELOG

Changelog

Changelog de marca

Versión de marca en semver (v0 → v3). Cada cambio de tokens con impacto visual sube versión.

[v0] — inicial

Marca creada desde _template.