Volver al Curso A1
Guía de Diseño·Curso A1 · Focus English

Estructura Tipográfica

Sistema tipográfico completo del Curso de Inglés A1. Define la jerarquía visual, el peso y el color de cada elemento textual para garantizar consistencia y legibilidad óptima.

𝐍Familia: Nunito
Escala: 9 niveles
WPesos: 400–900
Paleta: 9 tokens
01

Familia Tipográfica

Fuente única con múltiples pesos para toda la plataforma

Principal · Display & Headings

Nunito

Black 900

Bold 700

SemiBold 600

font-family: 'Nunito', system-ui, sans-serif

Cuerpo & UI

Medium 500 — Explicaciones y contexto narrativo largo

Regular 400 — Instrucciones de ejercicio y enunciados

Small Regular — Metadatos, notas, duraciones

Caracteres A–Z · a–z · 0–9

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 .,!?;:'"()-

02

Escala Tipográfica

Jerarquía completa de 9 niveles con ejemplos reales del curso

Display / Hero

60–72px900<h1>

Inglés A1

Hero del curso, pantalla de bienvenida

Heading 1

36–48px900<h1>

Unidad 1: Saludos y Despedidas

Título de página, nombre de unidad principal

Heading 2

30px800<h2>

Lección 2: El Verbo To Be

Título de sección dentro de unidad, nombre de lección

Heading 3

24px700<h3>

Pronunciación y Entonación

Subtítulo de ejercicio, nombre de bloque temático

Heading 4

20px700<h4>

Completa la frase con la palabra correcta

Pregunta de ejercicio, instrucción activa

Body Large

18px500<p>

El verbo «to be» es fundamental en inglés. Se usa para describir identidades, estados y características.

Explicaciones gramaticales, contexto narrativo, introducción de unidad

Body Regular

16px400<p>

Selecciona la opción correcta para completar la oración. Fíjate en el sujeto de la frase.

Instrucciones de ejercicio, enunciados de preguntas, pistas

Body Small

14px400<p>

Esta lección incluye 8 ejercicios y tiene una duración estimada de 15 minutos.

Notas al pie, información de duración, descripciones de ejercicios

Caption / Meta

12px700<span>
NIVEL A1 · UNIDAD 1 · 15 MIN

Etiquetas de categoría, indicadores de nivel, metadatos

03

Paleta Cromática del Texto

Tokens de color para cada capa jerárquica

Coral Principal

#FF6B6B

CTAs, títulos principales, énfasis crítico

Coral Claro

#FF9B7A

Estados hover, degradados secundarios

Melocotón

#FFA06B

Secundario, íconos, acentos de sección

Crema Cálida

#FEF9F5

Fondo general, superficies en reposo

Pizarra Oscura

#0F172A

Títulos H1, texto de máximo peso

Pizarra Media

#334155

Párrafos, cuerpo de texto principal

Pizarra Suave

#64748B

Subtítulos, metadatos, etiquetas

Verde Éxito

#34D399

Feedback correcto, logros, racha

Ámbar Alerta

#FBBF24

Advertencias, pistas, tiempo restante

04

Patrones por Tipo de Contenido

Composición tipográfica real para cada elemento del curso

Título de Módulo

Módulo 1 · 10 Unidades

Fundamentos del Inglés

Saludos, identidad y entorno inmediato

Encabezado de Unidad

A1Unidad 1 de 22

Saludos y Despedidas

Hello, Hi, Bye, See you · Verbo «To Be» (positivo)

Instrucción de Ejercicio

3

Completa la frase con el verbo correcto

Elige entre: am · is · are

She ___ a teacher.

Feedback de Respuesta

¡Correcto! +10 XP

«She is a teacher.» El pronombre «she» siempre usa «is».

Casi. Inténtalo de nuevo

Recuerda: «She», «He» e «It» siempre van con «is».

Logro / Insignia

🏆

Logro Desbloqueado

Primera Conversación

Completaste tu primer diálogo en inglés

Explicación Gramatical

Nota Gramatical

El Verbo «To Be» en Presente

I

am

You

are

He/She/It

is

05

Espaciado y Ritmo Vertical

Reglas de espacio entre elementos tipográficos

Tabla de Espaciado

Display → H1mb-6 (24px)Entre hero y primer encabezado
H1 → Párrafomb-4 (16px)Título de página a descripción
H2 → Párrafomb-3 (12px)Encabezado de sección a contenido
H3 → Párrafomb-2 (8px)Sub-sección a texto de instrucción
Párrafo → Párrafomb-4 (16px)Entre bloques de texto seguidos
Párrafo → Labelmt-1 (4px)Texto a metadato adyacente
Sección → Secciónpy-12 (48px)Bloques de contenido distintos

Interlineado (line-height)

leading-none1.0Display / Hero de gran tamaño
leading-tight1.25H1, H2 — Títulos principales
leading-snug1.375H3, H4 — Subtítulos y preguntas
leading-normal1.5Etiquetas, labels de interfaz
leading-relaxed1.625Cuerpo de texto, párrafos de explicación

Kerning & Tracking

tracking-tighter−0.05em · Display Hero
tracking-tight−0.025em · H1, H2
tracking-normal0em · Cuerpo de texto
tracking-wide+0.025em · Botones, chips
tracking-widest+0.1em · Labels UPPERCASE
06

Vista Integrada — Pantalla de Unidad

Todos los niveles tipográficos en contexto real

🗣️

Módulo 1 · Unidad 1 de 22

Saludos y Despedidas

Aprende los saludos más comunes del inglés y el verbo «to be» en presente positivo.

Nota Gramatical

El Verbo «To Be»

El verbo «to be» es el más importante del inglés. Equivale a «ser» o «estar» en español y cambia según el sujeto de la oración.

Ejercicio 3: Completa la oración

Selecciona la forma correcta del verbo «to be» según el sujeto.

I ___ a student.

amisare

She ___ my teacher.

amisare

¡Perfecto! +10 XP · Racha de 3

«I am» y «She is» son las formas correctas. Los pronombres en singular tienen formas únicas del verbo «to be».

Ejercicio 3 de 8 · Lección 1 · ~12 min restantes

A1Gramática