Sistema de Diseño
Educa Tu Cerebro
v1.0 — Identidad Visual para Editorial de Neurociencia Aplicada al Bienestar
01 — Foundations
Marca e Identidad
Educa Tu Cerebro es una editorial de neurociencia aplicada al bienestar. Su identidad visual transmite sabiduría, crecimiento y confianza a través de elementos orgánicos y una paleta que conecta naturaleza con conocimiento.
1. Logo Principal — Light
2. Logo Principal — Dark
02 — Marca
Variantes del Sistema de Marca
El sistema de marca incluye versiones optimizadas para cada contexto de uso: logo completo, isotipo, icono para app/favicon y versión simplificada monocromo.
03 — Foundations
Paleta de Color
Cuatro colores primarios definen la identidad cromática. Cada uno transmite un significado intencional alineado con los valores de la marca.
Jade Intenso
Profundidad · Confianza · Conocimiento
#010B0C--color-jade-900
Verde Esmeralda
Crecimiento · Equilibrio · Bienestar
#013225--color-emerald-700
Dorado Suave
Sabiduría · Prestigio · Calidez
#AA5C12--color-gold-500
Marfil / Crema
Claridad · Calma · Pureza
#EDE5D2--color-ivory-200
04 — Foundations
Uso de Color
El sistema soporta dos modos cromáticos: Light y Dark. Cada modo asigna roles semánticos específicos a los colores de la paleta.
Light Mode
Dark Mode
05 — Foundations
Tipografía
Dos familias tipográficas conforman el sistema: una serif de carácter editorial para titulares y logotipo, y una sans-serif geométrica para cuerpo de texto e interfaz.
Display — Cormorant Garamond
Educa Tu Cerebro
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 & . , : ; — " " ' '
Uso: Logotipo, titulares H1–H5, citas editoriales, nombres de sección.
Body — Montserrat
Bienestar · Ciencia · Propósito
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 & . , : ; — " " ' '
Uso: Párrafos, subtítulos, cuerpo de texto, botones, etiquetas, navegación, UI.
06 — Foundations
Escala Tipográfica
Escala modular con tokens semánticos para garantizar consistencia y jerarquía visual en toda la plataforma.
72px Display
60px Hero
48px Heading 1
36px Heading 2
30px Heading 3
24px Heading 4
20px Heading 5
18px Body Large
16px Body
14px Caption / Label
12px Overline / Eyebrow
07 — Foundations
Espaciado
Escala de espaciado basada en una grilla de 8px. Todos los márgenes, paddings y gaps del sistema se construyen con estos tokens.
08 — Foundations
Sombras
Sistema de elevación con cinco niveles para crear jerarquía de profundidad consistente.
09 — Foundations
Bordes y Radii
Escala de border-radius para controlar la suavidad de las esquinas en el sistema.
10 — Marca
Reglas de Uso
Normas obligatorias para preservar la integridad de la marca en todas sus aplicaciones.
No recrear ni redibujar los logos. Utilizar únicamente los archivos oficiales SVG/PNG suministrados.
No generar variantes nuevas de identidad ni reinterpretar la marca fuera del sistema definido.
No modificar proporciones, colores institucionales ni sustituir assets oficiales por placeholders.
No utilizar valores hardcoded. Todo debe derivarse de design tokens del sistema.
No utilizar imágenes genéricas de internet, logos inventados ni iconografía ajena al sistema de marca.
No utilizar tipografías distintas a Cormorant Garamond y Montserrat en aplicaciones oficiales.
11 — Componentes
Botones
Componentes de acción con variantes de estilo y tamaño construidos exclusivamente con tokens del sistema.
Variantes
Tamaños
12 — Referencia
Referencia de Tokens
Tabla completa de design tokens semánticos utilizados en el sistema. Estos tokens son la única fuente autorizada de valores visuales.
| Token | Valor | Uso |
|---|---|---|
| --color-bg-primary | #F7F3EC | Fondo de página (light) |
| --color-bg-inverse | #010B0C | Fondo de página (dark), sidebar |
| --color-bg-brand | #013225 | Secciones de marca, CTAs destacados |
| --color-text-primary | #010B0C | Texto principal (light) |
| --color-text-secondary | #4D585E | Texto de apoyo, descripciones |
| --color-accent | #D6A24C | Detalles, líneas decorativas, eyebrows |
| --font-display | Cormorant Garamond | Logotipo, titulares H1–H5 |
| --font-body | Montserrat | Párrafos, UI, botones, labels |
| --radius-xl | 16px | Cards, paneles, contenedores |
| --shadow-md | 0 4px 12px rgba(…) | Elevación media, hovers de card |
| --space-8 | 32px | Padding interno de cards |
| --duration-normal | 250ms | Transiciones estándar |
13 — Recursos
Assets Oficiales
Archivos definitivos de identidad visual. Todos los componentes deben construirse utilizando exclusivamente estos assets.
14 — Recursos
Estructura de Archivos
Organización preparada para extracción futura hacia un sistema modular. Cada bloque del código fuente corresponde a un módulo independiente.
educa-tu-cerebro-ds/ ├── tokens/ │ ├── colors.css │ ├── typography.css │ ├── spacing.css │ ├── shadows.css │ ├── borders.css │ └── transitions.css ├── components/ │ ├── button.css │ ├── card.css │ ├── swatch.css │ ├── sidebar.css │ └── type-specimen.css ├── layouts/ │ ├── ds-layout.css │ ├── hero.css │ ├── showcase.css │ └── section.css ├── utilities/ │ ├── reset.css │ └── base.css ├── assets/ │ ├── logo/ │ │ ├── logo-primary.svg │ │ ├── logo-dark.svg │ │ ├── isotipo.svg │ │ └── logo-mono.svg │ ├── icons/ │ │ └── favicon.svg │ └── images/ │ └── (recursos gráficos) └── index.html