Sistema de diseño — Cumbre English

Fundamentos

La interfaz debe sentirse serena, creíble y fácil de usar en un teléfono dentro de un aula ruidosa o en una laptop en casa. Estas cuatro reglas resuelven la mayoría de las decisiones de diseño.

Principios

Primero móvil, primero español

Diseñado desde 375 px hacia arriba. El español es el idioma base; el inglés se superpone con atributos data-en.

Claridad antes que adorno

Contraste real, jerarquía tipográfica clara y espacio en blanco generoso. Sin degradados decorativos ni iconos de relleno.

Componentes medidos

Un solo conjunto de tokens controla color, ritmo y elevación. Los mismos patrones sirven al sitio público y a ambos paneles.

Listo para producción

HTML semántico, foco visible, objetivos de 44 px y soporte de movimiento reducido. Sin framework ni paso de compilación.

Forma y profundidad

Radio

8 12 16 24 999

Los controles usan 12 px, las tarjetas 16 px y las hojas 24 px. Las píldoras se reservan para etiquetas y contadores.

Elevación

xs

sm

md

lg

Los bordes sostienen la mayor parte de la estructura. Las sombras aparecen solo en tarjetas elevadas, menús y diálogos.

Color

El navy ancla la marca, el azul señala acción y el teal señala progreso y aprendizaje en vivo. Los neutros hacen el trabajo de estructura para que los acentos conserven su significado.

Marca

Navy 900#0F2440

Navy 800#142D4E

Blue 600#2563EB

Teal 500#16B8A6

Teal 600#12988B

Green 600#16A34A

Neutros y superficies

Background#F8FAFC

Surface#FFFFFF

Surface alt#F1F5F9

Line#E2E8F0

Ink#172033

Muted#64748B

Semánticos

Success#16A34A

Warning#B45309

Danger#DC2626

Info#2563EB

Cada par de texto y fondo usado en la interfaz cumple o supera un contraste de 4.5:1. Los colores semánticos nunca transmiten significado por sí solos.

Tipografía

Plus Jakarta Sans da a los títulos una voz segura y humana. Inter mantiene estables los textos y las etiquetas de interfaz en tamaños pequeños. Ambas fuentes se alojan localmente en WOFF2.

Display · Plus Jakarta Sans · 700

Sube tu inglés, paso a paso.

Solo para el hero de la portada. Uno por página.

Heading 2 · Plus Jakarta Sans · 700

Clases que encajan con tu semana

Títulos de sección en páginas públicas y paneles.

Heading 3 · Plus Jakarta Sans · 700

Inglés Intermedio · B1

Títulos de tarjetas, diálogos y nombres de cursos.

Body · Inter · 400

Practicarás hablar desde la primera clase, con explicaciones breves de gramática y retroalimentación después de cada actividad. Las clases son en vivo y se graban.

16 px, altura de línea 1.6, máximo 68 caracteres por línea.

Small and label · Inter · 500 / 600

Próxima clase En vivo Martes · 18:00 · hora de Ecuador

Las etiquetas usan mayúscula inicial. Sin texto todo en mayúsculas salvo eyebrows cortos y cabeceras de tabla.

Espaciado y composición

El espaciado sigue una base de 4 px. El ritmo de sección proviene de un conjunto pequeño de pasos, lo que mantiene las páginas consistentes sin ruido visual.

Unidad base4 px

Separación de controles8 / 12 px

Relleno de tarjeta24 px

Relleno de sección64 / 96 px

Contenedor1200 px

Contenedor amplio1320 px

Alto del encabezado76 px

Ancho de barra lateral272 px

Escala

--sp-1 · 4 px

--sp-2 · 8 px

--sp-3 · 12 px

--sp-4 · 16 px

--sp-5 · 20 px

--sp-6 · 24 px

--sp-8 · 32 px

--sp-12 · 48 px

Componentes

Los componentes son HTML simple con clases compartidas. Los estados interactivos se apoyan en elementos nativos y atributos aria, para que las plantillas sigan siendo portables.

Botones

Alto 46 px · pequeño 38 px · grande 54 pxRadio 12 px · peso 600

Insignias y etiquetas

Nuevo En vivo B1 Borrador En curso Pendiente Atrasado

Online Híbrido A2 C1

Las insignias usan fondos tintados con texto de nivel 700

Progreso

62%6 de 8 unidades

74%Asistencia

Siempre acompaña la barra con un valor numérico

Avatares

CR MS LP SR

Se muestran iniciales hasta que Moodle devuelva una foto de perfil.

Avisos

Información

La grabación de tu clase estará disponible durante 30 días.

Éxito

Pago recibido. Tu cupo está confirmado.

Advertencia

Tu tarea vence en 24 horas.

Error

No pudimos conectar con Moodle. Inténtalo de nuevo.

Tarjeta y vista de curso

Estudiante practicando inglés con una libreta

B1

Inglés general

Inglés Intermedio

Gana fluidez para conversaciones, viajes y trabajo con un plan semanal estructurado y práctica guiada.

8 semanas Online en vivo

$189/ curso

Estado vacío y carga

Aún no hay tareas

Las nuevas tareas de tu docente aparecerán aquí en cuanto se publiquen en Moodle.

Diálogo y notificación

