Guía de marca
Directrices para mantener una marca coherente, segura y refinada en todos los materiales, desde las presentaciones hasta el sitio web.
01 Nuestra identidad de marca Filosofía y principios
Esta guía está dirigida a todos los miembros de ISJ. Proporciona directrices claras sobre cómo utilizar nuestro logotipo, colores, tipografía y mensajes para mantener una marca coherente y profesional en todos los materiales. Tanto si estás creando una presentación, un boletín informativo, un cartel para un evento escolar o contenido para las redes sociales, esta guía garantiza que todo lo que producimos refleje la identidad de ISJ de forma clara y unificada.
Nuestra marca refleja quiénes somos. El uso coherente refuerza nuestra marca.
Filosofía de diseño
La identidad visual de ISJ se inspira en la tradición del lujo discreto: cálido, seguro y sobrio. Nuestros materiales deben transmitir la sensación de una sala de lectura bien iluminada, no la de un folleto. Comunicamos una autoridad tranquila mediante un espaciado generoso, tonos cálidos, una tipografía cuidada y la ausencia de ruido visual.
Principios fundamentales
Calidez por encima de frialdad. Sin grises fríos ni blancos estériles. Todos los tonos neutros son cálidos: crema, piedra, arena. Nuestra paleta crea una sensación acogedora y accesible que refleja la comunidad escolar.
Moderación en la decoración. Cada elemento ocupa su lugar. No añadimos adornos por el simple hecho de hacerlo. Los diseños limpios, los espacios en blanco con un propósito y la confianza tranquila son más poderosos que el desorden visual.
Confianza por encima de persuasión. ISJ no necesita gritar. Nuestra calidad habla por sí misma a través de la forma en que nos presentamos: mesurada, reflexiva y segura.
Autenticidad por encima de las imágenes de archivo. Los materiales de ISJ ganan interés visual gracias a las fotografías de la vida escolar y las obras de arte creadas por los alumnos, lo que permite mantener una presentación auténtica y atractiva en todos los medios.
02 Voz y tono Cómo sonamos
Si nuestra marca fuera una persona, así es como sonaría. Nuestra voz es auténtica, reflexiva y segura. No debemos sonar pretenciosos. Queremos hablar con claridad, sencillez y ver el mundo a través de los ojos de nuestro público, no de los nuestros.
Idioma y terminología
La coherencia en el lenguaje ayuda a reforzar nuestra identidad de marca y garantiza la claridad en todas las comunicaciones.
| Regla | Detalle | Ejemplo |
|---|---|---|
| inglés británico | Todos los materiales escritos utilizan la ortografía del inglés británico. | color, comportamiento, programa |
| Alumnos, no estudiantes | Cuando se refiera a niños, utilice «alumnos». | «Nuestros alumnos prosperan...» |
| Poner mayúscula a los sujetos | Escribe siempre con mayúscula los nombres de las materias académicas. | Matemáticas, Ciencias, Inglés |
| Nombre de la escuela | Primero el nombre completo, luego ISJ. | «La Escuela Independiente de Yakarta (ISJ) ...» |
| El Fondo Escolar | Incluye siempre el artículo «The». | «Parte de The Schools Trust» |
03 Por qué ISJ Pilares de la marca
«ISJ se basa en las mejores tradiciones de los colegios independientes británicos. Estas son el compromiso con el desarrollo del carácter, la excelencia académica y la educación integral. Hacen hincapié en la integridad moral, el liderazgo y la autodisciplina, en equilibrio con las artes, los deportes y las actividades extracurriculares. Estas tradiciones cultivan individuos completos y seguros de sí mismos, preparados para el éxito en un mundo globalizado».
ISJ es una escuela alegre y enriquecedora donde todos los niños se sienten conocidos, valorados y apoyados. Nuestra comunidad es cálida, inclusiva y se basa en la confianza y el cuidado, lo que crea un sentido de pertenencia tanto para los alumnos como para las familias. Creemos que la felicidad no solo es una medida del éxito, sino también la base para lograrlo: los niños que se sienten seguros y confiados son libres para explorar, asumir riesgos y alcanzar su máximo potencial.
Estamos comprometidos con la excelencia académica basada en la atención individualizada que recibe cada alumno. El director y los profesores conocen personalmente a cada niño, comprenden sus puntos fuertes, sus intereses y sus aspiraciones. Nuestro dedicado equipo docente imparte planes de estudios reconocidos internacionalmente que fomentan la curiosidad, el rigor y el pensamiento independiente, lo que garantiza que cada alumno alcance su máximo potencial y desarrolle un amor por el aprendizaje que le acompañará toda la vida.
En ISJ, el aprendizaje va mucho más allá del aula. Nuestro enfoque holístico equilibra el estudio académico con un rico programa de deportes, música, artes y aprendizaje al aire libre. A través de estas experiencias, los alumnos desarrollan su creatividad, confianza y resiliencia. Nuestro objetivo es inspirar la curiosidad por el mundo y fomentar el carácter, el trabajo en equipo y las habilidades de liderazgo que preparan a los niños para la vida.
La educación del carácter es fundamental en todo lo que hacemos. Nuestros valores y expectativas en torno al respeto, la amabilidad y el buen comportamiento están integrados en la vida escolar diaria. Se anima a los alumnos a actuar con integridad, mostrar empatía y asumir la responsabilidad por sí mismos y por los demás. Estos hábitos conforman la brújula moral que les guiará a lo largo de su educación y más allá.
Situado en el frondoso y familiar barrio de Pondok Indah, ISJ ofrece una ubicación segura y conveniente en el sur de Yakarta. El moderno campus cuenta con espacios abiertos y verdes que crean un ambiente tranquilo e inspirador para el aprendizaje y el juego, un entorno poco común en el corazón de la ciudad donde los niños pueden desarrollarse tanto académica como personalmente.
La educación de ISJ abre las puertas al mundo. Con un plan de estudios reconocido internacionalmente y una comunidad diversa que representa a más de cuarenta nacionalidades, los alumnos adquieren una perspectiva global y la confianza necesaria para prosperar en cualquier lugar. Nuestro enfoque les dota de los conocimientos, las habilidades y el carácter necesarios para progresar en las principales escuelas y universidades de todo el mundo, y para contribuir de manera significativa en un mundo interconectado.
04 La paleta de colores Colores de la marca y del sitio web
Nuestra paleta de colores garantiza una identidad de marca limpia, profesional y coherente. El azul ISJ es nuestro color principal, que representa confianza, estabilidad y excelencia académica. El rojo debe utilizarse con mucha moderación. El dorado puede aparecer con más frecuencia, pero con moderación.
Colores principales de la marca
| Color | HEX | CMYK |
|---|---|---|
| ISJ Azul | #182B55 | 71,76 %, 49,41 %, 0 %, 66,67 % |
| Azul claro | #B0D0E8 | 28 %, 10 %, 0 %, 9 % |
| ISJ Oro | #E79819 | 0 %, 34,2 %, 89,18 %, 9,41 % |
| ISJ Gris | #C0C0C0 | 0 %, 0 %, 0 %, 24,71 % |
| ISJ Rojo | #E30513 | 0 %, 97,8 %, 91,63 %, 10,98 % |
Colores de texto preferidos
| Uso | Color |
|---|---|
| Cuerpo y encabezados | #333333 |
| Bordes y acentos secundarios | #666666 |
Específico para la web: sistema de colores ampliado
Tonos de fondo del sitio web
En el sitio web, sustituimos los fondos grises estándar por tonos cálidos y acogedores. Las secciones rotan entre ellos para crear un ritmo visual.
Rotación del fondo
| Antecedentes | Cuando | ~Frecuencia |
|---|---|---|
| Crema | Contenido predeterminado | 40% |
| Blanco | Alternando, junto a la foto | 20% |
| Tinte en polvo | Información clave, estadísticas, «de un vistazo» | 15% |
| Marina | CTA, citas, alto impacto | 10% |
| Oro | Declaraciones de énfasis | 5% |
Guía de uso de la Armada
| Contexto | Valor | Notas |
|---|---|---|
| Antecedentes completos | #182B55 | Rico a gran escala |
| Acentos de tarjeta (3 píxeles) | #182B55 | Bordes superior o izquierdo |
| Azul marino como texto del cuerpo | #1d3461 | Más claro: evita que la lectura resulte demasiado oscura. |
| Títulos grandes | #182B55 | Solo 2rem+ |
05 Nuestros logotipos Maestro, deportes y casas
El logotipo maestro
La representación visual principal de nuestra marca. Sirve como piedra angular de todas las comunicaciones de la marca en todas las plataformas. El logotipo siempre debe utilizarse en su forma original, manteniendo el espacio libre, las proporciones y la integridad del color.
Dos versiones principales: azul marino sobre blanco (fondos claros, encabezado del sitio web) y blanco o dorado sobre azul marino (fondos oscuros, pie de página).
La zona de exclusión
Deja espacio al logotipo. La zona segura es la altura de la marca, en los cuatro lados del logotipo. No invadas este espacio. Permite que el logotipo destaque en la página.
Logotipo deportivo — Leones
La insignia con el escudo «LIONS» se utiliza en contextos deportivos y de equipos. León rampante dorado sobre un escudo azul marino. La marca denominativa utiliza la tipografía Regan Slab Ultra.
| Elemento | CMYK | RGB |
|---|---|---|
| Oro | C = 3,65 M = 40,6 Y = 99,96 K = 0,27 | 245, 149, 2 |
| Marina | C=95,88 M=72,06 Y=40,51 K=45,47 | 11, 24, 50 |
Sistema de casas
Cuatro casas, cada una con su propio escudo, mascota y paleta de colores. Todas las marcas denominativas de las casas utilizan la fuente Celtic Garamond the 2nd.
06 Tipografía Fuentes y escala tipográfica
ISJ utiliza un sistema de dos fuentes: una serif para los encabezados y una sans-serif limpia para el cuerpo del texto. Esta combinación equilibra la autoridad con la legibilidad.
| Función | Fuente | Notas |
|---|---|---|
| Encabezados | Libre Baskerville | Serif. Todos los niveles de encabezado y texto de visualización. |
| Texto del cuerpo | Roboto | Sans-serif. Párrafos, leyendas, etiquetas. |
| Varios | Almarai | Elementos de navegación e interfaz de usuario. |
Escala de tipos
Específico para la web: Reglas tipográficas
familia tipográfica cuando se requiere la serifa para los encabezados en código personalizado.| Nivel | Tamaño (escritorio) | Peso | Uso |
|---|---|---|---|
| Pantalla | 2,8-3,5 rem | 400 | Declaraciones de héroes |
| H1 | 2–2,4 rem | 400 | Títulos de las páginas |
| H2 | 1,6-1,8 rem | 400 | Títulos de sección |
| Cejas | 0,72 rem | 700 | Etiquetas en mayúsculas · Espaciado de 1,8 píxeles |
Patrón de cejas
07 Imágenes y fotografía Directrices
Las imágenes son probablemente la herramienta de comunicación más impactante que utilizamos. Las mejores imágenes muestran a alumnos felices y comprometidos en momentos genuinos de curiosidad, alegría o concentración. Destacan momentos especiales e interesantes que cuentan una historia y evocan emociones.
Las fotos impactantes también son claras y ordenadas, y llaman la atención sobre lo que más importa a los alumnos y sus experiencias. Cuando se hacen bien, estas imágenes crean un reflejo auténtico y convincente de la vida escolar, causando una impresión duradera en los padres y las familias potenciales.
| Hazlo | No |
|---|---|
| Captura momentos auténticos y espontáneos. | Posiciones artificiales en grupo en el escenario |
| Céntrate en la participación: curiosidad, concentración, alegría. | Utiliza imágenes genéricas de archivo. |
| Mantenga los fondos limpios y despejados. | Incluya carteles que distraigan la atención o desorden. |
| Mostrar la diversidad de nuestra comunidad. | Fotografíe solo un tipo de actividad. |
| Destacar los espacios verdes y las instalaciones modernas. | Uso excesivo de inyecciones solo en interiores |
| Se prefiere la luz natural. | Imágenes muy filtradas o sobresaturadas |
08 Sistema de diseño web Componentes y código
Biblioteca de componentes, reglas de espaciado y patrones de código para el sitio web de ISJ en Squarespace.
Diseño
| Contexto | Ancho máximo |
|---|---|
| Artículo / prosa | 700 píxeles |
| Contenido amplio (tablas) | 900 píxeles |
| Ancho completo (pie de página, héroe) | 1200 píxeles |
| Contexto | Escritorio | Móvil |
|---|---|---|
| Relleno de sección | 60 píxeles 40 píxeles | 40 píxeles 20 píxeles |
| Relleno de tarjetas | 24-28 píxeles | 18-20 píxeles |
| Bloques CTA | 60 píxeles 40 píxeles | 48 píxeles 24 píxeles |
Componentes
Cuadrícula de confianza
Fila de estadísticas
Tarjetas y paneles
Sección y botones de CTA
Citas y notas
Navegación (rutas de navegación y barra lateral)
Tablas
Pie de página
Estados de desplazamiento
| Elemento | Comportamiento |
|---|---|
| Enlaces de texto | Color → #E79819 |
| Tarjetas | translateY(-2px) + sombra |
| Bordes de las tarjetas | → #B0D0E8 |
| Botones dorados | → #d08a15 |
| Filas de la tabla | rgba(176,208,232,0.06) |
Puntos de ruptura
| px | Cambios |
|---|---|
900 | 4 colores → 2 colores |
768 | 3 columnas → 1 columna; barras laterales apiladas |
640 | El pie de página se colapsa |
480 | Botones de ancho completo |
Errores comunes
| No | Hazlo en su lugar |
|---|---|
| Establecer el color crema como predeterminado en todas las secciones. | Girar fondos |
Uso #182B55 para texto pequeño | Uso #1d3461 o #333 |
| Ignorar azul claro | Úselo para bordes, paneles informativos. |
| Anular las fuentes de Squarespace | Heredar; declarar serif solo para los encabezados. |
| Incrustar imágenes en código | Divida en bloques; utilice bloques de imagen. |
| Esquinas redondeadas en todo | Solo botones (50 píxeles) y llamadas a la acción (12 píxeles) |
| Escribir «estudiantes». | Escribir «alumnos». |
Referencia rápida
