NovaMind — Sistema de Diseño Visual v1.0

1

Tipografía

5xl NovaMind AI 3rem / 48px
weight 800

4xl Potencia tu equipo 2.25rem / 36px
weight 800

3xl Automatización inteligente 1.875rem / 30px
weight 700

2xl Genera contenido de calidad 1.5rem / 24px
weight 700

xl Proyectos y colaboración en tiempo real 1.25rem / 20px
weight 600

lg La plataforma de IA para equipos de marketing modernos 1.125rem / 18px
weight 400

base NovaMind transforma la manera en que tu equipo crea, distribuye y mide contenido digital mediante inteligencia artificial de última generación. 1rem / 16px
weight 400

sm Texto secundario, labels y descripciones de formulario. Legible a tamaños pequeños con alta densidad de información. 0.875rem / 14px
weight 400

xs Captions, metadatos, timestamps y etiquetas de estado en interfaces compactas. 0.75rem / 12px
weight 500

✓ Combinación recomendada

La IA que trabaja mientras tú decides

Combina la autoridad de una serif geométrica para titulares con la comodidad de una sans-serif de sistema para cuerpo de texto. Contraste alto, lectura fluida.

Heading: Georgia / Serif Body: System UI

Alternativa clean

Más rápido. Más inteligente.

Sistema tipográfico mono-familiar usando pesos variables. Más limpio y consistente. Ideal para apps de alta densidad de datos o dashboards.

Single: Inter / System UI Weights: 400, 600, 800

2

Sistema de Color

Paleta de Marca — Indigo

50

100

200

300

400

500

600

700

800

900

Acento — Esmeralda

Neutros Cálidos

Primary

#4f46e5

AA 5.2:1

Success

#059669

AA 4.8:1

Warning

#d97706

AA 3.1:1

Error

#dc2626

AAA 7.3:1

Combinación	Ratio	AA Normal	AA Grande	AAA	Preview
Indigo-600 / Blanco	5.2:1	✓ Pasa	✓ Pasa	✗ Falla	Texto
Gray-900 / Blanco	18.1:1	✓ Pasa	✓ Pasa	✓ Pasa	Texto
Gray-600 / Blanco	5.9:1	✓ Pasa	✓ Pasa	✗ Falla	Texto
Emerald-600 / Blanco	4.8:1	✓ Pasa	✓ Pasa	✗ Falla	Texto
Gray-50 / Gray-900 (dark)	16.8:1	✓ Pasa	✓ Pasa	✓ Pasa	Dark

3

Sistema de Espaciado — Grid de 8pt

--space-1

0.25rem 4px

--space-2

0.5rem 8px

--space-3

0.75rem 12px

--space-4

1rem 16px

--space-6

1.5rem 24px

--space-8

2rem 32px

--space-10

2.5rem 40px

--space-12

3rem 48px

--space-16

4rem 64px

Guía de uso por contexto

Contexto	Token	Valor
Gap icon/texto	--space-2	8px
Padding botón (vertical)	--space-2 / --space-3	8–12px
Padding botón (horizontal)	--space-4 / --space-5	16–20px
Padding card	--space-4 / --space-6	16–24px
Gap entre campos de formulario	--space-4 / --space-6	16–24px
Gap entre secciones	--space-8 / --space-12	32–48px
Padding de sección (vertical)	--space-12 / --space-16	48–64px

4

Iconografía

xs · 12px
--icon-xs

sm · 16px
--icon-sm

md · 20px
--icon-md

lg · 24px
--icon-lg

xl · 32px
--icon-xl

brain

zap

bar-chart

users

settings

bell

shield

sparkles

5

Componentes de UI

Buttons

Badges & Tags

✦ Pro ● Activo ⚠ Pendiente ✗ Error v1.0.0

Marketing Contenido IA SEO Analytics Nuevo

Form Fields

Nombre del proyecto Será visible para todos los miembros del equipo.

Email Introduce un email válido.

Alerts

✓

Proyecto creado

Tu proyecto "Campaña verano" está listo para el equipo.

⚠

Límite cercano

Has usado 980 de 1.000 créditos de IA este mes.

✗

Fallo en la exportación

No fue posible generar el PDF. Inténtalo de nuevo.

Resumen del mes ● En vivo

2.847

Textos generados

↑ +23%

94%

Tasa aprobación

↑ +8%

4.2h

Tiempo ahorrado

↑ +1.1h

Créditos usados 78%

Proyectos activos 45%

Equipo activo

AL

Ana López

ana@novamind.es

Admin

CR

Carlos Ruiz

carlos@novamind.es

Editor

MG

Marta García

marta@novamind.es

Viewer

6

Dark Mode

⚡ NovaMind

Dashboard Proyectos Equipo Ajustes

Rendimiento semanal

Tu equipo ha generado 847 piezas de contenido esta semana, un 31% más que la semana anterior.

847

Contenidos esta semana

94%

Tasa de aprobación

7

Referencia de Tokens CSS

Color Tokens

--color-brand-500#6366f1

--color-brand-600#4f46e5

--color-accent-500#10b981

--color-success#059669

--color-warning#d97706

--color-error#dc2626

--bg-primary#ffffff / #1c1917

--text-primary#1c1917 / #fafaf9

--border-color#e7e5e4 / #44403c

Spacing & Size Tokens

--space-10.25rem (4px)

--space-20.5rem (8px)

--space-41rem (16px)

--space-61.5rem (24px)

--space-82rem (32px)

--space-164rem (64px)

--radius-md8px

--radius-xl16px

--icon-md20px