Los diálogos atrapan el foco y se cierran con Escape. Los avisos se anuncian con cortesía y nunca roban el foco.

Formularios

Los formularios siempre tienen etiqueta, nunca solo placeholder. Los errores se ubican junto al campo, describen qué ocurrió y conservan el valor ingresado.

Nombre completo Como aparece en tu documento de identidad.

Correo electrónico Escribe un correo completo, por ejemplo nombre@correo.com.

Nivel actual

¿Qué quieres lograr?

Horario preferido

Acepto los términos y la política de privacidad. Envíame recordatorios de clase por correo.

Valida al salir del campo, explica en línea

Conserva el valor que la persona escribió. Indica qué está mal y cómo corregirlo, en el mismo idioma de la interfaz.

Estados de campo

Consistentes en formularios públicos y paneles.

Predeterminado: borde de 1 px en line-strong.
Foco: anillo azul de 3 px, siempre visible con teclado.
Inválido: borde rojo más un icono y un mensaje.
Deshabilitado: contraste reducido, nunca se usa para validar.

Controles de 46 px de alto, radio de 12 px Anillo de foco de 3 px, azul 600 Los errores usan texto e icono, no solo color

Visualización de datos

Las tablas concentran información académica densa. En pantallas pequeñas se apilan en filas etiquetadas en lugar de desplazarse horizontalmente. Los valores monetarios siempre están en USD y las horas usan America/Guayaquil.

Estudiantes

Datos de muestra solo para revisión de interfaz.

4 registros

Tabla de estudiantes de muestra
Estudiante	Nivel	Curso	Progreso	Estado
CR Camila Rojas camila@ejemplo.com	B1	Inglés Intermedio	62%	En curso
MS Mateo Sánchez mateo@ejemplo.com	A2	Inglés Elemental	45%	En curso
LP Lucía Paredes lucia@ejemplo.com	B2	Inglés Intermedio Alto	88%	Finalizando
SR Sofía Ramírez sofia@ejemplo.com	A1	Inglés para Principiantes	96%	Completado

Lista de detalle

Se usa dentro de los diálogos de estudiante y pago.

Nivel: B1
Curso: Inglés Intermedio
Progreso: 62%
Próxima clase: Mar 27 · 18:00

Reglas para datos

Precios: USD, sin decimales salvo que el monto los requiera.
Fechas: día y mes en español, año solo cuando sea necesario.
Horas: formato de 24 horas en hora de Ecuador, con la zona indicada en el primer uso.
Progreso: siempre muestra un número junto a cualquier barra.

Patrones

Comportamientos recurrentes que mantienen coherentes el sitio público, el panel del estudiante y el panel docente.

Interfaz bilingüe

El español es el predeterminado. El inglés se aplica en el cliente sin recargar la página.

Prueba el interruptor

Esta oración cambia de idioma junto con el resto de la página.

Atributos admitidos: data-en, data-en-placeholder, data-en-label y data-title-en.

Integración con Moodle

Moodle sigue siendo el sistema de registro. El sitio de la academia es la puerta de entrada.

Externo

Inicio de sesión único con el mismo proveedor de identidad.
Los enlaces de curso abren el curso correspondiente en Moodle.
Notas, tareas y asistencia se leen desde Moodle, nunca se duplican.
Los pagos quedan fuera de Moodle y los concilia el docente.

Comportamiento responsive

Cuatro puntos de quiebre cubren teléfonos, tabletas, laptops y pantallas amplias.

Teléfono375 – 767

Tableta768 – 1023

Laptop1024 – 1439

Amplia1440 +

La navegación se convierte en hoja por debajo de 1024 px. Las tablas se apilan por debajo de 720 px.

Base de accesibilidad

Verificado en cada página, no añadido al final.

Enlace de salto, landmarks y un solo H1 por página.
Anillo de foco visible y objetivo mínimo de 44 px.
El estado nunca se comunica solo con color.
El movimiento respeta prefers-reduced-motion.

Implementación

El prototipo es HTML estático que se corresponde uno a uno con plantillas Askama. Las regiones compartidas se convierten en parciales; Rust se encarga de los datos, la autenticación y las llamadas a Moodle.

Mapa de plantillas sugerido

templates/
  layout.html
  index.html
  cursos.html
  panel.html
  docente.html
  sistema.html
  partials/
    header.html
    footer.html
    nav_sheet.html
    auth_dialog.html
    toast_region.html

assets/
  css/tokens.css
  css/base.css
  css/pages.css
  js/site.js
  js/dashboard.js
  img/ · fonts/

Traducción y datos

{% extends "layout.html" %}
{% block content %}
  <section class="page-hero">
    <h1>{{ t.courses_title }}</h1>
    <p>{{ t.courses_intro }}</p>
  </section>

  {% for course in courses %}
    {% include "partials/course_card.html" %}
  {% endfor %}
{% endblock %}

En producción, los atributos data-en se reemplazan por un objeto t renderizado desde Rust. La vista previa los conserva para revisar las traducciones en el navegador.

Alcance del prototipo

El contenido, los nombres, los precios y las estadísticas son marcadores para la revisión de diseño. En esta vista previa no hay backend, pagos ni conexión con Moodle; esos comportamientos se documentan arriba y se señalan en la interfaz.